html {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

body {
//    padding: 20px;
//    display: flex;
    flex-direction: column;
 //   justify-content: center;
    align-items: center;
//    min-height: 100vh;
    max-width: 1500px;
    margin: 0 auto;
}

.table-wrapper {
    width: 100%; 
    overflow-x: auto;
    font-size: 1.1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* Styly pro horizontální posuvník */
.table-wrapper::-webkit-scrollbar {
    height: 10px; /* Výška posuvníku */
}

.table-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* Styly pro vertikální posuvník */
.table-wrapper::-webkit-scrollbar {
    width: 15px; /* Šířka posuvníku */
}

.table-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


table {
    width: 100%; 
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

table, th, td {
    border: 1px solid #dddddd;
    padding: 6px 14px;
}

table td {
    text-align: center;
    vertical-align: middle;
}

th {
    background-color: #f2f2f2;
}

h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

h4 {
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

p {
    font-size: 12px;
    text-align: center;
}

.logo {
    display: block;
    width: 150px;
    margin: auto;
}

.red { color: red; }
.green { color: green; }
.orange { color: orange; }
.red-cell { background-color: rgb(255, 85, 0); }
.green-cell { background-color: rgb(65, 219, 37); }
.orange-cell { background-color: rgb(255, 234, 0); }

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 15px;
    text-align: center;
}

.form-container .form {
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 10px;
    max-width: 300px; /* nebo jakoukoliv jinou pevnou šířku, nebo použijte max-width pro responsivitu */
}

.centered-form {
        text-align: center; /* Zarovnání obsahu na střed */
        padding: 20px 0;   /* Odsazení pro lepší vzhled */
    }

.centered-form .admin-button,
.centered-form input[type="submit"] {
    display: inline-block; /* Makes the link behave like a block, enabling padding etc. */
    text-align: center; 
    padding: 5px 10px; /* Same as your submit button */
    margin-top: 10px;
    color: #fff; /* Text color, similar to your submit button */
    background-color: silver; /* Background color, similar to your submit button */
    border: none; /* Removes the border */
    border-radius: 4px; /* Same as your submit button */
    text-decoration: none; /* Removes the underline from the link */
    cursor: pointer; /* Makes the link look clickable, similar to your submit button */
    font-size: 15px; /* Adjust based on your preference */
//    font-weight: bold; /* Makes the text bold, adjust based on your preference */
}
.centered-form input[type="submit"]:hover,
.centered-form input[type="submit"]:active,
.centered-form .admin-button:hover {
    background-color: #e31e24; /* Darker red shade when buttons are hovered or clicked */
}

.separator {
    border: 0; /* Removes default border */
    height: 1px; /* Height of the separator line */
    background-color: #ccc; /* Color of the separator line */
    margin: 20px 0; /* Space above and below the separator line */
}

@media only screen and (max-width: 1000px) {
    .table-wrapper {
        width: 100%;  /* Increased the width a bit */
    }
    table, th, td {
        font-size: 0.7em;
        padding: 4px 8px;  /* Increased padding slightly */
    }
    h1, h2 {
        font-size: 1.4rem; /* Reduced font size */
    }
}

@media only screen and (max-width: 600px) {
        .table-wrapper {
        width: 100%;  /* Increased the width a bit */
    }
    table, th, td {
        font-size: 0.6em;  /* Reduced font size more */
        padding: 3px 6px;  /* Reduced padding */
    }
    h1, h2 {
        font-size: 1.2rem;  /* Reduced font size */
    }
}