/* Account pages (account, users, user, admin, activation, stores, store-tool, test-ipos, security): page styles on top of fk-theme.css (fk-* components are defined there, do not redefine them). */

/* =====================================================================================================
   Every root of the area carries .fk-acc (the uib modal container too) plus a page class:
   .fk-page-account, .fk-page-users, .fk-page-user, .fk-page-admin, .fk-page-activation, .fk-page-stores,
   .fk-page-testipos, .fk-page-storetool, .fk-acc-modal. Rules are scoped under them.

   Contents
     1. Area: forms inside cards, validation messages, badges on <label>, icon buttons, empty states
     2. Grid lists (users, invoices): header row with the sort links + rows
     3. Tables in cards (stores, store tool, test iPOS)
     4. Pages: account, user, activation, stores, test iPOS, store tool
     5. Responsive
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Area
   ----------------------------------------------------------------------------------------------------- */

/* Form cards: the last field keeps its 1rem bottom margin, the body drops its bottom padding */
body.fk .fk-acc form.fk-card > .fk-card-body,
body.fk .fk-acc .fk-card-body.fk-acc-formbody {
    padding-bottom: 0;
}

/* Section head in the middle of a card (account: "Contact references") */
body.fk .fk-acc .fk-acc-midhead {
    border-top: 1px solid var(--fk-line);
}

/* Field validation messages (they were "alert-primary" spans: a blue strip glued to the field) */
body.fk .fk-acc .fk-acc-error {
    display: block;
    margin-top: 4px;
    color: var(--fk-bad-ink);
    font-size: .78rem;
    font-weight: 500;
}

/* Status badges are <label> elements (ng-show): no label margins, a bit larger in the page header */
body.fk .fk-acc label.fk-badge {
    margin: 0;
}

body.fk .fk-acc .fk-page-head label.fk-badge {
    padding: 5px 12px;
    font-size: .8rem;
}

/* Page subtitle as a paragraph */
body.fk .fk-acc p.fk-page-sub {
    margin-bottom: 0;
}

/* Square icon-only buttons (open, enable/disable, new user, search): as tall as a form control (38px),
   so a search button lines up with its inputs */
body.fk .fk-acc .btn.fk-acc-icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

body.fk .fk-acc .btn-sm.fk-acc-icon-btn {
    width: 32px;
    height: 32px;
}

/* Empty states without a label (no text may be added): an icon, shown only when the list has no row */
body.fk .fk-acc .fk-acc-empty {
    display: none;
}

body.fk .fk-acc .fk-acc-list:not(:has(.fk-acc-lrow)) > .fk-acc-empty,
body.fk .fk-acc .fk-acc-tablecard:not(:has(tbody tr)) > .fk-acc-empty {
    display: block;
}

body.fk .fk-acc .fk-acc-empty > .fa {
    margin-bottom: 0;
    font-size: 1.8rem;
    opacity: .45;
}

body.fk .fk-acc .fk-acc-nowrap {
    white-space: nowrap;
}

body.fk .fk-acc .fk-acc-strong {
    font-weight: 600;
}

body.fk .fk-acc .fk-acc-mono {
    font-family: var(--fk-mono);
    font-size: .85rem;
}

/* Acknowledgement boxes (account: "Agree", activation: the two confirmations) */
body.fk .fk-acc .fk-acc-agree,
body.fk .fk-acc .fk-acc-ack {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

body.fk .fk-acc .fk-acc-agree .form-check {
    margin: 0;
    padding-left: 26px;
}

/* same 16px box as the activation confirmations */
body.fk .fk-acc .fk-acc-agree .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    margin-left: -26px;
}

body.fk .fk-acc .fk-acc-agree .form-check-label {
    color: var(--fk-ink);
    font-size: .9rem;
}

body.fk .fk-acc .fk-acc-agree .fk-acc-error {
    margin-top: 6px;
}


/* -----------------------------------------------------------------------------------------------------
   2. Grid lists (users, invoices): the views keep their div rows (ng-repeat on a div), drawn as a table
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-acc .fk-acc-list {
    overflow: hidden;
}

body.fk .fk-acc .fk-acc-lhead,
body.fk .fk-acc .fk-acc-lrow {
    display: grid;
    align-items: center;
    column-gap: 16px;
    padding: 10px 16px;
}

body.fk .fk-acc .fk-acc-lhead > *,
body.fk .fk-acc .fk-acc-lrow > * {
    min-width: 0;
}

body.fk .fk-acc .fk-acc-lhead {
    background: var(--fk-soft);
    border-bottom: 1px solid var(--fk-line);
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* sort links: a small sort icon (glyph from the icon font, no text) */
body.fk .fk-acc .fk-acc-lhead a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

body.fk .fk-acc .fk-acc-lhead a:hover,
body.fk .fk-acc .fk-acc-lhead a:focus {
    color: var(--fk-ink);
}

body.fk .fk-acc .fk-acc-lhead a:focus {
    outline: none;
}

body.fk .fk-acc .fk-acc-lhead a:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

body.fk .fk-acc .fk-acc-lhead a::after {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: .45;
}

/* right-aligned column: icon before the label, the label stays flush with the numbers */
body.fk .fk-acc .fk-acc-lhead .fk-acc-c-amount a {
    flex-direction: row-reverse;
}

body.fk .fk-acc .fk-acc-lrow {
    border-top: 1px solid var(--fk-line);
    color: var(--fk-ink);
    font-size: .875rem;
}

body.fk .fk-acc .fk-acc-lhead + .fk-acc-lrow {
    border-top: 0;
}

body.fk .fk-acc .fk-acc-lrow:hover {
    background: var(--fk-soft);
}

/* Users: state | username | email | name | surname | group | open */
body.fk .fk-acc .fk-acc-urow {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .9fr) 110px 32px;
}

body.fk .fk-acc .fk-acc-fullname {
    display: contents;
}

body.fk .fk-acc .fk-acc-lrow .fk-acc-c-user {
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.fk .fk-acc .fk-acc-lrow .fk-acc-c-email {
    overflow-wrap: anywhere;
}

body.fk .fk-acc .fk-acc-c-open {
    text-align: right;
}

/* Enable/disable toggle: soft green = active user (click disables), soft red = disabled user */
body.fk .fk-acc .btn.fk-acc-state {
    border-color: transparent;
}

body.fk .fk-acc .btn.fk-acc-state.is-ok {
    background: var(--fk-ok-bg);
    color: var(--fk-ok-ink);
}

body.fk .fk-acc .btn.fk-acc-state.is-ok:hover {
    border-color: rgba(46, 158, 79, .45);
}

body.fk .fk-acc .btn.fk-acc-state.is-bad {
    background: var(--fk-bad-bg);
    color: var(--fk-bad-ink);
}

body.fk .fk-acc .btn.fk-acc-state.is-bad:hover {
    border-color: rgba(217, 48, 37, .45);
}

/* A disabled user's row is dimmed */
body.fk .fk-acc .fk-acc-lrow.fk-acc-urow:has(.fk-acc-state.is-bad:not(.ng-hide)) > :not(.fk-acc-c-state):not(.fk-acc-c-open),
body.fk .fk-acc .fk-acc-lrow.fk-acc-urow:has(.fk-acc-state.is-bad:not(.ng-hide)) > .fk-acc-fullname > * {
    opacity: .55;
}

/* Invoices: date | amount | (no action) */
body.fk .fk-acc .fk-acc-irow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
}

body.fk .fk-acc .fk-acc-c-amount {
    text-align: right;
}


/* -----------------------------------------------------------------------------------------------------
   3. Tables in cards
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-acc .fk-card > .table-responsive {
    border-radius: 0;
}

/* the hover fill of the last row stays inside the rounded corners */
body.fk .fk-acc .fk-acc-tablecard {
    overflow: hidden;
}

body.fk .fk-acc .fk-card > .table-responsive:last-child {
    border-radius: 0 0 var(--fk-r) var(--fk-r);
}

body.fk .fk-acc .fk-card > .table-responsive > .table thead th {
    border-bottom: 1px solid var(--fk-line);
}

body.fk .fk-acc .fk-card > .table-responsive > .table th:first-child,
body.fk .fk-acc .fk-card > .table-responsive > .table td:first-child {
    padding-left: 16px;
}

body.fk .fk-acc .fk-card > .table-responsive > .table th:last-child,
body.fk .fk-acc .fk-card > .table-responsive > .table td:last-child {
    padding-right: 16px;
}

body.fk .fk-acc .fk-acc-table thead th {
    vertical-align: middle;
    white-space: nowrap;
}

body.fk .fk-acc .fk-acc-table .fk-acc-col-check {
    width: 44px;
    padding-right: 0;
}

body.fk .fk-acc .fk-acc-table input[type="checkbox"],
body.fk .fk-page-testipos .table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Card head with a search form (and, on stores, the bulk action). The attached search button keeps
   Bootstrap's input-group joins: the input keeps its right border, so its focus border is complete. */
body.fk .fk-acc .fk-acc-search {
    flex: 1 1 260px;
    max-width: 360px;
    margin: 0;
}


/* -----------------------------------------------------------------------------------------------------
   4. Pages
   ----------------------------------------------------------------------------------------------------- */

/* 4.1 User: change of password = two joined fields and the button on one line */
body.fk .fk-page-user .fk-acc-pwd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
}

body.fk .fk-page-user .fk-acc-pwd .input-group-text {
    min-width: 72px;
    font-weight: 500;
}

/* 4.2 Activation */
body.fk .fk-page-activation .fk-acc-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    line-height: 1.55;
}

body.fk .fk-page-activation .fk-acc-note-icon {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 1rem;
    opacity: .8;
}

body.fk .fk-page-activation .fk-acc-gen {
    margin-bottom: 20px;
}

body.fk .fk-page-activation .fk-acc-key {
    margin-bottom: 16px;
}

body.fk .fk-page-activation .fk-acc-keyhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    min-height: 30px;
    margin-bottom: 6px;
}

body.fk .fk-page-activation .fk-acc-keylabel {
    color: var(--fk-ink-2);
    font-size: .82rem;
    font-weight: 600;
}

body.fk .fk-page-activation .fk-acc-keylabel b {
    color: var(--fk-bad-ink);
    font-weight: 700;
}

body.fk .fk-page-activation .fk-acc-keytext {
    font-family: var(--fk-mono);
    font-size: .78rem;
    line-height: 1.5;
    word-break: break-all;
    resize: vertical;
}

/* the private key: "do not lose it" emphasis (danger edge, as .fk-code.is-secret, on a light field) */
body.fk .fk-page-activation .fk-acc-keytext.fk-acc-secret {
    background-color: var(--fk-surface);
    border-color: rgba(217, 48, 37, .35);
    border-left: 3px solid var(--fk-bad);
    color: var(--fk-bad-ink);
}

body.fk .fk-page-activation .fk-acc-keytext.fk-acc-secret:focus {
    border-color: var(--fk-bad);
    box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

body.fk .fk-page-activation .fk-acc-acks {
    padding-bottom: 6px;
    border-top: 1px solid var(--fk-line);
}

body.fk .fk-page-activation .fk-acc-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--fk-ink);
    font-size: .9rem;
    line-height: 1.45;
    cursor: pointer;
}

body.fk .fk-page-activation .fk-acc-ack > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* Platform not active: the second confirmation has no checkbox (ng-show). Its text stays aligned with
   the first one, and the box is not clickable (as before, a click on the text toggles nothing). */
body.fk .fk-page-activation .fk-acc-ack:has(> input.ng-hide) {
    padding-left: 40px;
    cursor: default;
    pointer-events: none;
}

body.fk .fk-page-activation .fk-acc-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: var(--fk-warn-bg);
    border: 1px solid rgba(226, 179, 0, .35);
    border-radius: var(--fk-r-sm);
    color: var(--fk-warn-ink);
    font-size: .85rem;
    font-weight: 500;
}

/* 4.3 Stores */
body.fk .fk-page-stores .fk-acc-bulk {
    flex: 0 1 auto;
}

body.fk .fk-page-stores .fk-acc-bulk-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.fk .fk-page-stores .fk-acc-bulk-form > label {
    margin: 0;
    color: var(--fk-ink-2);
    font-size: .82rem;
}

body.fk .fk-page-stores .fk-acc-bulk-form > select {
    flex: 0 1 300px;
    width: 300px;
    min-width: 0;
}

body.fk .fk-page-stores .fk-acc-token {
    width: calc(18ch + 18px);
    padding: 3px 8px;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--fk-ink-2);
}

/* four actions on two lines: a 2 x 2 grid with aligned columns (every button fills its cell) */
body.fk .fk-page-stores .fk-acc-rowactions {
    display: inline-grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px;
}

body.fk .fk-page-stores .fk-acc-rowactions > .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

body.fk .fk-page-stores .fk-acc-rowactions .fa {
    color: var(--fk-muted);
}

body.fk .fk-page-stores .fk-acc-rowactions .btn-outline-danger .fa,
body.fk .fk-page-stores .fk-acc-rowactions .btn:hover .fa {
    color: inherit;
}

/* 4.4 Test iPOS */
body.fk .fk-page-testipos .fk-acc-title-icon {
    margin-right: 4px;
    color: var(--fk-muted);
    font-size: .9em;
}

body.fk .fk-page-testipos .fk-page-sub code {
    padding: 1px 4px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: 6px;
    color: var(--fk-ink-2);
    font-size: .78rem;
}

body.fk .fk-page-testipos .fk-acc-result {
    margin-bottom: 16px;
}

body.fk .fk-page-testipos .fk-acc-result .fk-kv {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin-top: 8px;
}

body.fk .fk-page-testipos .fk-acc-result .fk-kv-k {
    color: inherit;
    opacity: .8;
}

body.fk .fk-page-testipos .fk-acc-result code {
    padding: 1px 6px;
    background: rgba(255, 255, 255, .65);
    border-radius: 6px;
    color: inherit;
    word-break: break-all;
}

body.fk .fk-page-testipos .fk-acc-col-accept {
    width: 96px;
}

body.fk .fk-page-testipos .fk-acc-col-required {
    width: 120px;
}

/* 4.5 Store tool (shop tablets: large touch targets) */
body.fk .fk-page-storetool .fk-acc-search-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
}

body.fk .fk-page-storetool .fk-acc-search-2 > .form-control {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

body.fk .fk-page-storetool .fk-acc-mono-cell {
    color: var(--fk-ink-2);
    font-family: var(--fk-mono);
    font-size: .76rem;
    white-space: nowrap;
}

body.fk .fk-page-storetool .fk-acc-paper-policy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--fk-ink-2);
    font-size: .875rem;
}

body.fk .fk-page-storetool .fk-acc-paper-policy b {
    color: var(--fk-ink);
    font-weight: 600;
}

body.fk .fk-page-storetool .fk-acc-paper-label {
    margin-bottom: 8px;
}

/* A treatment = a whole tappable row (the label covers the box, the checkbox sits in its padding) */
body.fk .fk-page-storetool .fk-acc-cond {
    margin-bottom: 8px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-sm);
}

body.fk .fk-page-storetool .fk-acc-cond:last-child {
    margin-bottom: 16px;
}

body.fk .fk-page-storetool .fk-acc-cond:has(.form-check-input:checked) {
    border-color: var(--fk-accent);
    box-shadow: inset 0 0 0 1px var(--fk-accent);
}

body.fk .fk-page-storetool .fk-acc-cond .form-check {
    position: relative;
    margin: 0;
    padding: 0;
}

body.fk .fk-page-storetool .fk-acc-cond .form-check-input {
    top: 13px;
    left: 14px;
    width: 18px;
    height: 18px;
    margin: 0;
}

body.fk .fk-page-storetool .fk-acc-cond .form-check-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 44px;
    padding: 10px 12px 10px 44px;
    color: var(--fk-ink);
    font-size: .9rem;
    cursor: pointer;
}

body.fk .fk-page-storetool .fk-acc-cond-channels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 0 12px 12px 44px;
}

body.fk .fk-page-storetool .fk-acc-cond-channels-label {
    color: var(--fk-muted);
    font-size: .8rem;
}

/* contact channels as toggle chips */
body.fk .fk-page-storetool .fk-acc-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    margin: 0;
    padding: 4px 12px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-pill);
    color: var(--fk-ink);
    font-size: .82rem;
    cursor: pointer;
}

body.fk .fk-page-storetool .fk-acc-channel:has(input:checked) {
    background: var(--fk-accent-soft);
    border-color: var(--fk-accent);
    color: var(--fk-accent);
}

body.fk .fk-page-storetool .fk-acc-channel > input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

body.fk .fk-page-storetool .form-control-file {
    width: 100%;
    padding: 6px;
    background: var(--fk-soft);
    border: 1px dashed var(--fk-line-2);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink-2);
    font-size: .85rem;
}

body.fk .fk-page-storetool .form-control-file::file-selector-button {
    margin-right: 10px;
    padding: 6px 14px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

body.fk .fk-page-storetool .fk-acc-progress {
    color: var(--fk-muted);
    font-size: .85rem;
}

/* touch screens: 44px targets */
@media (pointer: coarse) {
    body.fk .fk-page-storetool .form-control,
    body.fk .fk-page-storetool .btn {
        min-height: 44px;
    }

    body.fk .fk-page-storetool .btn.fk-acc-icon-btn {
        width: 44px;
        height: 44px;
    }

    body.fk .fk-page-storetool .fk-acc-channel {
        min-height: 40px;
    }
}


/* -----------------------------------------------------------------------------------------------------
   5. Responsive
   ----------------------------------------------------------------------------------------------------- */
/* Narrow screens: the tables keep readable columns and scroll inside .table-responsive */
@media (max-width: 991.98px) {
    body.fk .fk-page-stores .fk-acc-table {
        min-width: 1080px;
    }

    body.fk .fk-page-storetool .fk-acc-table {
        min-width: 600px;
    }

    /* tablets: the user id may break over two lines instead of pushing the open button out */
    body.fk .fk-page-storetool .fk-acc-mono-cell {
        min-width: 150px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {
    /* Users: the header becomes a row of sort chips, each user a compact block */
    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow {
        display: flex;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow::-webkit-scrollbar {
        display: none;
    }

    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow > .fk-acc-c-state,
    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow > .fk-acc-c-open {
        display: none;
    }

    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow > div {
        flex: 0 0 auto;
    }

    body.fk .fk-acc .fk-acc-lhead.fk-acc-urow a {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        background: var(--fk-surface);
        border: 1px solid var(--fk-line);
        border-radius: var(--fk-r-pill);
        white-space: nowrap;
    }

    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow {
        grid-template-columns: 32px minmax(0, 1fr) auto 32px;
        grid-template-areas:
            "st user  grp  open"
            "st email email open"
            "st full  full open";
        column-gap: 12px;
        row-gap: 2px;
        padding: 12px;
    }

    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-c-state { grid-area: st; align-self: start; }
    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-c-user { grid-area: user; }
    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-c-group { grid-area: grp; }
    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-c-open { grid-area: open; }

    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-c-email {
        grid-area: email;
        color: var(--fk-muted);
        font-size: .82rem;
    }

    body.fk .fk-acc .fk-acc-lrow.fk-acc-urow > .fk-acc-fullname {
        grid-area: full;
        display: flex;
        flex-wrap: wrap;
        gap: 0 4px;
        color: var(--fk-muted);
        font-size: .82rem;
    }

    body.fk .fk-page-user .fk-acc-pwd {
        grid-template-columns: minmax(0, 1fr);
    }

    body.fk .fk-page-user .fk-acc-pwd > .btn {
        justify-self: start;
    }

    body.fk .fk-page-stores .fk-acc-search,
    body.fk .fk-page-stores .fk-acc-bulk {
        flex: 1 1 100%;
        max-width: none;
    }

    body.fk .fk-page-stores .fk-acc-bulk-form > select {
        flex: 1 1 100%;
        width: 100%;
    }

    body.fk .fk-page-storetool .fk-acc-search-2 > .btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-page-testipos .fk-acc-result .fk-kv {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body.fk .fk-page-testipos .fk-acc-result .fk-kv-v {
        margin-bottom: 6px;
    }
}