/* General */
* { margin: 0; padding: 0;}
body { background: #f5f9fa; color: #4f505c; font-family: 'Open Sans', 'Roboto', sans-serif; font-size: 16px;}
/*table {  table-layout: fixed;}*/
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 170%;}
h1, h2 { line-height: normal; color: #4f505c;}
h1 { font-size: 1.8em;}
h2 { font-size: 1.6em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.3em;}
h5 { font-size: 1.2em;}
a { color: #459ff1; font-size: 0.9em; font-weight: 500;}
	a:hover { color: #4f505c; text-decoration: none;}
.txt-white { color: white; text-decoration: underline;}
a.txt-white:hover { color: white;}

.reset { clear:both;}




/* Browser Reset */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset;}
::-webkit-input-placeholder { color: #9f9f9f !important; opacity: 0.5 !important;}
button:focus, th:focus, td:focus {outline: none;}

/* Login */
.login-box { width: 400px; margin: 0 auto; margin-top: 5em; padding: 2em; background: #ffffff; border-radius: 4px;
			 -webkit-box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);}
.login-desc { font-size: 0.9em;	margin-bottom: 1em;}
.login-desc-span { font-size: 1.1em; font-weight: 700; display: block; margin-top: 0.3em; color: #5be89c;}
.login-form { margin: 1em 0;}
.pwd-recovery { margin-top: 32px; text-align: left;}
	.pwd-recovery a { color: #5be8c8; }
		.pwd-recovery a:hover { color: #c0c2ce;}
.covidForm-box {
	width: 35%;
	margin: 0 auto;
	margin-top: 5em;
	padding: 2em;
	background: #ffffff;
	border-radius: 4px;
	-webkit-box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
}

.height-for-form-covid {
	height:70vh;
	resize: both;
	overflow: auto;
}


	.form-control:focus {
		border-color: #51DDD3;
	}
/* btns */
.btn { text-transform: uppercase; cursor: pointer;}
.btn-login { background: #70c1f9; background-image: linear-gradient(to right, #70c1f9 0%, #79e4de 100%); color: white; width: 100%;	margin: 0.3em 0; padding: .7rem;}
.btn-login:hover { background: #70c1f9; color: white;}
.btn-create { background: #f5f9fa; color: #70c1f9; width: 100%; margin: 0.3em 0; padding: .7rem;}
.btn-create:hover { background: #c0c2ce; color: white;}
.btn-renunta {
	background: #d22034;
	background-image: linear-gradient(to right,#eb99a3 0%, #d22034 100%);
	color: white !important;
	width: 100%;
	margin: 0.3em 0;
	padding: .7rem;
}
.btn-renunta:hover {
	background: #d22034;
	color: white;
}
.btn-cancel { background: #fb0d45; color: white; width: 100%; margin: 0.3em 0; padding: .7rem;}
.btn-cancel:hover { background: #bd0931; color: white; width: 100%; margin: 0.3em 0;}
.btn-logout { background: #ffffff; }
	.btn-logout:hover {
		color: #94cdff;
	}
.btn-reset, .btn-show { background: #94cdff; color: white;}
.btn-reset:hover, btn-show:hover { background: #3797ff;}
.btn-green { background: #5be89c; color: white;}
	.btn-green:hover { background: #20d35f;}
.btn-blue { background: #70c1f9; background-image: linear-gradient(to right, #70c1f9 0%, #79e4de 100%);	border: none;}
.btn-red { background: #d22034; background-image: linear-gradient(to right,#eb99a3 0%, #d22034 100%);}
.btn-blue, .btn-red {  font-weight: 400; color: white !important; border-radius: .25rem;	border: none;}
.btn-blue:hover { background: #70c1f9;}
.btn-red:hover { background: #d22034;}
.asc { position: absolute; bottom: .25rem; right: .4rem; background: transparent; color: #93d0ff; border: none;}
.btn:focus { outline: 0; box-shadow: none;}
.btn-ban { background: #fb0d45; color: white; font-size: 0.6rem; font-weight: 700;}
	.btn-ban:hover { background: #bd0931;}
.btn-add_del{ margin-top: 1.7rem;}
.pac-search {
	margin-top: 3rem;
}
.ddbuttons { margin-top: 1rem;}
/*.ddbuttons { margin-bottom: 2.5rem;}*/

/* forms */
label { color: #fda1ac;  font-weight: 700; margin-bottom: .25rem;}
input { font-family: 'Open Sans', sans-serif; font-size: 1rem;}
.relative { position: relative;}
/* Schimba parola */

/*.fimg img {
    margin: 0.5em;
    max-width: 85%;
    max-height: 25em;
    border: 1px solid #e8e8ea;
}*/
/* Main */
.antet {
	background-color: #1b9dff;
	color: #0220f7;
}
 
.antet-left {
	display: inline-block;
	vertical-align: middle;
	float: left;
}.antet-right {
	display: inline-block;
	float: right;
	text-align: right;
	vertical-align: middle;
}
.pac-id {
	color: #ffffff;
	font-weight: bolder;
}
.app-container { width: 1200px; margin: auto; margin-top: 20px }

.descriere { margin-top:20px; margin-bottom:20px}
.form-input{ border: 1px #f0f0f0  solid; padding:5px; font-size:0.8em}

.w100 { width: 100%;}

/* table */
/*thead { background: #3797ff;}*/
.table thead th, .table thead td {
    background: transparent;
    border-bottom: 2px solid #d8fffc;
    color: #51DDD3;
    font-weight: 400;  
}
.table thead th {
	text-wrap: nowrap;
}
.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(150, 202, 255, 0.1);
}

.table-hover tbody tr:hover {
	background-color: #eff9ff;
}

tbody .skunk-current-row, .skunk-current-row {
	background: rgba(113, 195, 249, 0.15) !important;
	color: #4f505c !important;
}

.table-responsive { overflow-x: auto;}
.sk-pac-list { height: 50vh;}

/*fereastra programari*/
.top-left, .swipe-left { float:left;}
.top-right, .swipe-right { float: right;}
.filtru, .criterii, .rezultate, .navigare { background: white !important; padding: 1.25rem !important; margin-bottom: 1rem !important;
											-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.07000000000000001);
											-khtml-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.07000000000000001);
											-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.07000000000000001);
											-ms-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.07000000000000001);
											box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.07000000000000001);
											}
.pacient-select { min-width: 600px;}
.select-list {max-height:600px; overflow-y:auto;}
.form-condensed { padding: .3rem 1.5rem .3rem .75rem;}
.subtitlu { margin-bottom: 0.75rem;}

.show-hide { margin: 1em 0;}

/* Rezultate */
/*.rezultate { background: white;	padding: 1.25rem; margin-top: 1rem; height: 600px;}*/
.rez-list { 
	max-height: calc(100vh - 580px);
	height: fit-content;
}
.buton-anuleaza { margin-top: 1rem;}
.swipe { display: block; clear: both; width: 100%; min-height: 3em;}
.butoane-confirmare { margin-top: 1rem;}

/* MessageBox */
.messageBox { z-index: 9;}
.SWindow {
	position: absolute;
	margin: 0px;
	top: 25px !important;
	min-width: 400px;
	min-height: 200px;
	background-color: #FFF;
	-webkit-box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}
.SWindow .titleBar {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;-ms-user-select: none; user-select: none;}
.SWindow .titleBar .title { color: #68c8c7; font-weight: 500; text-transform: uppercase;}
.SWindow .titleBar .titleContainer {}
.btn-close { position: absolute; right: 1.2rem; top: 1rem; color: #fb0d45;}
.btn-close:hover { color: #bd0931;}
.containerBody {
	width: 100%; /*padding-bottom: 2rem; overflow-y:auto*/
}
.buttonBarContainer {/* margin-top: -1.5rem; */width: 100%;	padding-bottom: 1em;}
.btn-round { min-width: 7rem; margin: 0 0.35rem;}
.box-large { min-width: 800px;}

/*.btnBarContainer .btnBarx div btn{ min-width : 100px;margin:5px;}
.btnBar {padding:10px; height: 50px; position: absolute; width:100%; bottom: 0px; background-color: #FAFCFF; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}*/
/*.datepicker{ background-color:#FFFFFF}
.butoane-filtru, .butoane-confirmare { margin: 10px 0px;}

.crearecont h2{ margin-top:30px; margin-bottom:30px;}
.butoane-crearecont { margin-top:30px;}*/

/*Adaugare programari*/
/*.days {display:inline-block;width:10%;}
.col20p {width: 20%;}*/

/*.programari-rezultate { max-height: 580px; overflow: auto;}*/
.line { background-color: #94cdff; color: #f6f6f6; margin: 10px 0;}
.ziua_curenta {	margin-left: 0px; text-align: left; float: left; font-weight: bold; font-size: 1.4em;color: #626262; text-decoration: none;}
.ziua_urmatoare {margin-right:0px; text-align:right;float:right; color: #003472; font-weight:bold; font-size: 1.4em; text-decoration:none;}
.navigare {display: inline-block;}
.orar_disponibil { border: 1px; border-collapse: separate; }
td.data_afis { background: #0120f7;	color: white; font-weight: 700;}
.loc_afis {background-color: #96caff; color: white;}
.medic_afis { background-color: #9ac3ff; color: white; width: 10% !important; text-transform: uppercase; text-align: left; font-size: 0.9rem; font-weight: 600;}
.spec_afis { font-size: 0.9rem;	background: #9ac3ff; color: white;}
.loc_afis, .medic_afis, .spec_afis { border-right: 1px solid #e9ecef; min-width: 120px;}
.ora { color: white; padding: 0 0.75rem; font-weight: bolder; background-color: #5be89c;}
.investigatii { padding: 0.35rem; border: 1px solid #52e89c; min-height: 2rem; font-size: 0.9rem; cursor: pointer;}
.btn-inv { border: 1px solid #003472; padding: 5px 40px; font-weight: bold; margin: 3px; border-radius: 30px; min-width: 150px;}

.skinv, btninv{float:left}
.skinv { width: 50% }
.reset{ clear:both;}
.alert-danger {
    color: rgba(220, 53, 69, 1);
    background-color: transparent;
    border-color: transparent;
}
.alert-success {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(104, 200, 199, 1);
    border-color: transparent;
}

/*td:focus{background-color: #f9e436;}*/
.scrollit { overflow-y: scroll; height: 480px !important; }
.table_cell { background-color: white; padding: 0.25rem !important; outline: none; border: none;}
/* de sortat */
.hideColumn {
	display: none;
}

.program-desc { color: #93d0ff;	display: block;	font-weight: 400; margin-bottom: .75rem;}
.firsttime { margin-bottom: 1.5rem;}

.resultstable {
	table-layout: fixed;
	width: 100%;
	display: block;
}

	.resultstable thead {
		display: inline-block;
		width: 100%;
	}

		.resultstable thead tr th:nth-child(1) {
			width: 10%;
		}

		.resultstable thead tr th:nth-child(2) {
			width: 5%;
		}

		.resultstable thead tr th:nth-child(3) {
			width: 5%;
		}

		.resultstable thead tr th:nth-child(4) {
			width: 10%;
		}

		.resultstable thead tr th:nth-child(5) {
			width: 10%;
		}

		.resultstable thead tr th:nth-child(6) {
			width: 10%;
		}

		.resultstable thead tr th:nth-child(7) {
			width: auto;
		}

		.resultstable thead tr th:nth-child(8) {
			width: auto;
		}

		.resultstable thead tr th:nth-child(9) {
			width: 10%;
		}

		.resultstable thead tr th:nth-child(10) {
			width: 10%;
		}

	.resultstable tbody tr td:nth-child(1) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(2) {
		width: 5%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(3) {
		width: 5%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(4) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(5) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(6) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(7) {
		width: auto;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(8) {
		width: auto;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(9) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody tr td:nth-child(10) {
		width: 10%;
		overflow: hidden;
	}

	.resultstable tbody {
		height: 200px;
		display: inline-block;
		width: 100%;
		overflow: auto;
	}

/*.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 150px;
	max-width: 20rem;
}*/

.ellipsis {
	width: 200px;
	max-width: 20rem;
	text-overflow: elipsis;
	white-space: normal;
	overflow: visible;
}

	/*.ellipsis:focus, .ellipsis:hover {
		width: 200px !important;
		max-width: 20rem;
		text-overflow: inherit;
		white-space: normal;
		overflow: visible;
	}*/

/* Calendar */
.datepicker {
	background: white;
	padding: 1em;
	-webkit-box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	moz-box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
	outline: none;
	border: none;
	font-family: 'Open Sans', sans-serif;
}
.datepicker-head {
	text-align: center;
	background: #93d0ff;
	color: white;
	padding: 0.25rem 0.75rem;
}
.datepicker-head .month,
.datepicker-head .year{ display:inline-block;}
.sk-datem, .sk-datey{width:80px; text-align:center; font-size:smaller;}
.datepicker-head .month btn,
.datepicker-head .year btn{ background-color: rgba(0, 52, 114, 1); color: #f9e436; padding:0 5px; border:none; margin:0 2px;}
table.table-datepicker { width: 100%; text-align: right;}
.table-datepicker th, .table-datepicker td { text-align: right; padding: 0.25rem;}
.table-datepicker td:active { background: #3b51fa; color: white;}

.btn_left, .btn_right {
	background: transparent;
	border-collapse: collapse;
	border: 1px solid transparent;
	color: #94cdff;
	font-weight: 700;
}

/* Reset Skunk.css*/
.no-overflow { overflow:hidden;}

/*Scrollbar */

::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f0eef9;
	padding: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #dadae2;
	padding: 3px;
}

	::-webkit-scrollbar-thumb:window-inactive {
		background: #dadae2;
		padding: 5px;
	}

/* end of scrollbar*/

/* login tabs */
.tab-auth-tabs {
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 2em;
}

.tab-auth a.nav-link { color: #f0f0f0;}
.tab-auth a.nav-link.active.show { color: #459ff1; font-weight: 600; border-bottom: 4px solid #51DDD3;}

/*err page*/
.errAnouncement { max-width: 640px; padding: 2rem; margin: auto; margin-top: 20vh; text-align:center;}
.iconRed { color: #f64545;}
.iconMauve { color: #6264a7;}
.iconErr { display: block; font-size: 4rem; padding: 1rem;}
.paymentResponse h1 { display: inline-block; font-size: 2rem; font-weight: 500;}
.btn.btn-login.btn-teams { background: #6264a7;	background-image: none;}
.btn.btn-login.btn-teams:hover { background: #47497d; background-image: none;}
.isTeams { width: 80%; margin: auto;}
.teamsmesage { font-size: 1.1rem;}
.isTeams ul { list-style: none; margin-top: 1rem;}


/*OLD STYLKE*/

/* Main */
.antet {
	background-color: #70c2f9;
	color: #0220f7;
}

.antet-content {
	display: flex;
	align-items: center;
	padding: 12px 0px;
	justify-content: space-between;
}

.antet-left {
	display: inline-block;
	vertical-align: middle;
	float: left;
	font-size: 14px;
	color: #fff;
}

.antet-right {
	display: inline-block;
	float: right;
	text-align: right;
	vertical-align: middle;
}

.pac-id {
	color: #ffffff;
	font-weight: bolder;
}

.antet-content {
	max-width: 1200px;
	margin: auto;
}

.bg_white {
	background-color: white !important;
}

.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	margin-bottom: 12px;
}

.top .reset {
	display: none
}
h2.titlu {
	margin: 0px;
	text-align: left
}
.top-right button {
	margin: 0px;
} 
sk-grid.rez-list thead tr th {
	background: #fff !important; 
}
sk-grid.rez-list thead th {
    vertical-align: middle;
}

button[data-name="anuleaza"] {
	margin-top: 20px
}

.rezultate {
	max-height: fit-content;
}

.programari-scrollit {
	overflow-x: auto;
}

.simple-appointments.antet + .app-container .DataRow {
	padding: 0px !important;
} 

.butoane-confirmare {
	margin-bottom: 20px;
}

.simple-appointment.rezultate th:nth-of-type(5), .simple-appointment.rezultate td:nth-of-type(5) {
	min-width: 140px;  
}

.simple-appointments.antet + .app-container .DataRow .top {
	justify-content: left; 
}

/* responsive */
@media all and (min-width: 720px) {
	.teamsBtns .btn { width: 45%; display: inline-block;}
.teamsBtns .btn:last-child { margin-left: .5rem;}
} 

@media all and (max-width : 1360px) {
	.antet {
		padding: 0px;
	}
}

@media all and (max-width : 1200px) {
	body { font-size: 14px;}
	h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75rem;} 
	.form-group { margin-bottom: 0.5rem;}
	.btn-add_del { margin-top: 1.6rem;}
	.skunkSignature { display: none;}
	.app-container, .antet-content { 
		padding-top: 0px;
	}
	.app-container, .antet-content {
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
	}
	.antet-content {
		max-width: 1200px;
		margin: auto;
		padding: 12px;
	}
	.app-container { 
		margin-top: 0px; 
		padding: 12px;
	} 
}
	
@media all and (max-width : 960px) {
	.box-large { min-width: 600px;}
	.errAnouncement { margin-top: 5vh;}
	.btn-logout {
		margin-right: 0px;
	}
}

@media screen and (max-width: 767px) {
	[data-name="filtru"] .col-md-3 {
		width: 50%;
		padding: 0px 4px; 
	}
	[data-name="filtru"] > div .row {
		padding: 0px !important;
		margin: 0px;
	} 
	sk-grid.rez-list thead {
		display: none
	}
	sk-grid.rez-list tbody td {
		font-size: 15px !important;
		padding: 4px 12px;
		font-weight: bold
	}
	sk-grid.rez-list tbody tr {
		display: grid; 
	}
	sk-grid.rez-list tbody td:nth-of-type(1):before {
		content: "Data";
		display: block;
		font-weight: 400
	}
	sk-grid.rez-list tbody td:nth-of-type(2):before {
		content: "Ora start";
		display: block;
		font-weight: 400
	}
	sk-grid.rez-list tbody td:nth-of-type(3):before {
		content: "Ora final";
		display: block;
		font-weight: 400
	}


	sk-grid.rez-list tbody td:nth-of-type(5):before {
		content: "Locatie";
		display: block;
		font-weight: 400
	}
	sk-grid.rez-list tbody td:nth-of-type(6):before {
		content: "Specialitate";
		display: block;
		font-weight: 400
	}
	sk-grid.rez-list tbody td:nth-of-type(7):before {
		content: "Medic";
		display: block;
		font-weight: 400
	}
	sk-grid.rez-list tbody td:nth-of-type(8):before {
		content: "Investigatii";
		display: block;
		font-weight: 400
	}
	.simple-appointments.antet + .app-container .DataRow  {
		padding: 0px !important;
	} 
	.simple-appointments .form-group {
		padding: 0px !important;
		margin: 0px;
		padding-bottom: 8px !important;
	}
	.main-butoane-filtru {
		margin: 10px 0px;
		margin-bottom: 0px;
	}
	.allCriterii { 
		margin-top: 0px !important;
	}
	.rez-list { 
		max-height: 450px;
	}
	.simple-appointment.rezultate .table-responsive {
		overflow-x: hidden;
	}
	.simple-appointment.rezultate {
		height: fit-content !important
	}
	.login-box { 
		width: 100vw;
		height: 100vh;
		margin: 0px;
		border-radius: 0px !important;
	}
}

@media all and (max-width : 640px) {
	body { font-size: 13px;}
	input .form-control { font-size: 0.9rem;}
	input .form-control { font-size: 0.9rem;}
	.login-box {
		width: 100%; 
		margin: 0px;
	}   
	.btn-logout { width: 100%;}
	.swipe-left, .swipe-right { width: 50%;}
	.btn-sm { width: 100%; margin-top: 0.5rem;}
	.btn-spec { width: 2rem;}
	.btn-add_del { margin-top: 1rem;}
	.box-large { min-width: auto;} 
	.antet-right, .antet-left { 
		text-align: left
	}
	.top-right {
		margin: 0px
	}
	.top-left { 
		margin:0px
	}
	.top-right { 
		text-align: right; 
	}
	.app-container button .btn-sm { 
		margin: 0px !important;
	}
	.top-right { 
		margin-bottom: 0px;
	}
	.main-butoane-filtru button {
		width: 100%;
		padding: 12px !important;
		font-size: 15px;
	}
	.simple-appointments.antet + .app-container .login-box {
		box-shadow: none !important;
		padding: 12px;
		height: fit-content;
	} 
	.butoane-confirmare {
		flex-direction: column
	}  
	.butoane-confirmare {
		flex-direction: column;
		gap: 0px;
	}
	.label {
		font-size: 15px;
		margin: 0px;
	}
	.form-group {
		margin: 0px;
	}
}

@media all and (max-width : 575px ) {
	.btn-add_del { margin-top: 0;}
	.btn-spec { margin: 0;}
	.SWindow { 	width: 90%; min-width: 300px; top: 1rem !important;}
	.pac-search { margin: -.5rem 1rem 1rem 1rem; width: 100%;}

}

@media all and (max-width : 480px) {
	.top-right { float: left; width: 100%;} 
	.antet-left { width: 100%;}
	.pac-id { display: block;}
	[data-name="filtru"] .col-md-3 {
		width: 100%;
		padding: 0px 4px;
	}
	button.btn.btn-sm.btn-logout {
		font-size: 0px;
		padding: 12px;
	}
	[data-name="antet"] {
		width: 100% !important;
		min-width: 100% !important;
	}
	.titlu {
		font-size: 1.5em;
		line-height: 2.5em;
	}
	[data-name="antet"] > div > div span {
		width: fit-content !important;
		display: contents;
	}
	[data-name="antet"] > div > div {
		width: auto !important;
		min-width: auto !important;
	}
}

body {
	font-family: Arial, sans-serif;
	background: #eaf2fd;
}

.container {
	max-width: 1200px;
	margin: auto;
	padding: 20px;
	background: white;
	border-radius: 8px;
}

.header {
	text-align: center;
	color: #0d6efd;
	font-size: 24px;
	margin-bottom: 20px;
}

.filters {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.appointments {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


.k-button {
	margin: 5px 2px;
}

.date-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

#prevDayBtn, #nextDayBtn {
	margin: 0 10px;
}

.filters {
	text-align: center;
	margin-bottom: 20px;
}

	.filters input {
		margin: 0 10px;
	}

.selected-date {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

#changeDateBtn {
	border-radius: 20px;
	padding: 8px 15px;
	background-color: #007bff;
	color: white;
	border: none;
	cursor: pointer;
	position: relative; /* Ensures the popup positions correctly relative to the button */
}

	#changeDateBtn:hover {
		background-color: #0056b3;
	}

#hiddenDatePicker {
	visibility: hidden; /* Hide the input */
	position: absolute; /* Avoid taking up space */
	z-index: -1; /* Ensure it's not affecting layout */
}