@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
body{font-size: 14px;font-family: 'Inter', sans-serif;margin: 0;padding: 0;background: #f3f4f6;}
h1{font-family: Inter; font-size: 24px; font-weight: 600; margin: 0;}
h2{font-family: Inter; font-size: 20px; font-weight: 600; color: #333333;}
a{text-decoration: none; color: inherit; cursor: pointer;}
label{display: block; margin: 4px 0; font-family: 'Inter', sans-serif; font-weight: 600; color:#262626}
button {cursor: pointer;}
pre{white-space: pre-wrap; font-family: 'Inter', sans-serif;}
textarea{font-family: 'Inter', sans-serif;}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
::placeholder {
	color: #595959;
	opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #595959;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: #595959;
}

header{
	margin-left: 240px;
	margin-right: auto;
	overflow: hidden;
	padding: 16px;
	background-color: #FFFFFF;
	height: 90px;
}

.cs-color-4{color: #0f59a3;}
.cs-color-5{color: #262626;}
.cs-color-6{color: #333333;} /* Gray */
.cs-color-7{color: #808080;} /* Light gray */
.cs-color-8{color: #2eb82e;} /* Green */

/*----Font Family----*/
.cs-font-poppins{font-family: "Poppins", sans-serif;}
.cs-font-montserrat{font-family: "Montserrat", sans-serif;}
/*----Font Size----*/
.cs-font-12{font-size: 12px;}
.cs-font-14{font-size: 14px;}
.cs-font-16{font-size: 16px;}
.cs-font-18{font-size: 18px;}
.cs-font-20{font-size: 20px;}
.cs-font-22{font-size: 22px;}
.cs-font-24{font-size: 24px;}
.cs-font-26{font-size: 26px;}
.cs-font-28{font-size: 28px;}
.cs-font-30{font-size: 30px;}
.cs-font-32{font-size: 32px;}
.cs-font-48{font-size: 48px;}
.cs-font-100{font-size: 100px;}
/*----Align----*/
.cs-text-right{text-align: right;}
.cs-text-left{text-align: left;}
.cs-text-center{text-align: center;}

.cs-bold{font-weight: bold;}
.cs-weight500{font-weight: 500;}
.cs-weight600{font-weight: 600;}
.cs-weight700{font-weight: 700;}
 /*----Padding----*/
.cs-p0{padding: 0px;}
.cs-p8{padding: 8px;}
.cs-p8-12{padding: 8px 12px;}
.cs-p12{padding: 12px;}.cs-pb12{padding-bottom: 12px;}
.cs-p16{padding: 16px;}.cs-pb16{padding-bottom: 16px;}
.cs-p32{padding: 32px;}
.cs-p64{padding:64px;}
.cs-pr32{padding-right: 32px;}
.cs-p8-0{padding:8px 0;}
.cs-p16-32{padding:16px 32px;}
.cs-p24-32{padding:24px 32px;}
.cs-p16-8{padding:16px 8px;}
.cs-p24-16{padding:24px 16px;}
.cs-p0-8{padding:0 8px;}
.cs-p0-16{padding:0 16px;}
.cs-p0-32{padding:0 32px;}
.cs-p0-6{padding:0 6px;}

/*----Width----*/
.cs-w24{width: 23.5%;}
.cs-w32{width: 32%;}
.cs-w33{width: 33.3333%;}
.cs-w40{width: 40%;}
.cs-w49{width: 49%;}
.cs-w50{width: 50%;}
.cs-w66{width: 66.6666%;}
.cs-w100{width: 100%;}
/*----Margin----*/
.cs-m0{margin: 0;}
.cs-mt0{margin-top: 0;}
.cs-mt4{margin-top: 4px;}.cs-mb4{margin-bottom: 4px;}.cs-ml4{margin-left: 4px;}.cs-mr4{margin-right: 4px;}
.cs-mt8{margin-top: 8px;}.cs-mb8{margin-bottom: 8px;}.cs-ml8{margin-left: 8px;}.cs-mr8{margin-right: 8px;}
.cs-mt16{margin-top: 16px;}.cs-mb16{margin-bottom: 16px;}.cs-ml16{margin-left: 16px;}.cs-mr16{margin-right: 16px;}
.cs-mt24{margin-top: 24px;}.cs-mb24{margin-bottom: 24px;}.cs-ml24{margin-left: 24px;}.cs-mr24{margin-right: 24px;}
.cs-mt32{margin-top: 32px;}.cs-mb32{margin-bottom: 32px;}.cs-ml32{margin-left: 32px;}.cs-mr32{margin-right: 32px;}
.cs-mt64{margin-top: 64px;}
.cs-mtb8{margin: 8px 0;}
.cs-mtb16{margin: 16px 0;}
.cs-mtb24{margin: 24px 0;}
.cs-mtb32{margin: 32px 0;}
/*----Display----*/
.cs-flex{display: flex;}
.cs-block{display: block;}
/*----Flex----*/
.cs-flex-align-center{align-items: center;}
.cs-justify-content-space-b{justify-content: space-between;}
.cs-justify-center{justify-content: center;}
.cs-justify-end{justify-content: flex-end;}
.cs-flex-grow{flex-grow: 1;}
.cs-flex-start{align-items: flex-start;}
.cs-flex-wrap{flex-wrap: wrap;}
/*----BG Color----*/
.cs-bg-white{background-color: #FFFFFF;}
.cs-bg-black{background-color: #000000;}
/*----Text Color----*/
.cs-text-white{color: #FFFFFF;}
.cs-text-black{color: #000000;}
/*----Round corners----*/
.cs-round-4{border-radius: 4px;}
.cs-round-8{border-radius: 8px;}
.cs-round-12{border-radius: 12px;}
.cs-round-16{border-radius: 16px;}
/*----Responsive----*/
.hide-desktop{display: none;}
/*----Responsive----*/
.cs-custom-border{height: 2px; background: linear-gradient(to right, transparent, #ccc 30%, #ccc 70%, transparent);}


.cs-table, .cs-table-view , .cs-table-settings{width: 100%;margin:0; border-collapse: collapse; }
.cs-table tr, .cs-table-view tr{border-bottom: 1px solid #f2f2f2;}tr:last-child{border-bottom: none}
.cs-table td{padding: 24px 0;} .cs-table-view td{padding: 18px 0;} .cs-table-settings td{padding: 18px 0;}
.cs-table-settings .cs-input{margin-bottom: 0;}




.disabled{filter: grayscale(100%);}

.shadow{box-shadow: 0px 6px 10px 2px rgba(0,0,0,0.08);}

body.no-scroll{
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
	.cs-w24, .cs-w32, .cs-w33, .cs-w40, .cs-w49, .cs-w50, .cs-w66{width: 100%;}
	.cs-mt32-m{margin-top: 32px;}
	.cs-mb32-m{margin-bottom: 32px;}
	.cs-mb64-m{margin-bottom: 64px;}
	.cs-mtb32-m{margin: 32px 0;}
	.cs-p0-32-m{padding:0 32px;}
	.cs-w32-m{width: 32%!important;}
	.cs-w100-m{width: 100%!important; display: block;}
	.statistic{width: 100%}
	.cs-text-center-m{text-align: center;}
}


.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #33cc33;
}

input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.form-error{background-color: red; color: white; border-radius: 6px;}


/*-------------------------------Login page---------------------------------*/
.login-form{
	width: 520px;
	background-color: #FFFFFF;	
	border-radius: 8px; 
	padding: 32px 48px; 
	margin: 60px 0;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.login-form label{margin: 4px 2px;}
.login-form .password-container{position: relative;}
.login-form .password-container i{
	position: absolute;
	bottom: 23px;
    right: 1px;
	cursor: pointer;
	background-color: white;
	padding: 10px;
}
.login-input{
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background: white;
  font-size: 14px;
  font-family: Poppins;
  border: 1px solid #d9d9d9;
}
.login-message{font-size: 13px;}
@media only screen and (max-width: 600px) {
	.login-form{
		width: 100%; 
		border-radius: 0; 
		padding: 32px 32px; 
		box-shadow: none
	}
}

/*-------------------------------CUSTOM INPUT---------------------------------*/
.cs-input{
	width: 100%;
	font-size: 14px;
	padding: 8px;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 2px;
	margin-bottom: 12px;
	resize: vertical;
	background: white;
	border: 1px solid #d9d9d9;
}
/*-------------------------------Login page---------------------------------*/
.login-form{
	width: 520px;  
	border-radius: 8px; 
	padding: 32px 48px; 
	margin: 60px 0;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.login-button{
	width: 100%;
	border: none;
	background-color: #167ee6;
	color: white;
	font-family: 'Poppins', sans-serif; 
	font-weight: 500;
	padding: 12px;
	margin-top: 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}
.login-message{
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
}
.error-message{
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: #c0123c;
}
.success-message{
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: #006600;
}
/*-------------------------------TOP MENU---------------------------------*/
.topnav {
	width: 100%;
	background-color: #FFFFFF; 
	color: #000000; 
	font-weight: 500;
	height: 60px; 
	position: sticky;  
	position: -webkit-sticky; 
	top: 0;
	z-index: 2;
	display: flex; 
	align-items: center;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.17);
}
.topnav i{
	font-size: 24px;
	color: #4d4d4d;
}
.topnav .toggle{
	font-size:24px;
	cursor:pointer; 
	padding: 0 10px; 
	margin-top: 2px;
	display: none;
}
.sidenav {
	height: 100%;
	width: 240px;
	height: 100%;
	position: fixed;
	z-index: 1;
	top: 60px;
	left: 0;
	background-color: #FFFFFF;
	overflow-x: hidden;
	transition: 0.3s;
	padding-top: 10px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.17);
}
.sidenav.active {
	left: 0;
}

.menu-subitem{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: #f0f7ff;
}
.menu-subitem-inner{
	padding: 8px 0;
}

.menu-item.open .menu-subitem{
  max-height: 200px;
}

.sidenav a {
	padding: 10px;
	text-decoration: none;
	font-size: 15px;
	color: #000000;
	display: flex;	align-items: center;
	border-left: 5px solid transparent;
	border-bottom: 1px solid #e6e6e6;
}.sidenav i {	font-size: 16px;	margin-right: 6px;	width: 22px;	color: #4d4d4d;}.sidenav a:hover {	color: #1166bb;}

.sidenav .menu-subitem a{
	border-bottom: none;
	border-left: none;
	margin-left: 32px;
	padding: 6px 10px;
	font-size: 14px;
}

.sidenav .menu-subitem a.active {
	border-left: none;
	color: #0f59a3;
	font-weight: 600;
	background-color: unset;
}

.sidenav a.active {
	background-color: #167ee6;
	border-left: 5px solid #1166bb;
	color: white;
}
.sidenav a.active i {color: #fff;}
.sidenav .menu-subitem a.active:hover {	color: #167ee6;}
.sidenav a.active:hover {	color: #fff;}
.sidenav .notification {	width: 20px; 	height: 20px; 	color: white; 	background-color: red; 	border-radius: 50%;  	text-align: center; 	font-size: 12px;	display: flex;	align-items: center;    justify-content: center;}
/*------------------------CONTAINER--------------------------*/
.tabs{
	font-size: 14px;
	margin-bottom: 16px;
	color: #262626;
	display: inline-block;
	background-color: white;
}

.tabs .content{
	padding: 6px;
	display: flex;
}

.tabs a{
	padding: 6px 8px;
	display: flex;
}

.tabs a .count{
	background-color: #e6e6e6;
	font-weight: normal;
	font-size: 11px;
	display: inline-block;
	border-radius: 4px;
	padding: 2px 4px;
	margin-left: 6px;
	display: flex;
	align-items: center;
    justify-content: center;
	
}

.tabs .active{
	font-weight: bold;
	background-color: #e8edf2;
	border-radius: 10px;
}

.tabs .active .count{
	background-color: #FFFFFF;
}

.container{
	margin-left: 240px;
	margin-right: auto;
	padding: 16px 24px;
}
.inner-container{
	background-color: #fff; 
	margin-bottom: 16px;
	box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}
.box{
	background-color: #fff; 
	//box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.page-title{font-family: Inter; font-size: 28px; font-weight: 600;}

.status-pending{background-color: #fff5e6; width: 120px; color: #804d00; padding: 4px; border-radius: 40px; border: 1px solid #ffcc80;}
.status-confirmed{background-color: #e6ffee; width: 120px; color: #00802b; padding: 4px; border-radius: 40px; border: 1px solid #b1ceb9;}
.status-completed{background-color: #e6ecff; width: 120px; color: #002080; padding: 4px; border-radius: 40px; border: 1px solid #809dff;}
.status-canceled{background-color: #ffe6e6; width: 120px; color: #cc0000; padding: 4px; border-radius: 40px; border: 1px solid #ff8080;}

.action-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  position:relative;
}

.action-dot::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
}

.action-update{background:#ffe6cc;}.action-update::after{background:#e67300;}
.action-confirm{background:#d6f5d6;}.action-confirm::after{background:#1aa31a;}
.action-create{background:#d6f5d6;}.action-create::after{background:#1aa31a;}
.action-publish{background:#d6f5d6;}.action-publish::after{background:#1aa31a;}
.action-cancel{background:#ffd6d6;}.action-cancel::after{background:#cc0000;}
.action-complete{background:#cce0ff;}.action-complete::after{background:#0066ff;}
.action-delete{background:#ffd6d6;}.action-delete::after{background:#cc0000;}
.action-hide{background:#ffd6d6;}.action-hide::after{background:#cc0000;}


.list{width: 100%; padding: 12px 16px; margin: 0; border-bottom: 1px solid #e6e6e6; display: block;}
.list:last-child{border-bottom: none}


.pagination{margin-bottom: 16px;}
.pagination select{background: #FFFFFF; border: 1px solid #ccc; border-radius: 4px; padding: 4px; color: black;}

.quick-actions .qa{background: transparent; border:0; padding:6px; margin: 0 4px; cursor:pointer; color: black;}
.quick-actions button.disabled{ opacity: 0.5;pointer-events: none;}
.quick-actions .qa i{ pointer-events:none; }

.file-upload input[type="file"]{display:none;}

.upload-btn{
	background:#1166bb;
	color:#fff;
	padding:8px 16px;
	border-radius:4px;
	cursor:pointer;
	font-size:14px;
}

.upload-btn:hover{
	background:#167ee6;
}

.file-name{
	margin-left:10px;
	font-size:13px;
	color:#666;
}

.submit-btn{
	background:#1166bb;
	color:#fff;
	padding:12px 32px;
	border-radius:4px;
	cursor:pointer;	
	border: none;
	width: 200px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size:14px;
}
.submit-btn:hover{
	background:#167ee6;
}

.new-btn{
	border: 1px solid #e6e6e6;
    padding: 6px 24px;
    background: #FFFFFF;
    border-radius: 4px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}
.new-btn i{
	color: #1166bb;
	margin-right: 2px;
}

.popup{z-index: 4;position: fixed;top: 0;left: 0;width: 100%;height: 100vh; display: none; background: rgb(0, 0, 0, 0.5);}
.popup input{width: 300px;}
.popup .box{background: white; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.popup .box .close{background: white; color: #737373; border: none; padding: 10px;}
.popup button{background:#1166bb;color:#fff;padding:8px 64px;border-radius:4px;cursor:pointer;border: none;font-family: 'Inter', sans-serif;font-weight: 600;}

#showFilters{cursor: pointer;}
.filters{position: absolute; top: 38px; right: 0; width: 400px; background-color: white; border: 1px solid #e6e6e6; border-radius: 4px; padding: 16px; z-index: 3}
.filters .filter{width: 100%!important; margin-bottom: 10px;}
.filters input {cursor: pointer; height: 40px; vertical-align: middle; padding: 8px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;}
.filters select {cursor: pointer; height: 40px; vertical-align: middle; padding: 8px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; background: white; color: #404040;}
.filters .select2-container--default .select2-selection--single{border: 1px solid #ccc; height: 40px;}
.filters .select2-container--default .select2-selection--single .select2-selection__rendered {color: #444; line-height: 40px;}
.filters .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 3px;}
.filters .select2-container--default .select2-selection--single .select2-selection__placeholder{color: #595959}
.filters button {color: black; background-color: white; cursor: pointer; width: 49.3%; height: 36px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin-top: 10px;}

/*-----------------------------RESPONSIVE MOBILE------------------------------*/
@media only screen and (max-width: 768px) {
	.login-form{
		width: 100%; 
		border-radius: 0; 
		padding: 32px 32px; 
		box-shadow: none
	}
	.booking-list .arrow{display: none;}
	.sidenav {left: -246px; top: 60px;}
	.topnav i{font-size: 28px;}
	.topnav .toggle{display: inline-block;}
	.page-header{left: -246px; margin: 0 0 10px 0; padding: 16px 8px;}
	.tabs{left: -246px; margin: 0 0 16px 0; width: 100%;}
	.container{width: 100%;border: 0;border-radius: 0;margin: 10px 0 10px 0;padding: 2px 8px;}
	header{width: 100%;border: 0;border-radius: 0;margin: 0;padding: 2px 8px;}
	.cs-table-settings tr{display: block;}
	.cs-table-settings td{display: block; padding: 2px 0;}
	.cs-table-settings td:last-child{margin-bottom: 14px;}
}

/* Antet pagini admin: pe mobil, daca butoanele de langa titlu nu incap,
   titlul ocupa tot randul si butoanele coboara sub el (afisate normal). */
@media only screen and (max-width: 768px) {
	.cs-flex:has(> .page-title) {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.cs-flex:has(> .page-title) > .page-title {
		flex: 1 1 100%;
	}
}