@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Titillium+Web:wght@300;400;600;700&display=swap");
@import url("./dark-theme.css");

:root {
    --zws-pink: #e61983;
    --zws-purple: #97155d;
    --zws-deep: #f4f7fc;
    --zws-surface: #ffffff;
    --zws-surface-2: #f7f9fe;
    --zws-border: #d9e0ee;
    --zws-text: #1f2a3b;
    --zws-muted: #5e6c84;
    --table-selected-bg: var(--bs-primary);}

html,
body {
    min-height: 100%;
}

body {
    color: var(--zws-text);
    background-color: #edf2fa;
    background: radial-gradient(circle at 25% 5%, #ffffff 0%, #f5f8fd 48%, #edf2fa 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.login-optimize-screen {
    font-family: Arial, Helvetica, sans-serif;
    background: #fafafa;
    color: #222;
}

.login-optimize-screen .login-optimize-center {
    max-width: 600px;
    margin: 18vh auto;
    text-align: center;
}

.login-optimize-screen .login-optimize-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: zws-optimize-spin 1s linear infinite;
    margin: 0 auto 16px;
}

.login-optimize-screen .login-optimize-message {
    font-size: 18px;
    margin-top: 8px;
}

.login-optimize-screen .login-optimize-sub {
    color: #666;
    font-size: 13px;
    margin-top: 6px;
}

#action_modal .modal-dialog {
    max-width: min(1200px, 96vw);
}

#action_modal .modal-content {
    max-height: 90vh;
    overflow: hidden;
}

#action_modal .container-fluid {
    max-height: calc(90vh - 3.5rem);
    overflow-y: auto;
    padding: 1rem;
}

#action_modal #form-group fieldset {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}

#action_modal #form-group legend {
    float: none;
    width: auto;
    margin: 0 0 0.75rem;
    padding: 0 0.3rem;
    font-size: 1rem;
}

#action_modal #privTree {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.65rem;
    background: var(--bs-body-bg);
}

#action_modal #privTree .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: transparent;
    color: inherit;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

#action_modal #privTree .list-group-item:last-child {
    border-bottom: 0;
}

#action_modal #privTree .list-group-item:hover {
    background: #f5f8fd;
}

#action_modal #privTree .state-icon {
    color: var(--bs-secondary-color);
}

#action_modal #privTree .form-check-input {
    margin-top: 0;
}

#action_modal .modal-header,
#action_modal .modal-footer {
    border-color: var(--bs-border-color-translucent);
}

@keyframes zws-optimize-spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

footer > .text-center.p-3 {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%) !important;
    border-top: 1px solid #dbe4f2;
    color: #677893 !important;
}

footer > .text-center.p-3 a,
footer > .text-center.p-3 a.text-dark {
    color: #2f6fd0 !important;
}

footer > .text-center.p-3 a:hover {
    color: #1f5db7 !important;
}

.navbar.bg-dark {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-bottom: 1px solid #dfe6f3;
}

.navbar .navbar-brand .brand-main,
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.dropdown-toggle.show {
    color: #243247;
}

.navbar .dropdown-menu {
    background: #ffffff;
    border: 1px solid #d9e2ef;
}

.navbar .dropdown-item {
    color: #324056;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    color: #1d2738;
}

.main .h1,
.main .col-md-4 > h3 {
    color: #1b2740;
}

.main hr {
    border-color: #dfe5f0;
}

.form-container,
.form-container-nav,
.zws-tree-panel,
.main .analytique-content-card,
.main #deviceTree,
.main .tech-toolbar .group,
.main #analytiqueContent .card {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%) !important;
    border: 1px solid var(--zws-border) !important;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.08) !important;
    color: #1f2a3b !important;
}

.form-container legend,
.zws-tree-title,
.main label,
.main .form-label {
    color: #27354d;
}

#product-description-column #form-product-description-container {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.08) !important;
    overflow: hidden;
}

#product-description-column #form-product-description-container .sticky-actions {
    background: #f7faff !important;
    border-top: 1px solid #dbe4f2 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#product-description-column #form-product-description-container .sticky-header th {
    background: #f5f8fd !important;
}

#product-description-column #form-product-description-container #container_tableTVA,
#product-description-column #form-product-description-container #container_tablePrix {
    border: 1px solid #d6dfef;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

#product-tabs-column #product-tabs-container .form-container {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.08) !important;
    overflow: hidden;
}

#product-tabs-column #product-tabs-container .form-container [id^="container_table"] {
    border: 1px solid #d6dfef;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

#product-tabs-column #product-tabs-container .form-container .sticky-actions {
    background: #f7faff !important;
    border-top: 1px solid #dbe4f2 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#product-tabs-column #product-tabs-container .form-container .sticky-header th {
    background: #f5f8fd !important;
}

.main #product-description-column #form-product-description-container,
.main #users-details-column #users-details-container,
.main #tpv-description-column #form-tpv-description-container {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.08) !important;
    overflow: hidden;
}

.main #users-details-column #users-details-container .bs5-form > fieldset,
.main #users-details-column #users-details-container > form > fieldset,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset,
.main #tpv-description-column #form-tpv-description-container > form > fieldset {
    border: 1px solid #d6dfef;
    border-radius: 12px;
    padding: 0.9rem 1rem 0.75rem;
    margin: 0 0 1rem 0;
    background: #ffffff;
}

.main #users-details-column #users-details-container .bs5-form > fieldset:last-child,
.main #users-details-column #users-details-container > form > fieldset:last-child,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset:last-child,
.main #tpv-description-column #form-tpv-description-container > form > fieldset:last-child {
    margin-bottom: 0;
}

.main #users-details-column #users-details-container .bs5-form > fieldset > legend,
.main #users-details-column #users-details-container > form > fieldset > legend,
.main #tpv-description-column #form-tpv-description-container .bs5-form > fieldset > legend,
.main #tpv-description-column #form-tpv-description-container > form > fieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 0.65rem;
    padding: 0 0.35rem;
}

.main #product-description-column #form-product-description-top .bs5-form > fieldset,
.main #product-description-column #form-product-description-top > form > fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1rem 0;
    background: transparent;
}

.main #product-description-column #form-product-description-top .bs5-form > fieldset > legend,
.main #product-description-column #form-product-description-top > form > fieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 0.65rem;
    padding: 0;
}

.main #tpv-description-column #form-tpv-description-container [id^="container_table"] {
    border: 1px solid #d6dfef;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.main #tpv-description-column #form-tpv-description-container .sticky-actions {
    background: #f7faff !important;
    border-top: 1px solid #dbe4f2 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.main #tpv-description-column #form-tpv-description-container .sticky-header th {
    background: #f5f8fd !important;
}

.main #TpvTab ~ .tab-content .form-container {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%) !important;
    border: 1px solid var(--zws-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.08) !important;
    overflow: hidden;
}

.main #TpvTab ~ .tab-content .form-container [id^="container_table"] {
    border: 1px solid #d6dfef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff !important;
}

.main #TpvTab ~ .tab-content .form-container .sticky-actions {
    background: #f7faff !important;
    border-top: 1px solid #dbe4f2 !important;
}

.main #TpvTab ~ .tab-content .form-container .sticky-header th {
    background: #f5f8fd !important;
}

.main .form-control,
.main .form-select,
.main input[type="text"],
.main input[type="number"],
.main select,
.zws-tree-panel .form-control,
.zws-tree-panel .form-select,
.zws-tree-panel input[type="text"],
.main #cardsListing_wrapper .dataTables_length select,
.main #cardsListing_wrapper .dataTables_filter input,
.main #cardsListing_wrapper .page-link {
    background-color: #ffffff;
    color: #1f2a3b;
    border: 1px solid #cfd8e8;
}

.main .form-floating > .form-select ~ label {
    color: #60708a;
}

.main .form-select option,
.main select option,
.zws-tree-panel .form-select option,
.zws-tree-panel select option {
    background-color: #ffffff;
    color: #1f2a3b;
}

.main .nav-tabs {
    border-bottom: 1px solid #dbe3ef;
}

.main .nav-tabs .nav-link {
    color: #63738c;
}

.main .nav-tabs .nav-link.active,
.main .nav-tabs .nav-link:hover {
    color: #1f2a3b;
}

.main .table,
.main .table-responsive,
.main .dataTables_wrapper .row,
.main #cardsListing_wrapper {
    color: #213047;
    border-color: #dde5f2;
}

.main .table > :not(caption) > * > *,
.main #cardsListing_wrapper tbody td {
    border-color: #e4ebf5 !important;
}

.main .table tbody td,
.main .table tbody td div,
.main #cardsListing_wrapper tbody td {
    color: #1f2a3b  !important;
}

.main .table tbody tr.selected td,
.main .table tbody tr.table-primary td,
.main .table tbody tr.selected td div,
.main .table tbody tr.table-primary td div {
    color: #ffffff !important;
}

.main .table thead th,
.main #cardsListing_wrapper thead th,
.main #cardsListing_wrapper .table-dark th {
    color: #2a3a52 !important;
    border-color: #d7e0ef !important;
    background: #f5f8fd !important;
}

.main .table tbody tr:nth-child(odd):not(.selected):not(.table-primary),
.main #cardsListing_wrapper #cardsListing.table-striped > tbody > tr:nth-of-type(odd):not(.selected):not(.table-primary) > *,
.main #cardsListing_wrapper #cardsListing > tbody > tr:nth-child(odd):not(.selected):not(.table-primary) > td {
    background: linear-gradient(90deg, rgba(230, 25, 131, 0.1) 0%, rgba(151, 21, 93, 0.06) 100%) !important;
}

.main .table tbody tr:nth-child(even),
.main #cardsListing_wrapper #cardsListing.table-striped > tbody > tr:nth-of-type(even) > *,
.main #cardsListing_wrapper #cardsListing > tbody > tr:nth-child(even) > td {
    background: rgba(78, 103, 145, 0.03) !important;
}

.main #cardsListing_wrapper #cardsListing > tbody > tr:hover > td {
    background: rgba(78, 103, 145, 0.08) !important;
}

.main #cardsListing_wrapper .dt-scroll,
.main #cardsListing_wrapper .dt-scroll-head,
.main #cardsListing_wrapper .dt-scroll-foot,
.main #cardsListing_wrapper .dt-scroll-body,
.sticky-actions,
.main #cardsListing_wrapper .dt-processing.card {
    background: #ffffff !important;
    border-color: #d6e0ef !important;
    color: #243247 !important;
}

.sticky-actions .btn-primary {
    background: #f7f9fd;
    border-color: #d2dbeb;
    color: #27354c;
}

.zws-tree-panel .bstreeview,
.main #analytiqueTree.bstreeview,
.main #analytiqueTree .bstreeview,
.main #deviceTree.bstreeview,
.main #deviceTree .bstreeview {
    border-color: #d6dfef;
}

.zws-tree-panel .bstreeview .list-group-item,
.main #analytiqueTree.bstreeview .list-group-item,
.main #analytiqueTree .bstreeview .list-group-item,
.main #deviceTree.bstreeview .list-group-item,
.main #deviceTree .bstreeview .list-group-item,
.main .tech-toolbar .group-title {
    color: #2a3a52  !important;
    border-color: #e3eaf5;
}

.zws-tree-panel .bstreeview .list-group-item:hover,
.main #analytiqueTree.bstreeview .list-group-item:hover,
.main #analytiqueTree .bstreeview .list-group-item:hover,
.main #deviceTree.bstreeview .list-group-item:hover,
.main #deviceTree .bstreeview .list-group-item:hover {
    background: rgba(85, 106, 141, 0.08);
}

.zws-tree-panel .bstreeview .list-group-item.active,
.main #analytiqueTree.bstreeview .list-group-item.active,
.main #analytiqueTree .bstreeview .list-group-item.active,
.main #deviceTree.bstreeview .list-group-item.active,
.main #deviceTree .bstreeview .list-group-item.active {
background: var(--table-selected-bg) !important;
border-color: transparent !important;
color: #FFFFFF !important;
}

.bstreeview .list-group-item.active {
    background: var(--table-selected-bg) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.main #analytiqueContent .card .card-header {
    background: #f8fbff;
    border-bottom: 1px solid #e2e9f4;
    color: #243247;
}

.main #analytiqueContent .card .card-title,
.main #analytiqueContent .card .card-body,
.main #analytiqueContent .card .fs-3,
.main #analytiqueContent .card .fw-bold {
    color: #243247 !important;
}

.main #analytiqueContent .card .card-settings {
    color: #70829f !important;
}

.main #analytiqueContent .js-plotly-plot text {
    fill: #2c3e59 !important;
}

.main #analytiqueContent .js-plotly-plot .number {
    fill: #1f2a3b !important;
}

.main #analytiqueContent .js-plotly-plot .gauge-outline path,
.main #analytiqueContent .js-plotly-plot .xangularaxistick.ticks,
.main #analytiqueContent .js-plotly-plot .bg-arc path {
    stroke: #8fa0b9 !important;
}

.main #analytiqueContent .js-plotly-plot .bg-arc path {
    fill: rgba(44, 62, 89, 0.06) !important;
}

.main #analytiqueContent .js-plotly-plot .gridlayer .x .xgrid,
.main #analytiqueContent .js-plotly-plot .minor-gridlayer .x path {
    stroke-width: 0 !important;
    stroke-opacity: 0 !important;
}

.main #analytiqueContent .js-plotly-plot .gridlayer .y .ygrid {
    stroke: rgba(84, 103, 134, 0.22) !important;
}

.main #analytiqueContent .js-plotly-plot .modebar {
    background: rgba(255, 255, 255, 0.82) !important;
}

.main #analytiqueContent .js-plotly-plot .modebar-btn path {
    fill: #5b6f8d !important;
}

.main #analytiqueContent .js-plotly-plot .legend .bg {
    fill: #ffffff !important;
    fill-opacity: 0.96 !important;
    stroke: #d2dced !important;
    stroke-width: 1px !important;
}

.main #analytiqueContent .js-plotly-plot .legend .legendtext {
    fill: #2a3a52 !important;
}

.zws-modal {
    background: #ffffff;
    color: #243247;
    border: 1px solid #d6dfef;
}

.zws-modal .modal-header,
.zws-modal .modal-footer {
    border-color: #e3eaf5;
}

#modalAttestation .modal-content {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%);
    color: #243247;
    border: 1px solid #d6dfef;
    box-shadow: 0 18px 40px rgba(24, 39, 75, 0.16);
}

#modalAttestation .modal-header {
    background: #f7faff !important;
    color: #243247 !important;
    border-bottom: 1px solid #e3eaf5 !important;
}

#modalAttestation .btn-close.btn-close-white {
    filter: none;
    opacity: 0.65;
}

#modalAttestation .modal-body .text-muted {
    color: #6d7f99 !important;
}

#modalAttestation .modal-body .bg-light.border.rounded {
    background: #f7faff !important;
    border-color: #d8e2f1 !important;
}

#modalAttestation .modal-body a.text-primary {
    color: #2e6fcf !important;
}

#modalAttestation .modal-body .btn.btn-link.text-secondary {
    color: #60708a !important;
}

#modalAttestation .modal-footer {
    background: #f7faff !important;
    border-top: 1px solid #e3eaf5 !important;
}

#modalHealth .modal-content {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%);
    color: #243247;
    border: 1px solid #d6dfef;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(24, 39, 75, 0.16);
    overflow: hidden;
}

#modalHealth .modal-header {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
    color: #ffffff;
    border-bottom: 1px solid #f3c7cc;
}

#modalHealth .modal-title {
    font-weight: 700;
}

#modalHealth .modal-body {
    padding: 1rem;
}

#modalHealth #healthBody li {
    background: #fff6f6;
    border: 1px solid #f4d2d6;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
}

#modalHealth #healthBody strong {
    color: #8f1d2b;
}

#modalHealth #healthBody a {
    color: #2e6fcf !important;
}

#modalHealth #healthBody a:hover {
    color: #1f5db7 !important;
}

#modalHealth .modal-footer {
    background: #f7faff;
    border-top: 1px solid #e3eaf5;
}
/* Card preview styling */
#zoneApercuCarteImpression {
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%);
  border: 1px solid var(--zws-border);
  padding: 1rem;
}
#zoneApercuCarteImpression img#imgApercuCarte {
  max-width: 340px;
  border-radius: .375rem;
  border: 1px solid #ddd;
  box-shadow: 0 6px 16px rgba(31,42,59,0.08);
}
#zoneApercuCarteImpression figure { margin: 0; }
#zoneApercuCarteImpression figcaption { color: #677893; }
#zoneApercuCarteImpression .btn-outline-secondary {
  border-color: #d2dbeb;
  color: #27354c;
}

/* Update window styling */
.update-container {
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%);
  border: 1px solid var(--zws-border);
  color: var(--zws-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem;
}
.update-container .text-center h2 {
  margin-bottom: 0.5rem;
  color: var(--zws-text);
  font-weight: 700;
}
.update-container p {
  color: #677893;
}

/* simple wave loader */
.update-container .wave {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
  height: 32px;
}
.update-container .wave > div {
  width: 8px;
  height: 8px;
  background: var(--zws-pink);
  border-radius: 4px;
  opacity: 0.7;
  animation: zws-wave 1s linear infinite;
}
.update-container .wave > div:nth-child(2) { animation-delay: 0.12s; }
.update-container .wave > div:nth-child(3) { animation-delay: 0.24s; }
.update-container .wave > div:nth-child(4) { animation-delay: 0.36s; }

@keyframes zws-wave {
  0%, 40%, 100% { height: 8px; opacity: 0.6; }
  20% { height: 28px; opacity: 1; }
}

.update-container .alert-info {
  background: linear-gradient(90deg,#eef6ff 0%, #f7fbff 100%);
  border-color: #dbe8ff;
  color: #234a8f;
}

.update-container .bi {
  color: var(--zws-pink);
}

/* Font picker modal */
#modalPolice .modal-content {
    background: linear-gradient(165deg, #ffffff 0%, #f7f9fe 100%);
    color: #243247;
    border: 1px solid #d6dfef;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(24, 39, 75, 0.16);
}

#modalPolice .modal-header {
    background: #f7faff;
    color: #243247;
    border-bottom: 1px solid #e3eaf5;
}

#modalPolice .modal-title {
    color: #243247;
    font-weight: 700;
}

#modalPolice .modal-header .btn-close {
    opacity: 0.65;
}

#modalPolice .modal-footer {
    background: #f7faff;
    border-top: 1px solid #e3eaf5;
}

#modalPolice .form-label,
#modalPolice .form-check-label {
    color: #2a3a52;
}

#modalPolice .form-control {
    background-color: #ffffff;
    color: #1f2a3b;
    border: 1px solid #cfd8e8;
    border-radius: 10px;
}

#modalPolice .form-control:focus {
    border-color: #c55a93;
    box-shadow: 0 0 0 0.2rem rgba(230, 25, 131, 0.14);
}

#modalPolice .liste-boite {
    border: 1px solid #d1dbe9;
    background: #ffffff;
    color: #243247;
    border-radius: 10px;
}

#modalPolice .liste-item {
    color: #2a3a52;
}

#modalPolice .liste-item:hover {
    background: rgba(46, 111, 207, 0.08);
}

#modalPolice .liste-item.selectionne {
    background: var(--table-selected-bg);
    color: #FFFFFF;
    font-weight: 600;
}

#modalPolice .couleur-puce {
    border-color: #7c8ea8;
}

#modalPolice #policeApercu {
    border: 1px solid #d1dbe9;
    border-radius: 10px;
}

.dispenser-list {
    font-family: Arial, sans-serif;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dispenser-item {
    font-size: 12px;
    cursor: pointer;
}

.dispenser-details {
    margin-bottom: 20px;
}

.dispenser-details .form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.dispenser-details .form-select {
    margin-bottom: 10px;
}

.dropzone.dragover {
    border-color: #000;
}

.dd-productid-autosave {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: relative;
    pointer-events: none;
    padding: 0;
    border: 0;
}

.dispenser-users-scroll {
    height: 100px;
    overflow-x: auto;
    overflow-y: auto;
}

.dispenser-users-panel {
    padding: 0.25rem 0.5rem;
}

.dispenser-users-panel .form-check {
    padding-left: 0;
    margin-bottom: 0.15rem;
    flex-wrap: nowrap;
    width: max-content;
}

.dispenser-users-panel .form-check .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    flex: 0 0 auto;
}

.dispenser-users-panel .form-check .form-check-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.dispenser-product-input-row {
    position: relative;
    display: block !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-product-input-row > .form-control.form-control-sm {
    width: 100%;
}

.dispenser-details .dropzone,
.dispenser-details .input-group.input-group-sm.my-3 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-details .dropzone .draggable {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dispenser-details .dispenser-product-input-row .icon-container,
.dispenser-details .input-group.input-group-sm.my-3 .icon-container {
    position: absolute;
    left: calc(100% + 0.35rem);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 2;
    white-space: nowrap;
}

.dispenser-details .input-group.input-group-sm.my-3 > .input-group-text {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.dispenser-details .input-group.input-group-sm.my-3 > .form-control.plu-input,
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.volume-input,
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.plu-input:not(:last-child),
.dispenser-details .input-group.input-group-sm.my-3 > .form-control.volume-input:not(:last-child) {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}