body{	font:20px/21px Calibri, Arial, Helvetica, sans-serif;
		background:#f9f9f9; }
img {border:0px;}
input {font-size:16px;}
html, body {
  margin: 0;          /* scapă de cei 8px */
  padding: 0;
}

body {
  display: block;     /* NU inline-block */
  width: 100%;
  overflow-x: clip;   /* opțional: previne scroll orizontal accidental */
}

.header {
  background: #C7C5E4;
  border-bottom: 1px solid #000;
  margin: 0;          /* fără margini negative */
  padding: 0 12px;    /* dacă vrei spațiu interior */
  width: 100%;
  box-sizing: border-box;
   margin-top: -10px;
}
h1.title {font:20px Calibri, Arial, Helvetica, sans-serif; font-weight:bold; margin: 10px; padding-top:15px; }
h1 img { margin-right:10px;}
.left {float:left; width:100%;}
.small {font:12px calibri, arial;}
.status { margin-left:50px }

h3.print{margin-bottom:-15px; margin-top:8px;}

.table_reg_align
{margin:auto;
max-width:800px;}

.table_reg_size { 
max-width:100%; 
margin:0 auto;
background:#f6f6f6; 
}

.table_reg {  
margin:0 auto;
background:#f6f6f6; 
display: inline-block;
padding: 10px;
}

.cursor { cursor:pointer;
			color:#000080;
			text-decoration:underline;
			}
.cursor:hover {	 cursor:pointer; text-decoration:none;}	

.anunt { background: #FF9B9B; margin: 10px; height:50px;}
.anunt img {  float:left; margin: 7px 10px 10px 10px;}

targetDiv{filter:alpha(opacity=0);opacity:0}

a.nolink {text-decoration:none; border-bottom: 1px solid blue; border-bottom-style: dashed; color: black;}

.extra {
    background-color: green;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

.extra:hover {
    background-color: brown;
}

.red {
    background-color:#3b5998;
	color:white;
}

.rosu {
    background-color:#3b5998;
	color:white;
}

.blue {
    background-color:#e51c23;
	color:white;
}

.green {
    background-color:green;
	color:white;
}


.frame_box {
	border:1px solid #d7d7d7;
	background:#fff;
	padding:7px;
	margin:5px 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;}


.categ {		background:url(images/categ.png) center left no-repeat;
			padding:10px 0 0 35px;
			margin-left:25px;
			font-weight:bold;
			
			}
.categ a{text-decoration:none;}

.item{		background:url(images/item.png) center left no-repeat;
			padding:5px 0 0 25px;
			margin-left:40px;
			}
			
.item2{		background:url(images/item.png) center left no-repeat;
			padding:5px 0 0 25px;
			margin-left:0px;
			}
		

a.glidebutton{
text-decoration:none;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #C7C4FF; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}			
			

.sectiune {
position:relative; cursor:pointer;
   transition: background .45s ease-in-out;
   -moz-transition: background .45s ease-in-out;
   -o-transition: background .45s ease-in-out;
   -webkit-transition: background .45s ease-in-out;
		}

		
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}


.sectiune:hover {
background:#D6DFE4;
color:#000;
}
.sectiune:hover a { color:darkblue;}
.sectiune:hover span { color:darkblue;}
.sectiune a {
			color:#000080;
			text-decoration:none;
			}
.sectiune a:hover {	text-decoration:underline;}	
			
.item a{text-decoration:none;}
.table { 
width:700px; 
margin:0 auto;
background:#f6f6f6; 
}


input[type='checkbox'] {width:25px; height:25px;}
select {	font-size:20px;}
textarea {	font-size:20px;}


.table2 { 
width:800px; 
margin:0 auto;
background:#f6f6f6; 
}

.td1 {
width:100px;
text-align:right;
height:34px;
border-bottom-style: solid;
}
.td2 {
text-align:left;
height:34px;
border-bottom-style: solid;
}
.td3 {
text-align:right;
height:34px;
border-bottom-style: solid;
}


.swing{
	-webkit-animation:swinging 10s ease-in-out 0s infinite;
	-moz-animation:swinging 10s ease-in-out 0s infinite;
	animation:swinging 10s ease-in-out 0s infinite;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	transform-origin:50% 0;
}

@-webkit-keyframes swinging{
	0% { -webkit-transform: rotate(0); }
	5% { -webkit-transform: rotate(10deg); }
	10% { -webkit-transform: rotate(-9deg); }
	15% { -webkit-transform: rotate(8deg); }
	20% { -webkit-transform: rotate(-7deg); }
	25% { -webkit-transform: rotate(6deg); }
	30% { -webkit-transform: rotate(-5deg); }
	35% { -webkit-transform: rotate(4deg); }
	40% { -webkit-transform: rotate(-3deg); }
	45% { -webkit-transform: rotate(2deg); }
	50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
	0% { -moz-transform: rotate(0); }
	5% { -moz-transform: rotate(10deg); }
	10% { -moz-transform: rotate(-9deg); }
	15% { -moz-transform: rotate(8deg); }
	20% { -moz-transform: rotate(-7deg); }
	25% { -moz-transform: rotate(6deg); }
	30% { -moz-transform: rotate(-5deg); }
	35% { -moz-transform: rotate(4deg); }
	40% { -moz-transform: rotate(-3deg); }
	45% { -moz-transform: rotate(2deg); }
	50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
	0% { transform: rotate(0); }
	5% { transform: rotate(10deg); }
	10% { transform: rotate(-9deg); }
	15% { transform: rotate(8deg); }
	20% { transform: rotate(-7deg); }
	25% { transform: rotate(6deg); }
	30% { transform: rotate(-5deg); }
	35% { transform: rotate(4deg); }
	40% { transform: rotate(-3deg); }
	45% { transform: rotate(2deg); }
	50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { transform: rotate(0); }
}

table {border:0px; margin: 0 auto;}

input.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 16px Calibri, Arial; /* font size and style */
    position: relative;
		top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
		margin-bottom: 12px;
		cursor:pointer;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

input.css3dbutton, input.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}

input.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

input.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}

input.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}

input.css3dbuttonmare {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 100px Calibri, Arial; /* font size and style */
    position: relative;
		top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
		margin-bottom: 12px;
		cursor:pointer;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

input.css3dbuttonmare, input.css3dbuttonmare:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}

input.css3dbuttonmare:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

input.css3dbuttonmare:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}

input.css3dbuttonmare:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-o-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-out {
      /* make things invisible upon start */
    -webkit-animation:fadeOut ease-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeOut ease-out 1;
    -o-animation:fadeOut ease-out 1;
    animation:fadeOut ease-out 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:4s;
    -moz-animation-duration:4s;
    -o-animation-duration:4s;
    animation-duration:4s;
}

.fade-in.two {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}

.fade-in.third  {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
}


.footer {
text-align: right;
position: fixed;
bottom: 10px;
right:20px;
font:13px Calibri, Arial;}

.footer2{
	background-color: #efefef;
	padding:10px;
text-align: right;
position: fixed;
bottom: 10px;
right:20px;
font:17px Calibri, Arial;
font-weight:bold;}

.footer2 a{text-decoration:none;}

.header2 {
text-align: left;
position: fixed;
top: 10px;
left:20px;
font:20px Calibri, Arial;}

.header3 {
text-align: right;
margin-top: -20px;
right:20px;
font:15px Calibri, Arial;}

.footer3 {
	background-color: #efefef;
	padding:10px;
text-align: left;
position: fixed;
bottom: 10px;
left:20px;
font:12px Calibri, Arial;}
.footer4 {
text-align: left;
position: fixed;
bottom: 10px;
left:20px;
}

.end {padding-bottom:40px;}
.adpoze {color:blue; cursor:pointer;}
.adpoze a:hover {color:green; cursor:pointer; text-decoration:underline;}
.selector { border-left-style: dashed; border-left-width: 1px; }

.selector_option {float:left; padding-left:25px; margin-top:-10px;}
.selector_option2 {float:left; padding-left:0px; margin-top:-40px;}
.selector_option3 {float:left; padding-left:15px; margin-top:-40px;}

.selector_item { width:100%; background:url(images/categ.png) center left no-repeat;
			padding:5px 0 0 30px;
			margin-left:40px;			
			float:left;}
.selector_item2 { background:url(images/categ.png) center left no-repeat;
			padding:5px 0 0 30px;
			margin-left:40px;
			margin-top:-10px;			
			float:left;}
			
.selector_subitem { width:100%; background:url(images/item.png) center left no-repeat;
			padding:5px 0 0 25px;
			margin-left:40px;			
			float:left;}
.selector_rand { width:100%;	float:left;}

.handle { cursor: move; }

#test-list {
	list-style: none;
}

#test-list li {
	display: block;
	padding: 20px 0; margin-bottom: 3px;
	background-color: #efefef;
}

#info {
text-align:center;
font-size:18px;
margin:o auto;
line-height:20px;
}

.close {
  
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.selector_input {  
  margin:5px; padding: 5px; font:14px Calibri, Arial;
  position:relative;
  color: black; /* color of button on hover */
background: #C7C4FF; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}
.selector_input a {text-decoration:none;}

.selector_input:hover, .selector_input a:active,  .selector_input a:visited {
  color: white; /* color of button on hover */
background: green; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	cursor:pointer;
}

.blinking{
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;    
    animation: blink 2s infinite;
}

@-webkit-keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}
}

@-moz-keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}

}

@keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}

}

.td_left {width:50%; float:left;}
@media screen and (max-width: 800px) {
	body {font-size:16px;}
  .td_left {     width: 100%; /* The width is 100%, when the viewport is 800px or smaller */  }
  .footer_text {visibility:hidden; display: none; }
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff; /* contur alb elegant */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* umbră subtilă */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5; /* fundal de rezervă */
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* încadrată frumos indiferent de orientare */
}

#loading-bar {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 30, 30, 0.85);
  color: #fff;
  padding: 18px 26px;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  font-family: "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(6px);
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
}

#loading-bar img {
  height: 22px;
}

#loading-bar span {
  font-style: italic;
  user-select: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}