body {
  background-image: url("images/bg.avif");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  resize: both;
 overflow: hidden;
 color:white;
}
.phpOut {
	position: fixed; 
    top: 5px; 
	left: 5px;	
}
		.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.01); 
            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, background-color 0.5s ease;
			overflow: hidden;
			color: white;
			
        }
		.MFAInput {
            background: rgb(255, 255, 255, 0.01); 
            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, background-color 0.5s ease;
			overflow: hidden;
			color: white;
			
        }
		/* Hover effekt csak desktopon */
@media (hover: hover) and (pointer: fine) {
	.MFAInput:hover,
    .LoginInput:hover {
        background: rgba(255, 255, 255, 1);
        max-width: 350px;
        max-height: 450px;
        opacity: 1;
		color: black;
    }
}

/* Mobil és iPad: alapból nagy, nincs hover */
@media (hover: none) and (pointer: coarse) {
	.MFAInput,
    .LoginInput {
        background: rgba(255, 255, 255, 1);
        max-width: 350px;
        max-height: 350px;
        opacity: 1;
    }
}
		
        .login-title {
            margin-bottom: 20px;
			
 
}
        .login-input {
            width: 98%;
            padding: 2%;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
			 
}

		 .login-input2 {
			 position: relative;
			 text-align: center;
            max-width: 80%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
			 
}

		 .login-input3 {
			position: relative;
            max-width: 95%;
            padding: 2px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
			 
}
		
        #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(119, 216, 231, 0.5); 
			/* display: none;*/
			 color:white;
			 align-items: top;  
			 text-align: left;
			 border-radius: 5px;
						 
		}
		
		.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;
}
		
		#AddLicence-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: 450px;
			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;		 
		}
		#Offer-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: 100%;
			max-width: 100%;
			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;	
			overflow-y: auto;
			overflow-x: hidden;
		}
		#EditSoftware {
			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;
			padding-right:10px;
			max-height: 100%;
			max-width: 100%;
			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;	
			overflow-y: auto;
			overflow-x: hidden;
		}
		#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,
		#AddBranch-div,
		#AddSoftware-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: 100%;
    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;		 
		}
		#Licenses-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ő háttér */
    color: white;
    max-height: 80%;
	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;
	}
	#LicenceList {
	 flex: 1; /* A maradék helyet kitölti */
    overflow-y: auto;
	max-height: 600px;
	width:100%;
    margin-top: 5px; /* ha kell távolság a tetejétől */
	/*background-color: rgb(36, 162, 215, 0.5); */
	}
	table {
    width: 80%; /* Kitölti a szülő div teljes szélességét */
	border: 0px solid black;
    border-collapse: collapse;
	text-align: center;
	}
	th {
    border: 0px solid black;
    white-space: nowrap; /* Sortörés kikapcsolása */
    padding: 20px; /* Növeli a cellák közötti távolságot */
	background-color:orange;
	font-size: 18px; 
	position: sticky; /* Rögzített pozíció */
    top: 0; /* A táblázat tetején marad */
    z-index: 1; /* Fejléc láthatóságának biztosítása */
	}
	td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 20px;
	border: 0px solid black;
	}	
	tr:nth-child(even) {
    background-color: rgb(36, 162, 215, 0.5); 
}

#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); 
			color: white;
			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;
        }
		
		.SoftListCont {
			display: flex; 
			flex-direction: column; 
			overflow-y: auto; 
			flex-wrap: wrap; 
			width:100%; 			
			/*background-color:red;*/
			align-content: left;
			margin-top: 5px;
		}


   .heartbeat-div.green {
    max-height: 56px;
	color: white;
    max-width: 300px;
    /*background-color: rgba(89, 175, 51, 0.8);*/
	background-color: rgba(116, 216, 231, 0.8);
    transition: max-width 0.8s ease, max-height 0.8s ease, background-color 0.3s ease, opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease;
    overflow: hidden;
    padding-left: 5px;
	padding-top: -5px;
    margin-left: 5px;
	margin-top: 1px;
    border-radius: 8px;
	
}
.heartbeat-div.green.clicked,
.heartbeat-div.green:hover {
    max-height: 500px;
    max-width: 100%; /* vagy más dinamikus érték */
    background-color: rgba(89, 175, 51, 1);
    overflow: auto;
	z-index:500;
	padding: 20px;
    margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.heartbeat-div.green h3{
	font-size: 18px;
}
.heartbeat-div.green:hover h3{
	font-size: 20px;
}


    .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:165px; 
		right: 30px;
    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: 'Copy Licence Key';
    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 */
}

.key-input {
    background: black;
    border: none;
    color: red;
    font-size: 20px;
    font-weight: bold; /* Félkövér betűstílus */
    outline: none; /* fókuszkeret eltüntetése */
    width: 300px;
    border-radius: 5px;
    text-align: center;
}
 
.getlic-table {
  border-collapse: collapse;
  width: auto; /* vagy 100%, ha teljes szélességet szeretnél */
}
.getlic-table td {
  border: none;
  padding: 8px;
}
.getlic-table tr:nth-child(even) {
    background-color: transparent; 
}

.BranchListCont {
			display: flex; 
			flex-direction: column; 
			overflow-y: auto; 
			flex-wrap: wrap; 
			width:100%; 			
			/*background-color:red;*/
			align-content: left;
			margin-top: 5px;
		}
		
.SoftListCont_main:hover {
	max-width: 80%;
}

.branch-table {
    border-collapse: collapse;
    width: auto;
    background: none;
}

.branch-table td {
    border: none;
    padding: 8px 12px;
    background-color: transparent; /* háttér kikapcsolása */
	text-align: left; /* balra igazítás */
}

.branch-table tr:nth-child(even) {
    background-color: transparent !important; /* sor színezés tiltása */
}

.branch-licence-table {
    border-collapse: collapse;
    width: 600px;
    background: none;
}

.branch-licence-table th {
    border: none;
    padding: 8px 12px;
    background-color: transparent; /* háttér kikapcsolása */
	text-align: left; /* balra igazítás */
}

.branch-licence-table td {
    border: none;
    padding: 8px 12px;
    background-color: transparent; /* háttér kikapcsolása */
	text-align: left; /* balra igazítás */
}

.branch-licence-table tr:nth-child(even) {
    background-color: transparent !important; /* sor színezés tiltása */
}
.DisableLicKeyBtnDisable,
.DisableLicKeyBtnActive {
	position:relative;	
    color: white;
    width: 80px;
    height: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;  
    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 */
   
}
.DisableLicKeyBtnDisable{
	background-color: red;
}
.DisableLicKeyBtnActive {
	background-color: blue;
}

.billing-input { text-align:center; width: 60px;}
#invoices {
	max-width: 200px;
	height: 50px;
	   padding: 5px;
	margin-top: 5px;
	margin: 5px;
	  border-radius: 5px;
	 background-color: rgba(116, 216, 231, 0.8);
	 overflow:hidden;
	
	color: white;
	 transition: max-width 0.8s ease, height 0.8s ease, background-color 0.3s ease, opacity 0.5s ease;
}
#invoices:hover {
	max-width: 800px;
	height: 860px;
	background-color: orange;
	border-radius: 5px;
	padding: 5px;
	 background-color: rgba(89, 175, 51, 1);
	 overflow-y: scroll;
	 z-index: 9999;
}

table.invoicesTable {
  width: 700px;
  text-align: center;
  border-collapse: collapse;
}
table.invoicesTable td, table.invoicesTable th {
  padding: 3px 6px;
}
table.invoicesTable tbody td {
  font-size: 13px;
  color: #FFFFFF;
}
table.invoicesTable thead {
    border-bottom: 2px solid #444444;
}
table.invoicesTable thead th {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}
table.invoicesTable tfoot td {
  font-size: 14px;
}
table.invoicesTable tfoot .links {
  text-align: right;
}
table.invoicesTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
video#bg-video-0 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
    }
video#bg-video-1 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
	  opacity: 0.8;
    }
.Downloadbtn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.Downloadbtn.a:link,
.Downloadbtn.a:hover,
.Downloadbtn.a:active,
 .Downloadbtn.a:visited{
	 color: white;
}

/* Darker background on mouse-over */
.Downloadbtn:hover {
  background-color: RoyalBlue;
}
.Downloadbtn2 {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 10px;
   margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.Downloadbtn2.a:link,
.Downloadbtn2.a:hover,
.Downloadbtn2.a:active,
 .Downloadbtn2.a:visited{
	 color: white;
}

/* Darker background on mouse-over */
.Downloadbtn2:hover {
  background-color: RoyalBlue;
}
/*  Collapsible div  */
.collapsible-container {
    border: 1px solid #ccc;
    margin: 10px;
	width: 50%;
    border-radius: 5px;
    overflow: hidden; /* Elrejti a tartalom túlfolyását */
}

.collapsible-container-mini {
    border: 1px solid #ccc;
    margin: 5px;
    width: 180px;
    border-radius: 5px;
    overflow: hidden;
    /* Átmenet hozzáadása a szélességhez */
    transition: width 0.5s ease, max-height 0.5s ease;
}
.collapsible-header-mini {
    background-color: rgb(40,50,70);
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
	text-align: center;
    justify-content: space-between;
    align-items: center;
	color: white;
}
.collapsible-header {
    background-color: rgb(40,50,70);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
	text-align: center;
    justify-content: space-between;
    align-items: center;
	color: white;
}
.collapsible-header-mini h2 {
    margin: 0;
    font-size: 1.0em;
}
.collapsible-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.toggle-icon {
    font-size: 1.5em;
    transition: transform 0.3s ease;
}

/* Alapértelmezett állapot - összecsukva */
.collapsible-content-mini {
    max-height: 0;
    overflow: hidden;
    /* Átmenet hozzáadása a padding-hez is */
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 15px;
}
.collapsible-content {
    max-height: 0; /* Alapból nulla magasság */
    overflow: hidden;
    transition: max-height 0.3s ease; /* Átmenet animációhoz */
    padding: 0 15px;
}

/* Aktív állapot - kinyitva */
.collapsible-container-mini.active {
    width: 800px;
	 background-color: rgba(40,50,70, .6);
}

/* Aktív állapot - kinyitva */
.collapsible-container.active .collapsible-content {
    max-height: 500px; /* Vagy egy nagyobb érték, ami elegendő a tartalomnak */
    padding: 15px;
}

.collapsible-container.active .toggle-icon {
    transform: rotate(180deg); /* Elfordítja a nyilat */
}

/* Aktív állapot - kinyitva */
.collapsible-container-mini.active .collapsible-content-mini {
    max-height: 800px; /* Vagy egy nagyobb érték, ami elegendő a tartalomnak */
    padding: 15px;
}

.collapsible-container-mini.active .toggle-icon {
    transform: rotate(180deg); /* Elfordítja a nyilat */
}