#birdID {
	position: relative;
    background-color: #e9e9e7;
    text-align: center;
    overflow: hidden;
    width: 98%;
}
#birdID > span {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    float: left;
    width: 100%;
    background-color: #d5d5cb;
    padding-top: 17px;
    padding-bottom: 17px;
}
#birdID em {font-style: normal}

.hidden { display: none; }
		
#birdID form {
	display: inline-block;
	margin-bottom: 15px;
}

#birdID input[type=email] {
	width: 198px;
    border: 1px solid #ccc;
    padding: 6px;
    font-size: 15px;
    float: left;
}

#birdID input[type="file"] {
  display: none;
}

.custom-file-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 11px;
    min-width: 180px;
    background-color: #377a9f;
    color: #fff;
    border-radius: 6px;
	/* Forhindrer Chrome i at markere teksten og åbne søgebjælken */
    -webkit-user-select: none;  /* Safari/Chrome */
    user-select: none;         /* Standard */

    /* Forhindrer "long-press" menuen på mobiler */
    -webkit-touch-callout: none;

    /* Gør knappen mere responsiv ved berøring */
    touch-action: manipulation;
}
/* Loading-hjul yderst til venstre i knappen, mens en statusbesked
   ("Indlæser model...", "Analyserer lyden...") vises i stedet for "Vælg fil". */
.birdid-spinner {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: birdid-spin 0.8s linear infinite;
}
@keyframes birdid-spin {
    to { transform: rotate(360deg); }
}
#cancelBtn {
	background-color: #e9e9e7;
	margin-bottom: 20px;
	border: 1px solid #938f8f;
	color: #847e7e;
}
#pauseBtn {
	background-color: #999;
	padding-top: 12px;
	padding-bottom: 12px;
}
#stopBtn {
	background-color: #d05656;
	padding-top: 12px;
	padding-bottom: 12px;
}
#birdID input[type=submit] {
    background-color: #40413c;
    color: white;
    border: 0px solid #666;
    padding: 5px 8px 5px 8px;
    font-size: 15px;
    height: 30px;
}
#SelectedFile {
	width: 100%;
    height: 15px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #377a9f;
}
#EraseData {
	margin-top: 0px;
    font-style: italic;
    font-size: 12px;
    margin-bottom: 1px;
	line-height: 20px;
    color: #6a6a67;
}
/* #statusText {
	width: 100%;
	font-size: 25px;
	margin-bottom: 20px; 
	margin-top: 40px;"
}	*/
#UploadError {
	width: 100%;
    margin-top: 15px;
    height: 14px;
    font-size: 12px;
    color: red;
}

#uploadmessage {
	background-color: #fff;
	display: inline-block;
	padding: 15px;
	border: 1px solid #54544f;
	width: 85%;
	line-height: 26px;
	    margin-top: 25px;
}
.overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255 255 255 / 88%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	padding-top: 31px;
}
#serverresponse {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(197 195 195 / 88%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.icon22 {
	width: 22px;
	height: 22px;
	vertical-align: -0.325em;
	fill: currentColor;
	margin-right: 8px;
}
.icon16 {
	width: 16px;
	height: 16px;
	vertical-align: -0.125em;
	fill: currentColor;
	margin-right: 8px;
}
		
.OKbutton {
	width: 40px;
    height: 31px;
    margin: auto;
    margin-bottom: 20px;
}	
.OKbutton button {
	padding: 7px 16px 7px 16px; 
	margin-top: 19px;
	border-radius: 6px;
	border: 1px solid #999;
}

/* Container til animationen */
.recording-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    height: 100px; /* Plads til pulseringen */
}

.pulse-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #628927; /* Samme røde farve som din knap */
    border-radius: 50%;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #628927;
    border-radius: 50%;
    animation: pulse-wave 2s infinite linear;
    z-index: -1;
}

/* Animationen der får ringen til at vokse og blive gennemsigtig */
@keyframes pulse-wave {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.mic-icon {
    fill: white;
    width: 30px;
    height: 30px;
}

@media (max-width: 760px) {
	#birdID > span {
		font-size: 22px;
	}
}

/* -------------------------------
	Filupload + resultater (klient-side identifikation)
---------------------------------- */
#birdIdResults {
	width: 85%;
	margin: 20px auto 25px auto;
	text-align: left;
}
.birdid-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Samme kort-stil som resultaterne i /birdnet/ (den "live" mikrofon-
   identifikation) - miniature + navn + tillids-badge i én række. */
.birdid-result {
	display: flex;
	align-items: stretch;
	min-height: 90px;
	margin-bottom: 8px;
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.birdid-result-thumb {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	background-color: #f8f9fa;
}
.birdid-result-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.birdid-result-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
}
.birdid-result-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: bold;
	font-size: 15px;
	color: #40413c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.birdid-result-name a {
	color: #377a9f;
	text-decoration: none;
}
.birdid-result-name a:hover {
	text-decoration: underline;
}
.birdid-result-pct {
	flex-shrink: 0;
    color: #445914;
    font-weight: bold;
    font-size: 18px;
    padding: 4px 11px;
    font-weight: 400;
}