@import url('./components/data-grid.css');
@import url('./components/vaadin-button.css');

/* ----- Login Styling Start ----- */

/* Remove the brand banner */
vaadin-login-overlay-wrapper::part(brand){
    display: none;
}

/* Login background styling - doesn't seem to work from netbeans'*/
/*vaadin-login-overlay-wrapper::part(backdrop) {
    background: url("./img/login-bg.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}*/

/* Login background styling works when deployed */
vaadin-login-overlay-wrapper::part(backdrop) {
    background: url("./images/login-bg.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Add spacing from title */
vaadin-login-form-wrapper::part(form-title){
    margin-bottom: 20px;
}

vaadin-login-form-wrapper::part(form) {
  row-gap: var(--lumo-space-s);
}

vaadin-login-form-wrapper vaadin-text-field,
vaadin-login-form-wrapper vaadin-password-field {
  margin-block-end: var(--lumo-space-m);
}

/* ----- Login Styling End ----- */

/* Styles for iron-overlay-backdrop with class "opened" */
iron-overlay-backdrop.opened {
    opacity: 0 !important;
}

/* Styles for vaadin-chart with ID "chart" */
vaadin-chart #chart {
    width: 100%;
}

/* ----- Tab styling Start ----- */

/* Styles for vaadin-tabs with class "analysis-tabs" */
vaadin-tabs.analysis-tabs vaadin-tab {
    padding: 0.5em 2em;
    background: #fff;
    border: 1px solid rgba(137, 142, 162, 0.3);
    border-left: 0;
    margin: 0 !important;
    cursor: pointer;
}

vaadin-tabs.analysis-tabs vaadin-tab[selected] {
                color: #fff;
                background: var(--lumo-primary-color);
            }

vaadin-tabs.analysis-tabs vaadin-tab:first-of-type {
    border-left: 1px solid rgba(137, 142, 162, 0.3);
    border-radius: 5px 0 0 5px;
}

vaadin-tabs.analysis-tabs vaadin-tab:last-of-type {
    border-radius: 0 5px 5px 0;
}

/* ----- Tab styling End ----- */

/* ----- Input Styles Start ----- */

/* General styles for input-field part */
vaadin-text-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-password-field::part(input-field) {
    background-color: #fff !important;
    border: 1px solid rgba(137, 142, 162, 0.3);
}

/* For .in-grid host */
vaadin-text-field.in-grid::part(input-field),
vaadin-text-area.in-grid::part(input-field),
vaadin-password-field.in-grid::part(input-field) {
    background-color: transparent !important;
}

/* For .quantity-selector-field host */
vaadin-text-field.quantity-selector-field::part(input-field),
vaadin-text-area.quantity-selector-field::part(input-field),
vaadin-password-field.quantity-selector-field::part(input-field) {
    background: transparent !important;
    border: none;
}

/* For readonly quantity-selector-field */
vaadin-text-field.quantity-selector-field[readonly]::part(input-field)::after,
vaadin-text-area.quantity-selector-field[readonly]::part(input-field)::after,
vaadin-password-field.quantity-selector-field[readonly]::part(input-field)::after {
    border: none;
}

/* For readonly quantity-field */
vaadin-integer-field#quantity[readonly] > input {
    text-align: center;
}

/* Adjusting height */
vaadin-text-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-password-field::part(input-field) {
    height: 30px;
}

vaadin-text-field::part(value),
vaadin-text-area::part(value),
vaadin-password-field::part(value) {
    font-weight: 500;
}

/* For hosts with has-label */
vaadin-text-field[has-label],
vaadin-text-area[has-label],
vaadin-password-field[has-label] {
    padding-top: 0;
}

/* For borderless */
vaadin-text-field.borderless::part(input-field),
vaadin-text-area.borderless::part(input-field),
vaadin-password-field.borderless::part(input-field) {
    background: transparent;
    border: none;
}

/* For .filters[readonly] */
vaadin-text-field.filters[readonly]::part(input-field),
vaadin-text-area.filters[readonly]::part(input-field),
vaadin-password-field.filters[readonly]::part(input-field) {
    background: #fff;
    border: none;
    height: 30px;
}

vaadin-text-field.filters[readonly]::part(input-field)::after,
vaadin-text-area.filters[readonly]::part(input-field)::after,
vaadin-password-field.filters[readonly]::part(input-field)::after {
    border: 1px solid rgba(137, 142, 162, 0.3);
}

/* Readonly styles */
vaadin-text-field[readonly]::part(value),
vaadin-text-area[readonly]::part(value),
vaadin-password-field[readonly]::part(value) {
    padding: 0;
}

vaadin-text-field[readonly]::part(input-field),
vaadin-text-area[readonly]::part(input-field),
vaadin-password-field[readonly]::part(input-field) {
    background: #fff;
    border: none;
}

/* Text Area Styles */
vaadin-text-area::part(input-field) {
    padding-top: 10px;
}

/* ----- Input Styles End ----- */

/* ----- Grid Styles Start ----- */

/* General styles for vaadin-grid */
vaadin-grid {
    --_lumo-grid-border-color: rgba(184, 205, 216, 0.3);
    --_lumo-grid-secondary-border-color: rgba(184, 205, 216, 0.3);
    --_lumo-grid-selected-row-color: transparent;
    background: transparent !important;
}

/* Styles for selected rows (non-reordering) */
vaadin-grid:not([reordering])::part(row)[selected]::part(body-cell):not([part~="details-cell"]) {
    box-shadow: none;
    border: none;
    background: none !important;
}

/* Custom styles for header cells in .custom grids */
vaadin-grid.custom::part(row):only-child::part(header-cell) {
    background-color: var(--ghost-color);
}

/* Selected row styles for .custom grids */
vaadin-grid.custom:not([reordering])::part(row)[selected]::part(cell)::slotted(vaadin-grid-cell-content) {
    background: #fff;
    box-shadow: 7px 2px 15px rgba(0, 0, 0, 0.1);
    color: #4A4A4A;
    font-weight: 500;
}

/* General cell content styles for .custom grids */
vaadin-grid.custom::part(cell)::slotted(vaadin-grid-cell-content) {
    padding: 0;
    background-color: var(--ghost-color);
    transition: box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Header cell height in .custom grids */
vaadin-grid.custom::part(row):only-child::part(header-cell) {
    min-height: 0;
}

/* Body cell styles in .custom grids */
vaadin-grid.custom::part(body-cell) {
    padding-top: 5px;
}

vaadin-grid.custom.order-completion-grid::part(body-cell) {
    padding-bottom: 0;
    padding-top: 12px;
}

/* General cell background for .custom grids */

/* Hide focus ring on columns */
vaadin-grid[navigating]::part(cell):focus::before {
    box-shadow: none !important;
}

/* Remove top border for cells in .custom grids */
vaadin-grid.custom::part(cell):not([part~="details-cell"]) {
    border-top: none !important;
}

/* Footer cell background for grids with row borders */
vaadin-grid:not([theme~="no-row-borders"])::part(row):first-child::part(footer-cell) {
    background-color: var(--ghost-color);
}

/* Responsive adjustments for .custom grids */
@media (max-width: 1400px) {
    vaadin-grid.custom::part(body-cell) {
        padding-top: 5px;
    }
}

/* ----- Grid Styles End ----- */

/* ----- Button Styles Start ----- */

/* Styles for vaadin-button inside vaadin-upload */
vaadin-upload vaadin-button {
    border: 1px solid var(--lumo-primary-text-color);
    background: transparent;
}

/* General styles for vaadin-button */
vaadin-button {
    box-shadow: none;
    border: 1px solid transparent;
    min-width: initial;
    margin: 0;
    font-weight: 300;
}

vaadin-button[theme~="primary"][disabled] {
  background-color: #e0e0e0;
  color: #999;
}

vaadin-button[theme~="error"][disabled] {
  background-color: #f5c2c7;
  color: #842029;
}

/* Styles for vaadin-button with "primary" theme */
vaadin-button[theme~="primary"] {
    background-color: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
    height: 30px;
    padding: 0 20px;
    font-weight: 400;
    position: relative;
}

/* Styles for vaadin-button with "secondary" theme */
vaadin-button[theme="secondary"] {
    border: 1px solid var(--lumo-primary-color);
    background: transparent;
}

/* Styles for vaadin-button with "tertiary" or "tertiary-inline" themes */
vaadin-button[theme="tertiary"], 
vaadin-button[theme="tertiary-inline"] {
    font-weight: 500;
    height: 30px;
    margin: 0;
}

/* Styles for vaadin-button with the "danger" class */
vaadin-button.danger {
    color: var(--lumo-error-color);
}

/* Styles for vaadin-button with the "grayed" class */
vaadin-button.grayed {
    color: #eaeaea;
}

/* Styles for vaadin-button with specific IDs and [hidden] attribute */
vaadin-button#minus[hidden], 
vaadin-button#plus[hidden] {
    visibility: hidden;
    display: block !important;
}

/* Styles for vaadin-button with the "properties-button" class */
vaadin-button.properties-button {
    padding: 0;
    color: var(--default-text-color);
    margin: 0;
    height: 35px;
}

/* Media query for smaller screens */
@media (max-width: 1400px) {
    vaadin-button.properties-button {
        padding: 0;
        color: var(--default-text-color);
        margin: 0;
        height: 30px;
    }
}

/* ----- Button Styles End ----- */

/* ----- vcf-autocomplete Styles Start ----- */

/* Styles for vaadin-text-field inside vcf-autocomplete */
vcf-autocomplete vaadin-text-field {
    width: 400px;
}

/* Styles for the options container inside vcf-autocomplete */
vcf-autocomplete::part(options-container) {
    --_lumo-item-selected-icon-display: none;
    width: 400px;
}

/* Styles for individual options inside vcf-autocomplete */
vcf-autocomplete::part(option) {
    --_lumo-list-box-item-padding-left: calc(0.375em + var(--lumo-border-radius) / 4 - 1px + 0.25em);
    width: 400px;
}

/* Styles for the clear button inside vcf-autocomplete */
vcf-autocomplete::part(clear) {
    --lumo-button-size: 15px;
    --lumo-icon-size-m: 19px;
    color: var(--lumo-contrast-60pct);
}

/* ----- vcf-autocomplete Styles End ----- */

/* ----- vaadin-dialog-overlay Styles Start ----- */

/* Styles for the dialog overlay */
vaadin-dialog-overlay::part(overlay) {
    width: auto !important;
    height: auto !important;
    background-color: var(--lumo-base-color);
    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
    border-radius: var(--lumo-border-radius-m);
    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
    color: var(--lumo-body-text-color);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    font-weight: 400;
    line-height: var(--lumo-line-height-m);
    letter-spacing: 0;
    text-transform: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* General dialog styles */
.dialog {
    max-width: 500px;
    position: relative;
}

.dialog > * {
    width: 100%;
}

/* Small and large dialog sizes */
.dialog.dialog-small {
    width: 300px;
    max-width: 100%;
}

.dialog.dialog-large {
    width: 1000px;
    max-width: 1000px;
}

/* Text field styles in small dialogs */
.dialog.dialog-small vaadin-combo-box {
    width: 100%;
}

/* Dialog title styles */
.dialog-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.dialog-title.success {
    color: #2ecc71;
}

/* Image styles in dialog */
.dialog .install-image {
    max-width: 200px;
    margin: 20px auto;
    display: block;
}

/* Content styles inside dialog */
vaadin-dialog-overlay::part(content) {
    padding: 20px;
}

vaadin-dialog-overlay::part(content) p {
    color: var(--text-color);
}

/* Box group and alignment styles */
.box-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.right-group {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    flex: 1 0 auto;
}

.box-group > *:not(:last-child),
.right-group > *:not(:last-child) {
    margin-right: 10px;
}

/* Divider styles */
.divider {
    margin: 20px 0;
    border-color: transparent;
    border-top-color: #DDE7EC;
    opacity: 0.3;
}

/* Text alignment */
.text-right {
    text-align: right;
}

/* Data table styles */
.dialog .data-table {
    padding: 20px 0;
}

.dialog .data-table label {
    width: 100px;
    font-weight: 600;
    margin-right: 10px;
}

.dialog .data-table .two-columns-row,
.dialog .data-table .one-column-row {
    display: flex;
    padding: 5px 0;
}

.dialog .data-table .two-columns-row > div {
    flex: 0 0 50%;
}

.dialog .data-table .one-column-row > div {
    flex: 0 0 100%;
}

/* Button group styles */
.dialog-button-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.dialog-button-group > *:not(:last-child) {
    margin-right: 10px;
}

/* Product list styles */
.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-list li {
    padding: 10px 0;
}

.product-list li:not(:last-child) {
    border-bottom: solid 1px var(--line-color);
}

.product-list li a {
    display: flex;
    text-decoration: none;
}

.product-list li .img-box {
    width: 120px;
    margin-right: 20px;
}

.product-list li .img-box img {
    max-width: 100%;
}

.product-list li .text-box {
    flex-grow: 1;
}

/* Text and product-specific styles */
.product-name {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: var(--text-color);
}

.product-code {
    color: var(--text-color);
    font-weight: 700;
}

.product-price {
    color: var(--text-color);
    font-weight: bold;
    font-size: 16px;
}

/* Flex group styles */
.text-group,
.button-group {
    display: flex;
}

.button-group vaadin-button {
    margin: 0;
}

.space-between {
    justify-content: space-between;
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    .box-group {
        flex-wrap: wrap;
    }

    .right-group {
        padding-top: 5px;
    }

    .dialog .data-table .two-columns-row,
    .dialog .data-table .one-column-row {
        flex-wrap: wrap;
        padding: 0;
    }

    .dialog .data-table .two-columns-row > div,
    .dialog .data-table .one-column-row > div {
        flex: 0 0 100%;
        padding-bottom: 5px;
    }
}

/* ----- Dialog Styles End ----- */

/* ----- General Styling Start ----- */

/* Reset styles for common elements */
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* Specific element styles */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 500;
}

body {
    line-height: 1.6;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
    content: '';
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Custom Components */
.total-items-display {
    width: 100%;
    height: 30px;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.total-items-display .total-label {
    font-weight: bold;
}

.total-items-display .total-value {
    padding-left: 13px;
    font-weight: 100;
}

.card {
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.searchBarButtons {
    margin: 2px;
}

.spacer {
    height: 20px;
}

.spacer-short {
    height: 10px;
}

.spacer-tall {
    height: 40px;
}

.spacer-giant {
    height: 80px;
}

.full-width {
    width: 100%;
}

.with-overlay::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.with-overlay paper-dialog-scrollable {
    background-color: #fff;
    position: relative;
}

vaadin-grid .row-item .link {
    color: var(--lumo-primary-text-color);
    cursor: pointer;
    text-decoration: underline;
}

vaadin-grid .row-item .progress-bar-label {
    width: 50px;
    margin-right: 5px;
}

/* Additional styling for vaadin-grid and other components */
.negative-percentage {
    color: red;
}

vaadin-grid .row-item .stockdetail.tooltip {
    width: 300px;
    white-space: normal;
}

vaadin-grid .row-item .stockdetail vaadin-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

/* Scoped for vaadin-icon styles */
vaadin-grid .row-item .stockdetail.grey-info-style vaadin-icon {
    color: var(--text-color);
}

vaadin-grid .row-item .stockdetail.red-info-style vaadin-icon {
    color: var(--lumo-error-color);
}

vaadin-grid .row-item .stockdetail.blue-info-style vaadin-icon {
    color: var(--lumo-primary-color);
}

/* Custom component states */
.status {
    width: 8px;
    height: 8px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 100%;
}

.status.green {
    background: var(--lumo-success-color);
}

.status.red {
    background: var(--lumo-error-color);
}

.status.blue {
    background: var(--lumo-primary-color);
}

.status.orange {
    background: orange;
}

.status.yellow {
    background: #f39c12;
}

/* Vaadin button notifications */
vaadin-button .notes-notification {
    position: absolute;
    top: 1px;
    right: 0px;
    font-size: 6px;
    color: var(--lumo-error-color);
}

.row-item {
    width: 100%;
    padding: 18px 10px;
    text-align: left;
    display: flex;
    align-items: center;
    height: 30px;
}

.row-item .status {
    width: 8px;
    height: 8px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 100%;
}

.row-item .status.green {
    background: var(--lumo-success-color);
}

.row-item .status.red {
    background: var(--lumo-error-color);
}

.row-item .status.blue {
    background: var(--lumo-primary-color);
}

.row-item .status.orange {
    background: orange;
}

.row-item .status.yellow {
    background: #f39c12;
}

.row-item.check-icon vaadin-icon {
    color: var(--lumo-success-color);
    height: 15px;
    width: 15px;
}

#filtersdialog, .dropdowndialog {
    margin: 8px -5px;
    margin: 0;
    margin-bottom: 15px;
    width: 350px;
    overflow: auto;
    color: var(--text-color);
}

#filtersdialog .dialog-title, .dropdowndialog .dialog-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    margin-bottom: 15px;
    color: var(--text-color);
}

#filtersdialog paper-dialog-scrollable, .dropdowndialog paper-dialog-scrollable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin: 0;
}

.popover-scrollable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    width: 350px;
    overflow: auto;
    color: var(--text-color);
}

.popover-scrollable vaadin-combo-box ,
.popover-scrollable vaadin-date-picker {
     width: 100%;
}

#filtersdialog paper-dialog-scrollable > vaadin-button[theme="tertiary"], .dropdowndialog paper-dialog-scrollable > vaadin-button[theme="tertiary"] {
    padding: 0;
    margin: 0;
}

#filtersdialog vaadin-combo-box, .dropdowndialog vaadin-combo-box,
#filtersdialog vaadin-date-picker, .dropdowndialog vaadin-date-picker {
    margin-bottom: 10px;
    width: 100%;
}

.properties-button > vaadin-icon {
    width: 15px;
    height: 15px;
    padding-right: 3px;
}

.properties-button.controlled-drug vaadin-icon {
    color: #2ecc71;
}

.properties-button.preferred-product vaadin-icon {
    color: var(--lumo-error-color);
}

.properties-button.promoted-drug vaadin-icon {
    color: #f39c12;
}

.properties-button.fridge-item vaadin-icon {
    color: #3498db;
    height: 18px;
}

.properties-button.human-drug vaadin-icon {
    color: var(--lumo-error-color);
}

.properties-button.import-certificate vaadin-icon {
    color: #000000;
}

.properties-button.hidden-drug vaadin-icon {
    color: var(--lumo-error-color);
}

.properties-button.previously-ordered vaadin-icon {
    color: var(--lumo-success-color);
}

.properties-button.vat-relief vaadin-icon {
    color: var(--lumo-success-color);
}

/* Grouping styles */
.box-group,
.text-group,
.button-group {
    display: flex;
}

.box-group > *:not(:last-child),
.text-group > *:not(:last-child),
.button-group > *:not(:last-child),
.input-group > *:not(:last-child) {
    margin-right: 20px;
}

/* Layout and alignment */
.right-group {
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
    display: flex;
    align-items: baseline;
}

.right-group-stock {
    justify-content: flex-end;
    align-items: baseline;
    width: auto;
}

.right-group > *:not(:last-child) {
    margin-right: 10px;
}

.space-between {
    justify-content: space-between;
}

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

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

/* Responsive Layout */
.responsive-wrapping {
    flex-wrap: wrap;
}

.responsive-wrapping .product-tile-section {
    flex: 1 1 auto;
    min-width: 250px;
}

/* Page Content */
.page-content {
    display: flex;
    padding: 20px 20px 25px;
    flex: 1 0 auto;
}

.page-content .wrap {
    height: 100%;
}

/* Content Header */
.content-header {
    background-color: var(--ghost-color);
    position: relative;
    padding: 10px 20px;
    box-shadow: 0 0 125px rgba(90, 102, 109, .2);
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

/* Input Groups */
.input-group {
    display: flex;
    align-items: baseline;
    flex: 1 0 auto;
}

.input-group .search {
    flex: 1 0 auto;
    max-width: 300px;
    margin-right: 20px;
}

.input-group .filters {
    flex: 1 0 auto;
    max-width: 300px;
}

.input-group .filters > vaadin-button {
    margin: 0;
    padding: 0;
}

.input-group label {
    margin-right: 10px;
}

/* Buttons */
.properties-button {
    padding-right: 5px;
}

/* Collapsible Containers */
.collapsible-container {
    flex: 0 0 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}

#show-order,
#hide-order {
    background: transparent;
    border: 1px solid var(--lumo-primary-color);
    margin: 0;
}

.order-grid-container {
    flex: 1 0 auto;
    padding-right: 10px;
    margin-right: 10px;
    width: calc(100% - 360px);
}

.order-completion-grid {
    height: 100%;
}

.order-completion-grid .row-item {
    height: 50px;
    padding: 15px 10px;
}

.order-summary-container {
    flex: 0 0 300px;
}

.order-summary {
    background: #fff;
    padding: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    overflow: auto;
}

.order-summary-title {
    margin-bottom: 10px;
}

.order-summary-text {
    margin-bottom: 20px;
}

.order-summary-text ol {
    list-style-type: decimal;
    padding: 10px 0 10px 20px;
}

.order-summary-controlled-drug-link {
    text-decoration: none;
    color: var(--lumo-primary-color);
}

.order-summary-total {
    text-align: right;
    margin-top: 30px;
}

.order-summary-total .price {
    font-weight: 700;
    font-size: 18px;
    margin-left: 10px;
}

.collapsible-container-close-header {
    padding: 10px 15px;
    display: none;
}

.alternative-row {
    background-color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
}

.alternative-row .label-column {
    width: 120px;
}

.alternative-row .name-column {
    width: 200px;
    flex-grow: 1;
}

.alternative-row .properties-column {
    width: 250px;
}

.alternative-row .price-column {
    width: 120px;
    flex: 0 0 100px;
    text-align: right;
}

.alternative-row .add-to-order-column {
    width: 140px;
}

.alternative-row .more-details-column {
    width: 140px;
}

.alternative-row>* {
    padding: 0 10px;
}

.alternative-row .label-column {
    color: var(--lumo-success-text-color);
}

vaadin-tabs.analysis-tabs vaadin-tab {
    padding: 0.25em 1em;
    background: #fff;
    border: 1px solid rgba(137, 142, 162, 0.3);
    border-left: 0;
    margin: 0 !important;
    cursor: pointer;
}

vaadin-tabs.analysis-tabs vaadin-tab[selected] {
    color: #fff;
    background: var(--lumo-primary-color);
}

vaadin-tabs.analysis-tabs vaadin-tab:first-of-type {
    border-left: 1px solid rgba(137, 142, 162, 0.3);
    border-radius: 5px 0 0 5px;
}

vaadin-tabs.analysis-tabs vaadin-tab:last-of-type {
    border-radius: 0 5px 5px 0;
}

.collapsible-container-full {
    position: fixed;
    width: 400px;
    right: -400px;
    z-index: 11;
    top: 0;
    bottom: 0;
    transition: right .2s ease-in-out;
    background-color: var(--ghost-color);
    box-shadow: 0px 0 45px rgba(90, 102, 109, .5);
}

.collapsible-container-header-full {
    flex: 0 0 80px;
    display: flex;
    padding: 10px 18px;
}

.collapsible-container-full.open {
    right: 0;
}

.collapsible-container-full.closed {
    right: -400px;
}

.collapsible-container-full.open .collapsible-container-header {
    display: flex;
}

.collapsible-container-close-header-full {
    display: flex;
    justify-content: flex-end;
}

.collapsible-container-full.open .order-items {
    height: calc(100% - 250px);
}

@media (max-width: 320px) {
    .input-group .search,
    .input-group .filters {
        width: 100% !important;
        max-width: 100%;
        min-width: 100%;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .product-list-controls .search {
        margin-right: initial !important;
    }
}

@media (max-width: 600px) {
    /* Content header */
    .collapsible-container-full.open {
        width: 95%;
        max-width: 400px;
    }

    .collapsible-container-close-header-full {
        padding: 0 15px;
        padding-top: 7px;
    }

    .order-list-pricing-footer {
        padding: 5px 15px;
        box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.05);
        z-index: 1;
    }

    .order-list-controls {
        padding: 0px 15px 5px !important;
    }

    .order-list-controls-footer {
        padding: 5px 15px;
    }

    .order-list-pricing-footer .price {
        font-size: 14px;
    }

    .settings-toolbar > *:not(:last-child) {
        margin-right: initial !important;
    }

    .content-header, .settings-toolbar {
        flex-wrap: wrap;
        height: auto;
    }

    .input-group .filters {
        margin-right: 0;
    }

    .input-group .search,
    .input-group .filters {
        width: initial;
        max-width: initial;
        min-width: initial;
    }

    .input-group vaadin-text-field {
        padding: 0;
    }

    .content-header .right-group, .settings-toolbar .right-group {
        width: 100%;
        padding-top: 5px;
    }

    .hide-on-mobile {
        display: none;
    }
}

@media (max-width: 1200px) {
    .collapsible-container {
        position: fixed;
        width: 400px;
        right: -400px;
        z-index: 10;
        top: 0;
        bottom: 0;
        transition: all 0.2s ease-in-out;
        background-color: var(--ghost-color);
        box-shadow: 0px 0 45px rgba(90, 102, 109, 0.5);
    }

    .collapsible-container-header {
        flex: 0 0 80px;
        display: flex;
        padding: 10px 18px;
    }

    .collapsible-container.open {
        right: 0;
    }

    .collapsible-container.closed {
        right: -400px;
    }

    .collapsible-container.openleft {
        left: 0;
    }

    .collapsible-container.closedleft {
        left: -400px;
    }

    .collapsible-container.open .collapsible-container-header {
        display: flex;
    }

    .collapsible-container-close-header {
        display: flex;
        justify-content: flex-end;
    }

    .collapsible-container.open .order-items {
        height: calc(100% - 400px);
    }

    /* Order completion page */

    .order-grid-container {
        margin-right: 0;
    }

    .order-summary-container {
        padding-left: 0;
    }

    .order-summary {
        box-shadow: none;
        background: transparent;
        padding: 0 20px;
    }

    .page-content {
        padding: 10px;
    }

    .input-group .search {
        margin-right: 10px;
    }

    .input-group .search:last-child {
        margin-right: 0 !important;
    }

    .product-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 1400px) {
    vaadin-grid vaadin-grid-cell-content > vaadin-checkbox {
        padding: 5.5px 15px;
        height: 25px;
        line-height: 25px;
    }

    vaadin-grid vaadin-grid-cell-content > vaadin-checkbox.vaadin-grid-select-all-checkbox {
        padding: 0px 15px;
        height: 35px;
        line-height: 25px;
    }
}

.cookie-banner {
    position: fixed;
    bottom: 0;                  /* or top: 0; if you want top banner */
    left: 0;
    width: 100%;
    padding: 1rem;
    background: #27BDBE;
    color: white;
    text-align: center;
    z-index: 999;             /* HIGH priority stack */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-banner span{
    color: #0B3B3B;
}

.cookie-banner span a{
    color: #9C27B0;
}

.cookie-banner vaadin-button{
    background-color: #02103C;
}



.cookie-banner .cookie-accept {
    margin-left: 1rem;
}

/* ----- General Styling End ----- */