body {
  background-image: url("images/bg.avif");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  resize: both;
 overflow: hidden;
}
		.LoginPage {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
           /* background-color: rgba(255, 255, 255, 0.2);*/
        }
        .LoginInput {
            background: rgb(255, 255, 255, 0.2); 
            padding-top: -5px;
			padding-right: 20px;
			padding-bottom: 20px;
			padding-left: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			filter: drop-shadow(0 16px 50px #000);
			max-height:50px;
			max-width:100px;
			transition: max-width 0.3s ease, max-height 0.5s ease, opacity 0.5s ease;
			overflow: hidden;
			
        }
		.LoginInput:hover {
		background: rgb(255, 255, 255, 1);
		max-height: 50%;
		max-width: 50%;	
		
		}
		
        .login-title {
            margin-bottom: 20px;
			 color: #000;
 
}
        .login-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
			 
        }
		.MFAInput {
            background: rgb(255, 255, 255, 0.2); 
            padding-top: -5px;
			padding-right: 20px;
			padding-bottom: 20px;
			padding-left: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			filter: drop-shadow(0 16px 50px #000);
			max-height:50px;
			max-width:100px;
			transition: max-width 0.3s ease, max-height 0.5s ease, opacity 0.5s ease;
			overflow: hidden;
			
        }
		.MFAInput:hover {
		background: rgb(255, 255, 255, 1);
		max-height: 50%;
		max-width: 50%;	
		
		}
        #buy-button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #buy-button:hover {
            background-color: #0056b3;
        }
		 #down-button {
            width: 100%;
            padding: 10px;
			background:url('images/file_white.png') no-repeat left center;
			background-size: contain;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #down-button:hover {
            background-color: #0056b3;
        }
		 #menu-button {
			
            width: 50px;
			height: 50px;
            padding: 15px;
			font-size: 3rem;
            opacity: 0.5;
            cursor: pointer;
			border: none;
			background-image: url("images/dots_blue.png");
			background-color: transparent; /* Ez biztosítja, hogy a háttér átlátszó legyen */
			background-repeat: no-repeat; /* Ez megakadályozza a kép ismétlődését */
			background-size: contain; /* Ez biztosítja, hogy a kép teljesen beleférjen a gombba */
        }
        #menu-button:hover {
            
        }
		 #mute-checkbox {
        margin-left: 10px;
        cursor: pointer;
    }

    label[for="mute-checkbox"] {
        color: white;
        font-size: 1rem;
        cursor: pointer;
    }
		#panel {
			position: fixed; /* Fix pozíció */
            top: 5px;      /* Távolság a tetejétől */
            right: 10px;    /* Távolság a jobb oldaltól */
			 display: flex;
			flex-wrap: inline;
		}
		#clock {
            font-size: 3rem;
            color: #333;
            background: #fff;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
		#sumpanel {
			position: fixed; /* Fix pozíció */
            top: 10px;      /* Távolság a tetejétől */
            right: 20px;    /* Távolság a jobb oldaltól */
			 display: flex;
			flex-wrap: inline;
		}
		
		
		#Prof-div {
			 background-color: rgb(36, 162, 215, 0.2); 
			/* display: none;*/
			 
			 align-items: top;  
			 text-align: left;
						 
		}
		
		.hidden {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.3s ease, max-height 0.5s ease, opacity 0.5s ease;
}

.visible {
    max-height: 350px; /* vagy a kívánt maximális magasság */
    max-width:  80%; /* vagy a kívánt maximális szélesség */
    opacity: 1;
    transition: max-width 0.3s ease, max-height 0.5s ease, opacity 0.5s ease;
}
		
		#Helper-div {
			display: none;
			position: fixed;
			top: 50%; /* Függőlegesen középre */
			left: 50%; /* Vízszintesen középre */
			transform: translate(-50%, -50%); /* A pontos középre helyezés */
			background-color: rgba(108, 105, 105, 0.8); /* Áttetsző kék háttér */
			color: white;
			max-height: 80%;
			width: 80%;
			padding: 5px; /* Kényelmes belső margók */
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
			border-radius: 10px; /* Lekerekített sarkok */
			text-align: left;
			z-index: 999999;		 
		}
		#Settings-div {
			display: none;
			position: fixed;
			top: 50%; /* Függőlegesen középre */
			left: 50%; /* Vízszintesen középre */
			transform: translate(-50%, -50%); /* A pontos középre helyezés */
			background-color: rgba(108, 105, 105, 0.8); /* Áttetsző kék háttér */
			color: white;
			max-height: 80%;
			width: 80%;
			padding: 5px; /* Kényelmes belső margók */
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
			border-radius: 10px; /* Lekerekített sarkok */
			text-align: left;
			z-index: 999999;		 
		}
		
		#AddUser-div {
			position: fixed;
    top: 50%; /* Függőlegesen középre */
    left: 50%; /* Vízszintesen középre */
    transform: translate(-50%, -50%); /* A pontos középre helyezés */
    background-color: rgba(108, 105, 105, 0.8); /* Áttetsző kék háttér */
    color: white;
    max-height: 600px;
    width: 50%;
    padding: 20px; /* Kényelmes belső margók */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
    border-radius: 10px; /* Lekerekített sarkok */
    text-align: left;
    z-index: 99998;		 
		}
		
		#Delete-div {
			position: fixed;
    top: 50%; /* Függőlegesen középre */
    left: 50%; /* Vízszintesen középre */
    transform: translate(-50%, -50%); /* A pontos középre helyezés */
    background-color: rgba(36, 162, 215, 0.8); /* Áttetsző kék háttér */
    color: white;
    max-height: 600px;
    max-width: 50%;
    padding: 20px; /* Kényelmes belső margók */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
    border-radius: 10px; /* Lekerekített sarkok */
    text-align: left;
    z-index: 999998;		 
		}
		#Pass-div {
			position: fixed;
    top: 50%; /* Függőlegesen középre */
    left: 50%; /* Vízszintesen középre */
    transform: translate(-50%, -50%); /* A pontos középre helyezés */
    background-color: rgba(108, 105, 105, 0.8); /* Áttetsző kék háttér */
    color: white;
    max-height: 600px;
    max-width: 50%;
    padding: 20px; /* Kényelmes belső margók */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
    border-radius: 10px; /* Lekerekített sarkok */
    text-align: left;
    z-index: 99998;		 
		}
		#AddHost-div {
			position: fixed;
    top: 50%; /* Függőlegesen középre */
    left: 50%; /* Vízszintesen középre */
    transform: translate(-50%, -50%); /* A pontos középre helyezés */
    background-color: rgba(94, 86, 86, 0.8); /* Áttetsző kék háttér */
    color: white;
    max-height: 90%;
    max-width: 80%;
    padding: 10px; /* Kényelmes belső margók */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Szép árnyék */
    border-radius: 10px; /* Lekerekített sarkok */
    text-align: left;
    z-index: 99998;		 
		}
		
		#footer {
			position: fixed; 
			position: fixed;  
			left:0px; 
			bottom: 0px; 
			width: 100%; 
			text-align: center;
			height: 20px; 
			background-color: rgb(36, 162, 215, 0.5); 
			z-index: 99998;
		}
		
		.foot {
			position: fixed; 			 
			left:0px; 
			bottom: 0px; 
			width: 100%; 
			text-align: center;
			height: 20px; 
			background-color: rgb(36, 162, 215, 0.5); 
			z-index: 99999;
		}
		.cmd-textarea {
            width: 100%;
            height: 200px;
            font-family: monospace;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
        }
		
		 .heartbeat-div {
        padding: 5px;
        max-width: 100px;
        margin: 10px;
        border-radius: 5px;
        color: white;
        overflow: hidden; /* Biztosítja, hogy a tartalom ne lógjon ki */
        transition: max-width 0.3s ease, max-height 0.5s ease,  background-color 0.3s ease, opacity 0.5s ease; /* Animáció a magasság és az átlátszóság változásához */
        max-height: 50px; /* Alapértelmezett magasság */
        opacity: 1; /* Alapértelmezett átlátszóság */
    }

    .heartbeat-div.green {
        max-height: 50px; /* Alapértelmezett magasság zöld háttérszín esetén */
		   
    }

    .heartbeat-div.green:hover {
	   max-height: 500px; /* Maximális magasság, ha az egér rávonul (állítsd be a szükséges értékre) */
		 max-width: 250px; /* Maximális szélesség, ha az egér rávonul (állítsd be a szükséges értékre) */
		background-color: rgb(0, 255, 0, 1); 
    }

    .heartbeat-div.orange {
        max-height: 500px; /* Maximális magasság narancs vagy piros háttérszín esetén */
		max-width: 250px; /* Maximális szélesség, ha az egér rávonul (állítsd be a szükséges értékre) */
    }
    .heartbeat-div.red {
	/*position: fixed;*/
   /* top: 50%; /* Függőlegesen középre */
   /* left: 50%; /* Vízszintesen középre */
    /* transform: translate(-50%, -50%); /* A pontos középre helyezés */
        max-height: 500px; /* Maximális magasság narancs vagy piros háttérszín esetén */
		max-width: 250px; /* Maximális szélesség, ha az egér rávonul (állítsd be a szükséges értékre) */
		
    }
	.command {
            background-color: black;
            color: white;
            padding: 10px;
        }
		
	.CMDCont{
		position: relative; 
		background-color: black; 
		padding: -1px;
	}
	#CopyBTN {
		position: absolute; 
		top: 5px; 
		right: 10px;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-image: url("images/copy_white.png");
    background-color: transparent; /* Ez biztosítja, hogy a háttér átlátszó legyen */
    background-repeat: no-repeat; /* Ez megakadályozza a kép ismétlődését */
    background-size: contain; /* Ez biztosítja, hogy a kép teljesen beleférjen a gombba */
   
}

#CopyBTN::after {
    content: 'Másol';
    color: white;
    background-color: black;
    padding: 0px;
    border-radius: 5px;
    position: absolute;
     top: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

#CopyBTN:hover::after {
    opacity: 1;
}

#CopyBTN:hover {
    background-image: url("images/copy.png");
    background-color: white; /* Ez biztosítja, hogy a háttér átlátszó legyen */
    background-repeat: no-repeat; /* Ez megakadályozza a kép ismétlődését */
    background-size: contain; /* Ez biztosítja, hogy a kép teljesen beleférjen a gombba */
}
#DownBTN {
		position: absolute; 
		top: 5px; 
		right: 45px;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-image: url("images/file_white.png");
    background-color: transparent; /* Ez biztosítja, hogy a háttér átlátszó legyen */
    background-repeat: no-repeat; /* Ez megakadályozza a kép ismétlődését */
    background-size: contain; /* Ez biztosítja, hogy a kép teljesen beleférjen a gombba */
   
}

#DownBTN::after {
    content: 'Letöltés';
    color: white;
    background-color: black;
    padding: 0px;
    border-radius: 5px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

#DownBTN:hover::after {
    opacity: 1;
}

#DownBTN:hover {
    background-image: url("images/file.png");
    background-color: white; /* Ez biztosítja, hogy a háttér átlátszó legyen */
    background-repeat: no-repeat; /* Ez megakadályozza a kép ismétlődését */
    background-size: contain; /* Ez biztosítja, hogy a kép teljesen beleférjen a gombba */
}