:root {
    --bs-dark-rgb: 23, 00, 93;
    --bs-body-font-size: 0.8rem;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

#chatbot-widget elevenlabs-convai {
    max-height: calc(100% - 80px) !important;
    margin-top: auto;
} 

.fs-7 {
    font-size: 0.9rem !important;
}

.bg-moved {
    background-color: #7894fa;
}

.bg-nilled {
    background-color: #4c86a6;
}

.bg-grey {
    background-color: #4b4d4f;
}

.panel-heading {
    user-select: text;
}
    .panel-heading::selection {
        color: #333 !important;
        background: #E0DCCC !important;
    }
    .panel-heading::-moz-selection {
        color: #333 !important;
        background: #E0DCCC !important;
    }
    .panel-heading::-webkit-selection {
        color: #333 !important;
        background: #E0DCCC !important;
    }

/* Virtual Keyboard Style Override */
.ui-keyboard {
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: var(--bs-light-bg-subtle);
    *border-width: 1px;
    border-style: solid;
    border-color: var(--bs-dark-rgb);
    border-radius: 5px;
    height: fit-content;
    margin-top: auto;
    padding: 10px;
}

.hidden {
    display: none !important;
}

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

.security-alert-icon {
    color: red;
    font-size: 2rem;
    margin: auto;
}

.bold {
    font-weight: bold;
}

.v-center-text {
    vertical-align: middle;
}

/* Responsive Navbar */
.nav-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media (min-width: 601px) {
    .nav-row {
        display: none;
    }
}

/* Bootstrap overrides */
.btn-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}
@media (min-width: 601px) {
    .btn-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.btn-row h5 {
    margin: 0;
}

.rounded-pill {
    display: flex;
    flex-direction: row;
    width: fit-content;
    align-items: center;
    vertical-align: middle;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 10px;
}
.rounded-pill p, .rounded-pill h1, .rounded-pill h2, .rounded-pill h3, .rounded-pill h4, .rounded-pill h5, .rounded-pill h6 {
    margin: 0;
}

.header-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-btn-row p {
    margin: 0;
    vertical-align: middle;
}

.mr-2 {
    margin-right: 5px;
}

/* Home Page Accordions */
.custom-accordion-primary {
    border: 1px solid #3441D5;
    border-radius: 8px;
    margin-bottom: 20px;
}
.custom-accordion-primary summary::-webkit-details-marker {
    display: none;
}
.custom-accordion-primary summary i {
    transition: transform 0.1s ease;
}
.custom-accordion-primary[open] summary i {
    transform: rotate(90deg);
}
.custom-accordion-primary summary {
    background-color: #3441D5;
    color: #fff;
    border-radius: 6px;
    padding: 20px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
}
details.custom-accordion-primary[open] summary {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
details.custom-accordion-primary .custom-accordion-content {
    padding: 20px;
}

/*Login Screen*/
.login-page form {
    width: 400px;
    margin: auto;
}
.login-container {
    border: 1px solid #c3c3c3;
    border-radius: 8px;
    margin-top: 100px;
    padding: 20px;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px
}
.login-container h4, .login-container h6 {
    text-align: center;
}
.login-container img {
    width: 250px;
    height: auto;
    margin: auto;
}
.validation-summary-errors {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/*Store Select*/
.h5 a {
    margin-left: 10px;
}

/*Choose Files Button*/
input::file-selector-button {
    cursor: pointer;
    background-color: #0d6efd;
    margin-top: 20px;
    color: white;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}
    input::file-selector-button:hover {
        filter: brightness(90%);
    }

.navbar-dark,
.navbar[data-bs-theme=dark] {
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.75);
}

li.nav-action {
    color: #f54a4a;
    border: 2px solid #f54a4a;
    background-color: #ffffff;
}
.dropdown-submenu.bg-danger {
    --bs-dropdown-link-hover-bg: #00ff00;
    --bs-dropdown-link-active-bg: #000000;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
    .dropdown-submenu .dropdown-menu-end {
        top: 0;
        left: inherit;
        right: 100%;
        margin-top: -1px;
    }

span.nav-item-wrapper.d-md-none{
    white-space: normal;
}
span.nav-item-wrapper.d-md-inline {
    white-space: nowrap;
}

.nav-report-sd:hover {
    background-color: #ffb8b8 !important;
}
.nav-report:hover {
    background-color: #8fbcff !important;
}
.nav-report-sd:active, .nav-report:active {
    color: black !important;
}

.validation-summary-valid.alert.alert-danger {
    display: none;
}

    section > h5 {
        margin: 0px 7px;

    }
section form.h5 a {
    text-decoration: none;
}
    section form.h5 b.store-select {
        font-size: small;
        margin-left: 5px;
    }

section > div {
    margin: 0px 5px;

}

section div.panel-heading {
    background-color: #3441D5;
    border-color: #dddddd;
    color: #ffffff;
    font-weight: 700;
    font-size: larger;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 10px 15px;
}

.big-checkbox {
    width: 30px;
    height: 30px;
}


div.dx-scrollable-content table.dx-datagrid-table .dx-row > td {
    padding: 0px;
}

div.dx-htmleditor-toolbar-wrapper {
    background-color: var(--bs-gray-400);
    opacity: unset;
}
div.dx-htmleditor-content {
    background-color: white;
    opacity: unset;
}

.fontgrey {
    color: #97979c !important;
}
.fontblack {
    color: black !important;
}
.fontred {
    color: #dc3545 !important;
}
.fontgreen {
    color: #198754 !important;
}
.fontyellow {
    color: #ffc107 !important;
}
.fontbrown {
    color: #ebb434 !important;
}
.fontblue {
    color: #86b7fe !important;
}
.fontpink {
    color: #f59aea !important;
}
.fontstar {
    color: #c2c2c2 !important;
}
.fontsearch, .fontimage {
    color: #0b5bdb !important;
}

.adjustmentInput:disabled {
    cursor: not-allowed;
}

/* Opening Hours Table
-------------------------------------------------- */
.openingHoursTable {
    width: 100%;
}
    .openingHoursTable thead th:not(:first-child) {
        text-align: center;
        position: sticky;
        top: 0px;
        z-index: 1;
    }
        .openingHoursTable thead th {
            background-color: #fcfcfd;
        }
    .openingHoursTable td {
        border: none;
        cursor: pointer;
    }
        .openingHoursTable td div {
            display: flex;
            gap: 5px;
            flex-direction: column;
            text-align: center;
            height: 240px;
            flex: 1;
        }
            .openingHoursTable td div h5 {
            margin: 0;
            }
            .openingHoursTable td div input {
                cursor: not-allowed;
            }
.openingHoursTable th {
    min-width: 110px;
}
/* Custom Tooltip for Opening Hours
-------------------------------------------------- */
.tooltip-info {
    position: relative;
}
    .tooltip-info .tooltip-text {
        visibility: hidden;
        width: 120px;
        background-color: #fcfcfd;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;

        position: absolute;
        top: 100%;
        z-index: 10;
        opacity: 0;
        transition: opacity 0s linear;
    }

    .tooltip-info:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
        transition-delay: 0.7s;
    }
/* Custom DevExtreme styling
-------------------------------------------------- */
.dx-left {
    display: grid;
    grid-template-columns: auto 2fr;
}
@media (min-width: 1100px) {
    .grid-fxl {
        height: calc(100vh - 290px);
        max-width: calc(100vw - 20px);
    }

    .grid-fh {
        height: calc(100vh - 260px);
        max-width: calc(100vw - 20px);
    }

    .grid-mfh {
        height: calc(100vh - 370px);
        max-width: calc(100vw - 20px);
    }

    .grid-mh {
        height: calc(100vh - 380px);
        max-width: calc(100vw - 20px);
    }

    .grid-sh {
        height: calc(100vh - 580px);
        max-width: calc(100vw - 20px);
    }
    .grid-fh-picklist {
        height: calc(100vh - 310px);
        max-width: calc(100vw - 20px);
    }
}

.dx-toast-info {
    background-color: #0d6efd !important;
}

.task-check-col {
    padding-top: 4px;
}

.task-check-h-col {
    font-size: 1.5rem;
}
/* Opening Admin Tables
-------------------------------------------------- */
.till-info-table td {
    color: #495057;
    padding-right: 20px;
    padding-bottom: 10px;
}


.info-table td {
    color: #495057;
}
.info-table tr td {
    vertical-align: middle;
}
.info-table tr td p {
    margin: 0;
}
.info-table tr .double-col {
    width: 30%;
}
.info-table .quad-row td {
    width: fit-content;
}
    .info-table .quad-row td:last-child {
        width: 54%;
    }

.closing-readings-container {
    display: flex;
    flex-direction: row;
    gap: 10px
}

.closing-readings-container .alert {
    flex: 1;
}

.closedown-table th {
    margin: 0 10px;
}

.header-badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: 13px;
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

.flex-input-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: start;
}

.flex-input-item {
    display: flex;
    flex: 1 0 200px; /* Adjust as needed */
    margin: 10px;
    align-self: stretch;
    flex-direction: column;
}


/* ClosedownInfo Tamper Bags Datagrid
-------------------------------------------------- */
#TamperBagTable .dx-data-row > td {
    padding-top: 10px !important;
}

#TamperPreviewImg {
    width: 100%;
}

#TamperBagTable .dx-datagrid .dx-header-row > td {
    font-weight: bold;
}


/* user Manager - View Accounts
-------------------------------------------------- */
.locked-out-row td {
    font-weight: bold;
    color: red;
}

/* user Manager - Edit Account
-------------------------------------------------- */
.additional-stores-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.additional-store-item {
    background-color: rgba(255, 167, 34, 1);
    width: fit-content;
    border-radius: 10px;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}
    .additional-store-item i {
        cursor: pointer;
        font-size: 1.3em;
    }
    .additional-store-item #AdditionalStoreName {
        cursor: default;
    }

.dx-field-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-bottom: 5px;
}

.dx-double-input {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.dx-double-input div {
    flex: 1;
}

/* Open/Close Maint - Comments
-------------------------------------------------- */
.note-item div {
    margin-bottom: 2px !important;
}
.note-item p {
    margin-left: 5px;
}
.dx-toolbar-label .dx-toolbar-item-content {
    overflow: visible;
    width: 500px;
}
.dx-tab-widget .dx-row > td {
    padding: 0 !important;
}
/* Stop image expanding off page
-------------------------------------------------- */
.fit-photo {
    max-width: 100%;
}
.dx-template-wrapper img {
    max-width: 100%;
}

.accordion-item {
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: #3441D5;
    margin-bottom: 20px;
}
.accordion-button {
    color: white !important;
    background-color: #3441D5 !important;
}
    .accordion-button::after {
        filter: brightness(0) invert(1);
    }
/* Tasks
-------------------------------------------------- */
.even-spaced-checks {
    display: flex;
    justify-content: space-evenly;
}
.even-spaced-checks-r {
    display: flex;
    justify-content: flex-end;
    gap: 60px;
}
.dx-popup-input-custom .dx-field-label {
    text-align: left;
    padding-left: 5px;
}
.dx-popup-input-custom .dx-checkbox-text {
    font-weight: bold;
}
.sticky-controls {
    width: 100%;
    position: sticky;
    bottom: -30px;
    background-color: white;
    padding-bottom: 20px;
    padding-top: 10px;
}
.stores-checklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.error-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}
.error-banner .close-banner {
    cursor: pointer;
    font-size: 18px;
}
#TasksDetails .dx-link {
    background-color: #0d6efd;
    color: white;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
}
    #TasksDetails .dx-link:hover {
        filter: brightness(90%);
    }

/* Response Screen Forms
-------------------------------------------------- */
.QuestionInputs .dx-collection {
    display: flex;
    flex-direction: row;
    gap: 40px
}

/* Picklists
-------------------------------------------------- */
.picklist-search button {
    width: fit-content;
    margin-right: 10px;
}

.picklist-search .dx-texteditor-input, .picklist-search .dx-texteditor.dx-editor-outlined {
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
}

.custom-dx-barcode-input {
    display: flex;
    width: fit-content;
}

.custom-dx-barcode-input .barcode-icon {
    background-color: rgb(238, 238, 238);
    padding-right: 40px;
    margin-right: -30px;
    border-radius: 6px;
    border: 1px solid #bab8b8;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center
}

.custom-dx-barcode-input .barcode-icon:active {
    background-color: #bab8b8;
}

.custom-dx-barcode-input .barcode-icon i {
    font-size: 1.3rem;
    margin-left: 10px;
    margin-top: 2px;
}

.custom-dx-barcode-input input {
    border-left-color: rgb(238, 238, 238) !important;
    border-right-color: #bab8b8 !important;
    border-bottom-color: #bab8b8 !important;
    border-top-color: #bab8b8 !important;
    border: 1px solid;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
       
.custom-dx-barcode-input input.vri-bc-scan {
    color: #212529;
    font-size: 1rem;
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
}

.custom-dx-barcode-input input:focus {
    border-left-color: rgb(238, 238, 238);
    border-right-color: #bab8b8;
    border-bottom-color: #bab8b8;
    border-top-color: #bab8b8;
    outline: none;
    box-shadow: none;
}

.custom-dx-barcode-input .ui-keyboard-input {
    -moz-box-shadow: 0 0 0px;
    -webkit-box-shadow: 0 0 0px;
    box-shadow: 0 0 px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.custom-dx-barcode-input .ui-keyboard-input:focus {
    border-left-color: rgb(238, 238, 238);
    border-right-color: #bab8b8;
    border-bottom-color: #bab8b8;
    border-top-color: #bab8b8;
}

.custom-dx-barcode-input .dx-texteditor.dx-editor-outlined {
    border: none;
}

.custom-dx-barcode-input .dx-texteditor-container, .custom-dx-barcode-input .dx-texteditor-input-container, .custom-dx-barcode-input .dx-textbox {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.type-badge {
    height: 38px;
    min-width: 38px;
    width: 100%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.type-badge i {
    color: #fff;
    font-size: 1.1rem;
}

.pick-types-legend {
    user-select: none;
}

.pick-types-legend .legend-content button {
    font-size: 0.7rem;
    margin-right: 15px;
    border: none;
}
.pick-types-legend summary {
    font-weight: 600;
    margin-bottom: 10px;
}
.pick-types-legend .legend-content {
    display: flex;
}
.pick-types-legend .legend-content .rounded-pill {
    padding: 5px 10px;
}

.spaced-btn {
    justify-content: flex-start !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-text-cell, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    vertical-align: middle;
}

td.dx-text-cell {
    width: fit-content;
    font-weight: 500;
}

td.dx-text-cell * p {
    margin: 0;
}

p.dx-text-cell-single {
    vertical-align: middle;
    font-weight: 500;
    text-align: center;
    margin: 0;
}

.track-link {
    color: #0d6efd;
    cursor: pointer;
    margin: auto;
}

.track-link i {
    margin-right: 0 !important;
}

.track-link:hover {
    text-decoration: underline;
}

.header-success {
    background-color: rgb(163, 207, 187);
    color: black;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.header-danger {
    background-color: #f1aeb5;
    color: black;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.picklist-table {
    font-weight: 600;
    font-size: 0.9rem;
}

.picklist-table i {
    margin-right: 10px;
}

.picklist-table td {
    padding-right:150px;
}

.dx-del-col-btn {
    height: 37px;
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: #dc3545;
    color: white;
    font-size: 1.2rem;
}

    .dx-del-col-btn:hover {
        background-color: #bb2d3b;
    }

.border-light {
    border: 1px solid !important;
    border-color: #cfd1d4 !important;
    border-radius: 6px;
    padding: 10px 0;
    margin: 0px;
}

.f-row {
    display: flex;
    gap: 5px;
    align-items: center;
}
.f-row p {
    margin: 0;
}

#ReceivableItemsTable .dx-state-disabled {
    display: none;
}

.pl-info-header {
    display: flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
}

.new-old-pl-btns {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.pl-nav-btns {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

    .pl-nav-btns .forward-back-btns {
        gap: 5px;
    }

@media (max-width: 1300px) {
    .pl-nav-btns {
        justify-content: flex-end;
        flex-direction: column-reverse;
    }
        .pl-nav-btns .forward-back-btns {
            margin-left: auto;
        }
}

@media (max-width: 1300px) {
    .receivable-items-table .spaced-btn button, .receivable-items-table .spaced-btn a {
        font-size: 0.8rem;
    }
}

.quickscan-badge {
    height: 35px;
    width: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .quickscan-badge i {
        color: #fff;
        font-size: 1.1rem;
    }

.quickscan-input .quickscan-input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.quickscan-input .quickscan-input-row .scanner-input {
    width: 80%;
    display: flex;
    align-items: center;
}

    .quickscan-input .quickscan-input-row .scanner-input input {
        width: 90%;
        height: 35px;
        padding: 1px 10px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: none !important;
        outline: none;
        border: 2px solid #787878;
    }
        .quickscan-input .quickscan-input-row .scanner-input input:focus {
            outline: none;
        }
        .quickscan-input .quickscan-input-row .scanner-input input:active {
            outline: none;
        }

    .quickscan-input .quickscan-input-row .scanner-input span {
        display: inline-block;
        height: 35px;
        width: 35px;
        background-color: rgb(238, 238, 238);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 2px solid #787878;
        border-right: none !important;
    }
    .quickscan-input .quickscan-input-row .scanner-input i {
        margin-top: 5px;
        font-size: 1.2rem;
        vertical-align: central;
    }

.quickscan-input .quickscan-error {
    background-color: #e36a62;
    color: black;
    width: fit-content;
    padding: 5px 10px;
    margin: auto;
    border-radius: 5px;
}

.quickscan-message p {
    margin: 0px;
    padding-left: 10px;
    vertical-align: central;
}

.quickscan-content {
    margin-top: 10px;
}

.btn-grey {
    background-color: #787878;
    color: white;
}

.specific-picklists-header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
    .specific-picklists-header .product-btns {
        display: flex;
        gap: 10px;
    }

/*    ViewStoreProducts */
.view-products-search {
    display: flex;
    width: 100%;
}
.view-products-search .dx-textbox {
    width: 60%;
}
@media (min-width: 900px) {
    .view-products-search .dx-textbox {
        width: 550px;
    }
}
.view-products-search button {
    margin-left: 10px;
    width: 130px;
}
.view-products-search-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
@media (min-width: 900px) {
    .view-products-search-header {
        flex-direction: row;
    }
}
.clr-cache-pl-btn {
    min-width: 250px;
    width: 250px;
    margin-right: 10px;
}

/*bank Details*/
.sort-code-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.f-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* Capture Screen Edit
-------------------------------------------------- */
.capture-check-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.capture-check-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 200px;
}
.capture-check-row h5 {
    margin-right: 20px;
}
.capture-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.capture-input-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
}
.capture-input-row h5 {
    margin-right: 20px;
}
.capture-groups-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.capture-groups-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
}
.capture-groups-pill {
    padding: 2px 10px;
}
.capture-alert {
    margin-top: 10px;
    padding: 1rem;
    border-radius: 0.375rem;
    background-color: white;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 98.5% !important;
}

.selected-groups {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 15px;
}
.selected-group-pill {
    background-color: #0d6efd;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 1rem;
    color: white;
}
.selected-group-pill i {
    margin-left: 20px;
    cursor: pointer;
}

/* Double Post Warning
-------------------------------------------------- */
.double-post-warning {
    margin: auto;
    max-width: 1000px;
    text-align: center;
    border: 1px solid #c3c3c3;
    border-radius: 8px;
    margin-top: 100px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}
.double-post-warning h1 i {
    color: red;
}
.double-post-warning .double-post-btns {
    display: flex;
    justify-content: center;
    gap: 60px;
}


/* Barcode Scanner
-------------------------------------------------- */
barcode-scanner {
    display: block;
}

.barcode-scanner-container {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.barcode-scanner-container .scanner-region {
    max-height: 45vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.barcode-scanner-container .scanner-region video {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 40vh;
}

.barcode-scanner-container .scanner-region canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 40vh;
}

.barcode-scanner-container .scanner-accordion {
    background-color: rgb(23, 00, 93);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.8s ease-in-out;
    color: white;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.barcode-scanner-container .scanner-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
}

.barcode-scanner-container .scanner-accordion summary::-webkit-details-marker {
    display: none;
}

.barcode-scanner-container details[open] summary {
    margin-bottom: 20px;
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.barcode-scanner-container .scanner-accordion summary i {
    transition: transform 0.3s ease;
}

.barcode-scanner-container .scanner-accordion summary .rotate {
    transform: rotate(90deg);
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-button {
    width: 100%;
    background-color: white;
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-button:focus,
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-button:hover,
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-button:active {
    color: black !important;
}
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-button i {
    margin-right: 10px;
}
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-back-button i {
    margin-right: 10px;
}
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-back-button {
    background-color: #dc3545;
    width: 100%;
    /*color: white !important;*/
}
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-back-button:focus,
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-back-button:hover,
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .barcode-scanner-controls .scanner-back-button:active {
    background-color: #b02a37;
    color: black !important;
}

.barcode-scanner-container .scanner-accordion-content .code {
    background-color: rgb(23, 00, 93);
    background-color: #0a58ca;
    color: white;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barcode-scanner-container .scanner-accordion-content .code i {
    margin-right: 10px;
}

.barcode-scanner-container .scanner-accordion-content .code p {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: bold;
}

.barcode-scanner-container .barcode-scanner-info {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.barcode-scanner-container .barcode-scanner-info .result-grid {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: auto;
}

.barcode-scanner-container .barcode-scanner-info .dx-datagrid .dx-row > td {
    height: 50px;
    padding: 8px 10px !important;
}

.barcode-scanner-container .debug-log {
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    padding: 10px;
}

.barcode-scanner-container .barcode-scanner-info .debug-box {
    background-color: #f18993;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 10px
}

.barcode-scanner-container .barcode-scanner-info .debug-box p {
    margin-bottom: 0px;
}
.barcode-scanner-container .log {
    text-align: left;
}
.barcode-scanner-container .log-warning {
    color: #cc9a04;
}
.barcode-scanner-container .log-error {
    color: #dc3545;
}
.barcode-scanner-container .log-success {
    color: #198754;
}

.barcode-scanner-container .scan-result-badge {
    height: 25px;
    width: 25px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barcode-scanner-container .scan-result-badge i {
    color: #fff;
    font-size: 1rem;
}

.barcode-scanner-container .result-row {
    display: flex;
    align-items: center;
    min-height: 25px;
}
/* Scanner Splash Screen */
.barcode-scanner-container .scanner-accordion .scanner-accordion-content .scanner-splash .scanning-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    max-height: 40vh;
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content .scanner-splash img {
    width: 100%;
    height: auto;
}

.barcode-scanner-container .scanner-accordion .scanner-accordion-content .scanner-splash {
    border-radius: 8px;
    padding: 10px;
    background-color: white;
    margin-bottom: 10px;
    position: relative;
}

/*Scanner Line*/
.scanner-line {
    position: absolute;
    width: 4px;
    height: 80%;
    background-color: #dc3545;
    box-shadow: 0 0 10px #dc3545;
    animation: scan 3s ease-in-out infinite alternate;
}

/* Right trail (appears when moving left-to-right) */
.scanner-line::before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(220, 53, 69, 0.5), transparent);
    animation: scan-tail-right 6s ease-in-out infinite;
}
/* Left trail (appears when moving right-to-left) */
.scanner-line::after {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    right: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(220, 53, 69, 0.5), transparent);
    animation: scan-tail-left 6s ease-in-out infinite;
}
@keyframes scan {
    0% {
        left: 10px;
    }

    100% {
        left: calc(100% - 10px);
    }
}
/* Animation for the right trail (active during left-to-right movement) */
@keyframes scan-tail-left {
    0% {
        width: 0;
    }

    25% {
        width: 50px;
    }

    49.9% {
        width: 0;
    }

    50%, 100% {
        width: 0;
    }
}
/* Animation for the left trail (active during right-to-left movement) */
@keyframes scan-tail-right {
    0%, 49.9% {
        width: 0;
    }

    50% {
        width: 0;
    }

    75% {
        width: 50px;
    }

    99.9% {
        width: 0;
    }

    100% {
        width: 0;
    }
}

@media only screen and (min-width: 840px) {
    .barcode-scanner-container {
        display: flex;
        flex-direction: row;
        height: 100vh;
    }

    .barcode-scanner-container .scanner-accordion {
        width: 50%;
        height: 100%
    }

    .barcode-scanner-container .scanner-accordion-content {
        display: flex;
        flex-direction: column;
    }

    .barcode-scanner-container .barcode-scanner-controls {
        margin-top: 40px;
    }
}



/* Site Surveys
-------------------------------------------------- */
.survey-response-container {
    background-color: #97adce !important;
    border-color: #97adce !important;
}
.survey-response-container > details > summary {
    font-size: 1.4rem;
    color: #052c65;
}
.survey-response-container > details > summary i {
    margin: 0 10px;
}
.survey-response-container details[open] > summary {
    margin-bottom: 20px;
}
.survey-response-container .survey-responses summary {
    font-size: 0.9rem;
    font-weight: bold;
}
.survey-response-container .survey-responses summary i {
    margin: 0 10px;
}

.survey-response-container .survey-responses .responses-content .yes-no-table .question {
    font-weight: bold;
}
.survey-response-container .survey-responses .responses-content .yes-no-table {
    margin-bottom: 20px;
}
.survey-response-container .survey-responses .responses-content .yes-no-table td:first-of-type {
    padding-right: 50px;
}
.survey-response-container .survey-responses .responses-content .yes-no-table td .dx-checkbox-container {
    padding-right: 20px;
}

.survey-response-container .survey-responses .responses-content .text-answers .question {
    font-weight: bold;
}
.survey-response-container .survey-responses .responses-content .text-answers p {
    margin: 0;
}
.survey-response-container .survey-responses .responses-content .text-answers {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}
.survey-response-container .survey-responses .responses-content .text-answers.long {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.survey-response-container .survey-responses .responses-content hr {
    width: 100%;
}
.survey-response-container .survey-responses .responses-content .text-answers.short {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.survey-response-container .survey-responses .responses-content .text-answers > * {
    flex: 1;
}
.survey-response-container .survey-responses .responses-content .text-answers .check-label,
.survey-response-container .survey-responses .responses-content .text-answers span {
    margin-right: 10px;
}
.survey-response-container .survey-responses .responses-content table.comms-table,
.survey-response-container .survey-responses .responses-content table.window-table,
.survey-response-container .survey-responses .responses-content table.mall-table {
    width: 100%;
}
.survey-response-container .survey-responses .responses-content .comms-table td.label {
    font-weight: bold;
}
.survey-response-container .survey-responses .responses-content .comms-table td.question,
.survey-response-container .survey-responses .responses-content .window-table td.question,
.survey-response-container .survey-responses .responses-content .mall-table td.question {
    font-weight: bold;
}
.survey-response-container .survey-responses .responses-content .comms-table td.answer,
.survey-response-container .survey-responses .responses-content .window-table td.answer,
.survey-response-container .survey-responses .responses-content .mall-table td.answer {
    padding-right: 20px;
}
.rtn-btn {
    margin-bottom: 20px;
}
@media only screen and (max-width: 500px) {
    .survey-response-container .survey-responses .responses-content .comms-table tr {
        display: flex;
        flex-direction: column;
    }
    .survey-response-container .survey-responses .responses-content .comms-table td.label {
        margin: 10px 0;
    }
    .survey-response-container .survey-responses .responses-content .window-table tr,
    .survey-response-container .survey-responses .responses-content .mall-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}


/* Applicant Import Popup
-------------------------------------------------- */
.import-applicant-container {
    height: 100%;
}
.update-applicant-table {
    width: 100%;
}
.update-applicant-table .header-sep {
    margin-top: 20px;
}
.update-applicant-table span {
    color: #555555;
}
.applicant-import-controls {
    margin-top: 30px;
}

.applicant-last-worked {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.applicant-last-worked .dx-selectbox {
    max-width: 150px;
}

.applicant-accoridion {
    background-color: #fff;
}

/*Custom Till nav form bulletins landing page*/
.custom-till-nav {
    width: 100%;
    background-color: #17005d;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-left: 20px;
    padding-right: 20px;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
}

/* Task Images Form */
.task-uploader {
    margin-bottom: 20px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    padding: 20px;
}
.task-uploader {
    text-align: left !important;
}

.task-uploader-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.task-uploader-labels button {
    margin-left: 10px;
}

.task-uploader-control {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    vertical-align: center;
}

.task-uploader-control p {
    margin: 0;
}

.task-preview-grid {
    margin-bottom: 20px;
}
.task-image-preview img {
    height: 80px !important;
    width: auto;
}
.task-img-rm-btn {
    cursor: pointer;
    font-size: 2rem;
    color: #333
}
.task-img-rm-btn:hover {
    color: #222
}


/*Store Stock Check*/
.stock-checks-component {
    padding: 20px;
}
.stock-check-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
}
.stock-check-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem; 
    height: 100%;
}

.stock-check-container .bento-primary {
    background-color: #cfe2ff;
    border: 1px solid #9ec5fe;
    border-radius: 0.375rem;
    padding: 20px;
}

.stock-check-container .options {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stock-check-container .options .store-options {
    overflow-y: scroll;
    flex: 1;
}

.stock-check-container .store-prod-list {
    grid-column: 2 / 5;
}
.stock-check-container .store-prod-list .grids {
    overflow-y: scroll;
}

.stock-check-container .options details {
    margin-bottom: 10px;
}
.stock-check-container .options details summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.stock-check-container .options details .fa-angle-right {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 10px;
}
.stock-check-container .options details[open] .fa-angle-right {
    transform: rotate(90deg);
}

.filter-category-item {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
}
.filter-category-item:before {
    display: none !important;
}

.active-filters {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    min-height: 120px;
    max-height: 120px;
}
.active-filters .active-filters-pills {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}
.active-filter-pill {
    border-radius: 50px;
    color: white;
    font-size: 0.8rem;
    padding: 2px 15px;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    gap: 10px;
    cursor: default;
}
.active-filter-pill i {
    cursor: pointer;
}
.active-filter-pill i:hover {
    color: #f7f7f7;
}

.clear-filter-btn {
    background-color: #999999;
    border: 1px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-weight: 600;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none #6B7280 solid;
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: fit-content;
}
.clear-filter-btn:hover {
    background-color: #9e9e9e;
}
.clear-filter-btn:focus {
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.stock-check-container .store-options .dx-checkbox-icon {
    border-radius: 5px !important;
}
.stock-check-container .store-options dx-check-box {
    margin-bottom: 5px;
}

.stock-check-container .store-prod-list .store-prod-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    margin-bottom:10px;
}
.stock-check-container .store-prod-list .store-prod-header-row h6,
.stock-check-container .store-prod-list .store-prod-header-row p {
    margin: 0;
}

.existing-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.existing-tasks-header h6 {
    margin-bottom: 0;
}

.view-accounts-grid .dx-datagrid .dx-datagrid-headers {
    position: sticky;
    top: -20px;
    z-index: 1000;
    background-color: white;
}

/* Before Trading */
.e-learn-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/* Operator Status Page */
#op-status-loadpanel .dx-loadpanel-message {
    color: white !important;
}

#op-status-loadpanel .dx-loadindicator-icon .dx-loadindicator-segment {
    background: #fff;
}


/* Tracking Popup */
.tracking-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.tracking-popup {
    background: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    min-height: 300px;
    position: relative;
}

.tracking-popup .close-btn {
    font-size: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 25px;
}

.tracking-popup-container {
    padding: 16px;
    max-width: 600px;
}

.tracking-popup p,
.tracking-popup th,
.tracking-popup td,
.tracking-popup h3 {
    color: #212427 !important;
}

.tracking-popup-container .tracking-popup-info {
    margin-bottom: 20px;
}

.tracking-popup-container .tracking-popup-info table td:nth-child(2) {
    padding-left: 20px;
}

.tracking-popup-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.tracking-popup .tracking-popup-progress .progress-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.tracking-popup .tracking-popup-progress .progress-label h6 {
    margin: 0;
    cursor: default;
}

.tracking-popup .tracking-popup-progress .progress-label img {
    max-width: 100%;
    max-height: 22px;
    display: block;
}
.tracking-popup .tracking-popup-progress .progress-label a {
    margin-bottom: -4px;
    height: 40px;
}
.tracking-popup .tracking-popup-progress .progress-label .fedex-btn {
    padding: 10px 15px;
    background-color: white;
    text-decoration: none;
    position: relative;
    border-radius: 25px;
    z-index: 0;
}
.tracking-popup .tracking-popup-progress .progress-label .fedex-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 25px;
    padding: 2px;
    background: linear-gradient(to right, #442e8c 55%, #ff6600 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -2;
}
.tracking-popup .tracking-popup-progress .progress-label .fedex-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 25px;
    padding: 2px;
    background: #442e8c;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.4s ease;
}
.tracking-popup .tracking-popup-progress .progress-label .fedex-btn:hover::after {
    clip-path: inset(0 50% 0 0);
}

.progress-label .shipping-progress-label {
    color: white;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 25px;
    margin: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: -20px;
    font-weight: 400;
    height: 40px;
}
.progress-label .shipping-progress-label i {
    margin-right: 5px;
}
.progress-label .progress-label-blue {
    background-color: #0d6efd;
}
.progress-label .progress-label-purple {
    background-color: #6d32a8;
}
.progress-label .progress-label-orange {
    background-color: #ffa500;
}
.progress-label .progress-label-yellow {
    background-color: #97b02a;
}
.progress-label .progress-label-green {
    background-color: #198754;
}
.progress-label .progress-label-grey {
    background-color: #989ea6;
}

.tracking-popup-grid {
    max-height: 200px;
    overflow-y: scroll;
}
.tracking-table {
    border-collapse: collapse;
}
.tracking-table td,
.tracking-table th {
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}
.icon-cell {
    position: relative;
    width: 35px;
    text-align: center;
    vertical-align: top;
}
.timeline-container {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.timeline-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timeline-circle.latest {
    color: white;
}

.timeline-circle.latest i {
    font-size: 0.7rem;
}
.timeline-line {
    width: 2px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.timeline-line.top {
    top: 0;
    bottom: 50%;
}
.timeline-line.bottom {
    top: 50%;
    bottom: 0;
}
.location-info p {
    margin: 0;
}
.event-address {
    font-size: 0.9em;
    line-height: 1.3;
}


/*Kits*/
.kit-rec-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    gap: 20px;
    padding: 5px;
}

.kit-rec-row p {
    margin: 0;
}

.till-bottom-padding {
    height: 220px;
    width: 1px;
}

/*Applicant Page*/
.applicant-popup-content {
    font-size: 0.8rem;
}

.applicant-popup-content p {
    margin-bottom: 0;
}

.applicant-popup-content table {
    margin-bottom: 10px;
}

.applicant-popup-content table td {
    padding-right: 15px;
    padding-bottom: 5px;
}

.applicant-popup-content .select-row label {
    margin-right: 20px;
}

.applicant-flex-col {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    gap: 5px;
}

.applicant-flex-col p {
    margin-bottom: 0;
}

/* Bulletin Images */
.bulletin-images-browser .dx-drawer-wrapper .dx-drawer-panel-content .dx-filemanager-file-actions-button {
    display: none;
}

.bulletin-images-browser .dx-drawer-content .dx-filemanager-adaptivity-drawer-panel .dx-filemanager-items-panel .dx-filemanager-breadcrumbs {
    display: none;
}

.bulletin-content .dx-htmleditor-hidden-content {
    display: none !important;
}

.html-editor-container {
    height: 100%;
    min-height: 200px;
    padding-bottom: 10px;
}

.dx-resizable-handle-bottom {
    border-bottom: 1px dotted #999;
}

.dx-resizable-handle::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
}

.dx-resizable-handle-bottom::after {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.bulletin-content img {
    max-width: 90vw;
}

.bulletin-dates-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.bulletin-type-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.bulletin-switch {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bulletin-switch p {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.9rem;
}

.bulletin-preview-image-content {
    text-align: center;
}

@media (max-width: 1200px) {
    #new-task-popup-template {
        max-height: 80vh;
        overflow-y: scroll
    }
}

.edit-bulletin-container .switch-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.edit-bulletin-container .dx-switch.dx-state-focused .dx-switch-container {
    border-color: #0d6efd !important;
}
.edit-bulletin-container .switch-group .dx-switch-on-value .dx-switch-handle:before {
    background-color: #0d6efd !important;
}
.edit-bulletin-container .switch-group .dx-switch-on-value .dx-switch-handle::before {
    background-color: #0d6efd !important;
}
.edit-bulletin-container .switch-group .dx-switch-handle:before {
    background-color: rgba(13, 110, 253, 0.65) !important;
}
.edit-bulletin-container .switch-group .dx-switch.dx-state-focused.dx-state-active .dx-switch-handle:before {
    background-color: #337ab7 !important;
}
.edit-bulletin-container .switch-group .dx-switch.dx-state-hover .dx-switch-handle:before {
    background-color: #0d6efd !important;
}
.edit-bulletin-container .dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content {
    color: #0d6efd !important;
}
.edit-bulletin-container .dx-calendar-cell.dx-calendar-selected-date span {
    background-color: #0d6efd !important;
}
.edit-bulletin-container .dx-calendar-cell.dx-calendar-today span {
    border: 2px solid #0d6efd !important;
}


/* New Task Mobile */
.mob-add-task-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.mob-add-task-row-assign {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.mob-add-task-row-assign .mob-add-task-row-assign-checks {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.mob-add-task-row-assign .mob-add-task-row-assign-checks .dx-checkbox-text {
    width: fit-content;
}

.mob-add-task-tm-row .tm-check {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.mobile-add-task-stores .type-label {
    margin-left: 20px;
}

.mob-sel-by-type {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.mob-sel-by-type .type-checks {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.mobile-add-task-stores .stores-checklist-mob {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-task-mob-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.add-task-mob-btns div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.additional-store-roles {
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.additional-store-roles li {
    list-style: none;
}

.additional-store-roles .asr-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    background-color: #0a58ca;
    color: #fff;
    cursor: default;
    width: fit-content;
    border-radius: 20px;
    padding: 10px 10px;
}

.additional-store-roles .asr-btn {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 8px;
    border-width: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    text-transform: none;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.store-orders-table .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-text-cell {
    padding: 2px !important;
}