body{
    background-color:#FFF;
}

table{
    background-color:white;
}

:root {
    --viconnect-color: #b51d29;
}

.nav-item, #navHeaderUl{
    padding-right:10px;
}

#header, #header .dropdown-menu{
    background-color: var(--viconnect-color)! important;
}

#header a{
    color:#FFFFFF ! important;
}

#imgHeaderLogo{
    margin-left:50px;
    height:50px;
}

#imgHeaderLogoMobile{
    height:25px;
}

@keyframes blink {
    0%, 100% {
        background-color: yellow; /* Start- und Endfarbe der Animation */
        border-color:black;
    }
    50% {
        background-color: var(--viconnect-color); /* Mittelfarbe der Animation */
        border-color:white;
    }
}

.hidden{
    display:none;
}

.blinking-button {
    animation: blink 2s infinite; /* 2 Sekunden für einen vollständigen Zyklus */
    padding: 10px 20px; /* Größe des Buttons */
    border: none; /* Keine Grenze */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Schriftgewicht */
    outline: none; /* Entfernt den Fokus-Umriss */
    cursor: pointer; /* Cursor zum Klicken */
    border:solid 1px;
}


.online{
    background-color:green;
}

.offline{
    background-color:var(--viconnect-color);
}

.devTr{
    height:45px;
}

.imgLink{
    height:80%;
}

  #login-container{
    position: absolute;
    z-index: 10;
    top:15%;
    width:350px;
    margin-left: calc(50% - 175px);
}

/* Rows Changes */

.even, .even td, .even tr{
    background-color:#78798d;
    color:white !important;
}

.odd{
    background-color:white;  
}


.even:hover, .odd:hover, tbody tr:hover > td{
    background-color:var(--viconnect-color) !important;
    color:white !important;
}

.state, .deviceState{
    height:20px;
    width:20px;
    margin:0 auto;
    justify-content: center;
    border-radius:20px;
}

.SitesState{
    height:35px;
    width:35px;
    margin:0 auto;
    justify-content: center;
    border-radius:35px;
}

.imgSiteStatus{
    width:25px;
    height:25px;
    margin-left:calc(50% - 13px);
    margin-top:5px;
}

  #msg {
    position: fixed;
    top: 120px;
    right: 10px;
    padding: 10px;
    background-color: white;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid black;
    color:black;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    z-index: 1000;
  }


/* Global Settings */
.hand{
    cursor:pointer ! important;
}

.space-5{ height:5px; }
.space-10{ height:10px; }
.space-20{ height:20px; }
.space-25{ height:25px; }


/* Devices */

#btnBack{
    position:absolute;
    top:85px;
    left:20px;
    width:50px;
    font-weight:600;
}

#accordionDevices{
    border:none ! important;
}



.imgDeviceImgUpload{
    width:30px;
    height:30px;
}


.TunnelLink{
    visibility: hidden;
}
/* END Devices*/

.center{
	margin: 0 auto;
	text-align:center ! important;
	text-decoration: none ! important;
}



/* Animation for Buttons and more*/


		/* Pulse animation — like a heartbeat */
		@keyframes pulse {
		  0%, 100% {
			transform: scale(1);
		  }
		  50% {
			transform: scale(1.4);
		  }
		}

		.anim-pulse {
		  animation: pulse 2s ease-in-out infinite;
		}

		/* Rotation animation */
		@keyframes rotate {
		  0% {
			transform: rotate(0deg);
		  }
		  100% {
			transform: rotate(360deg);
		  }
		}

		.anim-rotate {
		  animation: rotate 2s linear infinite;
		}
		
		/*Attribut setzten data-hover="anim-rotate"*/
		[data-hover~="anim-rotate"]:hover {
		  animation: rotate 2s linear infinite;
		}

		/* Background color changing animation */
		@keyframes backgroundShift {
		  0% {
			background-color: #3498db;
		  }
		  33% {
			background-color: #e74c3c;
		  }
		  66% {
			background-color: #2ecc71;
		  }
		  100% {
			background-color: #3498db;
		  }
		}

		.anim-background {
		  animation: backgroundShift 4s linear infinite;
		}
	
		/* Both animations together: */
			@keyframes pulseRotate {
			  0% {
				transform: scale(1) rotate(0deg);
			  }
			  50% {
				transform: scale(1.4) rotate(180deg);
			  }
			  100% {
				transform: scale(1) rotate(360deg);
			  }
			}

			.anim-pulse-rotate {
			  animation: pulseRotate 2s linear infinite;
			}