#map{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.sidebar-toggle{
	position: absolute;
	top: 90px;
	left: 0px;
	z-index: 1000;
	cursor: pointer;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	background:rgba(248, 248, 248, 0.8);
}

.sidebar{
	position: absolute;
	width: 80%;
	height: 100%;
	top: 0px;
	z-index: 1000;
	overflow-y: auto;
	left: -80%;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	background:rgba(248, 248, 248, 0.8);
}

@media (min-width: 768px) { 
	.sidebar{
		width: 350px;
		left: -350px;
	}	
}

.active-history{
	border: 2px solid #198754;
}

.backdrop{
	-webkit-backdrop-filter: saturate(180%) blur(6px);
	backdrop-filter: saturate(180%) blur(6px);
	background:rgba(248, 248, 248, 0.8);
}

.box-wrapper{
	position: fixed;
	width: 100%;
	height: auto;
	bottom: 0px;
	z-index: 1001;
	overflow-y: auto;
	left: 0;
}

.box{
	width: 100%;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	border-radius: 4px;
}

.network-status{
	width: 100%;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border-radius: 4px;
	color: #fff;
}

.network-offline{
	background:rgba(140, 0, 0, 0.8);
}

.nowplay{
	background: #fff;
	color: #7a7a7a;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	position: relative;
	top: -65px;
	z-index: 200;
	font-size: 11px;	
}

.user-speed{
	background: #fff;
	width: 120%;
	border-radius: 10px;
	position: relative;
	top: -10px;
	left: -10%;
	z-index: 200;
	font-size: 11px;	
}

/*
 *  Scrollbar
 */

.scrollbar::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: transparent;
}
 
.scrollbar::-webkit-scrollbar{
	width: 12px;
	background-color: transparent;
}
 
.scrollbar::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rgba(0,0,0,.75);
}

.actions-wrapper{
	position: fixed;
	top: 10px;
	right: 10px;
	left: 10px;
	z-index: 999;
}

@media (min-width: 576px) {
  .actions-wrapper{
		position: fixed;
		top: 10px;
		right: 10px;
		left: unset;
		z-index: 999;
	}
}

.history-actions{
	display: none;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0 15px 20px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%);
	border-radius: 4px;
}

.geofence-actions{
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0 15px 20px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%);
	border-radius: 4px;
}

.friendMarkerBg{
	border-radius: 100%;
}

.friendMarkerBg img{
	background: #fff;
	width: 45px; 
	height: 45px; 
	position: relative; 
	top: 0px; 
	left: 0px; 
	z-index: 10003; 
	border: 2px solid #999;
	border-radius: 100%;
}

.deviceMarkerBg{
	border-radius: 100%;
}

.deviceMarkerBg img{
	background: #fff;
	width: 45px; 
	height: 45px; 
	position: relative; 
	top: 0px; 
	left: 0px; 
	z-index: 10003; 
	border-radius: 100%;
	border: 2px solid #999;
}

.gps_ring_online { 
	position: relative;
	background: #08bf31;
	top: -52px;
	margin-bottom: -60px;
  border: 3px solid #08bf31;
	border-radius: 30px;
	height: 60px;
	width: 60px; 
	z-index: 10002;	 
	animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
}

.gps_ring_lowpower { 
	position: relative;
	background: #ffc107;
	top: -52px;
	margin-bottom: -60px;
  border: 3px solid #ffc107;
	border-radius: 30px;
	height: 60px;
	width: 60px; 
	z-index: 10002;	 
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
}

.gps_ring_offline { 
	position: relative;
	background: #dc3545;
	top: -52px;
	margin-bottom: -60px;
  border: 3px solid #dc3545;
	border-radius: 30px;
	height: 60px;
	width: 60px; 
	z-index: 10002;	 
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.mediaMarkerBg {
	border: 2px solid #198754;
	border-radius: 4px;
}

.mediaMarkerBg img {
	position: relative; 
	top: 0px; 
	left: 0px; 
	z-index: 10003; 
	border-radius: 2px;
}

.table{
	color: unset !important;
	background: unset !important;
	--bs-table-bg: transparent !important;
}

/* Discord box */
.discord-box{
	border-radius: 8px;
	color: #fff !important;
}

.discord-banner{
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: unset !important;
	height: unset !important;
}

.discord-banner:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .493) !important;
	opacity: 1;
	-webkit-backdrop-filter: blur(128px);
	backdrop-filter: blur(128px);
}

.discord-banner:after{
	height: 260px;
	--mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.15) 85%, rgba(0, 0, 0, 0.075) 90.5%, rgba(0, 0, 0, 0.037) 94.85%, rgba(0, 0, 0, 0.019) 98%, rgba(0, 0, 0, 0) 100% );
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	width: 100%;
	pointer-events: none;
	background-image: inherit !important;
	background-color: inherit !important;

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.discord-header{
	position: relative;
	top: -75px;
}

.discord-avatar{
	width: 120px;
	height: 120px;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .205));
	position: absolute;
	top: -68px;
	border-radius: 50%;
}

.discord-name{
	margin-top: 200px;
	margin-bottom: 20px;
	position: relative;
	display: block;
	white-space: normal;
	word-break: break-word;
	line-height: 24px;
	font-size: 20px;
	font-weight: 600;
}

.discord-flags{
	position: absolute;
	top: -75px;
	right: 0px;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(60, 60, 60, 0.8);
  border-radius: 4px;
}

.discord-flags img{
	width: 35px;
	height: 35px;
}

.spotify-progress-bar{
	background-color: rgba(79,84,92,.16); 
	height: 4px; 
	margin-bottom: 4px; 
	border-radius: 2px;
}

.spotify-progress-inner{
	background-color: #fff; 
	height: 100%; 
	min-width: 4px; 
	border-radius: 2px;
}

#discord-activites-carousel > .card {
	background: #111;
}

.activity-action-btn{
	cursor: pointer;
	color: #dedede;
	-webkit-transition: background-color .17s ease,color .17s ease;
	transition: background-color .17s ease,color .17s ease;
	background-color: rgba(196, 196, 196, .1) !important;
	border-radius: 4px;
	text-decoration: none !important;
}

.activity-action-btn:hover{
	color: #dedede;
	background-color: rgba(255, 255, 255, .1) !important;
	text-decoration: none !important;
}

.text-dynamic{
	color: var(--bs-body-color);
}

/* Login box */
.login-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: rgb(255, 255, 255, 0.1);
}

.login-box::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300%;
  background: linear-gradient(#43ff5f, #43ff5f);
  animation: animate 4s linear infinite;
}

.login-box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 10px;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.modal-content-login{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-clip: padding-box;
	border-radius: 0.3rem;
	outline: 0;
	z-index: 200;
}

/* Cards hover effect */
/*
.friends:hover > .card-fluent::after, .devices:hover > .card-fluent::after {
  opacity: 1;
}
*/

.card-fluent {
  background-color: rgba(255, 255, 255, 0.1); 
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/*
.card-fluent:hover::before {
  opacity: 1;
}

.card-fluent::before,
.card-fluent::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card-fluent::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(0, 0, 0, 0.08),
    transparent 40%
  );
  z-index: 3;
}

.card-fluent::after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(0, 0, 0, 0.4),
    transparent 40%
  );
  z-index: 1;
}
*/

.card-fluent > .card-content {
	/* background-color: #fff !important; */
  border-radius: inherit;
  display: flex;
  flex-grow: 1;
  inset: 1px;
  z-index: 2;
}

.card-fluent > .card-content-pairing {
	/* background-color: #fff !important; */
  border-radius: inherit;
  display: inline-block;
  inset: 1px;
  z-index: 2;
}

.user-info{
	cursor: pointer;
	z-index: 20;
}

.device-info{
	cursor: pointer;
	z-index: 20;
}

.pairing{
	background: rgba(222, 222, 222, 0.5);
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, .125);
	z-index: 20;
}

.btn-black{
	color: #fff;
	background-color: #000;
}

.btn-black:hover{
	color: #fff;
	background-color: #000;
}

/* Overlay */
.media-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1055;
}

/* Container begrenzt Breite, nutzt volle Höhe */
.media-wrapper{
  position: relative;
  width: min(1400px, 95vw);
  height: 100vh; /* nie höher als der Viewport/Backdrop */
  display: flex;
  flex-direction: column;
}

/* Row füllt die komplette Höhe */
.media-sheet{
  height: 100%;
}

/* Exakte 70/30 auf ≥LG */
@media (min-width: 992px){
  .col-lg-70{ flex: 0 0 70%; max-width: 70%; }
  .col-lg-30{ flex: 0 0 30%; max-width: 30%; }
}

/* WICHTIG für korrektes Shrinken im Flex/Grid-Context */
.photo-box, .media-info{
  min-width: 0;
  min-height: 0;
}

/* Linke Seite: schwarzer Hintergrund fürs Bild */
.photo-box{
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
	position: relative;
}

/* Der eigentliche Fix:
   - Gib dem <img> den gesamten verfügbaren Platz (width/height 100%)
   - object-fit: contain hält immer komplett im Rahmen (Portrait/Querformat)
   - Kein Abschneiden mehr, nie > 100% der Höhe */
.media-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Rechte Seite: separat scrollbar, falls Inhalte länger sind */
.media-info{
  height: 100%;
  overflow: auto;
  border-left: 1px solid rgba(0,0,0,.08);
}

/* Mobile: Stack mit 60/40 (anpassbar) */
@media (max-width: 991.98px){
  .photo-box{ height: 60vh; }
  .media-info{
    height: 40vh;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.08);
  }
}

.media-close{
	position: absolute;
	top: 10px;
  right: 10px;
}

.cpi{
  --p: 65;
  --size: 1.5em;
  width: var(--size);
  height: var(--size);
  display:inline-block;
}

.cpi .track{
  fill:none;
  stroke: var(--bs-gray-300);
  stroke-width:4;
}

.cpi .bar{
  fill:none;
  stroke: var(--bs-primary);
  stroke-width:4;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin:50% 50%;
  stroke-dasharray:100;
  stroke-dashoffset: calc(100 - var(--p));
}

@media (prefers-color-scheme: dark) {
	.sidebar-toggle{
		color: #fff;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		background: rgba(60, 60, 60, 0.8);
	}
	
	.sidebar{
		color: #fff;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		background: rgba(60, 60, 60, 0.8);
	}

	.card {
		background: rgba(17, 17, 17, 0.5) !important;
	}

	.card-fluent {
		background-color: rgba(255, 255, 255, 0.1);
	}

	/*
	.card-fluent > .card-content {
		background-color: #111 !important;
	}

	.card-fluent > .card-content-pairing {
		background-color: #111 !important;
	}

	.card-fluent::before {
		background: radial-gradient(
			800px circle at var(--mouse-x) var(--mouse-y), 
			rgba(255, 255, 255, 0.08),
			transparent 40%
		);
		z-index: 3;
	}
	
	.card-fluent::after {  
		background: radial-gradient(
			600px circle at var(--mouse-x) var(--mouse-y), 
			rgba(255, 255, 255, 0.4),
			transparent 40%
		);
		z-index: 1;
	}
	*/

	.scrollbar::-webkit-scrollbar-thumb{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: rgba(0,0,0,.4);
	}

	.border-bottom{
		border-bottom: 1px solid #111 !important;
	}

	.modal-content{
		background: #333;
		color: #fff;
	}

	.modal-content-login{
		color: #fff;
		z-index: 200;
	}

	.login-box::after {
		background: #333 !important;
	}

	.modal-header{
		border-bottom: 1px solid #222;
	}

	.modal-footer{
		border-top: 1px solid #222;
	}

	.accordion-item{
		background: #222;
	}

	.accordion-button{
		background: #222;
		color: #fff;
	}

	.accordion-button:not(.collapsed){
		background-color: #161616;
	}

	.btn-close{
		color: #fff;
	}

	.form-floating > label{
		color: #000;
	}
	
	.backdrop{
		-webkit-backdrop-filter: saturate(180%) blur(6px);
		backdrop-filter: saturate(180%) blur(6px);
		background: rgba(60, 60, 60, 0.8);
	}
	
	.history-actions{
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background: rgba(60, 60, 60, 0.8);
	}
	
	.geofence-actions{
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background: rgba(60, 60, 60, 0.8);
	}
	
	.friendMarkerBg{
		border-radius: 100%;
	}
	
	.friendMarkerBg img{
		background: #222;
		border: 2px solid #999;
	}

	.deviceMarkerBg{
		border-radius: 100%;
	}
	
	.deviceMarkerBg img{
		background: #222;
		border: 2px solid #999;
	}
	
	.gps_ring_online {
		background: #198754;
		border: 3px solid #198754;
	}
	
	.gps_ring_lowpower {
		background: #ffc107;
		border: 3px solid #ffc107;
	}
	
	.gps_ring_offline {
		background: #dc3545;
		border: 3px solid #dc3545;
	}

	.table{
		color: #fff;
		background: unset !important;
		--bs-table-bg: unset !important;
	}

	.box{
		color: #fff;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background: rgba(60, 60, 60, 0.8);
	}

	.nowplay{
		background: #444;
	}

	.user-speed{
		background: #444;
		color: rgb(182, 181, 181);
	}

	.text-dynamic{
		--bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important;
	}

	.pairing{
		background: rgba(34, 34, 34, 0.4);
		border-radius: 4px;
		border: 1px solid #111;
	}
}

[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark] .carousel .carousel-control-prev-icon, [data-bs-theme=dark].carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon{
	filter: unset !important;
}

[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target], [data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] {
	background-color: #fff !important;
}

[data-bs-theme=light] .carousel .carousel-control-next-icon, [data-bs-theme=light] .carousel .carousel-control-prev-icon, [data-bs-theme=light].carousel .carousel-control-next-icon, [data-bs-theme=light].carousel .carousel-control-prev-icon{
	filter: invert(0) grayscale(100) !important;
}