.view-logi table.logi {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1em;
}
.view-logi table.logi th {
    text-align: left;
}
.view-logi table.logi th,
.view-logi table.logi td {
    padding: 0.25em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    vertical-align: middle;
    border-bottom: 1px solid var(--main-table-td-border-color);
}
.view-logi table.logi th {
    font-weight: 500;
    border-bottom: 1px solid var(--main-table-th-border-color);
    padding-bottom: 0.5em;
}
.view-logi table.logi tr:not(:first-child):hover {
    background-color: var(--main-record-background-color-hover);
}
.view-logi table.logi tr:nth-child(2) td {
    padding-top: 0.5em;
}
.view-logi .button-fill {
    display: block;
}
.view-logi table.logi td.right {
    text-align: left;
}
.view-logi table.logi td.center {
    text-align: center;
}
.view-logi table.logi th.button-td,
.view-logi table.logi td.button-td {
    width: 1%;
    white-space: nowrap;
}
.view-logi table.logi span {
    display: none;
    color: var(--main-low-visibility-color);
    font-weight: normal;
    padding-right: 1em;
    align-self: center;
}
.view-logi table.logi .lp {
    color: var(--main-low-visibility-color);
    width: 1%;
}

.view-logi .footer {
    display: flex;
}
.view-logi .record-counter {
    white-space: nowrap;
    padding: 0.5em;
    color: var(--main-low-visibility-color)
}
.view-logi .load-button-container {
    width: 100%;
    text-align: center;
    padding: 0.5em;
}
.view-logi .date-input {
    width: 150px;
    padding: 10px;
    margin: 5px;
}

.view-logi .operation-insert {
    background-color: var(--main-record-color-green);
    border-color: var(--main-record-color-green);
    color: White;
}
.view-logi .operation-update {
    background-color: var(--main-record-color-blue);
    border-color: var(--main-record-color-blue);
    color: White;
}
.view-logi .operation-delete {
    background-color: var(--main-record-color-purple);
    border-color: var(--main-record-color-purple);
    color: White;
}
.view-logi .operation-choice {
    background-color: var(--main-record-color-violet);
    border-color: var(--main-record-color-violet);
    color: White;
}
:root.high-contrast {
    .view-logi .operation-insert {
        color: Black;
        font-weight: 500;
    }
    .view-logi .operation-update {
        color: Black;
        font-weight: 500;
    }
    .view-logi .operation-delete {
        color: Black;
        font-weight: 500;
    }
    .view-logi .operation-choice {
        color: Black;
        font-weight: 500;
    }
}

.view-logi .cell-button {
    padding: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 0.25em;
}

.view-logi .logi td.cell-icon,
.view-logi .logi th.cell-icon {
    text-align: center;
}
@media screen and (max-width: 950px) {
    .view-logi table.logi th {
        display: none;
        border-bottom: none;
        padding-right: 0px;
    }
    .view-logi table.logi th.button-td {
        width: auto;
        display: flex;
        margin-left: auto;
    }
    .view-logi table.logi tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--main-table-td-border-color);
    }
    .view-logi table.logi td {
        width: calc(50% - 1rem);
        border-bottom: none;
    }
    .view-logi table.logi span {
        display: block;
        text-align: left;
    }
    .view-logi table.logi .button-td {
        padding-bottom: 0.5em;
    }
}

.view-logi .powiazana {
    color: var(--main-record-color-turquoise);
}
.view-logi .event-open {
    color: var(--main-record-color-blue);
}
.view-logi .event-waiting {
    color: var(--main-record-color-violet);
}
.view-logi .event-canceled {
    color: var(--main-record-color-orange);
}
.view-logi .event-blocked {
    color: var(--main-record-color-purple);
}
.view-logi .event-done {
    color: var(--main-record-color-green);
}

.view-logi .inputs-container {    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0.5em;
    padding-right: 0.5em;
    column-gap: 2em;
    row-gap: 1em;
}

.view-logi .input-container {
    display: flex;
    align-items: center;
}
.view-logi .filter {
    flex-grow: 1;    
}
.view-logi .option-button.inactive {
    background-color: var(--main-low-visibility-color);
}
.view-logi .inputs-grid {
    display: grid;
    grid-row-gap: 1em;
}
.json-container {
    background-color: #f4f4f4; /* Kolor tła, aby wyglądało jak edytor */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc; /* Lekka ramka */
    font-family: "Courier New", Courier, monospace; /* Monospace czcionka */
    white-space: pre-wrap; /* Zachowaj białe spacje i łamanie linii */
    font-size: 14px; /* Rozmiar tekstu */
    color: #333; /* Kolor tekstu */
    margin-bottom: 1em;
}
.json-container pre {
    margin: 0;
}

.view-logi .buttons-panel .sm-button {
    min-width: var(--button-min-width);
}