#body,html
{
	background-color: black;
	width: 100%;
	max-width: 100%;	
	margin: 0px;
}

header 	
		{
            display: none;
	
        }
footer {
    position: fixed; /* lub absolute, jeśli nie ma być przyklejony do okna */
    right: 5px;
    bottom: 0;
    width: auto; /* szerokość dopasowana do zawartości */
    background-color: black;
    color: white;
    text-align: right;
    padding: 0; /* opcjonalne, aby dodać odstęp */
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
#map {
	position: absolute;	
    top: 30px;	
    left: 0;
    right: 0;
    bottom: 20px;
	z-index: 0;
	height: 95%;
	width: 100%;
	max-width: 100%;
}
    
a {
	color:#1978cf;
}
a:hover {
	color:#fff;
}
p 		{			
			text-align: center;
			font: arial-black
		}
h2, h3, h4 {
	white-space:nowrap;
	margin:1em 0 0 0;
}
h3 a,
h3 a:hover {
	text-decoration:none;
}


ul {
	font-size:.85em;
	margin:0;
	padding:0;
}
li {
	margin:0 0 2px 18px;
}
label {    
    color: black;
    text-align: left;
    padding: 0; /* opcjonalne, aby dodać odstęp */
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
span {    
    color: black;
    text-align: left;
    padding: 0; /* opcjonalne, aby dodać odstęp */
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}


#post-it {
	width:9em;
	height:9em;
	margin-left:2em;
	padding:1em;
	float:left;
	background:#fbf5bf;
	border:1px solid #c6bb58;
	box-shadow: 2px 2px 6px #999;
	color:#666;
}
#copy {
	position:fixed;
	z-index:1000;
	right:150px;
	top:-8px;
	font-size:.85em;
	padding:8px 8px 2px 8px;
	background: #323b44;
	border: 2px solid #737c85;
	border-radius:.7em;
	opacity: 0.9;
	box-shadow:0 0 8px #5f7182;
	color:#eee
}
#copy a {
	color:#ccc;
	text-decoration:none
}
#copy a:hover {
	color:#fff
}
#ribbon {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	filter: alpha(opacity=80);
	-khtml-opacity: .8;
	-moz-opacity: .8;
	opacity: .8;
}
.contents {
	float:left;
	margin:0 2em 2em 0;
}
#comments {
	clear:both;
}
		
		.leaflet-control-coordinates {
            background: white;
            padding: 0px;
            border: 2px solid rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
        
		/* Style dla wyszukiwarki */
        #search-container { 			
            position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			max-width: 100%;
			height: 26px;
			top: 1px;
            z-index: 1000;
            background: black;
            
            border-radius: 0px;            
            font-family: Arial, sans-serif; /* Ustawienie czcionki */
            font-size: 11px; /* Mniejsza czcionka */
            font-weight: regular; /* Pogrubiona czcionka */
        }

        #search-input {            
			width: 345px;			
            padding: 2px;
			height: 21px;
            border: none;
            border-radius: 3px;
            font-size: 10px; /* Mniejsza czcionka */
            font-weight: bold; /* Pogrubiona czcionka */
        }

         #clear-search-button {
			padding: 0px;
			height: 26px; /* Explicite ustawiona wysokość */
			width: 12px; /* Minimalna szerokość */
            border: none;
            background: #0078A8;
            color: red;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px; /* Mniejsza czcionka */
            font-weight: bold; /* Pogrubiona czcionka */
            
			
        }
		#search-button,        
        #toggle-search-container-button {
            padding: 0px;
			height: 26px; /* Explicite ustawiona wysokość */
			width: 40px; /* Minimalna szerokość */
            border: none;
            background: #0078A8;
            color: white;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px; /* Mniejsza czcionka */
            font-weight: extra-bold; /* Pogrubiona czcionka */
            
			
        }

        #search-button:hover,
        #clear-results-button:hover,
        #toggle-search-container-button:hover {
            background: #005f8a;			
        }

        #search-results {
		max-height: 200px;
		overflow-y: auto;
		margin-top: 1px;
		background: white;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 5px;
		font-size: 12px;
		font-weight: bold;
		display: none; /* Domyślnie ukryte */
		}

#search-results.visible {
    display: block; /* Klasa do pokazywania wyników */
}

#search-results div {
    padding: 1px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

#search-results div:hover {
    background-color: #f0f0f0;
} 
 
#controls {
        position: absolute;
        top: 90px;
        right: 0;
        z-index: 1000;
        background: white;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        width: 250px;
        transition: transform 0.3s ease-in-out;
    }

    #controls.collapsed {
        transform: translateX(calc(100% - 0px));
    }

    #toggle-panel {
        position: absolute;
        left: -57px;
        top: 0;
        width: 45px;
        height: 30px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
    }

    #controls-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #draw-mode {
        width: 100%;
        padding: 8px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 10px;
    }

    #draw-mode:hover {
        background-color: #45a049;
    }

    .mode-switcher {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 5px;
    }

    .mode-switcher span {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .mode-switcher label {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0px;
        border-radius: 3px;
    }

    .mode-switcher label:hover {
        background-color: #f5f5f5;
    }

    .mode-switcher input {
        margin-right: 8px;
    }

    .drawing-settings {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .drawing-settings label {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .export-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .export-buttons button {
        padding: 8px;
        border: none;
        border-radius: 5px;
        background-color: #2196F3;
        color: white;
        cursor: pointer;
    }

    .export-buttons button:hover {
        background-color: #0b7dda;
    }


/* Nowy układ dla przycisków cofania i wymazywania */
.undo-erase-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.undo-erase-buttons button {
    flex: 1;
    padding: 8px;
}

/* Nowy układ dla przycisków zapisu/wczytywania */
.storage-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.storage-buttons button {
    flex: 1;
    padding: 8px;
}

/* Nowy układ dla przycisków czyszczenia i kalibracji */
.clear-calibration-buttons {
    display: flex;
    gap: 5px;
}

#clear-drawing {
    flex: 1;
    padding: 8px;
    border-radius: 5px !important; /* Kwadratowy kształt */
    width: auto;
}

#calibration-button {
    flex: 1;
    padding: 8px;
}

/* Kolory przycisków */
#undo-drawing {
    background-color: #ff9800;
    color: white;
}

#undo-drawing:hover {
    background-color: #e68a00;
}

#erase-mode {
    background-color: #f44336;
    color: white;
}

#erase-mode:hover {
    background-color: #da190b;
}

#save-drawing {
    background-color: #4CAF50;
    color: white;
}

#save-drawing:hover {
    background-color: #45a049;
}

#load-drawing {
    background-color: #2196F3;
    color: white;
}

#load-drawing:hover {
    background-color: #0b7dda;
}

#clear-storage {
    background-color: #9e9e9e;
    color: white;
}

#clear-storage:hover {
    background-color: #7e7e7e;
}

#clear-drawing {
    background-color: #607d8b;
    color: white;
}

#clear-drawing:hover {
    background-color: #455a64;
}

#calibration-button {
    background-color: #673ab7;
    color: white;
}

#calibration-button:hover {
    background-color: #5e35b1;
}