.shs-grid {

        width: 100%;

        min-width: 980px;

        margin: 0;

        border-collapse: separate;

        border-spacing: 0;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 8px;

        overflow: visible;

        font-size: 15px;

        font-style: normal;

    }



    .shs-grid-wrap {

        width: 90%;

        margin: 0 auto;

        overflow-x: auto;

        overflow-y: visible;

        padding: 0 0 24px;

    }



    .shs-box-view {

        width: 90%;

        margin: 0 auto;

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

        gap: 18px;

        padding: 0 0 24px;

    }



    .shs-place-box {

        min-height: 280px;

        background: #eaf4fb;

        border: 1px solid #000;

    }



    .shs-place-box-header {

        display: flex;

        align-items: center;

        justify-content: center;

        min-height: 36px;

        padding: 6px 10px;

        color: #fff;

        background: #000;

        font-size: 16px;

        font-weight: 800;

        text-align: center;

    }



    .shs-place-box-body {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 6px;

        min-height: 238px;

        padding: 16px 12px;

        text-align: center;

    }



    .shs-place-box-item {

        position: relative;

        display: block;

        color: #102a43;

        font-size: 14px;

        font-weight: 700;

        line-height: 1.25;

        text-decoration: none;

        opacity: 1 !important;

        isolation: isolate;

        overflow-wrap: anywhere;

    }



    .shs-place-box-item::before {

        content: "";

        position: absolute;

        left: 50%;

        bottom: calc(100% + 2px);

        z-index: 9998;

        display: block;

        width: 1px;

        height: 1px;

        background: #fff;

        border-radius: 8px;

        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.42);

        opacity: 1 !important;

        visibility: hidden;

        pointer-events: none;

        transform: translateX(-50%);

    }



    .shs-place-box-item:hover {

        color: #0f766e;

        text-decoration: underline;

    }



    .shs-place-box-thumb {

        position: absolute;

        left: 50%;

        bottom: calc(100% + 8px);

        z-index: 9999;

        width: 120px;

        height: 120px;

        object-fit: cover;

        background: #fff;

        border: 3px solid #15803d;

        border-radius: 6px;

        box-shadow: none;

        opacity: 1 !important;

        visibility: hidden;

        mix-blend-mode: normal !important;

        pointer-events: none;

        transform: translateX(-50%) scale(0.96);

        transition: transform 0.12s ease;

    }



    .shs-place-box-item:hover::before,

    .shs-place-box-item:focus::before,

    .shs-place-box-item:hover .shs-place-box-thumb,

    .shs-place-box-item:focus .shs-place-box-thumb {

        opacity: 1 !important;

        visibility: visible;

    }



    .shs-place-box-item:hover .shs-place-box-thumb,

    .shs-place-box-item:focus .shs-place-box-thumb {

        filter: none !important;

        transform: translateX(-50%) scale(1);

    }



    .shs-titlebar {

        width: 90%;

        margin: 50px auto 0;

        position: relative;

    }



    .shs-page-title {

        margin: 0;

        padding-right: 58px;

        color: #1f2933;

        font-size: 28px;

        font-weight: 800;

        line-height: 1.2;

        text-align: left;

    }



    .shs-title-actions {

        position: absolute;

        top: 50%;

        right: 0;

        display: flex;

        align-items: center;

        gap: 8px;

        transform: translateY(-50%);

    }



    .shs-title-add-button,

    .shs-title-logout-button,

    .shs-title-qr-button,

    .shs-menu-toggle {

        display: none;

        align-items: center;

        justify-content: center;

        width: 42px;

        height: 42px;

        color: #102a43;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        cursor: pointer;

        line-height: 1;

        text-decoration: none;

    }



    .shs-title-add-button {

        display: inline-flex;

        color: #fff;

        background: #16a34a;

        border-color: #15803d;

        font-size: 28px;

        font-weight: 800;

    }



    .shs-title-logout-button {

        display: inline-flex;

        width: auto;

        padding: 0 12px;

        color: #102a43;

        background: #fff;

        border-color: #bcccdc;

        font-size: 13px;

        font-weight: 800;

    }



    .shs-title-qr-button {

        font-size: 22px;

    }



    .shs-menu-toggle {

        font-size: 22px;

    }



    .shs-title-add-button:hover {

        color: #fff;

        background: #15803d;

        text-decoration: none;

    }



    .shs-title-logout-button:hover {

        color: #102a43;

        background: #f3f6f9;

        text-decoration: none;

    }



    .shs-menu-toggle:hover {

        background: #f3f6f9;

    }



    .shs-title-qr-button:hover {

        background: #f3f6f9;

    }



    .shs-hidden-postback {

        display: none !important;

    }



    .shs-mobile-only {

        display: none !important;

    }



    .shs-logout-button {

        color: #102a43;

        background: #fff;

        border-color: #bcccdc;

        text-align: center;

    }



    .shs-grid th {

        position: relative;

        background: #f3f6f9;

        color: #000 !important;

        font-weight: 600;

        text-align: center;

        padding: 14px 16px;

        border-bottom: 1px solid #d9e2ec;

        text-align: left;

    }



    th.shs-sortable-header.stat {

        text-align: center !important;

    }



    .shs-grid th.shs-sortable-header {

        cursor: pointer;

        user-select: none;

    }



    .shs-grid th.shs-sortable-header a {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 6px;

        color: #000 !important;

        text-decoration: none;

    }



    .shs-grid th.shs-sortable-header a:hover {

        color: #102a43 !important;

        text-decoration: none;

    }



    .shs-grid th.shs-sort-active::after {

        display: inline-block;

        margin-left: 7px;

        color: #334e68;

        font-size: 10px;

        line-height: 1;

        vertical-align: middle;

    }



    .shs-grid th.shs-sort-active.shs-sort-asc::after {

        content: "▲";

    }



    .shs-grid th.shs-sort-active.shs-sort-desc::after {

        content: "▼";

    }



    .shs-grid th.shs-type-cell,

    .shs-grid th.shs-name-cell,

    .shs-grid th.shs-plats-cell,

    .shs-grid th.shs-delav-cell {

        text-align: left;

    }



    .shs-grid th.shs-type-cell.shs-sortable-header a,

    .shs-grid th.shs-name-cell.shs-sortable-header a,

    .shs-grid th.shs-plats-cell.shs-sortable-header a,

    .shs-grid th.shs-delav-cell.shs-sortable-header a {

        width: 100%;

        justify-content: flex-start;

        text-align: left;

    }



    .shs-grid td {

        color: #000 !important;

        padding: 14px 16px;

        border-bottom: 1px solid #edf2f7;

        font-style: normal;

    }



    .shs-grid-pager-bar {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        flex-wrap: wrap;

        padding: 14px 10px;

        background: #f8fafc;

        border-top: 1px solid #d9e2ec;

    }



    .shs-grid-pager-button,

    .shs-grid-pager-button.aspNetDisabled {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 72px;

        height: 34px;

        padding: 0 10px;

        color: #243b53;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 800;

        text-decoration: none;

    }



    .shs-grid-pager-info {

        display: inline-flex;

        align-items: center;

        min-height: 34px;

        padding: 0 12px;

        color: #334e68;

        font-size: 13px;

        font-weight: 800;

    }



    .shs-grid-pager-button:hover {

        color: #102a43;

        background: #f3f6f9;

        text-decoration: none;

    }



    .shs-grid-pager-button.aspNetDisabled {

        color: #829ab1;

        background: #edf2f7;

        cursor: default;

    }



    .shs-grid-pager td {

        padding: 14px 10px;

        background: #f8fafc;

        text-align: center;

    }



    .shs-grid-pager span {

        color: #fff;

        background: #16a34a;

        border-color: #15803d;

    }



    .shs-grid-image-cell {

        width: 52px;

        max-width: 52px;

        padding: 5px 6px !important;

        text-align: center;

        overflow: visible;

        position: relative;

    }



    .shs-grid-image-cell:hover {

        z-index: 120;

    }



    .shs-grid-thumb {

        display: block;

        width: 40px !important;

        height: 40px !important;

        object-fit: cover;

        border: 1px solid #d9e2ec;

        border-radius: 4px;

        background: #f8fafc;

        position: relative;

        z-index: 1;

        transition: transform 0.14s ease, box-shadow 0.14s ease;

    }



    .shs-grid-thumb:hover {

        transform: scale(3);

        transform-origin: left bottom;

        z-index: 140;

        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.32);

    }



    .shs-type-cell,

    .shs-name-cell {

        width: 200px;

        max-width: 200px;

    }



    .shs-grid th.shs-mobile-plats-text-cell,

    .shs-grid td.shs-mobile-plats-text-cell,

    .shs-mobile-plats-text-cell {

        display: none;

    }



    .shs-grid td.shs-name-cell {

        font-size: 17px;

        font-weight: 800;

    }



    .shs-delav-cell {

        width: 200px;

        min-width: 200px;

        max-width: 200px;

    }



    .shs-grid tr:last-child td {

        border-bottom: 0;

    }



    .shs-grid-row {

        cursor: pointer;

        min-height: 56px;

        position: relative;

        transition: background-color 0.15s ease;

    }



    .shs-grid-row:hover {

        background: #f8fafc;

        z-index: 90;

    }



    .shs-grid-row.shs-row-white td {

        background: #fff !important;

    }



    .shs-grid-row.shs-row-yellow td {

        background: #eddc89 !important;

    }



    .shs-grid-row.shs-row-blue td {

        background: #68a0c8 !important;

    }



    .shs-grid-row.shs-row-purple td {

        background: #c4b5fd !important;

    }



    .shs-grid-row.shs-row-pink td {

        background: #f9a8d4 !important;

    }



    .shs-grid-row.shs-row-green td {

        background: #7ce58f !important;

    }



    .shs-grid-row:hover td {

        filter: brightness(0.98);

    }



    .shs-menu {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 8px;

        width: 90%;

        margin: 30px auto 14px;

    }



    .shs-menu-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-height: 36px;

        padding: 8px 14px;

        color: #334e68;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.2;

        text-decoration: none;

        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    }



    .shs-menu-button:hover {

        color: #102a43;

        background: #f3f6f9;

        border-color: #bcccdc;

        text-decoration: none;

    }



    .shs-menu-select {

        min-width: 180px;

        min-height: 36px;

        padding: 7px 10px;

        color: #334e68;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        font-size: 14px;

        font-weight: 600;

    }



    .shs-menu-filter-input {

        flex: 0 0 230px;

        width: 230px;

        max-width: 230px;

    }



    .shs-status-filter-select {

        flex: 0 0 220px;

        width: 220px;

        max-width: 220px;

        font-weight: 800;

        text-align: center;

        text-align-last: center;

    }



    .shs-menu-search {

        min-width: 240px;

        flex: 1 1 240px;

        max-width: 360px;

        min-height: 36px;

        margin-left: auto;

        padding: 7px 12px;

        color: #334e68;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        font-size: 14px;

        font-weight: 600;

    }



    .shs-add-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        min-width: 38px;

        min-height: 38px;

        padding: 8px 14px;

        color: #fff;

        background: #16a34a;

        border: 1px solid #15803d;

        border-radius: 999px;

        font-size: 14px;

        font-weight: 800;

        line-height: 1;

        text-decoration: none;

        white-space: nowrap;

    }



    .shs-add-button:hover {

        color: #fff;

        background: #15803d;

        text-decoration: none;

    }



    .shs-add-plus {

        font-size: 22px;

        line-height: 1;

    }



    .shs-modal-backdrop {

        position: fixed;

        inset: 0;

        z-index: 1000;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 24px;

        background: rgba(15, 23, 42, 0.45);

    }



    .shs-modal {

        width: min(1480px, 100%);

        max-height: min(900px, calc(100vh - 48px));

        overflow: auto;

        background: #fff;

        border-radius: 8px;

        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);

    }



    .shs-modal-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 16px;

        padding: 18px 20px;

        border-bottom: 1px solid #e5edf5;

    }



    .shs-modal-title {

        margin: 0;

        color: #1f2933;

        font-size: 18px;

        font-weight: 700;

    }



    .shs-modal-header-actions {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        margin-left: auto;

    }



    .shs-created-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 34px;

        height: 34px;

        padding: 0 10px;

        color: #102a43;

        background: #dbeafe;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        font-size: 12px;

        font-weight: 800;

        line-height: 1;

        text-align: center;

        white-space: nowrap;

    }



    .shs-modal-close {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 34px;

        height: 34px;

        color: #52606d;

        text-decoration: none;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        background: #fff;

    }



    .shs-modal-close:hover {

        background: #f3f6f9;

        color: #102a43;

    }



    .shs-upload-progress {

        position: fixed;

        inset: 0;

        z-index: 3000;

        display: none;

        align-items: center;

        justify-content: center;

        background: rgba(15, 23, 42, 0.38);

    }



    .shs-upload-progress-visible {

        display: flex;

    }



    .shs-upload-progress-card {

        display: grid;

        justify-items: center;

        gap: 10px;

        min-width: 180px;

        padding: 20px 22px;

        color: #102a43;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 8px;

        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);

    }



    .shs-upload-spinner {

        width: 34px;

        height: 34px;

        border: 4px solid #d9e2ec;

        border-top-color: #16a34a;

        border-radius: 50%;

        animation: shs-spin 0.8s linear infinite;

    }



    .shs-upload-progress-title {

        font-size: 13px;

        font-weight: 800;

    }



    .shs-upload-progress-percent {

        color: #16a34a;

        font-size: 22px;

        font-weight: 900;

    }



    .shs-confirm-overlay {

        position: fixed;

        inset: 0;

        z-index: 3200;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 20px;

        background: rgba(15, 23, 42, 0.42);

    }



    .shs-confirm-dialog {

        width: min(380px, 100%);

        padding: 20px;

        color: #102a43;

        background: #fff;

        border: 1px solid #d9e2ec;

        border-radius: 8px;

        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24);

    }



    .shs-confirm-title {

        margin-bottom: 8px;

        font-size: 17px;

        font-weight: 900;

    }



    .shs-confirm-message {

        color: #334e68;

        font-size: 14px;

        font-weight: 700;

        line-height: 1.45;

    }



    .shs-confirm-actions {

        display: flex;

        justify-content: flex-end;

        gap: 10px;

        margin-top: 18px;

    }



    .shs-confirm-button {

        min-width: 82px;

        min-height: 38px;

        padding: 8px 14px;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 900;

        cursor: pointer;

    }



    .shs-confirm-cancel {

        color: #102a43;

        background: #fff;

    }



    .shs-confirm-ok {

        color: #fff;

        background: #16a34a;

        border-color: #15803d;

    }



    .shs-confirm-cancel:hover {

        background: #f3f6f9;

    }



    .shs-confirm-ok:hover {

        background: #15803d;

    }



    @keyframes shs-spin {

        to {

            transform: rotate(360deg);

        }

    }



    .shs-modal-body {

        padding: 18px 20px 20px;

    }



    .shs-modal-actions {

        display: flex;

        justify-content: flex-end;

        margin-top: 18px;

    }



    .shs-modal-actions .shs-menu-button {

        min-width: 120px;

    }



    .shs-popup-controls {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;

        margin-bottom: 18px;

    }



    .shs-field label {

        display: block;

        margin-bottom: 6px;

        color: #52606d;

        font-size: 13px;

        font-weight: 700;

    }



    .shs-select {

        width: 100%;

        box-sizing: border-box;

        min-height: 38px;

        padding: 7px 10px;

        color: #334e68;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 14px;

    }



    .shs-date-input {

        max-width: 190px;

    }



    .shs-autocomplete-list {

        z-index: 2000 !important;

        max-height: 240px;

        overflow-y: auto;

        margin: 2px 0 0;

        padding: 4px;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);

        list-style: none;

    }



    .shs-autocomplete-item,

    .shs-autocomplete-item-active {

        padding: 8px 10px;

        color: #243b53;

        font-size: 14px;

        font-weight: 700;

        cursor: pointer;

    }



    .shs-autocomplete-item-active {

        color: #fff;

        background: #16a34a;

        border-radius: 4px;

    }



    .shs-status-select {

        width: 100%;

        height: 100%;

        min-height: 42px;

        padding: 6px 8px;

        border: 0;

        border-radius: 0;

        font-size: 13px;

        font-weight: 700;

        text-align: center;

        text-align-last: center;

    }



    .shs-plats-select {

        width: 100%;

        height: 100%;

        min-height: 42px;

        padding: 6px 8px;

        border: 0;

        border-radius: 0;

        font-size: 13px;

        font-weight: 700;

        text-align: left;

        text-align-last: left;

    }



    .shs-kal-cell {

        width: 50px;

        max-width: 50px;

        text-align: center;

        white-space: nowrap;

    }



    .shs-kal-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 42px;

        min-height: 28px;

        padding: 4px 7px;

        color: #1f2933;

        border-radius: 4px;

        font-weight: 800;

        font-style: normal;

    }



    .shs-kal-badge.shs-kal-due {

        color: #fff;

        background: #dc2626;

    }



    .shs-kal-badge.shs-kal-done {

        color: #fff;

        background: #15803d;

    }



    .shs-status-cell {

        width: 160px;

        max-width: 160px;

        padding: 0 !important;

        text-align: center;

    }



    .shs-grid th.shs-status-cell {

        text-align: center;

    }



    .shs-approve-cell {

        width: 54px;

        max-width: 54px;

        text-align: center;

    }



    .shs-approve-panel {

        display: inline-flex;

        align-items: center;

        width: fit-content;

        min-height: 30px;

        padding: 4px 9px;

        color: #831843;

        background: #fce7f3;

        border: 1px solid #f9a8d4;

        border-radius: 6px;

        font-size: 12px;

        font-weight: 800;

    }



    .shs-approve-panel input[type="checkbox"] {

        margin: 0 6px 0 0;

        vertical-align: middle;

    }



    .shs-approve-panel label {

        display: inline-flex;

        align-items: center;

        margin: 0;

        line-height: 1;

    }



    .shs-plats-cell {

        width: 200px;

        max-width: 200px;

        padding: 0 !important;

        text-align: left;

    }



    .shs-plats-select.shs-row-white {

        background: #fff !important;

    }



    .shs-plats-select.shs-row-yellow {

        background: #eddc89 !important;

    }



    .shs-plats-select.shs-row-blue {

        background: #68a0c8 !important;

    }



    .shs-plats-select.shs-row-purple {

        background: #c4b5fd !important;

    }



    .shs-plats-select.shs-row-pink {

        background: #f9a8d4 !important;

    }



    .shs-plats-select.shs-row-green {

        background: #7ce58f !important;

    }



    .shs-select.shs-row-white {

        background: #fff !important;

    }



    .shs-select.shs-row-yellow {

        background: #eddc89 !important;

    }



    .shs-select.shs-row-blue {

        background: #68a0c8 !important;

    }



    .shs-select.shs-row-purple {

        background: #c4b5fd !important;

    }



    .shs-select.shs-row-pink {

        background: #f9a8d4 !important;

    }



    .shs-select.shs-row-green {

        background: #7ce58f !important;

    }



    .shs-menu-select.shs-row-white {

        background: #fff !important;

    }



    .shs-menu-select.shs-row-yellow {

        background: #eddc89 !important;

    }



    .shs-menu-select.shs-row-blue {

        background: #68a0c8 !important;

    }



    .shs-menu-select.shs-row-purple {

        background: #c4b5fd !important;

    }



    .shs-menu-select.shs-row-pink {

        background: #f9a8d4 !important;

    }



    .shs-menu-select.shs-row-green {

        background: #7ce58f !important;

    }



    .shs-status-ok,

    .shs-status-ok select {

        color: #fff !important;

        background: #14532d !important;

    }



    .shs-status-byggs,

    .shs-status-byggs select {

        color: #1f2933 !important;

        background: #fbbf24 !important;

    }



    .shs-status-arbete,

    .shs-status-arbete select {

        color: #fff !important;

        background: #2563eb !important;

    }



    .shs-status-service,

    .shs-status-service select {

        color: #fff !important;

        background: #dc2626 !important;

    }



    .shs-status-visst-service,

    .shs-status-visst-service select {

        color: #fff !important;

        background: #ea580c !important;

    }



    .shs-status-ny,

    .shs-status-ny select {

        color: #fff !important;

        background: #9333ea !important;

    }



    .shs-status-service-lager,

    .shs-status-service-lager select {

        color: #fff !important;

        background: #0f766e !important;

    }



    .shs-status-avetablering,

    .shs-status-avetablering select {

        color: #fff !important;

        background: #475569 !important;

    }



    .shs-status-select.shs-status-ok,

    .shs-status-select.shs-status-service,

    .shs-status-select.shs-status-visst-service,

    .shs-status-select.shs-status-ny,

    .shs-status-select.shs-status-service-lager,

    .shs-status-select.shs-status-avetablering {

        color: #fff !important;

    }



    .shs-menu-button.shs-status-ok,

    .shs-menu-button.shs-status-byggs,

    .shs-menu-button.shs-status-arbete,

    .shs-menu-button.shs-status-service,

    .shs-menu-button.shs-status-visst-service,

    .shs-menu-button.shs-status-ny,

    .shs-menu-button.shs-status-service-lager,

    .shs-menu-button.shs-status-avetablering {

        border-color: transparent !important;

        text-align: center;

    }



    .shs-menu-button.shs-status-ok:hover,

    .shs-menu-button.shs-status-byggs:hover,

    .shs-menu-button.shs-status-arbete:hover,

    .shs-menu-button.shs-status-service:hover,

    .shs-menu-button.shs-status-visst-service:hover,

    .shs-menu-button.shs-status-ny:hover,

    .shs-menu-button.shs-status-service-lager:hover,

    .shs-menu-button.shs-status-avetablering:hover {

        filter: brightness(0.95);

        text-decoration: none;

    }



    .shs-grid .shs-plats-select,

    .shs-grid .shs-status-select {

        color: #000 !important;

    }



    .shs-textarea {

        width: 100%;

        min-height: 180px;

        padding: 10px 12px;

        color: #334e68;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 14px;

        line-height: 1.45;

        resize: vertical;

    }



    .shs-info-layout {

        display: grid;

        grid-template-columns: minmax(380px, 520px) minmax(340px, 1fr) 260px;

        gap: 22px;

        align-items: stretch;

        min-height: 650px;

        min-height: min(690px, calc(100vh - 128px));

    }



    .shs-info-left,

    .shs-info-right,

    .shs-info-media {

        min-width: 0;

    }



    .shs-detail-stack {

        display: grid;

        gap: 14px;

    }



    .shs-detail-grid {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

    }



    .shs-detail-grid-three {

        grid-template-columns: minmax(0, 1fr) minmax(90px, 130px) minmax(72px, auto);

        align-items: end;

    }



    .shs-approve-panel-grid {

        align-self: end;

        min-height: 38px;

    }



    .shs-approve-slot {

        min-width: 0;

    }



    .shs-detail-stack .shs-popup-controls {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;

        margin-bottom: 0;

    }



    .shs-detail-stack .shs-relation-panel {

        margin-bottom: 0;

    }



    .shs-detail-stack .shs-textarea {

        min-height: 86px;

    }



    .shs-info-note-panel {

        display: grid;

        gap: 12px;

        align-content: start;

    }



    .shs-tabs {

        display: flex;

        gap: 6px;

        margin-bottom: 12px;

        border-bottom: 1px solid #d9e2ec;

    }



    .shs-tab-button {

        appearance: none;

        padding: 10px 12px;

        color: #52606d;

        background: transparent;

        border: 0;

        border-bottom: 3px solid transparent;

        font-size: 13px;

        font-weight: 800;

        cursor: pointer;

    }



    .shs-tab-button:hover {

        color: #102a43;

        background: #f8fafc;

    }



    .shs-tab-button.shs-tab-active {

        color: #102a43;

        border-bottom-color: #16a34a;

    }



    .shs-tab-panel {

        display: none;

    }



    .shs-tab-panel.shs-tab-panel-active {

        display: block;

    }



    .shs-inline-action-row {

        display: grid;

        grid-template-columns: minmax(0, 1fr) 110px;

        gap: 10px;

        align-items: start;

    }



    .shs-info-note-panel label {

        color: #52606d;

        font-size: 13px;

        font-weight: 700;

    }



    .shs-note-textarea {

        width: 100%;

        min-height: 38px;

        padding: 10px 12px;

        color: #334e68;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 14px;

        line-height: 1.45;

        resize: none;

        overflow: hidden;

    }



    .shs-info-log-grid {

        width: 100%;

        border-collapse: separate;

        border-spacing: 0;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        overflow: hidden;

        font-size: 13px;

    }



    .shs-info-log-grid th {

        padding: 9px 10px;

        color: #243b53;

        background: #f3f6f9;

        border-bottom: 1px solid #d9e2ec;

        text-align: left;

        font-weight: 700;

    }



    .shs-info-log-grid td {

        padding: 9px 10px;

        color: #334e68;

        border-bottom: 1px solid #edf2f7;

    }



    .shs-info-log-date-cell {

        width: 100px;

        max-width: 100px;

        white-space: nowrap;

    }



    .shs-place-history-grid {

        table-layout: fixed;

    }



    .shs-place-history-grid th,

    .shs-place-history-grid td {

        vertical-align: top;

    }



    .shs-place-history-date-cell {

        width: 132px;

        max-width: 132px;

        white-space: nowrap;

    }



    .shs-place-history-place-cell {

        min-width: 110px;

        overflow-wrap: anywhere;

    }



    .shs-info-log-st-cell {

        width: 50px;

        max-width: 50px;

        white-space: nowrap;

    }



    .shs-calibration-log-grid .shs-info-log-date-cell {

        width: 86px;

        max-width: 86px;

    }



    .shs-calibration-log-grid .shs-info-log-st-cell {

        width: 110px;

        max-width: 110px;

        white-space: normal;

    }



    .shs-calibration-log-grid th,

    .shs-calibration-log-grid td {

        vertical-align: top;

    }



    .shs-info-log-action-cell {

        width: 74px;

        max-width: 74px;

        text-align: center;

    }



    .shs-info-log-grid tr:last-child td {

        border-bottom: 0;

    }



    .shs-icon-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 30px;

        height: 30px;

        color: #334e68;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 5px;

        font-size: 14px;

        text-decoration: none;

    }



    .shs-icon-button + .shs-icon-button {

        margin-left: 4px;

    }



    .shs-icon-button:hover {

        color: #102a43;

        background: #f3f6f9;

        text-decoration: none;

    }



    .shs-icon-button-danger {

        color: #b42318;

        border-color: #fecaca;

    }



    .shs-icon-button-danger:hover {

        color: #991b1b;

        background: #fef2f2;

    }



    .shs-info-edit-input {

        width: 100%;

        min-height: 34px;

        padding: 6px 8px;

        color: #334e68;

        background: #fff;

        border: 1px solid #bcccdc;

        border-radius: 5px;

        font-size: 13px;

        font-weight: 600;

    }



    .shs-info-edit-text {

        min-height: 54px;

        line-height: 1.35;

        resize: vertical;

    }



    .shs-section-title {

        color: #243b53;

        font-size: 14px;

        font-weight: 800;

    }



    .shs-calibration-panel {

        display: grid;

        gap: 12px;

    }



    .shs-calibration-status {

        display: block;

        padding: 8px 10px;

        color: #334e68;

        background: #f8fafc;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 700;

    }



    .shs-calibration-files {

        display: flex;

        flex-wrap: wrap;

        gap: 6px;

        margin-top: 8px;

    }



    .shs-calibration-file-link {

        display: inline-flex;

        align-items: center;

        gap: 5px;

        max-width: 100%;

        padding: 5px 7px;

        color: #243b53;

        background: #eef2ff;

        border: 1px solid #c7d2fe;

        border-radius: 5px;

        font-size: 12px;

        font-weight: 800;

        text-decoration: none;

    }



    .shs-calibration-file-link span {

        color: #52606d;

        font-weight: 700;

    }



    .shs-calibration-file-link:hover {

        color: #102a43;

        background: #e0e7ff;

        text-decoration: none;

    }



    .shs-info-media {

        display: flex;

        flex-direction: column;

        gap: 14px;

        padding-left: 18px;

        border-left: 4px solid #16a34a;

        align-items: center;

        text-align: center;

        min-height: 100%;

    }



    .shs-image-scroll {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 12px;

        min-width: 0;

        width: 100%;

        flex: 1 1 auto;

        overflow-x: hidden;

        overflow-y: auto;

        max-height: 650px;

        padding-bottom: 8px;

    }



    .shs-image-panel {

        position: relative;

        flex: 0 0 auto;

        width: 200px;

    }



    .shs-image-wrapper {

        position: relative;

        flex: 0 0 200px;

        width: 200px;

    }



    .shs-primary-image {

        width: 200px !important;

        height: 200px !important;

        aspect-ratio: 1 / 1;

        object-fit: cover;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        background: #f8fafc;

    }



    .shs-missing-image {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 200px;

        height: 200px;

        color: #52606d;

        background: #f8fafc;

        border: 1px dashed #bcccdc;

        border-radius: 6px;

        font-size: 14px;

        font-weight: 700;

        text-align: center;

    }



    .shs-image-row {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 12px;

        flex: 0 0 auto;

    }



    .shs-thumb-link {

        display: inline-flex;

        flex: 0 0 200px;

        width: 200px !important;

        height: 200px !important;

    }



    .shs-image-delete {

        position: absolute;

        top: 8px;

        right: 8px;

        z-index: 3;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 28px;

        height: 28px;

        color: #fff;

        background: #dc2626;

        border: 1px solid #991b1b;

        border-radius: 50%;

        font-size: 16px;

        font-weight: 800;

        line-height: 1;

        text-decoration: none;

        opacity: 0;

        transform: scale(0.92);

        transition: opacity 0.12s ease, transform 0.12s ease;

    }



    .shs-image-panel:hover .shs-image-delete,

    .shs-image-wrapper:hover .shs-image-delete {

        opacity: 1;

        transform: scale(1);

    }



    .shs-image-delete:hover {

        color: #fff;

        background: #b91c1c;

        text-decoration: none;

    }



    .shs-image-primary-button,

    .shs-image-primary-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-height: 28px;

        padding: 5px 9px;

        color: #14532d;

        background: #dcfce7;

        border: 1px solid #86efac;

        border-radius: 6px;

        font-size: 12px;

        font-weight: 800;

        text-decoration: none;

    }



    .shs-image-primary-button:hover {

        color: #fff;

        background: #16a34a;

        border-color: #15803d;

        text-decoration: none;

    }



    .shs-thumb {

        display: block;

        width: 200px !important;

        height: 200px !important;

        aspect-ratio: 1 / 1;

        object-fit: cover;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

        background: #f8fafc;

    }



    .shs-image-meta {

        display: block;

        margin-top: 6px;

        color: #52606d;

        font-size: 12px;

        font-weight: 700;

        text-align: center;

        white-space: nowrap;

    }



    .shs-image-upload {

        position: sticky;

        bottom: 0;

        z-index: 2;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        width: 100%;

        max-width: 220px;

        min-width: 0;

        margin-top: auto;

        padding: 10px 0 0;

        background: #fff;

        text-align: center;

    }



    .shs-file-input {

        width: 100%;

        padding: 8px;

        color: #334e68;

        background: #f8fafc;

        border: 1px solid #bcccdc;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 600;

    }



    .shs-file-input::file-selector-button {

        margin-right: 10px;

        padding: 8px 12px;

        color: #fff;

        background: #334e68;

        border: 1px solid #243b53;

        border-radius: 5px;

        font-size: 13px;

        font-weight: 800;

        cursor: pointer;

    }



    .shs-file-input::file-selector-button:hover {

        background: #243b53;

    }



    .shs-file-input::-webkit-file-upload-button {

        margin-right: 10px;

        padding: 8px 12px;

        color: #fff;

        background: #334e68;

        border: 1px solid #243b53;

        border-radius: 5px;

        font-size: 13px;

        font-weight: 800;

        cursor: pointer;

    }



    .shs-delete-row {

        grid-column: 1 / -1;

        display: flex;

        justify-content: flex-end;

        margin-top: 8px;

    }



    .shs-delete-link {

        color: #dc2626;

        background: transparent;

        border: 0;

        font-size: 12px;

        font-weight: 700;

        text-decoration: none;

    }



    .shs-delete-link:hover {

        color: #991b1b;

        text-decoration: underline;

    }



    .shs-lightbox {

        position: fixed;

        inset: 0;

        z-index: 2000;

        display: none;

        align-items: center;

        justify-content: center;

        background: rgba(15, 23, 42, 0.86);

    }



    .shs-lightbox.shs-lightbox-open {

        display: flex;

    }



    .shs-lightbox-image {

        max-width: min(1120px, calc(100vw - 160px));

        max-height: calc(100vh - 120px);

        object-fit: contain;

        border-radius: 8px;

        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);

        background: #fff;

    }



    .shs-lightbox-button {

        position: absolute;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 56px;

        height: 56px;

        color: #fff;

        background: rgba(15, 23, 42, 0.72);

        border: 1px solid rgba(255, 255, 255, 0.28);

        border-radius: 50%;

        font-size: 34px;

        font-weight: 800;

        line-height: 1;

        cursor: pointer;

    }



    .shs-lightbox-close {

        top: 24px;

        right: 28px;

        width: 64px;

        height: 64px;

        font-size: 38px;

    }



    .shs-lightbox-prev {

        left: 28px;

    }



    .shs-lightbox-next {

        right: 28px;

    }



    .shs-lightbox-button:hover {

        background: rgba(15, 23, 42, 0.92);

    }



    .shs-qr-scanner {

        position: fixed;

        inset: 0;

        z-index: 2100;

        display: none;

        flex-direction: column;

        background: rgba(15, 23, 42, 0.94);

    }



    .shs-qr-scanner.shs-qr-scanner-open {

        display: flex;

    }



    .shs-qr-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        padding: 14px 16px;

        color: #fff;

        font-size: 15px;

        font-weight: 800;

    }



    .shs-qr-close {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 36px;

        height: 36px;

        color: #fff;

        background: rgba(255, 255, 255, 0.12);

        border: 1px solid rgba(255, 255, 255, 0.28);

        border-radius: 6px;

        font-size: 20px;

        cursor: pointer;

    }



    .shs-qr-video-wrap {

        position: relative;

        flex: 1 1 auto;

        min-height: 0;

    }



    .shs-qr-video {

        width: 100%;

        height: 100%;

        object-fit: cover;

        background: #000;

    }



    .shs-qr-canvas {

        display: none;

    }



    .shs-qr-frame {

        position: absolute;

        top: 50%;

        left: 50%;

        width: min(72vw, 320px);

        aspect-ratio: 1 / 1;

        border: 3px solid #38bdf8;

        border-radius: 16px;

        box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.28);

        transform: translate(-50%, -50%);

        pointer-events: none;

    }



    .shs-qr-status {

        padding: 12px 16px 18px;

        color: #fff;

        background: rgba(15, 23, 42, 0.82);

        font-size: 14px;

        font-weight: 700;

        text-align: center;

    }



    .shs-relation-panel {

        margin-bottom: 18px;

        padding: 12px 14px;

        background: #f8fafc;

        border: 1px solid #d9e2ec;

        border-radius: 6px;

    }



    .shs-detail-stack .shs-relation-panel {

        min-height: 150px;

        max-height: 240px;

        overflow-y: auto;

    }



    .shs-relation-title {

        display: block;

        margin-bottom: 8px;

        color: #52606d;

        font-size: 13px;

        font-weight: 700;

    }



    .shs-relation-value {

        color: #243b53;

        font-size: 14px;

        font-weight: 600;

    }



    .shs-linked-list {

        margin: 0;

        padding-left: 18px;

        color: #243b53;

        font-size: 14px;

    }



    .shs-linked-list li + li {

        margin-top: 5px;

    }



    .shs-linked-item {

        color: #243b53;

        font-weight: 600;

        text-decoration: none;

    }



    .shs-linked-item:hover {

        color: #102a43;

        text-decoration: underline;

    }



    .shs-error {

        display: block;

        margin-top: 12px;

        color: #b42318;

    }



    @media (max-width: 640px) {

        .shs-titlebar {

            width: calc(100% - 24px);

            margin-top: 32px;

            min-height: 42px;

        }



        .shs-page-title {

            padding: 0 154px 0 0;

            font-size: 24px;

        }



        .shs-title-qr-button,

        .shs-menu-toggle {

            display: inline-flex;

        }



        .shs-title-logout-button {

            display: none;

        }



        .shs-menu {

            display: none;

            width: calc(100% - 24px);

            justify-content: stretch;

            gap: 10px;

            margin-top: 14px;

            padding: 12px;

            background: #f8fafc;

            border: 1px solid #d9e2ec;

            border-radius: 8px;

        }



        .shs-menu.shs-menu-open {

            display: flex;

        }



        .shs-mobile-only {

            display: inline-flex !important;

        }



        .shs-desktop-only {

            display: none !important;

        }



        .shs-menu-button,

        .shs-add-button,

        .shs-menu-select,

        .shs-menu-filter-input,

        .shs-menu-search {

            flex: 1 1 100%;

            width: 100%;

            max-width: none;

            min-height: 42px;

        }



        .shs-menu-search {

            margin-left: 0;

        }



        .shs-grid-wrap {

            width: calc(100% - 24px);

            overflow-x: hidden;

            overflow-y: visible;

            padding-bottom: 18px;

        }



        .shs-box-view {

            width: calc(100% - 24px);

            grid-template-columns: 1fr;

            gap: 12px;

            padding-bottom: 18px;

        }



        .shs-place-box {

            min-height: 220px;

        }



        .shs-place-box-body {

            min-height: 178px;

        }



        .shs-grid {

            min-width: 0;

            width: 100%;

            table-layout: fixed;

        }



        .shs-grid th,

        .shs-grid td {

            padding: 11px 5px;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            font-size: 14px;

        }



        .shs-grid th:nth-child(1),

        .shs-grid td:nth-child(1),

        .shs-grid th:nth-child(2),

        .shs-grid td:nth-child(2),

        .shs-grid th:nth-child(5),

        .shs-grid td:nth-child(5),

        .shs-grid th:nth-child(6),

        .shs-grid td:nth-child(6),

        .shs-grid th:nth-child(7),

        .shs-grid td:nth-child(7),

        .shs-grid th:nth-child(8),

        .shs-grid td:nth-child(8) {

            display: none !important;

            width: 0 !important;

            max-width: 0 !important;

            padding: 0 !important;

            border: 0 !important;

        }



        .shs-grid-image-cell,

        .shs-type-cell,

        .shs-plats-cell,

        .shs-delav-cell,

        .shs-kal-cell,

        .shs-approve-cell {

            display: none;

        }



        .shs-grid th.shs-plats-cell,

        .shs-grid td.shs-plats-cell {

            display: none !important;

            width: 0;

            max-width: 0;

            padding: 0 !important;

            border: 0;

        }



        .shs-grid th.shs-approve-cell,

        .shs-grid td.shs-approve-cell {

            display: none !important;

            width: 0 !important;

            max-width: 0 !important;

            padding: 0 !important;

            border: 0 !important;

        }



        .shs-name-cell {

            width: calc(100% - 150px);

            max-width: none;

        }



        .shs-grid th.shs-name-cell {

            text-align: left;

        }



        .shs-grid td.shs-name-cell {

            font-size: 14px;

            font-weight: 800;

        }



        .shs-grid th.shs-mobile-plats-text-cell,

        .shs-grid td.shs-mobile-plats-text-cell,

        .shs-mobile-plats-text-cell {

            display: table-cell;

            width: 100px;

            max-width: 100px;

            text-align: left;

        }



        .shs-mobile-plats-type,

        .shs-mobile-plats-name {

            display: block;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            line-height: 1.15;

        }



        .shs-mobile-plats-type {

            font-size: 12px;

            font-weight: 800;

        }



        .shs-mobile-plats-name {

            margin-top: 2px;

            font-size: 12px;

            font-weight: 700;

        }



        .shs-status-cell {

            width: 50px;

            max-width: 50px;

            min-width: 50px;

            padding: 0 !important;

            overflow: hidden;

            text-align: center;

        }



        .shs-grid th.shs-status-cell {

            color: transparent !important;

            font-size: 0;

            line-height: 0;

        }



        .shs-plats-select,

        .shs-status-select {

            min-height: 40px;

            padding: 4px 2px;

            font-size: 14px;

        }



        .shs-grid .shs-status-select {

            display: block;

            width: 42px;

            min-width: 42px;

            height: 42px;

            min-height: 42px;

            margin: 0 auto;

            padding: 0;

            font-size: 14px;

            line-height: 42px;

        }



        .shs-grid-thumb:hover {

            transform: none;

        }



        .shs-popup-controls {

            grid-template-columns: 1fr;

        }



        .shs-date-input {

            width: 160px;

            max-width: 100%;

            min-width: 0;

        }



        .shs-detail-grid {

            grid-template-columns: 1fr;

        }



        .shs-modal-actions {

            position: sticky;

            bottom: 0;

            z-index: 2;

            display: flex;

            margin: 18px -20px -20px;

            padding: 12px 20px 20px;

            background: #fff;

            border-top: 1px solid #e5edf5;

        }



        .shs-info-layout {

            grid-template-columns: 1fr;

            min-height: 0;

        }



        .shs-tabs {

            overflow-x: auto;

            padding-bottom: 2px;

        }



        .shs-tab-button {

            flex: 0 0 auto;

        }



        .shs-inline-action-row {

            grid-template-columns: 1fr;

        }



        .shs-info-media {

            display: grid;

            grid-template-columns: 1fr;

            padding-left: 0;

            padding-top: 14px;

            border-left: 0;

            border-top: 1px solid #e5edf5;

            justify-items: stretch;

            text-align: left;

        }



        .shs-image-scroll {

            flex-direction: row;

            align-items: flex-start;

            overflow-x: auto;

            overflow-y: visible;

            max-height: none;

        }



        .shs-image-upload {

            position: static;

            align-items: stretch;

            max-width: none;

            margin-top: 0;

            padding-top: 0;

            text-align: left;

        }



        .shs-image-row {

            flex-direction: row;

        }



        .shs-image-panel,

        .shs-primary-image,

        .shs-missing-image,

        .shs-thumb-link,

        .shs-thumb {

            width: 200px;

        }



        .shs-lightbox-image {

            max-width: calc(100vw - 32px);

            max-height: calc(100vh - 130px);

        }



        .shs-lightbox-prev {

            left: 12px;

        }



        .shs-lightbox-next {

            right: 12px;

        }

    }