body, h1, h2, h3, h4, h5, h6  {
	font-family: Verdana, sans-serif;
	margin: 0;
	padding: 0;
	color: #31408c;
	leftmargin:0;
	topmargin:0;
	alink:#ffffff;
	vlink:#ffffff;
	bgcolor:#ffffff;
	link:#ffffff;
	marginheight:0;
	marginwidth:0;
	text:#31408c; 
	
}



a:link, a:visited {
  text-decoration: none;

}

a {
	text-decoration: none;
	color: #31408c;
}

a.tabSelected {
	text-decoration: none;
	color: white;
}

a.tabSelected:hover {
	text-decoration: none;
	color: #31408c;
}

a.nonSelected {
	text-decoration: none;
	color: #31408c;
}


a.nonSelected:hover {
	text-decoration: none;
	color: white;
}


li {
	list-style: none;
}

li.txt1 {
	list-style: disc;
}


table.h1 {
	height:auto; 
	border:1px solid grey;
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
}
table.h2 {
    width:1100px; 
	border:1px;
    margin-left:auto; 
    margin-right:auto;
}

table.h3{
	height:auto;
	border: 0px solid grey;
	width:1108px;
	margin-left:auto; 
    margin-right:auto;
}
table.f1 {
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
}


  
table.tbl1 {
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
	border:2px;
	height:auto;
	
}


table.tbl2{
	height:auto;
	border: 1px solid grey;
	width:1108px;
	margin-left:auto; 
    margin-right:auto;
}	
td.tbl1 {
  text-align: center;
}


table.tbl0{
	margin-left:auto; 
    margin-right:auto;
	border:2px;
	height:437px;
	width:auto;
}



table.tbl2{
	margin-left:auto; 
    margin-right:auto;
	height:auto;
	width:1100px;
	
	cellpadding:0;
}



table.tblX{
	margin-left:auto; 
    margin-right:auto;
	height:auto;
	width:100%;
    border: 0px solid grey;
}

table.tab-ind1{
	
	margin-left: auto;
    margin-right: auto;
	border:0;
	cellpadding:8;
	cellspacing:0;
	height:auto;
	width:1100px;
}

td.tab-ind1 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
 
}

td.tab-indx1 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px yellow;
}


td.tab-indx2 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px green;
}

td.tab-indx3 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px red;
}

td.tab-indx4 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px blue;
}






li.tab-ind1 {
color:#252c4f; 
font-size: 23px; 
font-family: Verdana, sans-serif;
}



td.tbl2td2{
	width:25%;
	padding-left: 25px;
}


td.tbl2td1{
	width:3%;
	vertical-align: top;
	
}




td.tbl3td1{
	width:3%;
	vertical-align: top;
	border: 0px solid grey;
	text-align: center;
}


tr.tbl3tr1{
	
	border-left-style: solid;
}



.name {
    color: #f5f5f5;
    font-size: 18px;
    background-color: #252c4f;
    text-align: center;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
.button {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.button:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
.button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.button1 {
    background-color: white; 
    color: black; 
    cursor: pointer;
	font: bold 14px Arial;
	width: 50%;
	border-radius: 8px;
}

.button1:hover {
    background-color: #2f8e17;
    color: white;
	cursor: pointer;
	font: bold 14px Arial;
	width: 50%;
	border-radius: 8px;
	}
.button1:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button2 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.button2:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
.button2:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}

##########################
/* 
ul {
	display: inline-block;
	width: 1400px;
	margin: 48px auto;
	border-bottom: 1px solid #DAE0E7;
	background: #F9F9F9;
	list-style-type: none;
	padding:12px 12px 0;
}
*/
/* doar meniurile (ul class="tabs") */
ul.tabs{
  display: block;          /* IMPORTANT: rând separat */
  width: 1400px;           /* păstrăm exact look-ul tău */
  max-width: 98vw;         /* ca să nu iasă din pagină */
  margin: 12px auto;       /* centrare */
  border-bottom: 1px solid #DAE0E7;
  background: #F9F9F9;
  list-style-type: none;
  padding: 12px 12px 0;
  clear: both;             /* nu se lipește de float-uri anterioare */
}

/* clearfix pt .tab{float:left} ca ul să-și calculeze înălțimea corect */
ul.tabs::after{
  content:"";
  display:block;
  clear:both;
}


.tab {
	float: left;
	height: 44px;
	margin: 0 8px -1px 0;
	border: 1px solid #DAE0E7;
	background: #F9F9F9;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.tab, .tab a {
	transition: all .25s;
}

.tab a {
	display: inline-block;
}

.tab a:first-child {
	padding: 8px 8px 8px 8px;
 white-space: nowrap;
 
}

.tab:hover {
	background: grey;
	color: blue
}

.tabSelected {
	height: 45px;
	border-bottom: none;
	background: grey;
	text-decoration: none;
	color: red;
}

.but1:hover {
	background: grey;
	color: white;
	cursor: pointer;
}

.but1 {
	height: 45px;
	border-bottom: none;
	border: 1px solid #DAE0E7;
	background: #F9F9F9;
	border-radius: 8px 8px 0 0;
	text-decoration: none;
	color: #31408c;
}

.but2 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.but2:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
	
	
.but2:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}


.but3 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 25%;
	border-radius: 8px;
}

.but3:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 25%;
	border-radius: 8px;
	}
	
	
.but3:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}




.dim {color: #CCC;}
.col1 {text-align: center; font-size: 12px;}
.col2 {text-align: left; font-size: 12px;}
.col3 {text-align: left; font-size: 12px;}
.col4 {text-align: left; font-size: 12px;}
.col5 {text-align: left; font-size: 12px;}
.col6 {text-align: center; font-size: 12px;}
.col7 {text-align: center; font-size: 12px;}
.col8 {text-align: center; font-size: 12px;}
.col9 {text-align: center; font-size: 12px;}
.col10 {text-align: center; font-size: 12px;}
.col11 {text-align: center; font-size: 12px;}
.col12 {text-align: center; font-size: 12px;}
.col13 {text-align: center; font-size: 12px;}
.col14 {text-align: center; font-size: 12px;}
.col15 {text-align: center; font-size: 12px;}
.col16 {text-align: center; font-size: 12px;}
.col17 {text-align: center; font-size: 12px;}
.col18 {text-align: center; font-size: 12px;}
h1 {font-size: 18px; padding: 2px; margin: 0 0 10px 0;}
li {font-size: 16px; padding: 2px; margin: 0 0 2px 0; list-style-type: none;}
a {text-decoration: none; color: blue;}
a:hover, a:active {color: green;}
a.selected {font-weight: bold; color: green;}
dl {margin: 0 0 0 70px; float: left;}
dt, dd {float: left; margin: 0 5px 3px 0; padding: 1px 3px; font-size: 11px; font-weight: normal;}
dt {clear: both; text-transform: uppercase; margin-left: -73px;}
dd {background-color: #FFF;}
dd a.selected {font-weight: normal;}
dd a sup {line-height: 0; margin-left: 1px;}


table {border-collapse: unset; clear: both; empty-cells: show;}


caption {border: 1px solid #DDD; border-bottom-style: none; padding: 2px 4px; background-color: #EEE; font-size: 14px;}
th, td {border: 0px solid #DDD; padding: 2px 4px; vertical-align: top;}
.admin {
     text-align: center;
	 vertical-align: middle;
}
th {background-color: #EEE;}
tr.ok  td {background-color: #CFC;}
tr.off td {background-color: #FCC;}
tr.quota_off td {background-color: #FCC;}
tr.re td {background-color: #FCC;}
tr.used td {background-color: #FFC;}

.footerlabel{
	margin-left:5px;
	margin-right:5px;
	font-weight:normal;
	font-size:10px;
	color:#000000;
	font-family:verdana;
}
.label {
  min-width: 160px;
}
.label2 {
  min-width: 250px;
}


.label3 {
  min-width: 200px;
}
 .highlight {
    color: red;
  }
  
 
 .highlight1 {
    color: green;
}
  
 .container {
    display: flex;
    flex-wrap: wrap;
}

.column {
    width: calc(100% / 3);
    padding: 5px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.first-column {
    border-left: none;
}

.column:last-child {
    border-right: none;
}

@media screen and (max-width: 768px) {
    .column {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 576px) {
    .column {
        width: calc(100% / 5);
    }
}
.row-even {
    background-color: #ffffff;
}

.row-odd {
    background-color: #EEE;
}

.btn-edit {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 100px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-edit:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 12px Verdana;
	width: 100px;
	border-radius: 4px;
	}

.btn-edit:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-new {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-new:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	}

.btn-new:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-ren {
 background-color: #ff0018; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-ren:hover {
    background-color: #d36973;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	}

.btn-ren:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-ren-d {
 background-color: #ff0018; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 37px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-ren-d:hover {
    background-color: #d36973;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 37px;
	border-radius: 4px;
	}

.btn-ren-d:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-del-luna {
 background-color: #ff0018; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-del-luna:hover {
    background-color: #d36973;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	}

.btn-del-luna:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-editpg {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-editpg:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	}

.btn-editpg:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}



.btn-editpg-d {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 37px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-editpg-d:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 37px;
	border-radius: 4px;
	}

.btn-editpg-d:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}





.btn-editper {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-editper:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	}

.btn-editper:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-deleteper {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deleteper:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	}



.btn-edits {
    background-color: #4b8f29;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px;
}

.btn-edits:hover {
    background-color: #69d134;  
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 95px;
    border-radius: 4px;
}


.btn-edits:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}





.btn-activ {
    background-color: #007BFF;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px;
}

.btn-activ:hover {
    background-color: #3399FF;  
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 95px;
    border-radius: 4px;
}


.btn-activ:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-deletep {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 90px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px
}

.btn-deletep:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 12px Verdana;
	width: 90px;
	border-radius: 4px;
	}

.btn-deletep:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}



.btn-deleter {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px
}

.btn-deleter:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
	}

.btn-deleter:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-info {
    background-color: #3258be;
    color: #f5f5f5;
    text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px
}

.btn-info:hover {
    background-color: #7c97dc;
    color: black;
   cursor: pointer;
	font: bold 12px Verdana;
	width: 95px;
	border-radius: 4px;
}

.btn-info:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-deletepg {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deletepg:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	}




.btn-deleted:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-deletel {
 background-color: #d12e6b;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 112px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deletel:hover {
    background-color: #e0729b;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 112px;
	border-radius: 4px;
	}

.btn-submit {
	background-color: #0a497c; 
    color: #f5f5f5;
	 text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 90px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px
}

.btn-submit:hover {
    background-color: #1079cf;
   color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	}

.btn-submit:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}






.btn-raport {
    background-color: orange;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 70px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-raport:hover {
    background-color: #f9cf81;
    color: black;
    cursor: pointer;
}


.btn-upload {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 90px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-upload:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}

.btn-upload:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}



.btn-select {
    background-color: #007BFF;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 12px Verdana;
	width: 110px;
	border-radius: 4px;
	border-width: 2px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px;
}

.btn-select:hover {
    background-color: #3399FF;  
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 110px;
    border-radius: 4px;
}


.btn-select:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}



.btn-download-csv-excel {
    background-color: #9c3d82;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 12px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px;
}

.btn-download-csv-excel:hover {
    background-color: #cd81b8;
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 150px;
    border-radius: 4px;
}

.btn-download-csv-excel:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-add {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 12px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	 margin-right: 3px;
}

.btn-add:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 150px;
    border-radius: 4px;
}

.btn-add:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}






.btn-addpg {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 90px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-addpg:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}

.btn-download {
    background-color: #9c3d82;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-download:hover {
    background-color: #cd81b8;
    color: black;
    cursor: pointer;
}


.btn-uploadf {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-uploadf:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}








.btn-demo {
    background-color: #59B9FF;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-demo:hover {
    background-color: #AADBFF;
    color: black;
    cursor: pointer;
}



.btn-none {
display: none;
}



.delete-message {
    background-color: #f44336; /* Culoare de fundal roșie */
    color: white; /* Text alb */
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}



.info-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.info-icon::after {
    content: attr(data-tooltip);
    visibility: hidden;
    width: 200px; /* Lățimea tooltip-ului */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 5%; /* Poziția tooltip-ului deasupra icon-ului */
    left: 105%; /* Poziția tooltip-ului la dreapta icon-ului */
    margin-left: 10px; /* Spațiu între icon și tooltip */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    white-space: pre-wrap; /* Permite linii multiple */
}

.info-icon::before {
    content: '';
    position: absolute;
    top: 42%; /* Poziționează săgeata vertical pe tooltip */
    left: 29px; /* Poziționează săgeata la stânga tooltip-ului */
    margin-left: -8px; /* Ajustează poziția săgeții față de tooltip */
    border-width: 8px;
    border-style: solid;
    border-color: transparent #555 transparent transparent; /* Săgeata pe stânga tooltip-ului */
    transform: translateY(-50%); /* Centrează săgeata vertical pe tooltip */
    visibility: hidden; /* Ascunde săgeata implicit */
    opacity: 0; /* Ascunde săgeata implicit */
    transition: opacity 0.3s, visibility 0.3s;
}

.info-icon:hover::after {
    visibility: visible;
    opacity: 1;
}

.info-icon:hover::before {
    visibility: visible;
    opacity: 1;
}

.btn-rebuild { 
display:inline-block; 
padding:8px 12px; 
border:1px solid #ddd; 
border-radius:8px; 
text-decoration:none; 
}
.btn-rebuild:hover { 
background:#f7f7f7; 
}


/* Antet tabel Campanii - albastru */
#codesTable thead tr.tr_color th,
table.tbl1 thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
}
/* Antet albastru peste DataTables */
#codesTable.dataTable thead th,
#codesTable thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
}


.grid {
	display:grid; grid-template-columns:1fr 1fr; gap:24px; 
	align-items:start; 
	}
	
.card { 
	background:#fff; 
	border:1px solid #eaeaea; 
	border-radius:12px; 
	padding:24px 28px; 
	width: 380px; 
	box-shadow: 0 6px 18px rgba(0,0,0,.06); 
	}
	
.ok { 
	color:#0a7a0a; 
	}
	
.err{ 
	color:#b00020; 
	}
	
label { 
	display:contents; 
	margin-bottom:5px; 
	}
	

	
.meta { 
	font-size:12px; 
	color:#777; 
	margin-top:10px; 
	}
/* === Login buttons (anchor + button) === */
.btn-login,
a.btn-login,
button.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #31408c;
  background: #31408c;

  font: 600 14px Verdana, sans-serif;
  line-height: 1.2;
  text-decoration: none;

  color: #fff !important;   /* învinge a{color:...} din stylesheet */
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

a.btn-login:link,
a.btn-login:visited {
  color: #fff !important;   /* sigur pentru <a> în toate stările */
  text-decoration: none;
}

.btn-login:hover {
  background: #3c4db0;
  border-color: #3c4db0;
  color: #fff !important;
}

.btn-login:active {
  transform: translateY(1px);
}

.btn-login:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 64, 140, .25);
}

.btn-login[disabled] {
  opacity: .6;
  cursor: not-allowed;
}


@media (max-width:900px){
	.grid{ 
	grid-template-columns:1fr; 
	} 
	.card{ 
	width: min(92vw, 420px);} }


/* === Shortlinks Modern UI (non-breaking) === */
.sl-wrap{max-width:1100px;margin:0 auto;}
.sl-row{
	display:inline;
	align-items:start
	}
@media(max-width:1000px){.sl-row{grid-template-columns:1fr}}
.sl-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.sl-card .sl-hd{padding:14px 18px;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:700;color:#31408c}
.sl-card .sl-bd{padding:18px}

.sl-field{margin-bottom:14px}
.sl-label{display:block;margin-bottom:6px;font-weight:600;color:#31408c}
.sl-input{width:90%;padding:10px 12px;border:1px solid #d6d8df;border-radius:10px;background:#fff;font-size:14px}
.sl-input:focus{outline:none;border-color:#31408c;box-shadow:0 0 0 3px rgba(49,64,140,.15)}
.sl-actions{display:flex;gap:10px;align-items:center;margin-top:8px}

.sl-alert{padding:10px 12px;border-radius:10px;margin:0 0 10px 0;font-size:14px}
.sl-alert.ok{background:#e8f6ee;color:#0b6b2e;border:1px solid #bfe8ce}
.sl-alert.warn{background:#fff5e5;color:#8a5800;border:1px solid #ffd08a}
.sl-alert.err{background:#ffecec;color:#8a1f11;border:1px solid #ffc1b8}

.sl-kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;font-size:14px}
.sl-kv code{background:#f5f5f7;border:1px solid #e5e7eb;border-radius:6px;padding:2px 6px}

.sl-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-divider{height:1px;background:#f0f0f0;margin:12px 0}
.sl-muted{color:#6b7280;font-size:12px}

.sl-copy{border:1px solid #d6d8df;border-radius:8px;padding:8px 10px;background:#fafafa;cursor:pointer}
.sl-copy:hover{background:#f0f0f0}

.text-right { text-align: right; }


.orange-dark {
    color: darkorange;
    font-weight: 500; /* opțional, pentru accent */
	font-weight: bold;
  }

.blue-dark {
    color: blue;
    font-weight: 500; /* opțional, pentru accent */
	font-weight: bold;
  }

/* Forțează cele 2 coloane să fie egale în tabelul intern */
table.tbl3 { 
  width: 100%;
  table-layout: fixed;           /* împarte egal coloanele, nu se mai lărgește după conținut */
}
table.tbl3 tr.equal-cols > td.half {
  width: 50%;
  vertical-align: top;
}

/* Ca fieldset/card să nu forțeze lățimea și să respecte 50% */
table.tbl3 fieldset, 
table.tbl3 .sl-card {
  width: 100%;
  box-sizing: border-box;
}


/* Doar pe pagina Add Campaigns */
.page-add-campaign table.tbl3 fieldset {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
}


/* ====== Edit Campaigns: fix overflow & layout ====== */
.page-edit-campaign table.tbl1,
.page-edit-campaign table.tbl2,
.page-edit-campaign table.tbl3 {
  width: 100% !important;      /* ignoră lățimile fixe anterioare */
  max-width: 1100px;           /* aliniere cu restul paginilor */
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;   /* evită „împingerea” la 1px */
}

/* celula cu formularul */
.page-edit-campaign table.tbl3 tr.equal-cols > td.half {
  width: 50%;
  vertical-align: top;
}

/* fieldset: stă în celulă, nu iese și nu „împinge” */
.page-edit-campaign table.tbl3 fieldset {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  overflow-wrap: anywhere;     /* rupe cuvintele foarte lungi */
}

/* inputurile și textarea respectă lățimea fieldset-ului */
.page-edit-campaign input[type="text"],
.page-edit-campaign textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* DataTables: nu mai lărgește pagina la orizontală */
.page-edit-campaign .dataTables_wrapper {
  max-width: 100%;
  overflow-x: auto;            /* scroll intern, nu pe pagină */
}

/* tabelul de fișiere rămâne la 100% în wrapper */
.page-edit-campaign table.dataTable {
  width: 100% !important;
}

/* path-urile lungi din <code> să nu forțeze overflow */
.page-edit-campaign code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* antet DataTables să nu depășească din cauza padding-urilor */
.page-edit-campaign #filesTable thead th {
  box-sizing: border-box;
}





/* fieldset: stă în celulă, nu iese și nu „împinge” */
.page-login table.tbl3 fieldset {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  overflow-wrap: anywhere;     /* rupe cuvintele foarte lungi */
}

/* inputurile și textarea respectă lățimea fieldset-ului */
.page-login input[type="text"],
.page-login textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* DataTables: nu mai lărgește pagina la orizontală */
.page-login .dataTables_wrapper {
  max-width: 100%;
  overflow-x: auto;            /* scroll intern, nu pe pagină */
}

/* tabelul de fișiere rămâne la 100% în wrapper */
.page-login table.dataTable {
  width: 100% !important;
}

/* path-urile lungi din <code> să nu forțeze overflow */
.page-login code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* antet DataTables să nu depășească din cauza padding-urilor */
.page-login #filesTable thead th {
  box-sizing: border-box;
}


/* ajustăm și inputurile/textarea să urmeze lățimea fieldset-ului */
input[type="text"],
textarea {
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
}

input[type=text],input[type=password]{
	width:auto; 
	padding:5px 5px; 
	border:1px solid #ddd; 
	border-radius:8px; 
	margin-top:4px;
	}

input[type=number]{
	width:auto; 
	padding:5px 5px; 
	border:1px solid #ddd; 
	border-radius:8px; 
	}

/* === input date să arate ca restul câmpurilor === */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto;
    padding: 5px 5px;
	border:1px solid #ddd; 
	border-radius: 8px;
    box-sizing: border-box;
}
 
select {
	width:auto; 
	padding:5px 5px; 
	border:1px solid #ddd; 
	border-radius: 8px;
	
}




/* (opțional) dacă ai texte/URL-uri foarte lungi în rezultat */
table.tbl3 .sl-bd {
  overflow-wrap: anywhere;       /* rupe cuvintele/URL-urile foarte lungi */
}


/* spinner mic pentru status rebuild */
    .spinner{
        display:inline-block; width:14px; height:14px;
        border:2px solid #ccc; border-top-color:#31408c;
        border-radius:50%; margin-right:6px;
        animation:spin 0.8s linear infinite;
        vertical-align: -2px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

/* Container upload */
.file-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Container fake file input */
.file-upload-csv {
    background-color: #43a047;      /* verde */
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 12px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	margin-right: 3px;
    
}

/* Hover */
.file-upload-csv:hover {
    background-color: #2e7d32;
    color: black;
    cursor: pointer;
    font: bold 12px Verdana;
    width: 150px;
    border-radius: 4px;
}

.file-upload-csv:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


/* Ascundem input-ul real */
.file-upload-csv input[type="file"] {
    display: none;
}

/* Buton Import CSV */
.btn-import-csv {
    background-color: #1e88e5;      /* albastru */
	color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	margin-right: 3px;
}

/* Hover */
.btn-import-csv:hover {
    background-color: #1565c0;      /* albastru mai închis */
    color: black;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 90px;
    border-radius: 4px;

}

/* Active (click) */
.btn-import-csv:active {
    box-shadow: 0 5px #666;
  transform: translateY(4px); 
}



/* Buton Import CSV */
.btn-import-add {
    background-color: #1e88e5;      /* albastru */
	color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	margin-right: 3px;
}

/* Hover */
.btn-import-add:hover {
    background-color: #1565c0;      /* albastru mai închis */
    color: black;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 150px;
    border-radius: 4px;

}

/* Active (click) */
.btn-import-add:active {
    box-shadow: 0 5px #666;
  transform: translateY(4px); 
}



.btn-adm-recalc {
    background-color: #e58a1e;      /* albastru */
	color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
	margin-right: 3px;
}

/* Hover */
.btn-adm-recalc:hover {
    background-color: #f78702;      /* albastru mai închis */
    color: black;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 150px;
    border-radius: 4px;

}

/* Active (click) */
.btn-adm-recalc:active {
    box-shadow: 0 5px #666;
  transform: translateY(4px); 
}


/* Ascundere accesibilă a input-ului */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Buton personalizat */
.btn-file {
  background-color: #b34700;
  color: #fff;
  font: bold 14px Verdana, sans-serif;
  width: 165px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;           /* pointer funcționează acum, e pe buton real */
  transition: background .2s, transform .02s;
  display: inline-block;
}

.btn-file:hover {
  background-color: #cc5500;
  color: black;
}

.btn-file:active {
  transform: translateY(1px); /* „mișcarea” la apăsare */
}

/* Numele fișierului */
.file-name {
  margin-left: 2px;
  font-size: 14px;
  vertical-align: middle;
}

/*.file-name {
            margin-top: 10px;
            font-size: 14px;
        }
*/
/* === Admin Users table – coloană acțiuni îngustă și curată === */
#usersTable th.col-actions,
#usersTable td.col-actions {
  width: 1% !important;     /* cât mai îngustă posibil */
  white-space: normal;       /* permite împachetarea textului */
}


/* anulăm lățimile fixe din stylesheet pentru butoanele din această coloană */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
}

/* (opțional) ține username și email pe un singur rând */
#usersTable td:nth-child(1),
#usersTable td:nth-child(3) {
  white-space: nowrap;
}



 /* lățimi controlate manual */
    #usersTable { table-layout: auto; }

    /* coloană îngustă, cât conținutul */
    #usersTable th.col-actions,
    #usersTable td.col-actions {
      width: 1%;
      white-space: nowrap;     /* nu rupe textul în interiorul butoanelor */
      vertical-align: middle;
    }

    /* stivuire verticală a butoanelor, cu spațiu între ele */
    #usersTable td.col-actions .action-wrap {
      display: inline-flex;
      flex-direction: column;  /* <<— vertical */
      align-items: normal;
      gap: 6px;
    }

    /* fiecare link rămâne compact, pe un singur rând */
    #usersTable td.col-actions a {
      display: inline-block;
      white-space: nowrap;
      line-height: 1.2;
      padding: 2px 6px;        /* micșorează dacă vrei coloană și mai îngustă */
    }
	
/* ==== Admin Users: separatoare și coloană Acțiuni corectă ==== */
#usersTable { 
  border-collapse: collapse;   /* elimină spațiul dintre celule */
  border-spacing: 0;
  table-layout: auto;
}

/* linii verticale & orizontale în tot tabelul */
#usersTable th, 
#usersTable td {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}

/* ultima coloană fără border dreapta */
#usersTable th:last-child, 
#usersTable td:last-child {
  border-right: 0;
}

/* antet albastru (păstrăm stilul vostru) + linie sub antet */
#usersTable thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
  border-bottom: 1px solid #203078; /* linie sub antet */
}

/* coloană Acțiuni cât conținutul + o linie stânga clară */
#usersTable th.col-actions,
#usersTable td.col-actions {
  width: 1%;               /* îngustă, după conținut */
  white-space: nowrap;     /* butoanele nu rup textul intern */
  vertical-align: top;
  border-left: 1px solid #e5e7eb;   /* << separator vizibil */
}

/* stivuim butoanele pe verticală, fără a dilata celula */
#usersTable td.col-actions .action-wrap{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

/* butoane compacte în această coloană (anulăm lățimile fixe globale) */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  padding: 2px 8px;
  line-height: 1.2;
}



/* ===== Admin Users — separator clar pentru coloana "Acțiuni" ===== */

/* lăsăm DataTables să calculeze lățimile, dar fără spațiere între celule */
#usersTable { border-collapse: separate; border-spacing: 0; }

/* linii orizontale ca în restul tabelului */
#usersTable th,
#usersTable td { border-bottom: 1px solid #e5e7eb; }

/* pregătim coloana de acțiuni pentru separator intern */
#usersTable th.col-actions,
#usersTable td.col-actions {
  position: relative;     /* ca să putem ancora pseudo-elementul */
  padding-left: 10px;     /* lăsăm loc pentru linie */
  width: 1%;              /* cât conținutul */
  white-space: nowrap;    /* nu rupe labelurile butoanelor */
  vertical-align: top;
}

/* linia verticală din interiorul coloanei de acțiuni */
#usersTable th.col-actions::before,
#usersTable td.col-actions::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

/* butoanele rămân stivuite pe verticală, fără a lărgi coloana */
#usersTable td.col-actions .action-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* anulăm lățimile fixe doar în col. Acțiuni */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2;
  padding: 2px 8px;
}
	


/* ==== Admin Users – coloană Acțiuni corectă + separator vizibil ==== */
#usersTable { border-collapse: separate; border-spacing: 0; table-layout: auto; }

/* linii orizontale */
#usersTable th,
#usersTable td { border-bottom: 1px solid #e5e7eb; }

/* desenăm separatorul stânga pentru coloana Acțiuni */
#usersTable th.col-actions,
#usersTable td.col-actions {
  position: relative;
  padding-left: 10px;      /* spațiu pentru linie */
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
}
#usersTable th.col-actions::before,
#usersTable td.col-actions::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

/* butoanele stau pe verticală ÎNĂUNTRUL celulei, nu pe <td> */
#usersTable td.col-actions .action-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* butoane compacte în această coloană */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2;
  padding: 2px 8px;
}

/* Lățimi coloane Users */
#usersTable col.col-username { width: 13%; }
#usersTable col.col-name     { width: 22%; }
#usersTable col.col-email    { width: 30%; }
#usersTable col.col-role     { width: 8%;  }
#usersTable col.col-active   { width: 8%;  }
#usersTable col.col-actions  { width: 16%; } /* acțiuni – cât conținutul */


/* Stiluri pentru dispozitive mobile (ecrane mai mici de 768px) */
@media only screen and (max-width: 800px) {
  table.h2 {
    width: 90%;
    border: 1px solid black;
    margin-left: 0;
    margin-right: 0;
  }
}



 .help-admin-grid { display:grid; gap:14px; grid-template-columns: 1fr; }
    .help-card { border:1px solid #ddd; border-radius:10px; padding:4px; background:#fff; }
    .smallcode{background:#f7f7f7;border:1px solid #eee;padding:2px 6px;border-radius:6px;}
    .flex { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .dim { color:#666; }
    .btn-row form{ display:inline; }
    .inline-edit { margin-top:8px; padding:10px; background:#fafafa; border:1px solid #eee; border-radius:8px; }
    .btn-plain { background:none; border:none; padding:0; margin:0; color:inherit; font:inherit; cursor:pointer; }
    .btn-sep { color:#aaa; margin:0 6px; }


 /* ține fieldset-ul în pagină, ca la edit campaign */
  .page-help-admin table.tbl3 fieldset{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin:0;
    padding:16px 20px;
    border:1px solid #ccc;
    border-radius:8px;
    background:#fafafa;
  }

 /* nu lăsa tabelele din card să depășească; scroll doar în card */
.page-help-admin .help-card table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* lasă URL-urile să rupă linia dacă e nevoie */
.page-help-admin code.smallcode {
  white-space: normal;

}


  /* evită ca elemente flex să iasă în lateral pe ecrane mai înguste */
  .page-help-admin .flex{
    max-width:100%;
    overflow-x:auto;
  }
  

.tab3 {
	float: left;
	height: 36px;
	width: 215px;
	margin: 3px 5px 1px 0;
	border: 1px solid #DAE0E7;
	background: #F9F9F9 ;
	border-radius: 8px 8px 8px 8px;
	overflow: hidden;
	text-align: center;
	color: white;
}

.tab3:hover {
	width: 215px;
	height: 36px;
	background: grey ;
	color: blue;
}

a.nonSelected2 {
	font-size: 10px;
	text-decoration: none;
	color: #31408c;
}


a.nonSelected2:hover {
	font-size: 10px;
	text-decoration: none;
	color: white;
	
}

/* ==== HelpMe index – grid pentru module ==== */

/* grid cu 2 module pe rând */
.help-grid {
  display: grid;
  gap: 14px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* cardul fiecărui modul (folosim același stil ca la admin help) 
.help-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}
*/
/* titlu modul + emoji/icon 
.help-card h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
*/

/* lista din interiorul cardului – nu stricăm ul global, doar în card 
.help-card ul {
  margin: 0;
  padding-left: 18px;
}
*/

/* li-urile din card (în cazul în care ai și linkuri fără .tab3) 
.help-card li {
  margin: 6px 4px;
}
*/


/* Module pe rând */
.help-grid {
  display: grid;
  gap: 14px;
}

.help-grid-cols-1 {
  grid-template-columns: 1fr;
}
.help-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.help-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Butoane pe rând în interiorul modulului */
.help-links {
  margin: 0;
  padding-left: 0;
}

.help-links-cols-3 .tab3 {
  /* ce foloseai acum: lățime care permite 3 pe rând */
  width: 140px;
}

.help-links-cols-2 .tab3 {
  width: 235px; /* exemplu pentru 2 pe rând */
}

/* li-urile din card (în cazul în care ai și linkuri fără .tab3) */
.help-card li {
  margin: 6px 4px;
}

/* ===== Plata Operatori: layout + font mai mic (doar pagina asta) ===== */
.page-plata-operatori table.tbl1{
  width: 100% !important;        /* container exterior devine full */
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-plata-operatori table.tbl2{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.page-plata-operatori table.tbl3{
  width: 100% !important;        /* interiorul rămâne fluid */
}


.page-plata-operatori #tblPlata,
.page-plata-operatori #tblPlata th,
.page-plata-operatori #tblPlata td{
  font-size: 10px;          /* micșorăm fontul doar în tabel */
  line-height: 1.0;
}

/* micșorăm și inputurile din tabel ca să încapă mai bine */
.page-plata-operatori #tblPlata input[type="number"],
.page-plata-operatori #tblPlata input[type="text"],
.page-plata-operatori #tblPlata select,
.page-plata-operatori #tblPlata textarea{
  font-size: 11px;
  padding: 3px 6px;
}

/* butonul 💾 să nu umfle coloana */
.page-plata-operatori #tblPlata button{
  font-size: 11px;
  padding: 2px 6px;
}

.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_asc,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_desc{
  cursor: pointer;
  padding-right: 20px !important;
}

.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting:before,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting:after,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_asc:before,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_asc:after,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_desc:before,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_desc:after{
  right: 5px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting:before,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting:after{
  opacity: .55 !important;
}

.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_asc:before,
.page-plata-operatori #tblPlata.dataTable thead > tr > th.sorting_desc:after{
  opacity: 1 !important;
  color: #000 !important;
}
/* ===== Plata Operatori: centrare REALĂ (doar raportul) ===== */
.page-plata-operatori .po-wrap{
  width: 1600px;           /* sau 1700px, cât vrei tu */
  max-width: 98vw;         /* ca să nu rupă pe ecrane mai mici */
  margin: 0 auto;          /* CENTRARE */
}

/* tabelele din raport să umple wrapper-ul */
.page-plata-operatori .po-wrap table.tbl1,
.page-plata-operatori .po-wrap table.tbl2,
.page-plata-operatori .po-wrap table.tbl3{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}






/* ===== plata_operatori.php: aliniere header/tabele pe lățimea raportului ===== */
.page-plata-operatori table.h1,
.page-plata-operatori table.h2,
.page-plata-operatori table.h3,
.page-plata-operatori table.f1,
.page-plata-operatori table.tbl1,
.page-plata-operatori table.tbl2,
.page-plata-operatori table.tbl3{
  width: 1600px !important;   /* aceeași idee ca .po-wrap */
  max-width: 98vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== plata_operatori.php: meniuri pe 2 rânduri, nu side-by-side ===== */
.page-plata-operatori td.tab-ind1,
.page-plata-operatori td.tab-indx1,
.page-plata-operatori td.tab-indx2,
.page-plata-operatori td.tab-indx3,
.page-plata-operatori td.tab-indx4 {
  display: block;     /* rupe layout-ul de tabel în zona asta */
  width: 100%;
  box-sizing: border-box;
}

/* păstrează look-ul taburilor, doar centrare + rând separat */
.page-plata-operatori ul.tabs{
  display: table-row-group;
  clear: both;
  width: 1400px;      /* ca în restul */
  max-width: 98vw;
  margin: 12px auto;
}
.page-plata-operatori ul.tabs::after{
  content:"";
  display:table-row-group;
  clear:both;
}
#tblTotaluri {
    border-collapse: collapse;
    width: 100%;
}

/* rândurile pare */
#tblTotaluri tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* rândurile impare */
#tblTotaluri tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

/* opțional – hover */
#tblTotaluri tbody tr:hover {
    background-color: #e6e6e6;
}

/* aliniere numerică */
#tblTotaluri td.text-right {
    text-align: right;
}
/* linie de separare sub rând */
#tblTotaluri tr.separator td {
    border-bottom: 3px solid #999;
}

/* puțin spațiu vizual */
#tblTotaluri tr.separator td {
    padding-bottom: 10px;
}



#obsEditor{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99999;
}

#obsEditorBox{
  position: absolute;
  right: 20px;
  top: 80px;
  width: 520px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 12px;
}

#obsEditorHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#obsEditorClose{
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

#obsEditorTextarea{
  width: 100%;
  height: 260px;
  box-sizing: border-box;
  resize: vertical;
}

#obsEditorFooter{
  margin-top: 8px;
  opacity: 0.75;
}
.message.message-error{
  color:#b00020;
  background:#ffe6e6;
  border:1px solid #ffb3b3;
}

.message.message-ok{
  color:#0a6b2b;
  background:#e9f8ee;
  border:1px solid #bfe9cc;
}


   /* ascundem celulele “surse” din rândurile leaf */
    td.leaf-label { padding-left:54px; font-weight:400; }

    /* mesaj eroare */
    .message-error{ color:#b00020; font-weight:700; }

/* =========================
   Repartizare ore proiect
   (Operator -> Survey)
========================= */

/* păstrăm wrapper-ul wide ca la plata_operatori, dar îl ținem în chenar */
body.page-repartizare-ore-proiect .po-wrap{
  width: 1600px;
  max-width: 98vw;
  margin: 0 auto;
}

/* tabelul container să nu împingă pagina */
body.page-repartizare-ore-proiect fieldset{
  max-width: 100%;
  box-sizing: border-box;
}

/* wrapper cu scroll intern (nu iese din chenar) */
body.page-repartizare-ore-proiect .pivot-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #bbb;
  background: #fff;
}

/* tabel pivot */
body.page-repartizare-ore-proiect table.pivot{
  border-collapse: collapse;
  /* width: max-content;    /* depășește dacă are multe zile, dar în wrapper */
  width: auto;
  min-width: 1200px;
}

/* font mai mic, ca în plata_operatori */
body.page-repartizare-ore-proiect table.pivot th,
body.page-repartizare-ore-proiect table.pivot td{
  font-size: 11px;
  line-height: 1.05;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

/* WRAP în header (ca la plata_operatori) */
body.page-repartizare-ore-proiect table.pivot thead th{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  vertical-align: bottom;
}

/* prima coloană sticky */
body.page-repartizare-ore-proiect table.pivot th:first-child,
body.page-repartizare-ore-proiect table.pivot td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f7f7f7;
}

/* aliniere numerică */
body.page-repartizare-ore-proiect .text-right{
  text-align: right;
}

/* col label */
body.page-repartizare-ore-proiect th.col-label{
  min-width: 180px;
  text-align: left;
}

/* butoane export */
body.page-repartizare-ore-proiect .btn-export{
  background: #f9f9f9;
  border: 1px solid #bbb;
  padding: 6px 12px;
  cursor: pointer;
  margin-right: 8px;
}

/* toggle */
body.page-repartizare-ore-proiect .piv-toggle{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  cursor: pointer;
}

/* indent survey */
body.page-repartizare-ore-proiect .leaf-label{
  padding-left: 34px;
  font-weight: 400;
}

/* operator row look */
body.page-repartizare-ore-proiect tr.level-op td{
  font-weight: 700;
  background: #f1f1f1;
}

/* error */
body.page-repartizare-ore-proiect .message-error{
  color:#b00020;
  background:#ffe6e6;
  border:1px solid #ffb3b3;
  font-weight:700;
}

 /* ===== Repartizare ore proiect – WRAP header ===== */
body.page-repartizare-ore-proiect table.pivot thead th{
  white-space: normal !important;     /* permite wrap */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.1;
  text-align: center;
  vertical-align: bottom;
}

/* prima coloană din header (Rând Operator / Survey) */
body.page-repartizare-ore-proiect table.pivot thead th.col-label{
  text-align: left;
}
/* ===== Repartizare ore proiect – WRAP nume operator ===== */
body.page-repartizare-ore-proiect td.piv-label{
  white-space: normal !important;   /* RUPE textul */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

/* rând operator – font bold dar wrap activ */
body.page-repartizare-ore-proiect #tblPivot tr.level-op td.piv-label{
  font-weight: 700;
}
body.page-repartizare-ore-proiect th.col-label,
body.page-repartizare-ore-proiect td.piv-label{
  max-width: 260px;   /* ajustează: 240–300 */
}

/* === WRAP header (zile) + WRAP nume operator (prima coloană) === */

/* header-ul DataTables (prinde și varianta cu scrollX) */
body.page-repartizare-ore-proiect #tblPivot thead th,
body.page-repartizare-ore-proiect .dataTables_scrollHead #tblPivot thead th{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.1 !important;
}

/* numele operatorului (prima coloană) */
body.page-repartizare-ore-proiect #tblPivot td.piv-label{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.15 !important;
  max-width: 260px;           /* ajustezi */
}

/* ca să nu-l “omoare” nowrap-ul global din pivot */
body.page-repartizare-ore-proiect #tblPivot td{
  white-space: nowrap; /* rămâne pentru numere */
}
/* header zile – 2 rânduri controlate */
body.page-repartizare-ore-proiect #tblPivot thead th.col-day{
  white-space: normal !important;
  line-height: 1.15;
  text-align: center;
}

/* prima coloană (Operator/Survey) – dăm o lățime, ca să existe wrap */
body.page-repartizare-ore-proiect #tblPivot th.col-label,
body.page-repartizare-ore-proiect #tblPivot td.piv-label{
  width: 1%;
  max-width: 180px;
}

/* centrează numele operatorului în celulă */
body.page-repartizare-ore-proiect #tblPivot td.piv-label{
  text-align: center !important;
}

/* dacă vrei și survey-urile (leaf) centrate, scoate .level-op din selector */
body.page-repartizare-ore-proiect #tblPivot tr.level-op td.piv-label{
  text-align: center !important;
  padding-left: 0 !important;   /* elimină indentarea */
}

/* (opțional) mută butonul + pe linia lui, ca să nu strice centrajul textului */
body.page-repartizare-ore-proiect #tblPivot tr.level-op td.piv-label .piv-toggle{
  float: left;
  margin-right: 8px;
}


/* ===== Repartizare ore proiect (DataTables) – tblPivot ===== */
body.page-repartizare-ore-proiect #tblPivot,
body.page-repartizare-ore-proiect #tblPivot th,
body.page-repartizare-ore-proiect #tblPivot td{
  font-size: 11px;
  line-height: 1.05;
}

body.page-repartizare-ore-proiect #tblPivot th,
body.page-repartizare-ore-proiect #tblPivot td{
  padding: 3px 5px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

/* header zile să facă wrap */
body.page-repartizare-ore-proiect #tblPivot thead th{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align: center;
  vertical-align: bottom;
}

/* prima coloană (operator) wrap */
body.page-repartizare-ore-proiect #tblPivot td.piv-label{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 220px;
}

/* buton +/− */
body.page-repartizare-ore-proiect #tblPivot .piv-toggle{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  cursor: pointer;
}

/* child table (surveys) */
body.page-repartizare-ore-proiect table.child-pivot th,
body.page-repartizare-ore-proiect table.child-pivot td{
  font-size: 11px;
  padding: 2px 4px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

body.page-repartizare-ore-proiect table.child-pivot{
  table-layout: fixed;
  
}
body.page-repartizare-ore-proiect table.child-pivot td{
  white-space: nowrap;
}




/* =========================
   Repartizare Salarii
   (Operator -> CodProiectGrupat)
========================= */

body.page-repartizare-salarii table.pivot th,
body.page-repartizare-salarii table.pivot td{
  font-size: 11px;
  line-height: 1.05;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}

body.page-repartizare-salarii table.pivot th:first-child,
body.page-repartizare-salarii table.pivot td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f7f7f7;
}

body.page-repartizare-salarii .leaf-label{
  padding-left: 34px;
  font-weight: 400;
}

body.page-repartizare-salarii tr.level-op td{
  font-weight: 700;
  background: #f1f1f1;
}

/* (opțional) mută butonul + pe linia lui, ca să nu strice centrajul textului */
body.page-repartizare-salarii #tblPivot tr.level-op td.piv-label .piv-toggle{
  float: left;
  margin-right: 8px;
}

/* ===== Repartizare Salarii (DataTables) – stil pe #tblPivot ===== */
body.page-repartizare-salarii #tblPivot,
body.page-repartizare-salarii #tblPivot th,
body.page-repartizare-salarii #tblPivot td{
  font-size: 11px;
  line-height: 1.0;
}

body.page-repartizare-salarii #tblPivot th,
body.page-repartizare-salarii #tblPivot td{
  padding: 2px 4px;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
}

/* butonul + / − */
body.page-repartizare-salarii #tblPivot .piv-toggle{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  cursor: pointer;
}

/* ===== child table (proiecte) ===== */
body.page-repartizare-salarii table.child-pivot th,
body.page-repartizare-salarii table.child-pivot td{
  font-size: 11px;
  line-height: 1.0;
  padding: 2px 4px;
  border-bottom: 1px solid #eee;
}

/* =========================
   Nr interviuri operator x proiect
========================= */
body.page-nr-int-operator-proiect .po-wrap{
  width: 1200px;
  max-width: 98vw;
  margin: 0 auto;
}

body.page-nr-int-operator-proiect .pivot-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #bbb;
  background: #fff;
}
body.page-nr-int-operator-proiect .po-wrap table.tbl1,
body.page-nr-int-operator-proiect .po-wrap table.tbl2,
body.page-nr-int-operator-proiect .po-wrap table.tbl3{
  width: 100% !important;     /* umple po-wrap */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* font mai mic ca la repartizare_ore_proiect */
body.page-nr-int-operator-proiect table.pivot th,
body.page-nr-int-operator-proiect table.pivot td{
  font-size: 10px;       /* mai mic */
  line-height: 1.0;
  padding: 4px 6px;      /* mai compact */
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

/* rânduri alternante alb/gri */
body.page-nr-int-operator-proiect table.pivot tbody tr:nth-child(odd){
  background: #ffffff;
}
body.page-nr-int-operator-proiect table.pivot tbody tr:nth-child(even){
  background: #EEE;
}

/* (opțional) hover */
body.page-nr-int-operator-proiect table.pivot tbody tr:hover{
  background: #e6e6e6;
}
/* ===== Nr interviuri operator x proiect – tabel compact ===== */
body.page-nr-int-operator-proiect #tblPivot,
body.page-nr-int-operator-proiect #tblPivot th,
body.page-nr-int-operator-proiect #tblPivot td{
  font-size: 11px !important;
  line-height: 1.0 !important;
}
/* header proiecte: permite wrap ca să nu lărgească tabelul */
body.page-nr-int-operator-proiect #tblPivot thead th{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.05 !important;
}

body.page-nr-int-operator-proiect #tblPivot th,
body.page-nr-int-operator-proiect #tblPivot td{
  padding: 1px 1px !important;   /* varianta cea mai mică */
  white-space: nowrap !important;
}
body.page-nr-int-operator-proiect #tblPivot thead th.col-day,
body.page-nr-int-operator-proiect #tblPivot td.cell-val{
  min-width: 40px;    /* ex: 32 -> 40/45 */
}
/* TOTAL – puțin mai aerisit */
body.page-nr-int-operator-proiect #tblPivot th:last-child,
body.page-nr-int-operator-proiect #tblPivot td:last-child{
  padding-left: 6px !important;
  padding-right: 6px !important;
}


/* și controalele DataTables (Search, Show entries, info, paginate) */
body.page-nr-int-operator-proiect .dataTables_wrapper,
body.page-nr-int-operator-proiect .dataTables_wrapper *{
  font-size: 11px !important;
}

/* Alternare rânduri (DataTables folosește odd/even) */
body.page-nr-int-operator-proiect #tblPivot tbody tr.odd{
  background: #fff !important;
}
body.page-nr-int-operator-proiect #tblPivot tbody tr.even{
  background: #EEE !important;
}
body.page-nr-int-operator-proiect #tblPivot tbody tr:hover{
  background: #e6e6e6 !important;
}
/* ===== Strânge coloanele la minim (după conținut) ===== */
body.page-nr-int-operator-proiect .dataTables_wrapper{
  width: auto !important;
}

/* IMPORTANT: DataTables pune width:100% pe table; îl anulăm */
body.page-nr-int-operator-proiect table.dataTable#tblPivot{
  width: 100% !important;          /* umple pivot-wrap */
  table-layout: auto !important;   /* după conținut */
  display: table !important;       /* NU inline-table */
}


/* =========================
   Strike – DataTables
========================= */

/* wrapper wide ca la celelalte rapoarte */


/* wrapper cu scroll orizontal */
body.page-strike .pivot-wrap{
  width: 100%;
  overflow-x: auto;
  border: 1px solid #bbb;
  background: #fff;
}

/* ===== tabel Strike ===== */
body.page-strike #tblStrike{
  width: 100%;
  border-collapse: collapse;
}

/* font mai mic + rânduri compacte */
body.page-strike #tblStrike th,
body.page-strike #tblStrike td{
  font-size: 12px;      /* ↓ față de default */
  line-height: 1.05;
  padding: 4px 6px;     /* mai îngust */
  border-bottom: 1px solid #ddd;
  white-space: nowrap; /* important pt coloane multe */
}

/* header */
body.page-strike #tblStrike thead th{
  background: #f1f1f1;
  font-weight: 700;
  text-align: center;
  vertical-align: bottom;
}

/* numeric – aliniere dreapta (dacă ai coloane numerice) */
body.page-strike #tblStrike td.text-right{
  text-align: right;
}

/* DataTables controls (search, length) – mai compacte */
body.page-strike .dataTables_wrapper label,
body.page-strike .dataTables_wrapper input,
body.page-strike .dataTables_wrapper select{
  font-size: 12px;
}

/* paginare */
body.page-strike .dataTables_paginate a{
  font-size: 11px;
  padding: 2px 6px;
}

/* toate coloanele în afară de prima */
body.page-strike #tblStrike td:not(:first-child){
  text-align: right;
}


/*
body.page-nr-int-operator-proiect table.tbl3 fieldset, table.tbl3 .sl-card {
    width: 71%;
    box-sizing: border-box;
	}
*/

.tab-app {
	float: left;
	height: 44px;
	margin: 0 8px -1px 0;
	border: 1px solid #DAE0E7;
	background: #e0f0f7;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.tab-app, .tab-app a {
	transition: all .25s;
}

.tab-app a {
	display: inline-block;
}

.tab-app a:first-child {
	padding: 8px 8px 8px 8px;
 white-space: nowrap;
 
}

.tab-app:hover {
	background: grey;
	color: blue
}



.tabSelected-app {
	height: 45px;
	border-bottom: none;
	background: grey;
	text-decoration: none;
	border-radius: 8px 8px 0 0;
	color: white;
}


.steps-fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px 24px;
  background: #fafafa;
  max-width: auto;
}

.steps-fieldset legend {
  font-weight: 600;
  padding: 0 10px;
  color: #333;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.steps li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  position: relative;
}

/* linia verticală */
.steps li::before {
  content: "";
  position: absolute;
  left: 45px;   /* jumătate din 90px */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e3e3e3;
}


.steps li:last-child::before {
  bottom: 50%;
}

/* cercul cu număr */
.step-number {
  min-width: 40px;        /* lățime cerc */
  height: 40px;           /* înălțime cerc */
  border-radius: 50%;
  background: #4f46e5;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;        /* text mai mic */
  font-weight: 600;
  text-align: center;
  line-height: 1.2;

  padding: 10px;          /* spațiu interior */
  z-index: 1;
   box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}

.steps li:hover .step-number {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
/* conținut */
.step-content {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  flex: 1;
}

.step-content h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #111;
}

.step-content p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

.red {
	color: red;
}

.blue {
	color: blue;
}

.yellow {
	color: #fcbf0a;
}


/* cercul cu număr sup*/
.step-row {
  display: flex;
  align-items: flex-start; /* aliniază textul frumos sus */
  gap: 15px;
}

.step-number-sup {
  width: 50px;
  height: 50px;
  flex-shrink: 0;        /* NU lasă cercul să se micșoreze */

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #4f46e5;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  
  font-size: 10px;
  font-weight: 600;

  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}

.step-number-sup-info {
  width: 50px;
  height: 50px;
  flex-shrink: 0;        /* NU lasă cercul să se micșoreze */

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: orange;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  
  font-size: 12px;
  font-weight: 600;

  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}


.step-content {
  margin: 0;             /* scoate margin default de la <p> */
  line-height: 1.5;
}
.step-content-sup {
  background: #fff;
  border-radius: 10px;
  padding: 1px 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  flex: 1;
}

.step-content-sup h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #111;
}

.step-content-sup p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}



.step-content-sup-info {
  background: #fff;
  border-radius: 10px;
  padding: 1px 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  flex: 1;
  color: red;
}

.step-content-sup-info h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #111;
}

.step-content-sup-info p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}




/* cercul cu număr sup*/
.step-row-sup {
  display: flex;
  align-items: center; /* aliniază textul frumos sus */
  gap: 2px;
}

.form-sup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    align-items: end;
}

/* fiecare <p> devine un container */
.form-sup p {
    margin: 0;
}

/* === RÂND 1: Nume operator (full width) === */
.form-sup p:nth-of-type(1) {
    grid-column: 1 / -1;
}

/* === RÂND 2: Data + SurveyName === */
.form-sup p:nth-of-type(2),
.form-sup p:nth-of-type(3) {
    grid-column: auto;
}

/* === RÂND 3: ContactTime + Plata === */
.form-sup p:nth-of-type(4),
.form-sup p:nth-of-type(5) {
    grid-column: auto;
}

/* Buton pe toată lățimea */
.form-sup button {
    grid-column: 1 / -1;
    margin-top: 10px;
}
/* =========================================================
   Pontaj NIPO Mix (pontaj_nipo_mix.php)
   Scope: doar <body class="page-pontaj-mix">
   NOTE: nu atingem meniul/header-ul (nu umblăm la ul.tabs, tab-ind, etc.)
   ========================================================= */

/* 1) wrapper raport: wide ca la rapoarte, dar fără să strice pagina */
body.page-pontaj-mix .po-wrap{
  width: 1870px;
  max-width: 98vw;
  margin: 0 auto;
}

/* 2) IMPORTANT: NU reseta tbl1/tbl2/tbl3 global!
      doar cele din raport (în po-wrap) */
body.page-pontaj-mix .po-wrap table.tbl1,
body.page-pontaj-mix .po-wrap table.tbl2,
body.page-pontaj-mix .po-wrap table.tbl3{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) fieldset-uri: să nu împingă pe lateral */
body.page-pontaj-mix .po-wrap fieldset{
  max-width: 100%;
  box-sizing: border-box;
}

/* 4) scroll doar pe tabel */
body.page-pontaj-mix .pivot-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #bbb;
  background: #fff;
}

/* 5) DataTables wrapper să nu lărgească pagina */
body.page-pontaj-mix .dataTables_wrapper{
  max-width: 100%;
  overflow-x: auto;
}

/* 6) Aliniere perfectă head/body la scrollX:
      DataTables generează 2 tabele (head + body) */
body.page-pontaj-mix .dataTables_scrollHead table,
body.page-pontaj-mix .dataTables_scrollBody table,
body.page-pontaj-mix #tblPivot{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* 7) Celule compacte + identice peste tot */
body.page-pontaj-mix #tblPivot th,
body.page-pontaj-mix #tblPivot td,
body.page-pontaj-mix .dataTables_scrollHead th,
body.page-pontaj-mix .dataTables_scrollBody td{
  box-sizing: border-box !important;
  font-size: 11px;
  line-height: 1.05;
  padding: 2px 4px !important;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  vertical-align: middle;
}

/* 8) Scoatem săgețile/padding-ul de sort din header (care decalează) */
body.page-pontaj-mix #tblPivot.dataTable thead th{
  background-image: none !important;
  padding-right: 4px !important;
  text-align: center;
  vertical-align: bottom;
}

/* DataTables v1.13: iconițe sort pe pseudo-elemente */
body.page-pontaj-mix #tblPivot.dataTable thead th:before,
body.page-pontaj-mix #tblPivot.dataTable thead th:after{
  display: none !important;
}

/* 9) Lățimi coloane (aceleași pe TH și TD) */

/* Operator (mai îngust, ca la rapoarte) */
body.page-pontaj-mix #tblPivot th.col-op,
body.page-pontaj-mix #tblPivot td.op-cell{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  text-align: left !important;
}

/* Actiuni */
body.page-pontaj-mix #tblPivot th.col-act,
body.page-pontaj-mix #tblPivot td.act-cell{
  width: 105px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: right !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* Zile */
body.page-pontaj-mix #tblPivot th.col-day,
body.page-pontaj-mix #tblPivot td.day-cell{
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  text-align: right !important;
}

/* Total */
body.page-pontaj-mix #tblPivot th.col-total,
body.page-pontaj-mix #tblPivot td.total-cell{
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  text-align: right !important;
}

/* 10) Operator text: nu lărgește coloana */
body.page-pontaj-mix #tblPivot .op-name{
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 11) Butoane: stivuite și aliniate dreapta
      IMPORTANT: fără !important pe display, ca inline style display:none să funcționeze */
body.page-pontaj-mix #tblPivot td.act-cell button{
  display: block;
  width: 96px;
  margin: 2px 0 0 auto;   /* dreapta */
  padding: 1px 6px;
  line-height: 1.1;
}

/* 12) Regula de vizibilitate butoane (robust):
      Save/Cancel ascunse până când <tr> are clasa .editing */
body.page-pontaj-mix #tblPivot td.act-cell .btn-save-row,
body.page-pontaj-mix #tblPivot td.act-cell .btn-cancel-row{
  display: none !important;
}
body.page-pontaj-mix #tblPivot tr.editing td.act-cell .btn-edit-row{
  display: none !important;
}
body.page-pontaj-mix #tblPivot tr.editing td.act-cell .btn-save-row,
body.page-pontaj-mix #tblPivot tr.editing td.act-cell .btn-cancel-row{
  display: block !important;
}

/* 13) Input edit: să nu împingă coloana zilei */
body.page-pontaj-mix #tblPivot input.inp-day{
  width: 46px !important;
  box-sizing: border-box !important;
  text-align: right;
  padding: 1px 2px !important;
}

/* 14) NULL / locked */
body.page-pontaj-mix #tblPivot td.day-cell.locked{
  opacity: .75;
}
body.page-pontaj-mix #tblPivot .nullcell{
  color: #b00020;
  font-weight: 700;
}

/* 15) Zebra ca în restul rapoartelor */
body.page-pontaj-mix #tblPivot tbody tr.odd{ background: #fff !important; }
body.page-pontaj-mix #tblPivot tbody tr.even{ background: #EEE !important; }
body.page-pontaj-mix #tblPivot tbody tr:hover{ background: #e6e6e6 !important; }

/* ===== Pontaj NIPO Mix — COMPACT (override) ===== */

/* tabelul să nu aibă min-width mare */
body.page-pontaj-mix #tblPivot{
  min-width: 900px !important;      /* înainte era 1200 */
}

/* celule mai compacte */
body.page-pontaj-mix #tblPivot th,
body.page-pontaj-mix #tblPivot td{
  font-size: 10px !important;
  line-height: 1.0 !important;
  padding: 1px 3px !important;
}

/* Operator mai îngust */
body.page-pontaj-mix #tblPivot th.col-op,
body.page-pontaj-mix #tblPivot td.op-cell{
  min-width: 160px !important;
  max-width: 160px !important;
}

/* Acțiuni mai îngust */
body.page-pontaj-mix #tblPivot th.col-act,
body.page-pontaj-mix #tblPivot td.act-cell{
  min-width: 92px !important;
  max-width: 92px !important;
}

/* butoane mai mici (și tot verticale) */
body.page-pontaj-mix #tblPivot td.act-cell button{
  width: 78px !important;
  font-size: 11px !important;
  padding: 1px 4px !important;
  margin-top: 2px !important;
}

/* Zile mai înguste */
body.page-pontaj-mix #tblPivot th.col-day,
body.page-pontaj-mix #tblPivot td.day-cell{
  min-width: 44px !important;
  max-width: 44px !important;
}

/* IMPORTANT: permite wrap în zi (ex: "8.00 CM" pe 2 rânduri) ca să nu lărgească tabelul */
body.page-pontaj-mix #tblPivot td.day-cell{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Total mai îngust */
body.page-pontaj-mix #tblPivot th.col-total,
body.page-pontaj-mix #tblPivot td.total-cell{
  min-width: 60px !important;
  max-width: 60px !important;
}

/* input-ul din edit să nu împingă ziua */
body.page-pontaj-mix #tblPivot input.inp-day{
  width: 38px !important;
  font-size: 10px !important;
  padding: 1px 2px !important;
}


/* Weekend coloring (Pontaj Mix) */
table.dataTable thead th.wk-sat,
table.dataTable tbody td.wk-sat {
  background: #6492f7; /* sambata */
}

table.dataTable thead th.wk-sun,
table.dataTable tbody td.wk-sun {
  background: #f98181; /* duminica */
}

/* optional: să rămână vizibil când e row hover în DataTables */
table.dataTable tbody tr:hover td.wk-sat {
  background: #2363ef;
}
table.dataTable tbody tr:hover td.wk-sun {
  background: #f35757;
}

/* Celule cu ore din Cati, dar în pontaj era X (Cometa nu avea cod) */
table.dataTable thead th.from-cati,
table.dataTable tbody td.from-cati {
  background: #fdd865 !important; /* galben */
}

/* dacă vrei să se vadă și la hover */
table.dataTable tbody tr:hover td.from-cati {
  background: #f5c32a !important;
}

.page-pontaj-mix .day-cell.from-project {
  background: #dfb0eb !important;
  box-shadow: inset 0 0 0 2px  #8d13d9 !important;
  font-weight: 700;
}

/* Zi liberă legală simplă */
.page-pontaj-mix th.legal-holiday,
.page-pontaj-mix td.legal-holiday {
  background: #38c384 !important;
  color: #000 !important;
  font-weight: 700;
}

/* Zi liberă legală + sâmbătă */
.page-pontaj-mix th.legal-holiday.wk-sat,
.page-pontaj-mix td.legal-holiday.wk-sat {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #6492f7 50%,
    #6492f7 100%
  ) !important;
}

/* Zi liberă legală + duminică */
.page-pontaj-mix th.legal-holiday.wk-sun,
.page-pontaj-mix td.legal-holiday.wk-sun {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #f98181 50%,
    #f98181 100%
  ) !important;
}
/* Zi liberă legală + proiect selectat */
.page-pontaj-mix td.legal-holiday.from-project {
  background: linear-gradient(135deg, #38c384 0%, #38c384 50%, #dfb0eb 50%, #dfb0eb 100%) !important;
  box-shadow: inset 0 0 0 2px #8d13d9 !important;
}

/* Zi liberă legală + ore CATI */
.page-pontaj-mix td.legal-holiday.from-cati {
  background: linear-gradient(135deg, #38c384 0%, #38c384 50%, #f5c32a 50%, #f5c32a 100%) !important;
}


/* Header + celule: zi liberă legală + sâmbătă */
body.page-pontaj-mix #tblPivot th.legal-holiday.wk-sat,
body.page-pontaj-mix #tblPivot td.legal-holiday.wk-sat {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #6492f7 50%,
    #6492f7 100%
  ) !important;
}

/* Header + celule: zi liberă legală + duminică */
body.page-pontaj-mix #tblPivot th.legal-holiday.wk-sun,
body.page-pontaj-mix #tblPivot td.legal-holiday.wk-sun {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #f98181 50%,
    #f98181 100%
  ) !important;
}

/* Header + celule: zi liberă legală simplă */
body.page-pontaj-mix #tblPivot th.legal-holiday,
body.page-pontaj-mix #tblPivot td.legal-holiday {
  color: #000 !important;
  font-weight: 700;
}







.badge {
  display: inline-block;
  min-width: 28px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  margin-right: 8px;
  color: #000;
  box-sizing: border-box;
  vertical-align: middle;
}
.badge-yellow { background: #f5c32a; }
.badge-red { background: #f98181; }
.badge-blue { background: #6492f7; }
.badge-purple { background: #dfb0eb; 
box-shadow: inset 0 0 0 2px #8d13d9; }
.badge-green { background: #38c384; }
.badge-gray { background: #e2e3e5; }
.badge-green-red {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #f98181 50%,
    #f98181 100%
  );
}

.badge-green-blue {
  background: linear-gradient(
    to bottom right,
    #38c384 0%,
    #38c384 50%,
    #6492f7 50%,
    #6492f7 100%
  );
}

.fieldset-zile-libere {
  font-size: 12px;
}

.fieldset-zile-libere label {
  font-size: 12px;
}

.fieldset-zile-libere input,
.fieldset-zile-libere select {
  font-size: 12px;
  padding: 2px 4px;
  height: 24px;
}

.tbl-zile-libere {
  font-size: 11px;
  table-layout: fixed;
}

.tbl-zile-libere th,
.tbl-zile-libere td {
  padding: 3px 4px !important;
  line-height: 1.15;
  white-space: nowrap;
}

.tbl-zile-libere th:nth-child(1),
.tbl-zile-libere td:nth-child(1) {
  width: 34px;
  text-align: center;
}

.tbl-zile-libere th:nth-child(2),
.tbl-zile-libere td:nth-child(2) {
  width: 78px;
}

.tbl-zile-libere th:nth-child(4),
.tbl-zile-libere td:nth-child(4) {
  width: 42px;
  text-align: center;
}

.tbl-zile-libere th:nth-child(5),
.tbl-zile-libere td:nth-child(5) {
  width: 120px;
  text-align: center;
}

.fieldset-zile-libere .btn-editpg,
.fieldset-zile-libere .btn-ren,
.fieldset-zile-libere .btn-import-add {
  font-size: 11px !important;
  padding: 2px 6px !important;
  line-height: 1.2 !important;
  min-height: 22px;
}

.fieldset-zile-libere form {
  margin: 0;
}

.fieldset-zile-libere td form {
  display: inline-block !important;
}

/* ===== Admin zile libere - tabel compact în pagină ===== */

.page-admin-zile-libere table.tbl1,
.page-admin-zile-libere table.tbl2,
.page-admin-zile-libere table.tbl3 {
  width: 1100px !important;
  max-width: 98vw !important;
  box-sizing: border-box;
}

.page-admin-zile-libere fieldset {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.page-admin-zile-libere .tbl-zile-libere {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  font-size: 11px;
}

.page-admin-zile-libere .tbl-zile-libere th,
.page-admin-zile-libere .tbl-zile-libere td {
  padding: 3px 5px !important;
  line-height: 1.15;
  vertical-align: middle;
  white-space: nowrap;
}

/* ID */
.page-admin-zile-libere .tbl-zile-libere th:nth-child(1),
.page-admin-zile-libere .tbl-zile-libere td:nth-child(1) {
  width: 45px;
  text-align: center;
}

/* Data */
.page-admin-zile-libere .tbl-zile-libere th:nth-child(2),
.page-admin-zile-libere .tbl-zile-libere td:nth-child(2) {
  width: 95px;
  text-align: center;
}

/* Denumire - ia restul spațiului */
.page-admin-zile-libere .tbl-zile-libere th:nth-child(3),
.page-admin-zile-libere .tbl-zile-libere td:nth-child(3) {
  width: auto;
  white-space: normal;
  text-align: center;
}

/* Activ */
.page-admin-zile-libere .tbl-zile-libere th:nth-child(4),
.page-admin-zile-libere .tbl-zile-libere td:nth-child(4) {
  width: 55px;
  text-align: center;
}

/* Acțiuni */
.page-admin-zile-libere .tbl-zile-libere th:nth-child(5),
.page-admin-zile-libere .tbl-zile-libere td:nth-child(5) {
  width: 150px;
  text-align: center;
  white-space: nowrap;
}

/* butoane compacte doar aici */
.page-admin-zile-libere .tbl-zile-libere .btn-editpg,
.page-admin-zile-libere .tbl-zile-libere .btn-ren {
  width: 70px !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  line-height: 1.15 !important;
  margin: 1px !important;
}

.page-admin-zile-libere .tbl-zile-libere td form {
  display: inline-block !important;
  margin: 0 !important;
}