.body-content-upperMenuGap {
    padding-bottom: 20px;
}

.no-space {
    white-space: nowrap; /* zrušení mezery */
}
/* ========Footer========== */
footer {
    padding: 20px 30px 0;
    background-color: var(--white);
    text-align: center;
}

.navbar-upperMenu {
    flex-grow: 1;
    text-align: center;
    font-family: "RalewaySemiBold", Arial;
    font-size: 25px;
    font-weight: 500;
    margin-top: -20px;
    margin-bottom: 28px;
    color: var(--orange);
}

.copyright-text {
    font-size: 13px;
}

/* Copyright v patičce */
.copyright-symbol {
    font-size: 18px;
    position: relative;
    bottom: -2px;
    font-weight: 900;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.input-text:focus {
    border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
    outline: none; /* Odstranění výchozího outline */
}

/******************************************************************************************************/
/* Grid */
.grid-container {
    display: grid;
    grid-template-columns: auto auto 450px auto auto auto;
    gap: 0px;
    margin-bottom: 2px;
    overflow-y: auto;
}

.grid-container-2 {
    --column-count: 5;
    grid-template-columns: repeat(var(--column-count), 1fr);
    display: grid;
    gap: 0px;
    margin-bottom: 2px;
    overflow-y: auto;
}

.grid-container-upperMenu {
    --column-count: 2;
    grid-template-columns: repeat(var(--column-count), 1fr);
    display: flex;
    gap: 0px;
    padding: 40px 0px 0px 0px;
    margin-bottom: -5px;
}

.grid-header {
    top: 0px;
    padding: 5px 5px 1px 15px;
    background-color: var(--header);
    z-index: 1;
    border-top: 1px solid var(--orange);
    border-right: 1px solid var(--orange);
    border-left: 1px solid var(--orange);
    position: sticky;
}

.grid-item {
    padding: 3px 3px 1px 8px;
    border: 1px solid var(--orange);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-item-2 {
    padding: 3px 3px 1px 8px;
    border-left: 1px solid var(--orange); /* Levý okraj */
    border-right: 1px solid var(--orange); /* Pravý okraj */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0px;
}

.grid-item-long-note {
    padding: 3px 3px 1px 8px;
    border-left: 1px solid var(--orange); /* Levý okraj */
    border-right: 1px solid var(--orange); /* Pravý okraj */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0px;
}

.video-container {
    border: 1px solid var(--orange);
    overflow: hidden;
    height: 100px;
    width: 60vw;
}

.full-width-stock {
    grid-column: 1 / -1; /* zabírá všechny sloupce */
}

.full-width-height {
    grid-column: 1 / -1; /* zabírá všechny sloupce */
    height: 10px;
}

.full-width-start {
    grid-column: 1 / -1; /* zabírá všechny sloupce */
    background-color: var(--orange);
    height: 1px;
}

.full-width-end {
    grid-column: 1 / -1; /* zabírá všechny sloupce */
    background-color: var(--orange);
    height: 1px;
}

.item-label {
    display: none;
}

.item-value {
    padding-left: 5px;
    padding-right: 5px;
    overflow-wrap: break-word; /* Zajištění zalamování slov */
    word-wrap: break-word; /* Zajištění zalamování slov */
    white-space: normal; /* Povolit zalamování textu */
    hyphens: auto; /* Automatické dělení slov */
}

.spacer {
    display: none;    
}

.pagination {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
}

.grid-row {
    display: contents;
    cursor: pointer;
}

    .grid-row:hover {
        background-color: var(--mouse-hover); /* Barva při najetí myší */
    }

/*Rozlišení pro mobily*/
@media screen and (max-width: 768px) {
    .grid-container-2 {
        display: grid;
        grid-template-columns: auto;
        gap: 0px;
    }

    .grid-header {
        display: none;
    }

    .grid-item-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 8px;
        font-size: 11px;
        line-height: 1.2;
        max-height: 30px;
        overflow: hidden; /* Skrytí přetečení */
        border-bottom: 1px solid var(--orange);
        border-right: 1px solid var(--orange);
        box-sizing: border-box;
    }

    /*        .grid-item-2::before {
            content: attr(data-label);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            font-size: 11px;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }*/

    .grid-item-long-note {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 8px;
        font-size: 11px;
        line-height: 1.2;
        overflow: hidden; /* Skrytí přetečení */
        border-bottom: 1px solid var(--orange);
        border-right: 1px solid var(--orange);
        box-sizing: border-box;
        height: auto; /* Změna výšky pouze pro řádky s dlouhou poznámkou */
        max-height: 90px; /* Omezení maximální výšky na 90px */
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .grid-item-long-note:hover {
            overflow: visible; /* Zobrazí celý text při najetí myší */
            max-height: none; /* Odstranění omezení výšky při najetí myší */
        }

    .video-container {
        border: 1px solid var(--orange);
        overflow: hidden;
        height: 100px;
        width: 90vw;
    }

    .item-label {
        display: block;
        font-weight: bold;
        background-color: var(--header);
        padding: 2px 4px;
        margin-left: -8px;
        margin-top: 7px;
        margin-bottom: 8px;
        width: 30%;
        text-align: left;
        white-space: nowrap;
    }

    .item-value {
        padding-left: 5px;
        width: 70%;
        font-weight: bold;
        overflow-wrap: break-word; /* Zajištění zalamování slov */
        word-wrap: break-word; /* Zajištění zalamování slov */
        white-space: normal; /* Povolit zalamování textu */
        hyphens: auto; /* Automatické dělení slov */
    }

    .full-width-end {
        height: 0px;
    }
}

/*Rozlišení pro mobily*/
@media screen and (max-width: 768px) {
    .grid-container {
        display: grid;
        /* Definujeme šablonu s dvěma řádky */
        grid-template-columns: repeat(6, 1fr);
        gap: 0px 0px;
    }

    /* První řádek - IS, Skupina, Název */
    .grid-item:nth-child(7n+0) { /* IS */
        grid-column: 1 / span 1; /* Sloupec IS */
        border-top: solid var(--orange);
        border-top-width: 5px;
    }

    .grid-item:nth-child(7n+1) { /* Skupina */
        grid-column: 2 / span 1; /* Sloupec Skupina */
        border-top: solid var(--orange);
        border-top-width: 5px;
    }

    .grid-item:nth-child(7n+2) { /* Název */
        grid-column: 3 / span 5; /* Sloupec Název */
        border-top: solid var(--orange);
        border-top-width: 5px;
    }

    /* Druhý řádek - Kód, Stav, Expirace */
    .grid-item:nth-child(7n+3) { /* Kód */
        grid-column: 1 / span 2; /* Sloupec Kód */
    }

    .grid-item:nth-child(7n+4) { /* Stav */
        grid-column: 3 / span 2; /* Sloupec Stav */
    }

    .grid-item:nth-child(7n+5) { /* Expirace */
        grid-column: 5 / span 3; /* Sloupec Expirace */
    }

    /* Třetí řádek - mezera */
    .grid-item:nth-child(7n+6) {
        grid-column: 1 / span 7; /* Zabere celý řádek */
    }

    .grid-item-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .grid-header {
        display: none;
    }

    .grid-item {
        position: relative;
        padding: 20px 3px 2px 8px;
        font-size: 11px;
        line-height: 1.1;
        white-space: normal;
        align-items: center;
    }

    .spacer {
        display: block;
        visibility: hidden;
        padding-top: 8px;
    }

    .grid-item::before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 11px;
        font-weight: bold;
        padding: 2px 8px;
        background-color: var(--header);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* KONEC Grid*/

.flex-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flex-item {
    flex: 1;
    min-width: 300px;
}

.center-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-text-find {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--light-grey);
    border: 2px solid var(--orange);
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 10px 10px 10px 5px;
}

    .input-text-find:focus {
        border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
        outline: none; /* Odstranění výchozího outline */
    }

.input-text {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--light-grey);
    border: 1px solid var(--orange);
    margin-bottom: 2px;
    margin-right: 5px;
    padding: 2px 0px 2px 0px;
}

    .input-text:focus {
        border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
        outline: none; /* Odstranění výchozího outline */
    }

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* Zarovnání labelů a textových polí */
form .form-group > label,
form .form-group > input {
    width: 100%; /* Zajistí, že labely a textová pole mají vlevo stejné zarovnání */
    max-width: 300px; /* Šířka */
    margin-left: auto;
    margin-right: auto;
}

/*Rozlišení pro mobily*/
@media (max-width: 767px) {

    .input-text {
        width: 120px;
        box-sizing: border-box;
        background-color: var(--light-grey);
        border: 1px solid var(--orange);
        margin-bottom: 2px;
        margin-right: 0px;
        padding: 2px 2px 2px 4px !important;
    }

        .input-text:focus {
            border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
            outline: none; /* Odstranění výchozího outline */
        }

    .input-text-find {
        width: 100%;
        box-sizing: border-box;
        background-color: var(--light-grey);
        border: 1px solid var(--orange);
        margin-bottom: 2px;
        margin-right: 2px;
        padding: 5px 5px 5px 12px !important;
    }

        .input-text-find:focus {
            border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
            outline: none; /* Odstranění výchozího outline */
        }

    input,
    select,
    textarea {
        width: 100%; /* Nastavit šířku na 100 % */
        max-width: none; /* Zrušit maximální šířku */
    }
}


.form-group label {
    margin-bottom: 5px;
}

.form-group .checkbox-container {
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

    .form-group .checkbox-container input[type="checkbox"] {
        margin-right: 5px;
        margin-left: 0 !important;
        width: 25px;
        height: 25px;
        border: 2px solid var(--orange);
        background-color: var(--light-grey);
        border-radius: 3px;
        appearance: none;
        outline: none;
        cursor: pointer;
    }

        .form-group .checkbox-container input[type="checkbox"]:checked {
            background-color: orange;
            position: relative;
        }

            .form-group .checkbox-container input[type="checkbox"]:checked::before {
                content: '\2714';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--white);
                font-size: 14px;
            }

    .form-group .checkbox-container label {
        margin-left: 0 !important;
        padding-left: 10px;
        padding-top: 5px;
        cursor: pointer;
    }

/*Rozlišení pro velké obrazovky*/
@media (min-width: 768px) {
    .flex-container {
        flex-direction: row;
    }

    .flex-item {
        flex: 0 0 calc(100% - 10px);
    }

    .form-control {
        width: 80%;
        max-width: 400px;
    }

    .checkbox-container {
        margin-left: 0;
        width: 80%;
        max-width: 400px;
    }
}

/*
Zpáva v seznamu z vnitřní stránky
*/
p.outer_page_message {
    font-weight: bold;
}