/* Úpravy pro filtrovací formulář */
.filtrovani {
	width: 25%;
	top: 30%;
	position: fixed;
}

.custom-data-filter-form {
    padding: 10px;
    border: 1px solid #000;
    background-color: none;
    width: 100%;
	top: 50px;
	
}

.custom-data-filter-form span {
	color: #ff0000;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
}

/* Styl pro pozici formuláře na levé straně vedle tabulky */
.custom-data-filter-container {
    display: grid;

}

.custom-data-filter-container h3 {
    display: grid;
	text-align: center;
	margin-top: 20px;

}

.custom-data-filter-container h1 {
    display: grid;
	text-align: center;
	margin-top: 20px;
	font-size: 28px;

}


/* Upraveno pro zarovnání všech prvků vedle sebe */
.custom-data-filter-form label,
.custom-data-filter-form input,
.custom-data-filter-form select,
.custom-data-filter-form textarea {
    flex-basis: 50%;
	border: 1px solid black;
	border-collapse: collapse;
	border-radius: 0;
	width: 50%;
}

.custom-data-filter-form input[type="text"] {
	width: 50%;
}

/* Úpravy pro stránku správy katalogu */
body.custom-data-filter {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
}

/* Úpravy pro hlavičku "Filtrování" */
.custom-data-filter-form h3 {
	font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
}

.custom-data-filter-form #toggle-filter-form {
    text-align: center;
    margin-bottom: 10px;
}

/* Styl pro celou tabulku */
#vysledky {
    width: 20%;
    border-collapse: collapse;
    background-color: #CCFFFF;
    font-family: "Arial", Arial, sans-serif;
	font-size: 16px;
    border: 2px solid black;
    border-spacing: 0 1px;
    margin-left: 25%;
	min-width: 900px;
}

#vysledky th {
    background-color: #59FFFF;
    color: #000;
    font-weight: bold;
}

#original-name {
    font-weight: normal;
    color: #974706;
}

#translated-name {
    font-weight: 600;
    color: #0000FF;
}

#description {
    font-weight: normal;
    color: #FF00FF;
}

.custom-image {
  	width: auto;
  	height: auto;
	max-width: 300px;
	max-height: 300px;
	margin: 0 auto 20px;
	vertical-align: middle; /* Zarovnání obsahu buněk na střed svisle. */
}

#vysledky td {
	color: black;
  	border-bottom: 1px solid black;
	padding: 8px; /* Přidá vnitřní odsazení pro buňky */
	
}
#button, 
.button {
	margin-top: 10px;
}

/* CSS pro stránku s přidáním dat */

/* Apply basic styles to the form */
#pridani-dat input[type="text"],
#pridani-dat input[type="submit"] {
    width: 50%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Apply special styles to the submit button */
#pridani-dat input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

/* Apply hover effect to the submit button */
#pridani-dat input[type="submit"]:hover {
    background-color: #45a049;
}

/* Apply styles to the success message */
#message {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Úpravy pro mobilní zařízení s maximální šířkou 768px */
@media (max-width: 768px) {
    .filtrovani {
		top: 0;
        width: auto;
        text-align: left;
        position: relative;
    }

    .custom-data-filter-form {
        width: 35%;
        margin: 10px 0;
        padding: 5px;
    }

    #vysledky {
		margin-top: 0;
		margin-left: 0;
        width: 100%;
        overflow-x: auto;
    }

.custom-data-filter-container h1 {
    display: grid;
    text-align: center;
    margin-top: 20px;
    font-size: 21px;
    max-width: 300px;
	}

    .custom-data-filter-container h3 {
        font-size: 18px;
    }
   	.custom-image {
        max-width: 250px;
        max-height: 250px;
    }

    #vysledky td {
        padding: 5px;
    }

    #vysledky th {
        padding: 5px;
    }
	.custom-data-filter-container h3 {
		display: grid;
		text-align: left;
		margin-top: 10px;

	}
	/* Upraveno pro zarovnání všech prvků vedle sebe */
	.custom-data-filter-form label,
	.custom-data-filter-form input,
	.custom-data-filter-form select,
	.custom-data-filter-form textarea {
		flex-basis: 100%;
		border: 1px solid black;
		border-collapse: collapse;
		border-radius: 0;
		width: 50%;
	}

	.custom-data-filter-form input[type="text"] {
		width: 50%;
	}
}