@font-face {
  font-family: Montserrat-Bold;
  src: url(../font/Montserrat-Bold.ttf);
}

@font-face {
  font-family: Montserrat-ExtraBold;
  src: url(../font/Montserrat-ExtraBold.ttf);
}

@font-face {
  font-family: Montserrat-Regular;
  src: url(../font/Montserrat-Regular.ttf);
}

@font-face {
  font-family: Montserrat-Medium;
  src: url(../font/Montserrat-Medium.ttf);
}

@font-face {
  font-family: Montserrat-MediumItalic;
  src: url(../font/Montserrat-MediumItalic.ttf);
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url(../font/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: Montserrat-SemiBoldItalic;
  src: url(../font/Montserrat-SemiBoldItalic.ttf);
}

@font-face {
  font-family: Montserrat-SemiBold-Italic;
  src: url(../font/Montserrat-SemiBoldItalic.ttf);
}

@font-face {
  font-family: Montserrat-Black;
  src: url(../font/Montserrat-Black.ttf);
}

@font-face {
  font-family: Montserrat-Light;
  src: url(../font/Montserrat-Light.ttf);
}


@font-face {
  font-family: Montserrat-ExtraLight;
  src: url(../font/Montserrat-ExtraLight.ttf);
}

@font-face {
  font-family: Montserrat-Thin;
  src: url(../font/Montserrat-Thin.ttf);
}

@font-face {
  font-family: Roboto-Regular;
  src: url(../font/Roboto-Regular.ttf);
}


html,
body {
	margin:0;
	padding:0;
	height:100%;
	width:100%; 
	overflow: hidden;
	min-height: 100svh;		
}


.login-container {
	display: flex;
	flex-direction: row;
	height: 100vh;
}

.login-left-panel {		
    height: auto;  
    width: 60%;
    padding: 0; /* Elimină padding-ul, dacă există */
    overflow: hidden; /* Asigură că imaginile care depășesc containerul sunt tăiate */
    position: relative;
    aspect-ratio: 16 / 9; /* Optional: stabilește un raport de aspect fix pentru div */
}


.login-left-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Imaginea umple complet containerul */
    object-position: center; /* Centrează imaginea în container */
}



.login-right-panel {
	width: 40%;
	min-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}



.login-form {
	width: 400px;
	text-align: center;
	mergin:auto;
	overflow: visible;
		
}

.login-form .login-logo {
	display: block;
	margin: 0 auto 20px auto;
	border: 0px solid red;
}

.login-logo  
{
	width: 220px;
	border: 0px solid red;
	text-align:center;
	padding: 20px 0px;	
}

.login-title  
{
	padding: 15px 0px 0px 0px;
	border: 0px solid red;
	font-size: 25px;
	font-family: Montserrat-Medium;	
	align-items: center;
	color: #4B4DDE;
}


.login-logo  img 
{
	width: 200px;
}
		
.login-input-group {
	position: relative;
	margin-bottom: 20px;
	 /* overflow: hidden; Eliminat */
}



.login-input-group .icon {
	position: absolute;
	padding: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #777;
	font-size: 16px;
}

.login-input-group .separator {
	position: absolute;
	left: 45px;
	top: 50%;
	transform: translateY(-50%);
	height: 25px;
	width: 1px;
	background-color: #ddd;
}
	

.login-input-group input {
	width: 100%;
	padding: 10px 10px 10px 55px;
	border: 2px solid #ddd;
	border-radius: 10px;
	outline: none;
	font-size: 14px;
	color: #555;
	font-family: Montserrat-Medium;	
    font-size: 16px;
	box-sizing: border-box;
}
		


.login-form .login-input-submit {
	width: 100%;
	padding: 10px;
	background-image: linear-gradient(#4B4DDE, #6567F8);
	color: white;
	border: none;
	border-radius: 10px;
	font-family: Montserrat-Medium;	
    font-size: 16px;	
	cursor: pointer;
	margin: 10px auto;
	transition: transform .2s;
    position: relative;
    z-index: 1;	
}





.login-parola-group {
	display:flex;
    transition: transform .2s;		
	text-decoration: none;
	width: 160px;
	align-items: center;
	justify-content: center;
	padding:  15px 0;
	margin:auto;
}

.login-parola-group:hover {
	transform: scale(1.1);
    cursor: pointer;	
}



.login-parola-icon {
	padding:  0px 5px 2px 0;
}


.login-parola-text {
	font-family: Montserrat-Medium; 
    font-size: 17px;
	color: #4B4DDE;
    transition: transform .2s; 	
}






@media screen and (max-width: 1024px) {
	.login-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login-left-panel {
		display: none;
	}

	.login-right-panel {
		width: 100%;
		justify-content: center;
	}

	.login-form {
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px) {
	.login-right-panel {
		align-items: center;
	}

	.login-form {
		width: 90%;
	}
}

@media screen and (max-width: 480px) {
	.login-container {
		justify-content: center;
		align-items: center;
	}

	.login-form {
		width: 90%;
		max-width: 350px;
		margin: 0 auto;
	}
	
	.login-logo  
	{
		width: 180px;
	}

	.login-logo  img 
	{
		width: 180px;
	}	
}



	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;	
		font-family: Montserrat-Regular;	
	}

	body {
		display: flex;
		flex-direction: column;
		overflow: hidden;           
		min-height: 100svh;  			
	}


	/* Page Layout */
	.main-layout {
		display: flex;
		flex: 1;
		overflow-y: auto;
		padding: 15px 15px 15px 15px;
		min-height: 100svh;        
		background-color: #f5f5f5 ;
		
	}
	
	
	/* Left Layout */
	.left-layout {
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden; /* Prevenim depășirea */
		border: 0px solid red;
		width: auto;
	}

	.left-header {
		display: flex;
		flex-direction: row;	
		align-items: center;			
		border: 0px solid red;
		padding: 8px 0 ;
		flex-shrink: 0;
	}


	.logo-app 
	{
		width: auto;
		border: 0px solid red;
		text-align:center;
		padding: 5px;
		cursor: pointer;
	}

	.logo-app-img-nomral
	{
		height: 25px;
		padding: 0;
	}
	
	.logo-app-img-mic
	{
		height: 30px;
		padding-left: 6px;
	}
	
		
	

  /*right-layout */
	.right-layout {
		flex: 1;		
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		margin: 0px 0px 0px 10px;
		z-index: 8;	
		width:100%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain; 
		z-index: 1;		
	}


	.right-header {
		position: sticky; 
		top: 0;		
		display: flex;
		justify-content: space-between;	
		align-items: center;	
		padding: 10px 20px;
		border: 0px solid red;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
		z-index: 9;
		background-color: #ffffff;
	}
	

	
	.right-content {
		width: 100%;
		padding: 20px;
		position: relative;
	}
				


	.box-centrat {
		display: flex;
		justify-content: center; 
		align-items: center; 
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}
	
		
	
	/* Content */
	
	.title {
		font-family: Montserrat-Semibold;	
		font-size: 20px;
		border: 0px solid red;
		display: flex; 
		align-items: center;
		color: #333;
	}


	.title-icon{
		border: 0px solid red;
		padding: 5px 10px 5px 0px;
		display: flex; 
		align-items: center; 	
		font-size: 16px;			
	}

	.inapoi-btn {
		width: auto;
		padding: 7px 15px;
		background-color: #F58D0C;
		border: 1px solid #F58D0C;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;	
		font-size: 14px;
		cursor: pointer;
		display: inline-flex; 
		align-items: center; 
		transition: transform .1s; /* Animation */	
		margin-right: 10px; /* Adaugă spațiu între 'Înapoi' și 'Șabloane' */
		text-decoration: none;
	}
	
	.inapoi-box {
		padding: 20px 5px;
		border: 0px solid red;
		text-decoration: none;
	}
	
	.inapoi-btn-mic {		
		padding: 6px 8px;
		background-color: #F58D0C;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;	
		font-size: 16px;
		cursor: pointer;
		display: inline-flex; 
		align-items: center; 
		transition: transform .1s; 
		margin-right: 10px; 
		text-decoration: none;
		display: flex; /* Activează un container flex */
		align-items: center; /* Centrează vertical */
		justify-content: center; /* Centrează orizontal */
		text-align: center; /* Opțional, pentru text */
	}
	
	.inapoi-box-mic {
		padding: 3;
		border: 0px solid red;
		text-decoration: none;
	}


	.back-to-top {
		width: 60px;
		height: 60px;	
		padding: 10px;
		background-color: #7274DF;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;
		font-size: 20px;
		align-items: center;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 120px;
		right: 50px;
		display: flex;
		justify-content: center;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 10;
		cursor: pointer;
	}

	.back-to-top.show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.back-to-top.fade {
		opacity: 0.3;
		visibility: visible;
		pointer-events: auto;
	}


	/*BUTOANEEEE +B*/
	.btn-grup{
		align-items: center;	
		display: flex;
		flex-direction: row;
		gap: 15px;
		border: 0px solid red;	
		border-radius: 6px; 
		position: relative; 
		overflow: visible;
	}	
	
	.btn {
		width: auto;
		padding: 5px 10px;
		background-color: #EB2323;
		border: 1px solid #EB2323;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;	
		font-size: 14px;
		cursor: pointer;
		align-items: center; 
		gap: 4px; 
		transition: transform .1s , box-shadow 0.3s; 
		text-decoration: none;
		position: relative; 
		text-align:center;	
		margin: 4px 0;
	}	
	
	.btn-mic {
		width: auto;
		padding: 2px 5px;
		background-color: #EB2323;
		border: 1px solid #EB2323;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;	
		font-size: 12px;
		cursor: pointer;
		align-items: center; 
		gap: 4px; 
		transition: transform .1s , box-shadow 0.3s; 
		text-decoration: none;
		position: relative; 
		text-align:center;	
		margin: 5px 0;
	}		
	
	
	.btn:hover, .btn-mic, .inapoi-box-mic:hover {
		transform: scale(1.03);	
		z-index: 10;
	}

	.btn-disabled {
		color: #fff;
		background-color: #888888 !important;
		border: 1px solid #888888 !important;
	}

	.btn:disabled {
		color: #fff;
		background-color: #888888 !important;
		border: 1px solid #888888 !important;
	}	
	
	.btn-rosu 
	{
		background-color: #EB2323;
		border: 1px solid #EB2323;
		color: white;		
	}	
	
	.btn-rosu-alb 
	{
		background-color: white;
		border: 1px solid #EB2323;
		color: #EB2323;	
	}	
	
	.btn-albastru 
	{
		border: 1px solid #7274DF;
		background-color: white;
		color: #7274DF;
	}	
	
	.btn-verde 
	{
		border: 1px solid #529214;
		background-color: white;
		color: #529214;
	}		
	
	.btn-mov 
	{
		border: 1px solid #d946ef;
		background-color: white;
		color: #d946ef;
	}	
	
	.btn-verde-all 
	{
		border: 1px solid #27AE60 !important;
		background-color: #27AE60 !important;
		color: white !important;
	}	

	.btn-verde-deschis {
		background-color: rgb(240, 255, 244) !important;
		color: rgb(39, 174, 96) !important;
		border-width: 2px !important;
		border-style: solid !important;
		border-color: rgb(221, 221, 221) !important;
		border-image: initial !important;
	}
	
	.btn-portocaliu 
	{
		border: 1px solid #F58D0C;
		background-color: #F58D0C;
		color: white;
	}		
	
	.btn-portocaliu-alb 
	{
		border: 1px solid #F58D0C;
		background-color: white;
		color: #F58D0C;
	}	
		
	
	.btn-portocaliu-alb 
	{
		border: 1px solid #F58D0C;
		background-color: white;
		color: #F58D0C;
	}	
	

	.btn-big 
	{
		min-width: 350px;
		heignt: 50px;
		padding: 10px 15px;
		font-family: Montserrat-Medium;	
		font-size: 18px !important;
		border-radius: 10px;
		margin: 10px 0 0px 0;
	}


	.btn-big-acasa 
	{
		min-width: 330px !IMPORTANT;
	}
	
	
	.btn-big-list 
	{
		width: 300px;
		heignt: 50px;
		padding: 10px 15px;
		font-family: Montserrat-Medium;	
		font-size: 18px !important;
		border-radius: 10px;
		margin: 10px 0 0px 0;
	}


	.btn-big-count 
	{
		width: 60px;
		heignt: 60px;
		padding: 10px 10px;
		font-family: Montserrat-Medium;	
		font-size: 18px !important;
		border-radius: 10px;
		margin: 10px 0 0px 10px;
	}
	
		
	.btn-adauga {
		width: 60px;
		height: 60px;	
		padding: 10px;
		background-color: #EB2323;
		color: white;
		border-radius: 6px;
		font-family: Montserrat-Medium;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		position: fixed; 
		bottom: 50px;
		right: 50px;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 1000; 
		animation: pulseGlow 6s infinite ease-in-out;

	}

	@keyframes pulseGlow {
	  0% {
		box-shadow:
		  0 4px 6px rgba(0,0,0,.2),         
		  0 0 0 0 rgba(235,35,35,0);      
	  }


	  5% {
		box-shadow:
		  0 4px 6px rgba(0,0,0,.2),
		  0 0 0 0 rgba(235,35,35,.45);  /* inel rosu (glow) */
	  }
	  
	  30% {
		box-shadow:
		  0 4px 6px rgba(0,0,0,.2),
		  0 0 0 14px rgba(235,35,35,0);     /* inel disipat */
	  }

	  50% {
		box-shadow:
		  0 4px 6px rgba(0,0,0,.2),
		  0 0 0 0 rgba(235,35,35,0);
	  }

	  100% {
		box-shadow:
		  0 4px 6px rgba(0,0,0,.2),
		  0 0 0 0 rgba(235,35,35,0);
	  }
	}
	
	.btn-adauga.hide-on-scroll {
		opacity: 0;
		visibility: hidden;
	}



	.btn:hover, .btn-adauga:hover, .back-to-top:hover, .inapoi-btn:hover, .inapoi-btn-mic:hover {
		transform: scale(1.1); 
		z-index: 11;
		animation-play-state: paused;		
		opacity: 1;
	}
	
	
	
	
	
	

	hr.despartitor {
		height: 2px; 
		border: 0;
		background-color: #7274DF;
		margin: 20 0;
	}


        @media (max-width: 1024px) {
	
			.btn {
				width: auto;
				padding: 2px 8px;
				font-family: Montserrat-Medium;	
				font-size: 14px;	
			}
	
			.btn-big, .btn-big-list, btn-big-count  
			{
				width: 100% !important;
				padding: 8px 15px;
				font-size: 16px !important;
				min-width: unset;
			}
		
  
			.btn-adauga {
				bottom: 30px; 
				right: 40px;
				font-size: 20px;
				width: 40px;
				height: 40px;	
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				opacity: 0.8;
	
			}
			
			hr.despartitor {
				height: 2px; 
				border: 0;
				background-color: #7274DF;
				margin: 10 0;
			}			
		
        }



        @media (max-width: 720px) {
	
	
			.btn-big, .btn-big-acasa 
			{
				width: 100% !important;
				min-width: 30px !important;;
			}
		
        }
		

	/**************************************************************/


		
		@media (max-width: 820px){
			.right-layout {
				width:100%;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				border: 0px solid red;
				position: static !important;
				top: 0; /* Asigură-te că rămâne fixat în partea de sus */
				overscroll-behavior: none; /* Dezactivează efectul elastic pe scroll */				
			}		
			
			.right-header {
				padding: 10px 20px;
				border: 0px solid red;
				flex-direction: column;
				text-align: left;
				align-items: start;
				overflow: hidden;
			} 
						
			.right-content {
				height: auto;
				overflow-x: auto; /* Activăm scroll-ul pe orizontală */				
				text-align:left;
			}
			
			.view {
				overflow-x: auto;
			}			
			
			
			.box-centrat {
				display: block;
				max-width: 100%; /* Pe mobile, ocupă toată lățimea */
				width: 100%; /* Asigură că nu se depășește ecranul */
				padding: 0 0 5px 0;
			}			
			
			.table-max {
				min-width: 1050px; /* Setăm tabelul să păstreze dimensiunea */
			}
	

			.logo-app 
			{
				border: 0px solid red;
				text-align:center;
			}
			
			.logo-app-img-nomral
			{
				height: 22px;
				padding: 0;
			}
			
			.logo-app-img-mic
			{
				height: 27px;
				padding-left: 10px;
			}			
		
			.right-layout::-webkit-scrollbar-track, .right-content::-webkit-scrollbar-track {
				margin-top: 80px; 
			}
			
			.title {
				font-size: 20px;
			}	
			
			.btn-actiune {
				width: auto;
				padding: 3px 6px;
				font-size: 12px;
				gap: 2px;
			}
		


			.inapoi-box-mic {
				width: auto;				
				position: fixed; 
				bottom: 30px; 
				left: 40px;
				opacity: 0.8;
				padding: 5px;
				font-size: 24px; 
			}
			
		
			.inapoi-btn-mic {
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				font-size: 30px;
				width: 60px;
				height: 60px;				
			}		

			.back-to-top {
				bottom: 110px; 
				right: 40px;
				font-size: 30px;
				width: 60px;
				height: 60px;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
			}

			.btn-adauga {
				bottom: 30px; 
				right: 40px;
				font-size: 30px;
				width: 60px;
				height: 60px;	
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	
			}			
		
	


		  .btn-grup {
			display: flex;
			width: 100%;
			overflow-x: auto;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
			padding: 5px 0;
			border: 0px solid red; 	
		  }
		  .btn-grup .btn {
			flex-shrink: 0;
			
			}	

	

			/* Scrollbar btn-grup */
			.btn-grup::-webkit-scrollbar {
				height: 8px; 
			}

			.btn-grup::-webkit-scrollbar-track {
				background: #d9d7d7; 
				border-radius: 4px; 
				margin: 5px; 
			}

			.btn-grup::-webkit-scrollbar-thumb {
				background: #edebeb; 
				border-radius: 4px; 
				border: 2px solid #d1cfcf; 			
			}			
		}
		
		
	


		
        @media (max-width: 768px) {
            .main-layout {
                flex-direction: column;
				padding:  10px;
            }

			.right-layout {
				margin: 0px 0px 0px 0px;
			}

			.title {
				font-size: 17px;
			}	
			
			.right-content {
				padding: 10px;	
				overflowY: auto;
				
			}	
			
			.right-content table {
				min-width: auto; /* Setăm tabelul să păstreze dimensiunea */
			}
			
		
            .left-layout {
                width: 100%;
                height: auto;
            }
			
            .left-header {
                width: 100%;
                justify-content: space-between;
				padding: 0px 5px 10px 5px;
				border: 0px solid red;		
            }


			.logo-app 
			{
				border: 0px solid red;
				text-align: left;
				
			}
			
			.logo-app-img-nomral
			{
				height: 20px;
				padding: 0;
			}
			
			.logo-app-img-mic
			{
				height: 20px;
				padding-left: 0px;
			}
			

			.inapoi-btn-mic {
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				font-size: 20px;
				width: 40px;
				height: 40px;		
				opacity: 0.8;				
			}		

			.back-to-top {
				bottom: 30px; 
				right: 40px;
				font-size: 20px;
				width: 40px;
				height: 40px;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				opacity: 0.8;
			}

			.btn-adauga {
				bottom: 80px; 
				right: 40px;
				font-size: 20px;
				width: 40px;
				height: 40px;	
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				opacity: 0.8;
	
			}
				
			
			.inapoi-box-mic {
				width: auto;				
				position: fixed; 
				bottom: 30px; 
				left: 40px;
				opacity: 0.8;
				padding: 0px;
				font-size: 24px; 
			}	
			
        }
				
/* ===== Mesaje centrate sus (ramane la fel) ===== */
.msg-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 295px;
  pointer-events: none;
  text-align: center;           
}



/* ===== Mesaje in containerul centrat – bloc normal, fara animatii CSS ===== */
.msg-center > .mesaj_confirmare,
.msg-center > .mesaj_eroare,
.msg-center > .mesaj_avertizare,
.msg-center > .mesaj_informare,
.msg-center > .mesaj_info{
  display: block;
  max-width: 100%;
  text-align: left;
  line-height: 1.55;

  /* daca vrei sa pastrezi accentul din stanga din .mesaj_*, NU pune border:0 !important */
  border: 0 !important;

  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;

  pointer-events: auto;
  cursor: pointer;

  /* IMPORTANT: scoatem orice animatie/tranzitie pe intrare care se bate cu jQuery */
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hover fara ridicare – doar o umbra un pic mai vizibila (optional) */
.msg-center > .mesaj_confirmare:hover,
.msg-center > .mesaj_eroare:hover,
.msg-center > .mesaj_avertizare:hover,
.msg-center > .mesaj_informare:hover,
.msg-center > .mesaj_info:hover
{
  transform: scale(1.015);
  box-shadow: 0 8px 22px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.08);
  filter: none; /* opțional: renunță la saturate(1.02) */
} 

/* responsive (ramane) */
@media (max-width: 768px){
  .msg-center > .mesaj_confirmare,
  .msg-center > .mesaj_eroare,
  .msg-center > .mesaj_avertizare,
  .msg-center > .mesaj_informare,
  .msg-center > .mesaj_info{
    padding: 10px 14px;
    border-radius: 10px;
  }
}
@media (max-width: 768px){
  .msg-center{ top:10px; gap: 10px; width: 85vw; }
}

				
			
				
.mesaj_confirmare {
    border-left: 5px solid #529214;
	padding: 7px 10px;
	border-radius: 6px;		
	text-align: left;
    width: auto; 
    color:#529214;
    background-color:#effac8;
	font-family: Montserrat-Medium;
	font-size: 14px;	
	margin: 10px 0;	
}



.mesaj_eroare{
    border-left: 5px solid #df241d;
	padding: 7px 10px;
	border-radius: 6px;	
	text-align: left;
    width: auto; 
    color:#df241d;
    background-color:#fff5f5;
	box-sizing: border-box;	
	font-family: Montserrat-Medium;
	font-size: 14px;
	margin: 10px 0;	
}

.mesaj_avertizare{
    border-left: 5px solid #f2a654;
	padding: 7px 10px;
	border-radius: 6px;	
	text-align: left;
    width: auto; 
    color:#d17717;
    background-color:#ffebd6;
    box-sizing: border-box;	
	font-family: Montserrat-Medium;
	font-size: 14px;	
	margin: 10px 0;	
}


.mesaj_informare{
    border-left: 5px solid #afe4ef;
	padding: 7px 10px;
	border-radius: 6px;	
	text-align: left;
    width: auto; 
    color:#31708e;
    background-color:#d9edf6;
    box-sizing: border-box;	
	font-family: Montserrat-Medium;
	font-size: 14px;
	margin: 10px 0;	
}

.mesaj_info{
    width: 100%; 	
    border-left: 5px solid #8586ff;
	padding: 7px 10px;
	border-radius: 6px;		
	text-align: left;
    color: #6e6fdb;
    background-color:#ededff;
	font-family: Montserrat-Medium;
    box-sizing: border-box;
	font-size: 14px;	
	margin: 10px 0;	

}


.text_ok{
    color:#4B4DDE;
	font-style: italic;
	font-weight: bold;
}

.text_nok{
    color:#529214;  
	font-style: italic;
	font-weight: bold;
}


.text_avertizare{
    color:#d17717;  
	font-style: italic;
	font-weight: bold;
}



/* 404 */
.default {
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
	border: 0px solid red; 
}

.default img {
    max-width: 90%; 
    max-height: 100%; 
}

/* Responsivitate */
@media (max-width: 768px) {	
    .default img {
        width: 80%; /* Ajustare suplimentară pentru mobil */
    }
}



/* EROR*/
.error {
    background-color: #fff2f2;
	border: 2px solid #EB2323 !important;
}


.error-checkbox {
    background-color: #fff2f2;
	border: 2px solid #EB2323 !important;
}

.ms-parent.error-checkbox .ms-choice {
    border: 2px solid #e3342f !important; /* roșu aprins */
    background-color: #fcebea !important; /* roz deschis */
    border-radius: 5px;
}

.around-box
{
    display: flex;
    align-items: center;
	width: auto;
	padding: 5px;
	gap: 6px; /* Adaugă un spațiu între input și text */
	border-radius: 6px; 
}

.select2-container.error .select2-selection {
    background-color: #fff2f2;
}





/* Stilizare pentru <select> invalid */
select.error {
    background-color: #fff2f2 !important; /* Fundal roșu pal */
    border: 2px solid #EB2323 !important; /* Bordura roșie */
}

/* Resetarea culorii textului pentru alte opțiuni valide */
select.error option {
    color: #000; /* Text negru pentru opțiunile valide */
}

/* Opțiunea implicită cu valoare "" */
select.error option[value=""] {
    color: #EB2323; /* Text roșu */
    font-weight: bold;
}


.errorContainer {
    position: fixed; /* Fixat în partea de sus a ferestrei */
    top: 150px; /* La 20px de la partea superioară */
    left: 55%; /* Centrat pe orizontală */
    transform: translateX(-50%); /* Corectează poziționarea pentru centrul exact */
    z-index: 998 !important;/* Afișat deasupra tuturor elementelor */
    background-color: #f8d7da; /* Fundal roșu pal pentru eroare */
    color: #721c24; /* Text roșu închis */
    padding: 10px 20px; /* Spațiere interioară */
    border: 1px solid #f5c6cb; /* Bordură */
    border-radius: 6px; /* Colțuri rotunjite */
    display: none; /* Ascuns implicit */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Umbră pentru vizibilitate */
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
	cursor: pointer;
}

/* General styling for the form on mobile */
@media (max-width: 768px) {
    /* Checkbox styling */
    .around-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 10px; /* Spațiu între elemente */
    }
	
	
	.errorContainer {
		top: 110px; /* La 20px de la partea superioară */
		left: 50%; /* Centrat pe orizontală */
	}	
}




/* TABLE*/
         table {
            width: 100%;
            border-collapse: collapse;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
			font-family: Montserrat-Regular;
			
        }
        thead th {                 
			font-family: Montserrat-Regular;
			font-size: 16px;
			font-weight: bold;	
			background-color: #edebeb;	
			color: #333;		
			padding: 15px 15px;
        }
		
		.nocolor:hover {
			background-color: inherit; /* Păstrează culoarea implicită */
		}
				
        th, td {
            padding: 15px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
			font-family: Montserrat-Regular;
		
			white-space: normal; /* Permite textului să se spargă pe linii multiple */
			word-wrap: break-word; /* Sparge cuvintele prea lungi */
			overflow: visible; /* Asigură afișarea completă a textului */
			height: auto; /* Înălțimea se ajustează automat */	
			color: #333;		
        }
        th {
            font-weight: bold;
            color: #495057;
        }
		
        th {
            
            position: relative;
			user-select: none;
        }

		th a {
			display: inline-flex;
			align-items: center;
			gap: 5px; /* Spațiu între text și icon */
			text-decoration: none;
			color: #333;
			cursor: pointer;
		}

		th i {
			margin-left: 5px;
			font-size: 14px;
			color: #777;
		}

		th.ExcludereSortare {
			cursor: default; /* Cursor normal */
		}	
	
        tr:last-child td {
            border-bottom: none;
        }
        tr:nth-child(even) {
            background-color: #fdfdfd;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        th:first-child, td:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        th:last-child, td:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        /* Butoane de acțiune */
        .action-buttons {
            display: flex;
			justify-content: flex-start;
			gap: 10px; /* Distanța între copii */
			padding: 3px 0;
        }
        .action-buttons span {
            cursor: pointer;
            font-size: 18px;
			margin-left: 0;
			margin-right: auto;
        }





        /* Responsivitate */
        @media (max-width: 768px)
		{
            table, thead, tbody, th, td, tr {
                display: block;
				table-layout: fixed; /* Forțează tabelul să respecte dimensiunile specificate */
            }
            th, td {
                padding: 10px;
			
            }
            thead tr {
                display: none; /* Ascundem capul tabelului */
            }
            tr {
                margin: 0;
                border-bottom: 2px solid #ddd;
            }
			
			/* Suprascrie stilurile pentru clasa not-found */
			tr.not-found {
				padding-left: 0 !important; /* Elimină padding-ul la stânga */
				text-align: center; /* Centrează textul */
			}

			/* Centrarea textului în interiorul celulei */
			tr.not-found td {
				padding: 10px 0; /* Adaugă padding egal */
				text-align: center; /* Centrează textul în celulă */
			}

			/* Elimină efectele de padding pentru coloana implicită */
			tr.not-found td::before {
				content: none; /* Ascunde pseudo-elementul */
			}		
			
			/* Adaugă efect de hover pe tr și td */
			tr:hover, td:hover {
				border-bottom: 2px solid white; /* Linie albă sub rând */
				background-color: #f1f1f1; /* Păstrează culoarea hover */
			}

			/* Pentru a menține consistența stilurilor în mod mobil */
			tr:hover td {
				background-color: inherit; /* Menține culoarea de hover */
				border-bottom: 2px solid white; /* Linie albă doar la hover */
			}	

			th:first-child, td:first-child {
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
			}
	
            td {
                text-align: right;
                position: relative;
                padding-left: 40%;
                white-space: normal; /* Permite textului să se spargă pe linii multiple */
				min-height: 40px;
				word-wrap: break-word; /* Sparge cuvintele prea lungi */
				overflow: visible; /* Asigură afișarea completă a textului */
				height: auto; /* Înălțimea se ajustează automat */		
            }
            td::before {
                content: attr(data-label);
                position: absolute;
                left: 15px;
                width: calc(50% - 30px);
                text-align: left;
                font-weight: bold;
                color: #888;
            }

			/* Stil pentru butoanele din coloana Acțiuni */
			.action-buttons {
				display: flex;
				justify-content: flex-end; /* Poziționează butoanele în dreapta */
				gap: 30px; /* Spațiu între butoane */
				align-items: center; /* Aliniere pe verticală */
				width: auto; /* Asigură că ocupă toată lățimea celulei */
				margin: 0; /* Elimină marginile */
				padding: 0; /* Elimină padding-ul */
				border: 0px solid blue;
			}			
		
			.action-buttons span {
				cursor: pointer;
				font-size: 20px;
				margin: 0;
				border: 0px solid blue;
			}
			
        }
	




	

/* PAGINATIE */
	.paginatie {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 9px 0;
		margin: 5px 0 0 0;
		gap: 10px; 
		overflow: visible; /* Permite afișarea completă */		
		background-color: #edebeb;
		border-radius: 6px;
		
	}	

		
	.paginatie-nr{	
		width:auto;
		background-color: white;
		padding: 6px 10px;
		font-size: 14px;
		text-align: center;
		border: 1px solid #e8e8e8;
		font-weight: bold;	
		border-radius: 6px;
		text-decoration: none;
		color: #333;		
		transition: transform .2s;
	}

	.paginatie-nr-curent{
		background-color: #7274DF;
		border: 1px solid #e8e8e8;
		color: #FFF;	
		transition: transform .2s;	
		min-width: 14px;
		padding: 6px 10px;
		font-size: 14px;
		text-align: center;
		font-weight: bold;	
		border-radius: 6px;
		text-decoration: none;
		transition: transform .2s;		
	}


	.paginatie-nr:hover, .paginatie-nr-curent:hover {
		transform: scale(1.1); /* Opțional: efect subtil de mărire */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}
	.paginatie-nr:active, .paginatie-nr-curent:active {
		background-color: #EB2323;
		color: white;
	}
		
        @media (max-width: 768px)
		{
			.paginatie{
				gap: 5px; 
			}			
		
			.paginatie-nr{		
				font-size: 14px;
			}

			.paginatie-nr-curent{
				min-width: 14px;
			}
		}
	


			
	.stare
	{
		display: inline-block;
		padding: 5px 10px;
		font-size: 14px;
		white-space: nowrap;	
		color: #fff;
		text-align: center;
		vertical-align: middle;
		border-radius: 6px;
		font-family: Montserrat-Medium;
	}		



/* =========================
   Overlay inactivitate — CSS complet
   ========================= */

/* Overlay (implicit = avertizare) */
#Overlay{
  display:none; position:fixed; inset:0; z-index:999999;
  background:#000000C7;              /* ~ rgba(0,0,0,.78) */
  color:#FFFFFF;
  transition: background-color .25s ease;
}

/* Overlay FINAL (deconectare) – activează cu .is-final pe #Overlay din JS */
#Overlay.is-final{
  background:#000000F0;              /* ~ rgba(0,0,0,.94) */
}

/* Centrare card */
#Overlay .idle-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(92vw,520px);
}

/* Card semi-transparent */
#Overlay .idle-card{
  backdrop-filter: blur(4px);
  background:#1E1E23DB;              /* ~ rgba(30,30,35,.86) */
  border:1px solid #FFFFFF14;        /* ~ rgba(255,255,255,.08) */
  border-radius:16px;
  padding:24px;
  text-align:center;
  box-shadow:0 12px 34px #00000047;  /* ~ rgba(0,0,0,.28) */
}

/* Claritate text (fără halo) */
#Overlay .idle-card, 
#Overlay .idle-card *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Tipografie */
#Overlay h2{
  margin:0 0 14px 0;                 /* spațiu sub titlu */
  font-size:clamp(18px,2.6vw,26px);
  font-weight:700;
  letter-spacing:.2px;
}
#Overlay p{
  margin:0 0 12px 0;
  font-size:clamp(14px,2.1vw,16px);
  line-height:1.5;
}

/* Rândul cu countdown – flexibil, nu iese din card */
#Overlay .count-row{
  margin:26px 0 12px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
}
#Overlay .cr-text{ display:inline; }

/* Insignă pentru contor (calm, alb translucid) */
#Overlay .count-badge{
  display:inline-flex; align-items:center; gap:6px;   /* <- spațiu controlat între număr și unitate */
  padding:2px 8px; border-radius:8px;
  background:#FFFFFF1E; border:1px solid #FFFFFF2E;
  font-weight:700; font-variant-numeric: tabular-nums;
}
#Overlay .count-badge #Countdown{ display:inline; }   /* fără min-width ca să nu rămână gol la 1 cifră */
#Overlay .count-badge .count-unit{ display:inline; }  /* poți stiliza separat unitatea dacă vrei */



/* Butoane */
#Overlay .btn, 
#Overlay .btn-link{
  display:inline-block; padding:10px 18px; font-size:15px;
  border-radius:10px; border:none; cursor:pointer;
  background:#FFFFFF; color:#222222; text-decoration:none;
  box-shadow:0 2px 12px #00000040;   /* ~ rgba(0,0,0,.25) */
  transition:transform .05s ease, opacity .15s ease;
}
#Overlay .btn:hover, 
/*#Overlay .btn-link:hover{ transform:translateY(-1px); }*/
#Overlay .btn:active, 
#Overlay .btn-link:active{ transform:none; opacity:.9; }

#Overlay .actions{ margin-top:18px; }

/* Mobile tweaks */
@media (max-width:480px){
  #Overlay .idle-card{ padding:20px; border-radius:14px; }
  #Overlay .btn, #Overlay .btn-link{ width:100%; }
}

/* Secțiunea finală (ascunsă inițial; JS o afișează la nevoie) */
#MesajDeconectare{ display:none; }





/* INPUT SI FORMS*/


			
		
	.formular {
		
		border: 0px solid red;
		padding: 10px; /* Opțional pentru spațiu */
		box-sizing: border-box; /* Include padding și border */	
		overflow: visible;
	}
		
	.grup-formular {
		max-width: 390px;
		margin: auto;
		border: 0px solid red;
		padding: 10px 20px ;
		margin: 0; 
		align-self: flex-start;
	}
	
	.grup-formular ul {
	  list-style-type: disc;
	  padding-left: 20px;
	}	
		
	.grup-auto {
		max-width: unset;
	}

	.grup-text {
		flex: 1;
		width: 100%;
		text-align:left;
		border: 0px solid red;
		padding: 0px 0px 10px 0px ;
		font-family: Montserrat-Semibold;
		font-size: 12px;	
		color: #333;
		text-transform: uppercase;
		display: flex;
		align-items: center; /* Aliniază elementele pe verticală */
		gap: 5px; /* Distanță între text și icon */	
	}



	.grup-optiune {
		flex: 0 0 auto;
		padding: 0 0 0px 0;
		border: 0px solid pink;
		margin: 0 0 0 0px;
		width: 100%;
		min-width: 350px;	

	}

	.checkbox-container {
		display: flex;
		flex-direction: row;
		align-items: left; /* Centrează checkbox-urile și textele */
		gap: 5px; /* Distanță între fiecare rând */
		padding: 4px 0px;
	}



	.grup-optiune input[type="text"], .grup-optiune input[type="password"], .grup-optiune input[type="number"], .grup-optiune input[type="tel"]{
		width: 100%;
		min-width: 300px;
		height: 50px;
		padding: 10px;
		border: 2px solid #ddd;
		border-radius: 10px;
		font-family: Montserrat-Regular;
		font-size: 14px;	
		box-sizing: border-box; /* Include padding și border */
		color: #333;		
		margin-bottom: 8px;
	}
	
	.input-data
	{
		min-width: 173px !important;		
		width: 173px !important;		
	}

	.grup-optiune select {
		width: 100%;
		min-width: 350px;
		height: 50px;
		padding: 10px 35px 10px 10px;
		border: 2px solid #ddd;
		border-radius: 10px;
		font-family: Montserrat-Regular;
		font-size: 14px;	
		color: #333;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 15px center;
		background-size: 12px; /* Ajustează dimensiunea săgeții */
		margin-bottom: 8px;
		appearance: none; /* Elimină stilurile native */
		-moz-appearance: none;
		-webkit-appearance: none;	
	}


	.grup-optiune input[type="file"] {
		width: 100%;
		min-width: 350px;
		padding: 10px;
		border: 2px solid #ddd;
		border-radius: 10px;
		font-size: 14px;
		color: #333;	
		margin-bottom: 8px;
		display: flex;
		align-items: center; /* Centrează vertical */
		justify-content: center; /* Centrează orizontal */
		text-align: center;	
	}


	.grup-optiune textarea {
		width: 100%;
		min-width: 350px;
		height: 80px;	
		border: 2px solid #ccc;
		font-size: 14px;
		padding: 10px;
		border-radius: 10px;
		resize: none;
		color: #333;
		margin-bottom: 8px;
	}



	input[type=checkbox] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
		position: relative;
		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
		border-radius: 6px;
		background-color: white;
		cursor: pointer;
		transition: all 0.3s ease;
		color: #333;
		flex-shrink: 0;
		box-sizing: border-box;
		background-clip: content-box;
	}

	input[type="checkbox"]:checked::after {
		content: '\f00c'; /* Codul Font Awesome pentru check */
		font-family: 'Font Awesome 6 Free'; /* Asigură-te că folosești familia corectă */
		font-weight: 900; /* Pentru a afișa corect simbolul */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 14px;
	color: white !important; /* Face simbolul ✔ alb */
	}

	input[type="checkbox"]:checked {
		position: relative;
		background-color: #7274DF;
		border: 1px solid #CCC;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
		color: black;
		cursor: pointer;	
	}


	input[type="checkbox"]:hover {
		box-shadow: 0 0 5px rgba(75, 77, 222, 0.);
		border-color: #4B4DDE;
	}


	input[type=radio] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
		position: relative;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid #ccc;
		background-color: white;
		cursor: pointer;
		transition: all 0.3s ease;	
		padding: 3px;
		background-clip: content-box;
		flex-shrink: 0;
		box-sizing: border-box;
		background-clip: content-box;		
		
	}

	input[type="radio"]:checked {
		background-color: #7274DF;
		border: 1px solid #7274DF;
	}

	input[type="radio"]:hover {
		border-color: #4B4DDE;
	}

	input[type="text"]:focus, 
	input[type="password"]:focus, 
	input[type="number"]:focus, 
	input[type="tel"]:focus, 
	select:focus, 
	textarea:focus {
		border: 2px solid #4B4DDE; 
		outline: none; 
	}


	.dreapta {
		justify-content: flex-end; /* Mută conținutul la dreapta */
	}


		/* General styling for the form on mobile */
		@media (max-width: 1024px) {
			input, select, textarea {
				font-size: 16px !important;
			}	
			

			.formular {
				width: 100%;
			}
			.grup-formular {
				width: 100%;
				max-width: 100%;
				padding: 0px 10px 10px 10px;
			}


			.grup-text {
				width: 100%; /* Lățime completă pentru etichete */
				min-width: 100px;
				margin-bottom: 5px; /* Spațiu între label și input */
				padding: 0px 0px 4px 2px ;
				font-family: Montserrat-Bold;
				font-size: 13px;	
			}

			.grup-optiune {
				width: 100%; /* Lățime completă pentru input-uri */
				margin: 0;
				min-width: auto;
			}


			.grup-optiune input[type="text"],
			.grup-optiune input[type="password"],
			.grup-optiune input[type="number"],
			.grup-optiune input[type="tel"] {
			  
				width: 100%; /* Lățime completă pe ecrane mici */
				min-width: auto;
				height: 40px;
				font-size: 14px; /* Dimensiune font ajustată */
				padding: 8px;
				box-sizing: border-box;
				color: #333;
				margin-bottom: 4px;
			}

			.input-data
			{
				min-width: 100px;		
				width: 100% !important;		
			}
	
			.grup-optiune select{
			  
				width: 100%; /* Lățime completă pe ecrane mici */
				min-width: auto;
				height: 40px;
				font-size: 14px; /* Dimensiune font ajustată */
				padding: 8px 30px 8px 8px;	
				box-sizing: border-box;
				color: #333;
				margin-bottom: 4px;
			}
			


			.grup-optiune input[type="file"] {
				min-width: 100px;
				height: 40px;
			display: flex;
			align-items: center; /* Centrează vertical */
			justify-content: center; /* Centrează orizontal */
			text-align: center;			
			}
			.grup-optiune textarea {
				min-width: 100px;
				width: 100%; /* Lățime completă pe ecrane mici */
				height: 100px;
				resize: none;
				padding: 7px;
				color: #333;
			}



			input[type="checkbox"],
			input[type="radio"] {
				width: 18px;
				height: 18px; /* Ajustăm dimensiunile pentru mobile */
			}

			

		}




/* TAB */
	.tab {
		min-width: auto;
		max-width: 850px;
		margin: 0px auto 0px auto;
		border-radius: 10px !important;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		position: relative; /* Asigură stratificarea corectă */
		transition: width 0.3s ease;
		border: 0px solid red;
		align-self: flex-start;
	}



	.tab-header {
		display: flex;
		justify-content: space-between; /* Plasează elementele la capete */
		align-items: center;
		background-color: #7274DF;
		padding: 16px 16px;
		font-size: 18px;
		font-weight: bold;
		color: white;
		position: relative;
		margin-top: 0;
		border-radius: 8px  8px 0 0 !important;
	}



	.tab-content {
		padding: 10px;
		font-size: 14px;
		color: #555555;
	}



		/* Responsive Design */
		@media (max-width: 1024px) {
			.tab {
				width: 100%;
				margin: 0px auto 10px auto;
				min-width: auto !important;
			}

			.tab-header {
				padding: 10px 10px;
				font-size: 16px;
				border: 0px solid red;	
			}

			.tab-content {
				border: 0px solid red;
			}

		}



		.box-flex {
			display: inline-flex; /* Permite containerului să aibă lățimea conținutului */
			justify-content: center; /* Centrează taburile pe orizontală */
			align-items: center; /* Centrează taburile pe verticală */
			gap: 20px; /* Spațiere între taburi */
			width: auto; /* Se mulează pe dimensiunea taburilor */
			margin: 0 auto; /* Centrează containerul pe orizontală */
		}
			
		.flex {
			display: flex;
			justify-content: center; /* Centrează pe orizontală */
			align-items: center; /* Centrează pe verticală */
			text-align: center; /* Opțional, pentru text */
			border: 0px solid red;
		}
			
		.flex-stange-dreapta{
			display: flex;
			justify-content: space-between; /* Un element în stânga, altul în dreapta */
			align-items: center; /* Opțional: aliniere verticală */
			border: 0px solid red;
		}
		

		


		


	
		@media (max-width: 1024px) 
		{
			.box-flex {
				flex-direction: column; /* Elemente poziționate unul sub altul */
				gap: 10px; /* Adaugă un spațiu între elemente (opțional) */
				width: 100%;
			}
			
			.box-flex-reverse {
				flex-direction: column-reverse; /* Inversează ordinea elementelor */

			}	
	
		}


	#LogoPreview{
		border: 0px solid red;
		max-width: 300px;
		margin: auto;
		text-ali:center;
		display: flex;
		align-items: center;
	}
	
	
		
	/*  CAUTAREEEEEE */
	.overlay-cautare, .overlay-cautare_rapid {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	/* Containerul de căutare - inițial ascuns */
	.cautare, .cautare_rapid {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10000;
		border-radius: 8px;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
		border: 0px solid red;
		width: 100% important!;
		max-height: 600px;
		height: auto;
		overflow-x: hidden; /* Ascunde scroll-ul orizontal */
		overflow-y: auto; /* Permite scroll doar vertical */
		max-height: 90vh; /* Evită ca fereastra să fie prea mare */

		
	}


	.ui-autocomplete {
		z-index: 10001 !important; 
		max-width: 350px  !important;
		position: absolute; 
		border: 1px solid #ccc; 
		max-height: 200px; 
		border-radius: 10px;
	}
	
	/* Stil pentru fiecare element din lista de sugestii */
	.ui-menu-item-wrapper {
		padding: 8px 12px;
		font-size: 14px;
		color: black; /* Culoare text */
		cursor: pointer;
		border-radius: 10px; /* Rotunjire */
	}

	/* Efect de hover */
	.ui-menu-item-wrapper:hover {
		background: #7274DF !important; /* Fundal mov-albăstrui */
		color: white !important;;
	}


	.cautare-cap {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%; /* Acoperă întreaga lățime */
    background-color: #7274DF; /* Culoare identică cu headerul */
    z-index: 1050; /* Se asigură că rămâne deasupra */
    padding: 16px;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}	
	
	

		@media (max-width: 1024px) 
		{
			.cautare {
				border-radius: 8px;
				width: 95%;
				height: auto;
				max-height: 100%;
			}			
		}
		
		
	/*  MESAJE / INFORMARI */	
	.mesaje {
		width: 100%;
		max-width: 350px;
		border: 0px solid red;
	}
	
		@media (max-width: 1024px) 
		{
			.mesaje {
				max-width:  100%;
			}			
		}	
		
		
		
		
	/* TITLE _ INFO */	
	.tooltip-container {
		position: relative;
		display: inline-flex; /* Asigură alinierea corectă */
		align-items: center;
		cursor: pointer;
	}

	.tooltip-text {
		visibility: hidden;
		background-color: #333;
		color: white;
		text-align: left;
		padding: 6px 10px;
		border-radius: 6px;
		position: fixed; /* Îl scoatem din orice container */
		left: 0; /* Se va seta dinamic prin JavaScript */
		top: 0; /* Se va seta dinamic prin JavaScript */
		transform: translate(-50%, 5px); /* Ajustează poziția */
		white-space: normal;
		font-size: 12px;
		opacity: 0;
		transition: opacity 0.3s, transform 0.3s;
		text-transform: none;
		border: 1px solid #ddd;
		cursor: pointer;
		z-index: 99999 !important; /* Se asigură că este deasupra altor elemente */
		max-width: 250px;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	}

	.tooltip-container:hover .tooltip-text {
		visibility: visible;
		opacity: 1;
		transform: translateX(-50%) translateY(3px);
	}		



	 /* Sabloane */
	.etichete-container_2 {
		width: 400px;
		background: #ffffff; /* fundal alb curat */
		padding: 20px 15px;
		border-radius: 8px;
		max-height: 75vh;
		overflow-y: auto;
		z-index: 10;
		
	}	 
	 
	 
	.etichete-container {
		position: fixed;
		right: 15px;
		top: 75px;
		width: 400px;
		background: #ffffff; /* fundal alb curat */
		padding: 20px 15px;
		border-left: 3px solid #3c72e2; /* doar margine stânga colorată */
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		max-height: 90vh;
		overflow-y: auto;
		z-index: 10;
		
	}

	.sablaone-eticheta {
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		gap: 4px;
		line-height: 1.4;
		flex-wrap: wrap; /* Permite trecerea pe rând nou */	
		padding: 2px 0px 2px 5px;
		font-size: 14px;
	}
	

	.eticheta-item {
		background: #3c72e2;
		color: white;
		padding: 6px 10px;
		border-radius: 4px;
		cursor: grab;		
		transition: background 0.2s ease;
	}



	.eticheta-item.activata {
		background-color: #529214 !important;
		color: white !important;
	}


	.sablaone-editare-title {
		width: auto;
		padding: 6px 10px 2px 6px;
		font-family: Montserrat-SemiBold;	
		font-size: 16px;
		position: relative; 
		text-align:left;	
		border-bottom: 0px solid #888;
		color: #777;
	}
	
	.sablaone-editare-subtitle {
		width: auto;
		padding: 10px 6px 2px 6px;
		font-family: Montserrat-Regular;	
		font-size: 16px;
		position: relative; 
		text-align:left;	
		border: 0px solid #888;
	}


	.sablaone-editare-categorie {
		color:#888;
		font-family: Montserrat-Bold;
		font-size: 16px;
		margin: 16px 0 6px 0;
		border: 0px solid #8586ff;
	}	
	
	.sablaone-eticheta-text {
		font-family: Montserrat-SemiBold;	
		font-size: 14px;		
		color: #4B4DDE;
		border: 1px solid #7274DF;
		background-color: white;
		padding: 6px 8px; /* Ușor mai mare pentru aliniere corectă */
		border-radius: 4px;
		transition: transform .1s, box-shadow 0.3s;
		cursor: pointer;
		display: inline-flex; /* Se adaptează la conținut */
		align-items: center; /* Aliniază textul în mijloc vertical */
		justify-content: center; /* Centrare pe orizontală */
		max-width: 500px;
	}	 
 
	.sablaone-eticheta-text:hover {
		transform: scale(1.1); /* Opțional: efect subtil de mărire */
		z-index: 11;
	}
	
	
	.eticheta-btn.activ {
		background-color: #7274DF; /* sau orice albastru mai intens */
		color: white;
	}	

	.sablaone-optine-text{
		font-family: Montserrat-SemiBold;	
		font-size: 14px;		
		padding: 10px 0px 6px 0px; /* Ușor mai mare pentru aliniere corectă */
		text-align: left; /* Asigură textul centrat în interior */
		border: 0px solid #8586ff;
	}
		
	.aranjare {
		opacity: 0.5;
		border: 2px dashed #007bff;
		background-color: #e6f0ff;
		cursor: grabbing;
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
		transition: all 0.2s ease;
	} 
	
	.container-scroll {
		max-height:60vh;            /* înălțimea maximă = înălțimea viewportului */
		overflow-y: auto;             /* activează scroll vertical */
		padding-right: 10px;          /* mic spațiu pentru scroll-bar */
		scroll-behavior: smooth;      /* scroll lin */
		border: 0px solid red;
	}		
	
	.container-scroll-full {
		max-height:75vh;            /* înălțimea maximă = înălțimea viewportului */
		overflow-y: auto;             /* activează scroll vertical */
		padding-right: 10px;          /* mic spațiu pentru scroll-bar */
		scroll-behavior: smooth;      /* scroll lin */
		border: 0px solid red;
	}	
	
		@media (max-width: 1024px) 
		{
			.sablaone-eticheta {
				flex-direction: column; /* Elemente unul sub altul */
				align-items: flex-start; /* Aliniere la stânga */
			}		
		}		




	.drop-zone {
		min-height: 100px;
		background-color: #f0f3ff;
		border: 2px dashed #7274DF;
		border-radius: 8px;
		padding: 10px;
		margin-bottom: 15px;
		font-family: Montserrat-Medium;
		font-size: 14px;
		color: #4B4DDE;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
		justify-content: flex-start;
	}
	.drop-zone .eticheta-item {
		cursor: default;
	}








/* ----------------------------------- */
.tab-offset-dreapta .tab {
	margin-right: 420px; /* rezervă spațiu pentru*/
}



	@media (max-width: 1370px) {
	  .etichete-container {
		display: none
	  }

	  .tab-offset-dreapta .tab {
		margin-right: 0 !important; /* scoate spațiul rezervat */
	  }
	}

@media (max-width: 1024px) {
  iframe.tox-edit-area__iframe {
    min-height: 300px !important;
    height: auto !important;
  }
}















	/* Scrollbar General */ 
	.right-layout::-webkit-scrollbar, .right-content::-webkit-scrollbar, .cautare::-webkit-scrollbar, .view::-webkit-scrollbar  {
		width: 8px; /* Grosimea scrollbar-ului vertical */
		height: 8px; /* Grosimea scrollbar-ului orizontal */
	}

	.right-layout::-webkit-scrollbar-track, .right-content::-webkit-scrollbar-track, .cautare::-webkit-scrollbar-track, .view::-webkit-scrollbar-track {
		border-radius: 4px; 
		margin-top: 60px; 
	}
	
	.cautare::-webkit-scrollbar-track {
		border-radius: 4px; 
		margin-top: 0px; 
	}

	.right-layout::-webkit-scrollbar-thumb, .right-content::-webkit-scrollbar-thumb , .cautare::-webkit-scrollbar-thumb , .view::-webkit-scrollbar-thumb  {
		background: #d9d7d7 !important; /* Culoarea thumb-ului scrollbar */
		border-radius: 4px  !important; /* Rotunjirea marginilor thumb-ului */
		border: 1px solid #d1cfcf  !important; /* Spațiu între thumb și track */
	}

	.right-layout::-webkit-scrollbar-thumb:hover, .right-content::-webkit-scrollbar-thumb:hover, .cautare::-webkit-scrollbar-thumb:hover, .view::-webkit-scrollbar-thumb:hover {
		background: #c2c0c0; /* Culoarea thumb-ului la hover */
	}
	

	
	/* SEMNARE */
	.signature-pad {
		border: 2px solid #184799; /* Bordură albastru închis */
		border-radius: 12px; /* Colțuri rotunjite mai elegante */
		max-width: 350px !important;
		min-width: 200px !important;
		height: 200px;
		background-color: #f8f9fa; /* Gri deschis pentru un contrast plăcut */
		cursor: crosshair; /* Cursor mai intuitiv pentru semnătură */
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Umbră subtilă pentru efect 3D */
		transition: all 0.1s ease-in-out;
	}

	/* Efect la hover */
	.signature-pad:hover {
		box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.15);
		border-color: #0a2a66; /* Bordură puțin mai închisă la hover */
	}

	/* Opțional: efect de focus activ */
	.signature-pad:active {
		background-color: #eef1f7; /* Ușor mai deschis la click */
	}

	.btn-disabled {
		color: #fff;
		background-color: #888888 !important;
		border: 1px solid #888888 !important;
		pointer-events: none;
	}	
	
	.semnatura-eroare {
		border: 2px solid red !important;
	}	




		
	.obligatoriu
	{
		font-weight: bold;	
		color: #f25252;
	}	
	
	.lat {
		max-width: 100% !important;
		border: 0px solid red;
	}
	
	.lat0{
		max-width: auto !important;
		min-width: 100px !important;
	}	
	

		@media (max-width: 1024px) 
		{
			.lat {
				width: 100% !important;;
			}
			
			.lat0{
				width: 100% !important;
				max-width: auto !important;
				min-width: auto !important;				
			}			
		}	
	
	.trimite
	{
		width: 1100px; 
		margin: auto;		
	}
	
	.PrevizualizareDocument
	{
		width: 800px;
		height: 690px;
	}	

	.PrevizualizareActiuni
	{
		height: 690px;
		overflow: visible; 
		overflow-y: auto;
	}


	
		@media (max-width: 1370px) 
		{
			.PrevizualizareDocument
			{
				width: 650px;
				height: 620px;
			}
			
			.PrevizualizareActiuni
			{
				height: 620px;
			}			
		}

		@media (max-width: 1180px) 
		{
			.PrevizualizareDocument
			{
				width: 500px;
				height: 620px;
			}
			
			.PrevizualizareActiuni
			{
				height: 620px;
			}			
		}
		
		@media (max-width: 1024px) 
		{
			.PrevizualizareDocument
			{
				width: 100%;
				height: 350px;
			}
			.PrevizualizareActiuni
			{
				height: auto;
				max-height: none;
				overflow-y: visible;
				overflow-x: visible;				
			}			
		}	
		
		
	.loading {
		text-align: center;
		font-weight: bold;
		color: #555;
		padding: 10px;
	}
	
	
	

/* OPERATII OPTIUNI */



	/* Stil pentru containerul dropdown */
	.dropdown {
		position: relative;
		display: inline-block;
		z-index: 1000;
			
	}


	/* Stil pentru meniul dropdown */
	.dropdown-menu {
		display: none;
		position: absolute;
		background-color: white;
		min-width: 155px;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		border: 1px solid #ddd;
		z-index: 1000;
		border-radius: 5px;
		margin-top: 5px;
	}

	/* Fiecare opțiune din meniu */
	.dropdown-menu a {
		color: black;
		padding: 7px 15px;
		text-decoration: none;
		display: block;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 7px;			
	}

	.dropdown-menu a:hover {
		background-color: #f1f1f1;
		
	}

	/* Stil opțional pentru afișarea meniului */
	.dropdown.show, .dropdown-menu.show  {
		display: block;
	}




	.dropdown button:hover {
		transform: scale(1.1);
		color: #fff;
		background-color: #FB2222;	
	}

	.dropdown button.active {
	transform: scale(1.1);
	color: #fff;
	background-color: #FB2222;	
	}	



	.DocumentOrdoneazaPar {
		text-align: left;
		width: auto; 
		background-color:#d9edf6; 
		color:#31708e;
		border-radius: 5px;
		padding: 5px 5px;
		font-family: Montserrat-SemiBold;
		font-size: 14px;
		border-left: 5px solid #afe4ef;
		border-right: 5px solid #afe4ef; 	
	}




	.DocumentOrdoneazaImpar {
		text-align: left;
		width: auto; 
		color:#529214;
		background-color:#eff5da; 
		border-radius: 5px;
		padding: 5px 5px;
		font-family: Montserrat-SemiBold;
		font-size: 14px;	
		border-left: 5px solid #c6d880;
		border-right: 5px solid #c6d880;
	}




/*TIME LINE*/
	.timeline {
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style: none;
		padding: 20px;
		position: relative;
		width: 100%;
		max-width: 800px;
		margin: auto auto 5px auto;
		z-index: 7;
		text-decoration: none;
	}
	.timeline li {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: relative;
		flex: 1;
		
	}
	.timeline li:not(:first-child)::before {
		content: "";
		position: absolute;
		top: 25px; /* Ajustare pentru a fi la mijlocul icon-ului */
		left: -50%;
		width: 100%;
		height: 3px;
		background: #ccc;
		z-index: -1;
	}
	.timeline li.completed:not(:first-child)::before {
		background: #7274DF;
	}
	.timeline li .icon {
		width: 50px;
		height: 50px;
		border-radius: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		position: relative;
		z-index: 1;

	}
	.timeline li.completed .icon {
		background: #7274DF;
		color: #fff;
	}
	.timeline li.completed .text {
		color: #7274DF;
		font-family: Montserrat-SemiBold;
		font-size: 14px;			
	}
	.timeline li.pending .icon {
		background: #ddd;
		color: #fff;
	}
	
	.timeline li.pending .text {
		color: #888;
		font-family: Montserrat-Medium;
		font-size: 14px;			
	}	

	.timeline li .text {
		font-size: 14px;
		margin-top: 10px;
		white-space: nowrap;
		color: #888;
	}
	
	.timeline li a {
		text-decoration: none; /* Elimină sublinierea link-ului */
	}



	/* Stilizare pentru tablete (max-width: 820px) */
	@media (max-width: 1024px) {
		.timeline {
			flex-wrap: wrap;
			justify-content: center;
			gap: 15px;
		}
		.timeline li {
			flex: 0 0 45%; /* Elemente pe două coloane */
			text-align: center;
			position: relative;
		}

	  
		/* Ascundem linia dintre al doilea și al treilea pas */
		.timeline li:nth-child(3)::before {
			display: none;
		}
	}

	/* Stilizare pentru mobil (max-width: 720px) */
	@media (max-width: 720px) {

		.timeline li {
			flex: none;
			width: auto;
			text-align: center;
		}

		.timeline li .icon {
			width: 40px;
			height: 40px;
			font-size: 18px;
		}
		
		.timeline li.completed .text,.timeline li.pending .text {
			font-size: 12.5px;			
		}
		
	}

















	
	/*Pasul urmator*/	
	.PasulUrmator {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: auto;
		margin: 10px 20px;
		border: 0px solid red;
	}	
		
	@media (max-width: 1024px) {
		
		.PasulUrmator {
			gap: 30px;
		}	
		
	}		
	

	#Inapoi, #Inainte {
		display: none;
	}
	
	

	 /* Scadentar */
	.scadentar-formular {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 400px;
		margin: 10px auto 5px auto;
		border: 0px solid red;
		padding: 0px 20px;
	}

	.scadentar-title {
		width: auto;
		padding: 0 20px 0 0;
		font-family: Montserrat-Medium;	
		font-size: 18px;
		text-align:left;	
		border: 0px solid #888;
	}	
	
	
	.scadentar-count {
		width: 60px;
		heignt: 60px;
		padding: 10px 2px;
		font-family: Montserrat-Medium;
		font-size: 18px; 
		border-radius: 10px;
		
	}	

	
	@media (max-width: 1024px) {

		.scadentar-formular {
			width: auto;
		}
	
		.scadentar-title {
			font-size: 16px;
		}	
		
		.scadentar-count {
			font-size: 16px 
		}	
		
	}	
	
	
	
	
	 /* Actualizari */
	.actualizari-title {
		width: auto;
		font-family: Montserrat-Medium;	
		font-size: 16px;
		text-align:left;	
		border: 0px solid #888;
	}
	
	.actualizari-detalii {
		width: auto;
		font-family: Montserrat-Medium;	
		font-size: 16px;
		text-align:left;	
		border: 0px solid #888;
	}	

	@media (max-width: 1024px) {
		
		.actualizari-title {
			font-size: 16px;
		}	
		.actualizari-detaii {
			font-size: 16px;
		}	
		
	
		
	}

	
	
	/* Page Layou - profil client t */
	.main-layout-profil {
		display: flex;
		flex: 1;
		overflow-y: auto;
		padding: 35px;
		height: 100%;
		background-color: #f5f5f5 ;	
	}
	
  /*right-layout - profil client  */
	.right-layout-profil {
		flex: 1;		
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 8;	
		width:100%;
		overflow-y: auto;
		overflow-x: hidden; 
		position: relative;
		z-index: 1;		
	}	
	
	
	@media (max-width: 1024px) 
	{		
		.main-layout-profil {
			padding: 15px;
		}	
		
	}	
	
	
/* .cautare-etichete*/

	.cautare-etichete-wrapper {
		position: sticky;
		top: 0;
		background: white;
		z-index: 12;
		padding-top: 10px;
		padding-bottom: 10px;
		margin: 20px 0px 20px 0px;
		
	}

	.pozitie-etichete {
		width: 100%;
		padding: 6px 10px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 14px;
	}	


	.cautare-etichete {
		width: 100%;
		padding: 6px 10px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 14px;
	}
		
		
.UltimaActivitate {
	padding: 2px 0px  !important; 
	font-family: Montserrat-Regularr  !important; 
	font-size: 8 px !important; 
	color: #bdbbbb  !important; 	
}		

		



/* .mesaj de asteptare*/
#formOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 50, 50, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  text-align: center;
  color: white;
  font-size: 20px;
}

.spinner {
  margin: 0 auto 20px;
  width: 40px;
  height: 40px;
  border: 5px solid white;
  border-top: 5px solid #007DBA;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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



.text-break {
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
  overflow-x: hidden;
}


.notificare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0; /* ajustează la nevoie */
  margin-left: 4px; /* distanța față de textul Aprobări */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}


.padding-box
{
    display: flex;
    align-items: center;
	width: auto;
	padding: 5px;
	gap: 6px; 
	border-radius: 6px; 
}



/* Butoane actiuni document sursa */
.document-butoane-actiuni {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.document-butoane-actiuni div {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.btn-editeaza-document {
  background-color: #eef4ff;
  color: #3c64ff;
  border: 1px solid #3c64ff;
}

.btn-editeaza-document:hover {
  background-color: #d7e4ff;
  transform: scale(1.1);	
}

.btn-sterge-document-sursa {
  background-color: #ffebeb;
  color: #EB2323;
  border: 1px solid #EB2323;
}

.btn-sterge-document-sursa:hover {
  background-color: #ffd6d6;
  transform: scale(1.1);	
}


/* Responsive pe mobile */
@media screen and (max-width: 600px) {

  .document-butoane-actiuni div {
    font-size: 13px;
    padding: 4px 8px;
  }
}


.document-ids {
  word-break: break-word;        /* rupe cuvintele prea lungi */
  overflow-wrap: anywhere;       /* forțează spargerea și fără spații */
  white-space: normal;           /* permite wrap normal */
  display: block;                /* în linie separată */
  max-width: 100%;               /* se încadrează în container */
}


.document-sursa-date {
  background-color: #f0fff4;           
  border: 2px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
  
}


/* ====== Pagina de descărcare (vizualizare.php?opt=DescarcaDocument) ====== */

.download-page {
  min-height: 100vh;
  display: flex;
  background-color: #f5f5f5;
}

.download-wrap {
  margin: auto;                 /* centrează vertical + orizontal */
  width: 100%;
  max-width: 720px;             /* desktop card mai îngust */
  padding: 20px;
}

.download-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  padding: 28px 24px 34px 24px;  /* un pic mai mult spatiu decat inainte */
  text-align: center;
}

.download-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;          /* mai mult spatiu sub logo */
}

.download-logo img {
  width: 180px;                 /* desktop */
  height: auto;
}

.download-title {
  margin: 0 0 16px 0;           /* spatiu mai mare sub titlu */
  font-family: Montserrat-SemiBold;
  font-size: 24px;
  color: #333;
  line-height: 1.4;
}

.download-muted {
  margin: 12px 0;               /* aerisit intre paragrafe */
  font-family: Montserrat-Regular;
  font-size: 15px;
  color: #555;
  line-height: 1.55;
}

.download-muted a {
  color: #4B4DDE;               /* nuanță din sistemul tău */
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed #4B4DDE;
}

.download-muted a:hover {
  opacity: .9;
}

.download-iframe {
  display: none;                 /* invizibil, doar pentru declanșarea descărcării */
}



/* --- Responsive --- */
@media (max-width: 1024px) {
  .download-wrap { max-width: 640px; padding: 16px; }
  .download-card { padding: 24px; }
  .download-logo img { width: 160px; }
  .download-title { font-size: 22px; }
  .download-muted { font-size: 14px; }
}

@media (max-width: 768px) {
  .download-wrap { max-width: 520px; padding: 14px; }
  .download-card { padding: 22px; border-radius: 10px; }
  .download-logo img { width: 150px; }
  .download-title { font-size: 21px; }
}

@media (max-width: 480px) {
  .download-wrap { max-width: 420px; padding: 12px; }
  .download-card { padding: 20px; border-radius: 10px; }
  .download-logo img { width: 140px; }
  .download-title { font-size: 20px; }
  .download-muted { font-size: 13px; }
}

@media (max-width: 360px) {
  .download-wrap { max-width: 320px; padding: 10px; }
  .download-card { padding: 16px; }
  .download-logo img { width: 120px; }
  .download-title { font-size: 18px; }
  .download-muted { font-size: 12.5px; }
}


/* ====== ACASA: layout nou, doar completări ====== */
.acasa-container { width: 100%; margin: 0 auto; }


.acasa-tab {		  
  max-height: 490px;
  overflow-y: auto;
  overflow-x: hidden;
}

	@media (max-width: 1024px) 
	{
		.acasa-tab {		  
			max-height: none;   
			overflow-y: visible; 
			overflow-x: visible; 
		}			
	}
		

/* TABURI MARI pe un rând, centrate */
.acasa-row-mare {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin: 0 0 16px 0;
}

/* Tab mare: 100% din .right-content, max 1300px, înălțime fixă */
.tab--mare {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* Conținutul tabului mare: scroll în interior când e cazul */
.tab--mare .tab-content {
  height: calc(415px - 58px); /* ~ înălțimea headerului tău */
  overflow: auto;
}

/* Grilă pentru taburile mici (2-3 pe rând, auto) */
.acasa-grid-mici {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1300px;  /* aliniat cu cele mari */
  margin: 0 auto 16px;
}

/* Tab mic – nu schimb .tab-urile tale, doar stabilitate vizuală */
.tab--mic { width: 100%; min-height: 160px; }

/* Util: ascundere rapidă */
.is-hidden { display: none !important; }

/* ====== Breakpoints ====== */
@media (max-width: 1600px) {
  .acasa-grid-mici { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 1024px) {
  /* Pe tabletă/mobil la tine oricum sunt una sub alta — consolidăm */
  .acasa-grid-mici { grid-template-columns: 1fr; max-width: 800px; }
  .tab--mare { max-width: 100%; height: auto; }
  .tab--mare .tab-content { height: auto; }
}

/* === ACASA – aerisire desktop intre taburi mari/mici si intre cele mici === */
@media (min-width: 1025px) {
  /* spatiu mai mare sub fiecare tab MARE (grafic, taskuri) */
  .acasa-row-mare {
    margin-bottom: 24px;   /* era 16px */
  }

  /* spatiu mai mare intre taburile MICI + sub randul de mici */
  .acasa-grid-mici {
    gap: 24px;             /* era 16px intre cardurile mici */
    margin: 12px auto 24px;/* +12px sus, +24px jos fata de celelalte blocuri */
  }

  /* optional: un strop de spatiu sub fiecare mic (cand sunt pe ultimul rand) */
  .acasa-grid-mici .tab--mic {
    padding-bottom: 2px;   /* aproape insesizabil, dar ajuta la respiratie */
  }
}

@media (min-width: 1400px) {
  .acasa-row-mare { margin-bottom: 28px; }
  .acasa-grid-mici { gap: 28px; margin: 14px auto 28px; }
}


/* randul de KPI-uri afisat sub header, deasupra graficului */
.kpi-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 12px 0 12px; 

}

.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f4f4ff;
  color: #3f42d9;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.kpi-chip .v { font-weight: 700; }

/* scrollbar discret doar in interiorul taburilor (estetic) */
.tab .tab-content::-webkit-scrollbar { width: 8px; }
.tab .tab-content::-webkit-scrollbar-thumb { background: #e1e1e1; border-radius: 4px; }
.tab .tab-content::-webkit-scrollbar-thumb:hover { background: #cfcfcf; }

/* ===== Optional: egalizeaza inaltimea taburilor mici pe acelasi rand ===== */
.equalize-mici { align-items: stretch; }              /* pui pe .acasa-grid-mici daca vrei efectul */
.equalize-mici .tab--mic { display:flex; flex-direction:column; }
.equalize-mici .tab--mic .tab-content { flex:1; }

/* ===== Varianta B: Split 2/3 + 1/3 (daca vrei sa spargi primul rand) ===== */
.hero-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 16px;
}
.hero-split .tab--mare { height: clamp(340px, 38vh, 420px); }
@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; }
}

/* ==== ACASA — fix pe mobil pentru TABURILE MICI (<=480px) ==== */
@media (max-width: 480px) {
.kpi-row {
  display: none;

}	
	
  /* containerul grilei: full width, o singură coloană, fără constrângeri */
  .acasa-grid-mici {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* fiecare card mic trebuie să poată să se micșoreze (no min-width) */
  .acasa-grid-mici .tab,
  .acasa-grid-mici .tab--mic {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* la fel și copiii direcți din grilă (în caz că ai alte wrap-uri) */
  .acasa-grid-mici > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* conținutul intern să nu poată depăși lățimea cardului */
  .acasa-grid-mici .tab .tab-header,
  .acasa-grid-mici .tab .tab-content {
    max-width: 100% !important;
  }
  .acasa-grid-mici .tab .tab-content {
    overflow-x: hidden;  /* elimină orice scroll orizontal accidental */
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ===== AJUTOR ===== */
.grup-text-ajutor {
    flex: 1;
    width: 100%;
    text-align: left;
    border: 0px solid red;
    padding: 0px 0px 8px 0px;
    font-family: Montserrat-Semibold;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}


	.grup-optiune-ajutor {
		flex: 0 0 auto;
		padding: 0 0 0px 0;
		border: 0px solid pink;
		margin: 0 0 0 0px;
		width: 100%;
		min-width: 350px;	
		 font-size: 16px;
	}
	
	



/* =====RAPOARTE ===== */	
/* === Container responsive (rămâne ca înainte) === */
.rapoarte-summary{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
  padding: 0px 0px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
@media (min-width: 600px){ .rapoarte-summary{ grid-template-columns: repeat(2,1fr); gap:14px; padding:14px; } }
@media (min-width: 992px){ .rapoarte-summary{ grid-template-columns: repeat(3,1fr); gap:16px; padding:16px; } }

/* === Card: icon pe stânga într-o insignă, text pe dreapta === */
.rs-card{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  transition: box-shadow .15s ease, transform .15s ease;
}

/*
.rs-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.06);
}*/

/* === Insigna icon (mai mare, contrast plăcut) === */
.rs-badge{
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: #eef2ff; /* default light */
}
.rs-badge i{ font-size: 20px; line-height: 1; }

/* culori pe tip */
.rs-add  .rs-badge{ background:#e6efff; }
.rs-add  .rs-badge i{ color:#2563eb; }

.rs-sign .rs-badge{ background:#e6fff4; }
.rs-sign .rs-badge i{ color:#059669; }

.rs-total .rs-badge{ background:#eef2f7; }
.rs-total .rs-badge i{ color:#374151; }

/* === Text: titlu mic, număr mare; aliniere bună === */
.rs-text{
  display: grid;
  align-items: center;
  row-gap: 2px;
}
.rs-text span{
  font-size: 13px;
  color: #6b7280;
}
.rs-text strong{
  font-size: 22px;         /* mai mare decât înainte */
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.2px;
}

/* === Mobile tuning === */
@media (max-width: 480px){
  .rs-card{ padding:12px 14px; border-radius:12px; column-gap:12px; }
  .rs-badge{ width:36px; height:36px; border-radius: 9px; }
  .rs-badge i{ font-size:18px; }
  .rs-text span{ font-size:12px; }
  .rs-text strong{ font-size:20px; }
}

/* === Dark mode opțional === */
@media (prefers-color-scheme: dark){
  .rapoarte-summary{ background:#0f172a; border-color:#1f2937; }
  .rs-card{ background:#111827; border-color:#1f2937; box-shadow:0 6px 16px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2); }
  .rs-text span{ color:#9ca3af; }
  .rs-text strong{ color:#f9fafb; }
  .rs-total .rs-badge{ background:#1f2937; }
}


/* usureaza comportamentul pe containere scrollabile pe mobil */
.right-layout {
  overscroll-behavior: contain;
}