body {
            font-family: Arial, sans-serif;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
        }

        th {
            background-color: #f4f4f4;
        }
        td {
            background-color: #ffffff;
        }
        .break {
            background-color: #fff; /* Bijela boja za pauze */
            color: #000; /* Crni tekst */
            font-weight: bold; /* Podebljan tekst */
            text-align: center; /* Centriran tekst */
        }
        .short {
            background-color: #808080; 
            color: #000; /* Crni tekst */
            font-weight: bold; /* Podebljan tekst */
            text-align: center; /* Centriran tekst */
        }		
        .pauza {
            background-color: #b4f8c8;
			color: #000;
			font-weight: bold;
			text-align: center;
        }		
        .task-input {
            width: 80%;
            padding: 5px;
        }
        .occupied {
            background-color: #ff69b4; /* Crvena boja za popunjene zadatke */
        }
	    table td:hover {
        background-color: grey; /* Lagana plava boja */
    }
		table tr:hover {
        background-color: grey; /* Lagana plava boja */
    }
	h1 {
		text-align: center; 
	}
	h2 {
		text-align: center; 
	}
	
	.button-container {
		display: flex; /* Aktiviraj flexbox */
		justify-content: center; /* Centriraj gumbe horizontalno */
		align-items: center; /* Centriraj gumbe vertikalno ako je potrebno */
		margin: 20px; /* Prostor oko gumba (opcionalno) */
	}
	
	.button {
		display: inline-block; /* Elementi stoje u istom redu */
		padding: 10px 20px; /* Prostor unutar gumba */
		margin: 5px; /* Prostor između gumba */
		font-size: 1.2em; /* Veličina fonta */
		font-weight: bold; /* Istaknuti font */
		color: white; /* Boja teksta */
		background-color: #ff69b4; /* Roza pozadina */
		border: none; /* Bez obruba */
		border-radius: 5px; /* Zaobljeni rubovi */
		text-align: center; /* Centriranje teksta unutar gumba */
		cursor: pointer; /* Pokazivač kao za gumb */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Lagana sjena */
		transition: background-color 0.3s ease, transform 0.2s ease; /* Efekt prijelaza */
	}

	.button:hover {
		background-color: #ff1493; /* Tamnija roza na hover */
		transform: scale(1.05); /* Lagano povećanje na hover */
	}

	.button:active {
		background-color: #00408d; /* Još tamnija plava kada je kliknuto */
		transform: scale(0.98); /* Lagano smanjenje na klik */
	}
		a {
			color: white; /* Bijela boja slova */
			text-decoration: none; /* Uklanja podvlačenje */
		}

		a:hover, a:focus {
			color: white; /* Bijela boja ostaje i na hover/focus */
			text-decoration: none; /* Osigurava da podvlačenje ne dolazi na hover/focus */
		}
		
		li {
            background-color: #ff69b4; /* Roza boja */
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        li:hover {
            background-color: #ff1493; /* Tamnija roza na hover */
            transform: scale(1.05); /* Lagano povećanje na hover */
        }
	
		.container {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
		
		.container table {
			border-collapse: collapse;
			width: 100%;
			margin: 20px 0;
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		
		.container th, .container td {
			background-color: #ff69b4; /* Roza pozadina */
			color: white; /* Bijela boja slova */
			border: 1px solid #ddd; /* Granica ćelija */
			text-align: center; /* Centriraj tekst */
			padding: 10px;
			height: 50px;
		}

		.container td:hover {
			background-color: #ff1493; /* Tamnija roza na hover */
		}

		.container th {
			background-color: #db7093; /* Svjetlija roza za zaglavlja */
			color: white; /* Bijela boja slova */
		}

		.container td:hover {
			background-color: #ff1493; /* Tamnija roza za ćeliju */
		}

		.container button {
			background-color: white; /* Boja gumba */
			color: ff1493; /* Bijela boja teksta */
			font-size: 16px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			width: auto; /* Automatska širina */
			height: auto; /* Automatska visina */
			padding: 10px 20px;
			transition: background-color 0.3s ease, transform 0.2s ease; /* Animacija */
		}

		.container td:hover button {
			background-color: #c71585; /* Tamnija roza za gumb na hover */
		}

		.container td:hover {
			background-color: transparent; /* Uklanja pozadinu ćelije prilikom hovera */
		}
				
		.container table td {
			background-color: #ff69b4 !important; /* Roza pozadina */
			color: white !important; /* Bijela boja slova */
		}
		
		.navigation {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
		}
		.navigation button {
			background-color: #ff69b4; /* Roza pozadina */
			color: white; /* Bijela boja teksta */
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			margin: 0 10px;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
			transition: background-color 0.3s ease;
		}
		.navigation button:hover {
			background-color: #ff1493; /* Tamnija roza na hover */
		}
		.navigation h2 {
			margin: 0 20px;
			font-size: 24px;
			font-weight: bold;
			color: #333;
		}
		
		button {
            background-color: #ff69b4;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            margin: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #ff1493;
        }
		
		.main-header {
			background-color: #ffffff; 
			padding: 15px 0;
			position: sticky;
			top: 0;
			width: 100%;
			z-index: 1000;
		}		
		
		#ime {
			font-weight: bold;
			color:#0f03fc;
		}
		
		#gumb {
			background-color: #ff1493; /* Boja gumba */
			color: white; /* Bijela boja teksta */
			font-size: 16px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			width: auto; /* Automatska širina */
			height: auto; /* Automatska visina */
			padding: 10px 20px;
			transition: background-color 0.3s ease, transform 0.2s ease; /* Animacija */
		}
		
		th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
		
		textarea {
            width: 100%;
            min-height: 100px;
            resize: none;
            overflow: hidden;
            box-sizing: border-box;
        }
		
		thead {
			position: sticky;
			top: 227px; /* Visina main-headera, prilagodi prema potrebi */
			z-index: 10; /* Osigurava da je thead iznad ostalog sadržaja */
			background-color: #fff; /* Bijela pozadina za vidljivost */
		}
		
		thead:nth-of-type(1) {
			top: 227px; /* Prvi thead */
		}

		thead:nth-of-type(2) {
			top: 327px; /* Drugi thead, prilagodi prema razmaku između */
		}
		
        }