.list-element {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.list-element-caption {
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-element-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.command-icon.fa-edit {
    color: #007BFFaa;
}

.command-icon.fa-plus {
    color: #269b2aaa;
}

.command-icon.fa-times {
    color: #F3545Daa;
}

.command-icon.fa-thumbs-up {
    color: #269b2aaa;
}

.command-icon.fa-thumbs-down {
    color: #FFA534aa;
}

.command-icon.fa-trash-alt {
    color: #F3545Daa;
}

.command-icon:hover {
    opacity: 1.0;
}

.thumbnails {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.image-thumbnail {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 4px; /* Rounded border */
    padding: 5px; /* Some padding */
    height: 100px; /* Set a small width */
}

.image-thumbnail:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.images_dropzone {
    padding: 0 !important;
}

.images_dropzone .dz-message .message {
    font-size: 23px !important;
}

.zooming {
    transition: transform .2s; /* Animation */
}

.zooming:hover {
    transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.show-on-hover {
    opacity: 0;
}

.show-on-hover:hover {
    opacity: 1;
}

.card_text {
    display: flex;
}

.order_items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    table-layout: fixed;
}

/*.order_item {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: space-between;*/
/*    gap: 10px;*/
/*    width: 100%;*/
/*    !*background-color: #00bbff;*!*/
/*}*/

/*.order-item > th {*/
/*    flex-grow: 1;*/
/*    flex-basis: 20%;*/
/*    background-color: #ACFF65;*/
/*}*/

/*.order-item > th:nth-child(1) {*/
/*    flex-grow: 1;*/
/*    flex-basis: 50%;*/
/*}*/

/*.order-item > td {*/
/*    flex-grow: 1;*/
/*    flex-basis: 20%;*/
/*    background-color: #ACFF65;*/
/*}*/

/*.order-item > td:nth-child(1) {*/
/*    flex-grow: 1;*/
/*    flex-basis: 50%;*/
/*}*/

/*$breakpoint: 750px;*/
/*$heading-color: #43BAC0;*/

* {
    box-sizing: border-box;
}

.table-wrapper {
    width: 100%;
    max-width: 1000px;
    /*margin: 1em auto;*/
    /*padding: 1em;*/
}

.is-striped {
    background-color: rgba(233, 200, 147, 0.2)
}

/*.item-product {*/
/*    width: 100%;*/
/*}*/


/* Table column sizing
================================== */
.item-num-cell {
    width: 5%;
    display: flex;
    justify-content: center;
    font-size: 1.1625rem;
}

.product-cell {
    width: 35%;
}

.amount-cell {
    width: 15%;
}

.price-cell {
    width: 15%;
}

.total-cost-cell {
    width: 15%;
}

.carbon-footprint-cell {
    width: 10%;
}

.actions-cell {
    width: 5%;
}

.employee-cell {
    width: 30%;
}

.place-cell {
    width: 30%;
}

.scheduled-time-cell {
    width: 40%;
}


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

/* Apply styles
================================== */
.Rtable {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    padding: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.Rtable .Rtable-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.Rtable .Rtable-row:nth-child(even) {
    background-color: #f2f2f2;
}

.Rtable .Rtable-cmds-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.Rtable .Rtable-row .Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    padding: 0.1em 0.2em;
    overflow: hidden;
    list-style: none;
}

.Rtable .Rtable-row .Rtable-cell.column-heading {
    background-color: #36a3f7;
    color: white;
    padding: 0.1em;
    text-align: center;
    text-overflow: ellipsis;

}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--heading {
    display: none;
}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--content a {
    /*font-size: 2em;*/
    color: #333;
}

.Rtable .Rtable-cmds-row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.Rtable .Rtable-cmds-row .add-cmd {
    margin-left: auto;
}

.Rtable .Rtable-cmds-row .barcode-scan-cmd {
    display: flex;
}

/* Responsive
==================================== */
@media all and (max-width: 750px) {
    .is-striped {
        background-color: white;
    }

    .Rtable--collapse {
        display: block;
        width: 100%;
        padding: 1em;
        box-shadow: none;
    }

    .Rtable--collapse .Rtable-row {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2em;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    }

    .Rtable--collapse .Rtable-row .Rtable-cell {
        width: 100% !important;
        display: flex;
        align-items: center;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--heading {
        display: inline-block;
        flex: 1;
        max-width: 120px;
        min-width: 120px;
        /*color: #43BAC0;*/
        font-weight: 700;
        border-right: 1px solid #ccc;
        margin-right: 1em;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content {
        flex: 2;
        /*padding-left: 1em;*/
    }

    .Rtable--collapse .topic-cell {
        /*background-color: #43BAC0;*/
        background-color: #36a3f7;
        color: white;
        font-weight: 700;
        order: -1;
    }

    .Rtable--collapse .topic-cell .Rtable-cell--content {
        padding-left: 0 !important;
    }

    .Rtable--collapse .Rtable-row--head {
        display: none;
    }

}

/*Non-Flex modernizer fallback*/
.no-flexbox .Rtable {
    display: block;
}

.no-flexbox .Rtable.Rtable-cell {
    width: 100%;
}

.disabled-link {
    pointer-events: none;
}

.sidebar {
    width: 275px;
}

.no-state {
  color: #F8F8FF !important;
}

.payment-states-info {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

/* Rows states classes */
.waiting-state {background-color: #e0ffff;}
.waiting-state:hover {background-color: #98ffff !important;}
.table-striped tbody tr.waiting-state:nth-of-type(2n+1) {background-color: #c8fefe;}

.accepted-state {background-color: #fffacd;}
.accepted-state:hover {background-color: #fff387 !important;}
.table-striped tbody tr.accepted-state:nth-of-type(2n+1) {background-color: #fff7b5;}

.processing-state {background-color: #ffffff;}
.processing-state:hover {background-color: rgba(0, 0, 0, 0.10) !important;}
.table-striped tbody tr.processing-state:nth-of-type(2n+1) {background-color: rgba(0, 0, 0, 0.05);}

.failed-state {background-color: #ffe4e1;}
.failed-state:hover {background-color: #ffa298 !important;}
.table-striped tbody tr.failed-state:nth-of-type(2n+1) {background-color: #ffcec8;}

.succeeded-state {background-color: #90ee90;}
.succeeded-state:hover {background-color: #5ee65e !important;}
.table-striped tbody tr.succeeded-state:nth-of-type(2n+1) {background-color: #6ee86e;}

.submit-state {background-color: #c4c6ff;}
.submit-state:hover {background-color: #5359fe !important;}
.table-striped tbody tr.submit-state:nth-of-type(2n+1) {background-color: #adb0fe;}

.resurrect-state {background-color: #d3d3d3;}
.resurrect-state:hover {background-color: #9e9e9e !important;}
.table-striped tbody tr.resurrect-state:nth-of-type(2n+1) {background-color: #c8c8c8;}

.handbill-state {background-color: #adff2f;}
.handbill-state:hover {background-color: #88e000 !important;}
.table-striped tbody tr.handbill-state:nth-of-type(2n+1) {background-color:#a7ff1f;}

.cancelled-state {background-color: #ff8c00;}
.cancelled-state:hover {background-color: #c26b00 !important;}
.table-striped tbody tr.cancelled-state:nth-of-type(2n+1) {background-color: #f28500;}

.form-label-left-justify {
    justify-content: left;
}

.order_item_container {
    display: flex;
    flex-wrap: nowrap;
}

.order_item_max_amount {
    width: 20%;
}

.order_item_product_name {
    width: 60%;
}

.order_item_amount {
    width: 20%;
}

.neo-popup {
    position:relative !important;
    z-index:9999 !important;
}

.organization_order_items_caption {
    font-weight: bold;
}

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

.carbon-footprint-col {
    display: flex;
    flex-direction: column;
}

.carbon-footprint-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.carbon-footprint-generated {
    color: #ff8c00;
    margin-right: 5px;
}

.carbon-footprint-reduced {
    color: #5ee65e;
    margin-right: 5px;
}

label.control-label {
    white-space: normal;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*display: inline-block;*/
}

.navigation-select {
    border: 0;
    background: rgba(31, 30, 30, 0.12) !important;
    color: white;
}

.navigation-select:focus {
    border: 0;
    background: rgba(31, 30, 30, 0.12) !important;
    color: white;
}

.navigation-select:after {
    content:"\f0dc";
    font-family: FontAwesome;
    color: #000;
    padding: 12px 8px;
    position: absolute; right: 0; top: 0;
    background: red;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
}

tr.selected {
    background-color: rgba(20,20,20, 0.2) !important;
}

#point-info-table thead {
         position: absolute !important;
         top: -9999px !important;
         left: -9999px !important;
}

#point-balances-table thead {
         position: absolute !important;
         top: -9999px !important;
         left: -9999px !important;
}

.product_types {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.navigation-select:disabled {
    background: rgba(31, 30, 30, 0.12) !important;
}

.product_image {
    height: 100px;
    width: 100px;
    position: relative;
}

.product_image img {
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.system_image {
    height: 75px;
    /*width: 100px;*/
    position: relative;
}

.system_image img {
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

 /* Remove default bullets */
ul, #orgsTree {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#orgsTree {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.orgs-tree-caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.orgs-tree-caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.orgs-tree-caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

.pm_item {
    display: flex;
    flex-wrap: wrap;
}

.pm_item .pm_item_enabled {
    width: 10%;
}

.pm_item .pm_item_label {
    width: 30%;
}

.pm_item .pm_item_gateway {
    width: 60%;
}

.pm_item .pm_item_params {
    width: 100%;
}

.card-white {
    background: white !important;
}

.card_in_accordion_primary {
    background: #177dff !important;
}

.login-logo {
    max-height: 50px;
}

.items-state-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.items-state-filter .items-state-filter-item {
    -ms-flex-positive: 1;
    flex-grow: 0;
    position: relative;
    font-weight: 400 !important;
}

.fa-2fw {
  text-align: center;
  width: 2.5em;
}

.item_state {
    display: flex;
    align-items: center;
}

.item_state .item_state_icon {
    margin-left: 10px;
    margin-right: 10px;
}

.item_state .item_state_title {
    flex-grow: 1;
    text-align: center;
    font-size: large;
    font-weight: 400 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-info_list-element {
    display: flex;
    align-items: center;
}

.item-info_list-element .item-info_list-element-caption {
    flex-grow: 1;
    font-size: large;
    font-weight: 400 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flag-shadow {
    box-shadow: 0 1px 11px rgba(0,0,0,.15) !important;
}

.org_select {
    min-width: 200px;
    border: 0;
    background: rgba(31, 30, 30, 0.12) !important;
    color: white;
}

.org_selected {
    margin-right: auto;
}

.nav-pills-small li a {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.form-field-localized-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-field-localized-caption label {
    margin-bottom: 0px !important;
}

body[data-background-color="dark"] {
    background: #0f1623 !important;
    color: #93A2CA !important;
    /* Render native controls (select popups, file "Browse" button, checkboxes,
       scrollbars) with the dark OS palette instead of the default light/grey. */
    color-scheme: dark;
}

body[data-background-color="dark"] .main-panel {
    color: #93A2CA !important;
}

body[data-background-color="dark"] .sidebar {
    color: #93A2CA !important;
    background: #1f283e !important;
}

body[data-background-color="dark"] table {
    color: #93A2CA !important;
	/*color: rgba(169,175,187,.82) !important;*/
}

body[data-background-color="dark"] tr:hover {
	color: #F0F1F3 !important;
}

body[data-background-color="dark"] .dt-paging a.page-link {
    border-color: #27334F;
	background-color: #1f283e !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item a p {
    color: #93A2CA !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item a p:hover {
    color: #F0F1F3 !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item a i {
    color: #93A2CA !important;
}

body[data-background-color="dark"] .sidebar .nav > .nav-item a i:hover {
    color: #F0F1F3 !important;
}

body[data-background-color="dark"] #organizations_tree .jstree-anchor {
    color: #93A2CA !important;
}

/* jstree runs with the wholerow plugin: the row highlight is drawn by separate
   .jstree-wholerow-hovered / .jstree-wholerow-clicked elements (light blue in the default
   theme). Do NOT dark-theme .jstree-clicked/.jstree-hovered on the anchor/li: the selected
   org's <li> wraps its whole subtree (nested <ul>), so colouring it would tint the entire
   subtree — which is exactly what happened. Style only the per-row wholerow elements. */
body[data-background-color="dark"] #organizations_tree .jstree-wholerow-hovered {
    background: #2a3550 !important;
}

body[data-background-color="dark"] #organizations_tree .jstree-wholerow-clicked,
body[data-background-color="dark"] #organizations_tree .jstree-wholerow-clicked.jstree-wholerow-hovered {
    background: #1e3a5f !important;
}

body[data-background-color="dark"] .row-card-no-pd-no-border {
    background: #202940 !important;
}

body[data-background-color="dark"] .row-card-no-pd-no-border [class*=col] .card:before {
    background: rgba(181, 181, 181, 0.1) !important;
}

body[data-background-color="dark"] .accordion > .card {
    background: #202940 !important;
    color: #93A2CA !important;
}

body[data-background-color="dark"] .accordion > .card .card-body {
    border-top-color: rgba(181, 181, 181, 0.1) !important;
}

body[data-background-color="dark"] input[type="date"],
body[data-background-color="dark"] input[type="datetime-local"],
body[data-background-color="dark"] input[type="time"] {
    background-color: #1a2035 !important;
    color: #93A2CA !important;
    border-color: #2f374b !important;
    color-scheme: dark;
}

body[data-background-color="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-background-color="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body[data-background-color="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

body[data-background-color="dark"] .btn-primary,
body[data-background-color="dark"] .btn-primary:hover,
body[data-background-color="dark"] .btn-primary:focus {
    background: #07408a !important;
    border-color: #07408a !important;
}

body[data-background-color="dark"] .btn-secondary,
body[data-background-color="dark"] .btn-secondary:hover,
body[data-background-color="dark"] .btn-secondary:focus {
    background: #38376e !important;
    border-color: #38376e !important;
}

body[data-background-color="dark"] .btn-info,
body[data-background-color="dark"] .btn-info:hover,
body[data-background-color="dark"] .btn-info:focus {
    background: #0e5a96 !important;
    border-color: #0e5a96 !important;
}

body[data-background-color="dark"] .btn-success,
body[data-background-color="dark"] .btn-success:hover,
body[data-background-color="dark"] .btn-success:focus {
    background: #0f5e12 !important;
    border-color: #0f5e12 !important;
}

body[data-background-color="dark"] .btn-warning,
body[data-background-color="dark"] .btn-warning:hover,
body[data-background-color="dark"] .btn-warning:focus {
    background: #8a4e08 !important;
    border-color: #8a4e08 !important;
    color: #ffffff !important;
}

body[data-background-color="dark"] .btn-danger,
body[data-background-color="dark"] .btn-danger:hover,
body[data-background-color="dark"] .btn-danger:focus {
    background: #7a1016 !important;
    border-color: #7a1016 !important;
}

body[data-background-color="dark"] .logo-header {
    background: #1f283e !important;
}

body[data-background-color="dark"] .navbar-header {
    background: #1a2035 !important;
    border-bottom: 1px solid #293247;
}

body[data-background-color="dark"] .dropdown-menu {
    background-color: #202940;
    border-color: rgba(181, 181, 181, 0.15);
}

body[data-background-color="dark"] .dropdown-menu .dropdown-item {
    color: #93A2CA;
}

body[data-background-color="dark"] .dropdown-menu .dropdown-item:hover,
body[data-background-color="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: #1a2035;
    color: #F0F1F3;
}

body[data-background-color="dark"] .dropdown-menu .dropdown-divider {
    border-color: rgba(181, 181, 181, 0.1);
}

body[data-background-color="dark"] .dropdown-menu.dropdown-user {
    background-color: #202940;
}

body[data-background-color="dark"] .modal-content {
    background-color: #202940;
    border-color: rgba(181, 181, 181, 0.1);
    color: #93A2CA;
}

body[data-background-color="dark"] .modal-header,
body[data-background-color="dark"] .modal-footer {
    border-color: rgba(181, 181, 181, 0.1);
}

body[data-background-color="dark"] .modal-title {
    color: #fff;
}

body[data-background-color="dark"] .close {
    color: #93A2CA;
    text-shadow: none;
    opacity: 0.8;
}

body[data-background-color="dark"] option,
body[data-background-color="dark"] select.form-control option {
    /* match the control's own background (#1a2035), not the form panel (#202940).
       NB: only the option rows are stylable — the popup's outer chrome is drawn by the
       browser (dark-grey under color-scheme: dark) and cannot be set to an exact colour
       without replacing native <select> with select2. */
    background-color: #1a2035;
    color: #93A2CA;
}

/* Selected options (native single/multi select) must stand out — our rule above flattens
   every option to the panel colour otherwise. The linear-gradient is a WebKit/Blink trick:
   plain background-color on option:checked is ignored there. */
body[data-background-color="dark"] select.form-control option:checked,
body[data-background-color="dark"] select.form-control option[selected] {
    background: #07408a linear-gradient(#07408a, #07408a);
    color: #fff;
}

/* Keep every native select box (incl. ones without .form-control) in the dark control
   palette — some render the default OS grey otherwise. */
body[data-background-color="dark"] select,
body[data-background-color="dark"] .custom-select {
    background-color: #1a2035;
    color: #fff;
    border-color: #2f374b;
}

/* Disabled / readonly controls: the theme forces a light grey with !important
   (.form-control:disabled{background:#e8e8e8!important;opacity:.6!important}), so these
   overrides must also use !important — our selector is more specific, so it wins at equal
   priority. -webkit-text-fill-color is needed because WebKit paints disabled text through it,
   not `color`. */
body[data-background-color="dark"] .form-control:disabled,
body[data-background-color="dark"] .form-control[readonly],
body[data-background-color="dark"] select:disabled,
body[data-background-color="dark"] .custom-select:disabled,
body[data-background-color="dark"] input:disabled,
body[data-background-color="dark"] input[readonly],
body[data-background-color="dark"] textarea:disabled,
body[data-background-color="dark"] textarea[readonly] {
    background-color: #161c2b !important;
    color: #93A2CA !important;
    -webkit-text-fill-color: #93A2CA;
    border-color: #2f374b !important;
    opacity: 1 !important;
}

/* A disabled native <select> keeps a stubborn light UA background in WebKit/Blink that
   ignores background-color until appearance is dropped. */
body[data-background-color="dark"] select:disabled,
body[data-background-color="dark"] select.form-control:disabled,
body[data-background-color="dark"] select[readonly] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    background-color: #161c2b !important;
}

/* File inputs render a light native "Browse" button; dark-theme the input and its button. */
body[data-background-color="dark"] input[type="file"] {
    color: #93A2CA;
}

body[data-background-color="dark"] input[type="file"]::-webkit-file-selector-button,
body[data-background-color="dark"] input[type="file"]::file-selector-button {
    background-color: #07408a;
    color: #fff;
    border: 1px solid #07408a;
    border-radius: 4px;
    padding: 5px 12px;
    margin-right: 10px;
    cursor: pointer;
}

body[data-background-color="dark"] input[type="file"]::-webkit-file-selector-button:hover,
body[data-background-color="dark"] input[type="file"]::file-selector-button:hover {
    background-color: #07408a;
    border-color: #2f374b;
}

/* Badges: reuse the muted dark button palette instead of the bright bootstrap defaults */
body[data-background-color="dark"] .badge-primary {
    background-color: #07408a;
    color: #dbe4f2;
}

body[data-background-color="dark"] .badge-secondary {
    background-color: #38415c;
    color: #c3cce2;
}

body[data-background-color="dark"] .badge-info {
    background-color: #0e5a96;
    color: #d3e6f6;
}

body[data-background-color="dark"] .badge-success {
    background-color: #0f5e12;
    color: #cfe9d0;
}

body[data-background-color="dark"] .badge-warning {
    background-color: #8a4e08;
    color: #f3e2c0;
}

body[data-background-color="dark"] .badge-danger {
    background-color: #7a1016;
    color: #f0ccce;
}

body[data-background-color="dark"] .badge-light {
    background-color: #2c3652;
    color: #93A2CA;
}

/* Alerts (subscription preflight etc.): dark backgrounds, softened text */
body[data-background-color="dark"] .alert-success {
    background-color: #12331b;
    border-color: #0f5e12;
    color: #a9d5b0;
}

body[data-background-color="dark"] .alert-warning {
    background-color: #3d2c0a;
    border-color: #8a4e08;
    color: #e6cd9c;
}

body[data-background-color="dark"] .alert-danger {
    background-color: #3d1418;
    border-color: #7a1016;
    color: #e2b3b6;
}

body[data-background-color="dark"] .alert-info {
    background-color: #0e2f4d;
    border-color: #0e5a96;
    color: #accdec;
}

body[data-background-color="dark"] .alert-secondary {
    background-color: #262f47;
    border-color: #38415c;
    color: #b0bcd9;
}

/* Inline code (plan codes, limits summary): dim the bootstrap pink */
body[data-background-color="dark"] code {
    color: #c97f92;
}

/* Muted text should blend with the dark palette, not stay light-mode gray */
body[data-background-color="dark"] .text-muted {
    color: #6a769b !important;
}

/* Softer accent colors for command icons / warnings that glare on dark */
body[data-background-color="dark"] .text-warning {
    color: #d7a94a !important;
}

body[data-background-color="dark"] .form-control.border-warning {
    border-color: #8a4e08 !important;
}

/* select2 renders its own DOM (not the native <select>), so the theme misses it in
   dark mode — the selected value and dropdown stayed light. Match the dark palette. */
body[data-background-color="dark"] .select2-container--default .select2-selection--single,
body[data-background-color="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #1a2035 !important;
    border-color: #2f374b !important;
    color: #93A2CA !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #93A2CA !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
body[data-background-color="dark"] .select2-container--default .select2-search__field::placeholder {
    color: #6a769b !important;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #93A2CA transparent transparent transparent;
}

body[data-background-color="dark"] .select2-dropdown {
    background-color: #1a2035;
    border-color: #2f374b;
}

body[data-background-color="dark"] .select2-results__option {
    color: #93A2CA;
    background-color: #1a2035;
}

body[data-background-color="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2a3550;
    color: #F0F1F3;
}

body[data-background-color="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #1e3a5f;
    color: #F0F1F3;
}

body[data-background-color="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #1a2035;
    border-color: #2f374b;
    color: #93A2CA;
}

/* multi-select chips */
body[data-background-color="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #07408a;
    border-color: #07408a;
    color: #dbe4f2;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #dbe4f2;
}

/* select2 multi-select has no dropdown arrow by default — add one so the field reads
   as a dropdown (single-select already has its built-in arrow). */
.select2-container--default .select2-selection--multiple {
    position: relative;
    padding-right: 22px;
}

.select2-container--default .select2-selection--multiple::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    border: 5px solid transparent;
    border-top-color: #888;
    pointer-events: none;
}

body[data-background-color="dark"] .select2-container--default .select2-selection--multiple::after {
    border-top-color: #93A2CA;
}

/* Form tabs and the localized-field language switcher (both nav-pills). The theme forces
   a #fff background on inactive pills in dark mode via
   [data-background-color=dark] .nav-pills .nav-link:not(.active); match its :not(.active)
   so our darker background wins on specificity. */
body[data-background-color="dark"] .nav-pills .nav-link:not(.active) {
    /* match the edit controls (.form-control) so tabs read as controls, not panel */
    background-color: #1a2035;
    color: #93A2CA;
    border-color: #2f374b;
}

body[data-background-color="dark"] .nav-pills .nav-link:not(.active):hover,
body[data-background-color="dark"] .nav-pills .nav-link:not(.active):focus {
    background-color: #232c45;
    color: #F0F1F3;
    border-color: #2f374b;
}
/* Active pills keep their theme accent (content tabs blue, language switcher orange). */

/* DataTables search box / "Show entries" select don't carry .form-control, so they keep a
   light background in dark mode — align them with the edit controls. DataTables 2.x renders
   .dt-search / .dt-length with .dt-input fields (the .dataTables_filter / .dataTables_length
   names are legacy 1.x); target both. */
body[data-background-color="dark"] .dt-search input,
body[data-background-color="dark"] .dt-length select,
body[data-background-color="dark"] .dt-container .dt-input,
body[data-background-color="dark"] .dataTables_filter input,
body[data-background-color="dark"] .dataTables_length select {
    background-color: #1a2035;
    color: #fff;
    border-color: #2f374b;
}

/* Filter dropdowns live in a d-flex group; those with a trailing "+" button (Pricelist,
   Products Groups) would otherwise stretch taller than the button-less ones (Currency).
   Keep every filter select at its natural height and just center the button. */
#table-filters .select2-input.d-flex {
    align-items: center;
}

/* Action icons: allow wrapping but keep ~5 per row (min-width fits 5 fa-fw icons), so on
   narrow screens they never collapse into one tall vertical column — the organizations' set
   of ~15 icons wraps into ~3 rows of 5 instead of stacking one-per-line or one wide row. */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 9em;
}

.table-actions > a {
    line-height: 1;
}

.conversation-message-images {
    display: flex;
    flex-wrap: wrap;
}

.conversation-message-images .conversation-message-image {
    width: 100px;
    height: 100px;
    margin: 10px;
}

.conversation-message-images .conversation-message-image img{
    max-width: 100%;
    max-height: 100%;
}

.deposit-qrcode {
    width:128px;
    height:128px;
    display: flex;
    justify-content: center;
}

.deposit-info {
}

.conversations .conversations-body .message {
    display: flex;
    flex-direction: column;
}

.files-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

}

.message-out .files-container {
    justify-content: flex-end;
}

.message-file {
    width: 100px;
    height: 100px;
    /*position: relative;*/
}

.thumbnail {
    width: 100%;
    height: 80%;
    position: relative;
}

.thumbnail img {
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.message-caption {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}