<!-- Style -->
<style>
:root {
	/* SPACING */
	--xxs-spacing: 8px;
	--xs-spacing: 16px;
	--s-spacing: 24px;
	--m-spacing: 32px;
	--l-spacing: 40px;
	--xl-spacing: 48px;
	--xxl-spacing: 56px;
	--xxxl-spacing: 64px;

	/* COLORS */
	--primary-bg-color: #092351;
	--primary-patients-color: #9fd98f;
	--primary-patients-color-20: #1cc96d33;
	--primary-doctors-color: #0a43bf;
	--primary-doctors-color-20: #0a43bf33;
	--off-white: #fafbfd;
	--dark-blue: #092351;
	--dark-green: #0b2932;
	--dark-green-50:rgba(11, 41, 50, 0.5);
	--busy-red: #CA0001;
	--notice-color: #3db7e0;
	--warning-color: #fcc63d;
	--error-color: #f5422f;
	--succes-color: #1cc96d;
	--black-color: #000;
	--white-color: #fff;
	--grey-color: #7d7d7d;

	/* FONT WEIGHTS */
	--ft-weight-extraLight: 200;
	--ft-weight-regular: 400;
	--ft-weight-medium: 500;
}

/* GENERAL STYLE */

* {
	padding: 0;
	margin: 0;
	/* box-sizing: border-box; */
	font-family: "Readex Pro", sans-serif;
	font-weight: var(--ft-weight-regular);
}

body {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: var(--primary-doctors-color);
}
.onboardrow a:hover, .main-box a:hover {
	color: var(--primary-patients-color);
}

::placeholder {
	color: var(--white-color);
}

.hide {
	display: none;
}

table td, table th {
	padding-block: var(--xxs-spacing);
	padding-right: var(--xs-spacing);
}

.main-box table {
	color: var(--white-color);
}

.medical-file-box table th:not(:first-child, :last-child), .medical-file-box table td:not(:first-child, :last-child) {
	min-width: 100px;
}

.login-box,
.onboard-box,
.dash-box,
.doctor-box,
.message-box,
.main-box {
	margin: var(--l-spacing) var(--xs-spacing);
	margin-top: var(--m-spacing);
	padding: var(--m-spacing);
	background: var(--primary-bg-color);
	border-radius: 24px;
	color: var(--white-color);
	overflow-x: auto;
}

.loginsubmit,
.onboardsubmit,
.booksubmit {
	background: var(--white-color);
	border: 0;
	border-radius: 24px;
	color: var(--primary-doctors-color);
	padding-inline: var(--s-spacing);
	height: 36px;
	cursor: pointer;
	transition: 0.3s;
}

.loginsubmit:hover,
.onboardsubmit:hover,
.booksubmit:hover {
	background-color: var(--primary-doctors-color);
	color: var(--white-color);
}

.doctor_program_delete {
	background: var(--error-color);
	border: 0;
	border-radius: 24px;
	color: #fff;
	padding-inline: var(--s-spacing);
	height: 36px;
	cursor: pointer;
	transition: 0.3s;
}

.doctor_program_delete:hover {
	background: var(--busy-red);
}

.tertiary-button {
	display: flex;
	align-items: center;
	background-color: var(--dark-blue);
	color: #fff;
	padding: var(--xs-spacing) var(--s-spacing);
	border-radius: 50px;
	cursor: pointer;
	transition: 0.3s;
}

.tertiary-button:hover {
	background-color: var(--dark-green);
}

.tertiary-button img {
	margin-right: var(--xs-spacing);
}

.outline-button {
	background: var(--white-color);
	border: 1px solid var(--primary-doctors-color);
	border-radius: 24px;
	color: var(--primary-doctors-color);
	padding-inline: var(--s-spacing);
	height: 36px;
	cursor: pointer;
	transition: 0.3s;
	margin-block: var(--s-spacing);
}

.outline-button:hover {
	background: var(--primary-doctors-color);
	color: var(--white-color);
}

.outline-button-white {
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 24px;
	color: #fff;
	padding: var(--xs-spacing) var(--s-spacing);
	cursor: pointer;
	transition: 0.3s;
	margin-block: var(--s-spacing);
}
.outline-button-white:hover {
	color: var(--primary-doctors-color);
	background-color: #fff;
}


::file-selector-button {
	font-family: "Readex Pro", sans-serif;
	background: var(--white-color);
	border: 1px solid var(--primary-doctors-color);
	border-radius: 24px;
	color: var(--primary-doctors-color);
	padding-inline: var(--s-spacing);
	height: 36px;
	cursor: pointer;
	transition: 0.3s;
	margin-right: var(--xs-spacing);
}

::file-selector-button:hover {
	background: var(--primary-doctors-color);
	color: var(--white-color);
}

.greenmessage {
	background: #efe;
	color: #090;
	padding: 20px;
	margin-block: 15px;
	border-radius: 8px;
}
.redmessage {
	background: #fee;
	color: #900;
	padding: 20px;
	margin-block: 15px;
	border-radius: 8px;
}

.middlebar .howcanwehelp {
	margin-top: 10px;
}

.howcanwehelp {
	padding: 10px;
}

.search-bar-wrapper .search-icon {
	width: 24px;
}

.howcanwehelp input::placeholder {
	color: var(--black-color);
	opacity: 50%;
}

.search-bar-wrapper {
	display: flex;
	align-items: center;
	background: #0a43bf13;
	border-radius: 30px;
	margin-inline: auto;
	padding-block: var(--xs-spacing);
	padding-inline: var(--m-spacing);
	width: 300px;
}

.howcanwehelpfield {
	border: 0;
	background: transparent;
	padding-inline: var(--xs-spacing);

}
.pagetitle {
	text-align: left;
	font-size: clamp(1.875rem, 1.674rem + 0.917vw, 2.5rem);
	margin-bottom: var(--xl-spacing);
}

.sectiontitle {
	text-align: left;
	font-size: clamp(1.25rem, 1.17rem + 0.367vw, 1.5rem);
	margin-bottom: var(--l-spacing);
}

.sectiontitle2 {
	font-size: clamp(1.25rem, 1.17rem + 0.367vw, 1.5rem);
	margin-block: var(--xs-spacing) var(--m-spacing);
}

.input-text-field {
	color: #fff;
	border: 0;
	border-bottom: solid 1px #fff;
	background: inherit;
	padding-block: var(--xxs-spacing);
	text-align: center;
	font-size: 1rem;
}


.select-field, .select-program-field {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #fff;
	color: #fff;
	margin-block: var(--m-spacing);
	padding-block: var(--xs-spacing);
}
.select-field {
	width: 100%;
    max-width: 608px;
}
.select-program-field {
	padding-inline: var(--xxs-spacing);
}
.select-field:focus, .input-text-field:focus, .select-program-field:focus {
	outline: none;
}

.select-field option, .select-program-field option {
	background: var(--dark-blue);
}

textarea:focus {
	outline: none;
}

.patientbadge {
	padding: 10px;
}
.notifications {
	padding: 10px;
}
.leftside {
	float: left;
}
.rightside {
	float: right;
}

.disclaimer-white {
	font-size: 14px;
	color: var(--white-color);
	text-align: left;
	margin-bottom: var(--s-spacing);
}

@media (max-width: 1200px) {
	.hide-large-devices {
		display: none;
	}
}

@media (max-width: 720px) {
	.hide-medium-devices {
		display: none;
	}

	.topheader {
		display: none;
	}
}

.navbar-small-devices {
	display: none;
}

/* RIGHT MENU */

.rightmenu-wrapper {
	float: right;
	padding-inline: var(--xs-spacing);
}

.rightmenu {
	margin-top: var(--xs-spacing);
}

.accountname {
	padding: 0 10px;
	display: flex;
	align-items: center;
}

.profile-photo {
	width: 45px;
	border-radius: 50px;
}

.assistance-button,
.instructions-button {
	display: flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
}

.assistance-button {
	margin-bottom: var(--s-spacing);
}

.rightmenu-icon-login {
	width: 40px;
	margin-right: var(--xs-spacing);
}

.rightmenu-button {
	display: flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	height: 24px;
	margin-bottom: var(--s-spacing);
	margin-right: var(--xs-spacing);
}

.rightmenu-icon {
	height: 24px;
	margin-right: var(--xs-spacing);
}

.icon-text {
	font-size: 16px;
}

.righttitle {
	font-size: 20px;
	padding-bottom: 30px;
	text-align: center;
}

/* END OF RIGHT MENU */

/* GENERAL LAYOUT */

.layout-container {
	display: flex;
	flex: 1;
}

.leftbar-logo {
	padding-inline: var(--s-spacing);
	padding-top: var(--s-spacing);
	padding-bottom: var(--m-spacing);
	width: 180px;
}

.leftbar {
	position: sticky;
	top: 0;
	height: 600px;
	width: 12%;
	margin-right: var(--xs-spacing);
}
.middlebar {
	float: left;
	/* width: 60%; */
	width: 73%;
	text-align: center;
}
.rightbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* width: 18%; */
	width: 15%;
	height: 90%;
	padding-top: 20;
}

.notifybar {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 12%;
	height: 90%;
	padding-top: 20;
}

.notificationslist {
	padding: 0 20px;
}

/* END OF GENERAL LAYOUT */

/* LEFT MENU */

.leftmenu {
	margin-top: var(--xs-spacing);
	padding-left: var(--s-spacing);
}

.leftmenulink {
	margin-bottom: var(--l-spacing);
}

.leftmenulink input,
.notifications img {
	height: 24px;
}

.menu-line {
	height: 1px;
	/* margin-right: var(--xs-spacing); */
	background-color: var(--dark-green);
	margin-bottom: var(--l-spacing);
}

/* END OF LEFT MENU */


/* NAVBAR SMALL DEVICES */

@media (max-width: 999px) {
	.navbar-small-devices {
		z-index: 10;
		background-color: #fff;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		padding-inline: var(--s-spacing);
		position: sticky;
		top: 0;
	}

	.middle-navbar-wrapper .search-bar-wrapper {
		width: 190px;
		padding-inline: var(--s-spacing);
		padding-block: var(--xxs-spacing);

	}
}

.left-navbar-wrapper,
.right-navbar-wrapper {
	width: 64px;
	display: flex;
	justify-content: center;
}

.dropdown-menu-small-devices {
	position: absolute;
	top: 64px;
	right: 10px;
	background-color: var(--dark-blue);
	padding: var(--s-spacing);
	border-radius: 10px;
	z-index: 10;
	background-color: var(--white-color);
	-webkit-box-shadow: 0px 0px 40px -19px rgba(9, 35, 81, 1);
	-moz-box-shadow: 0px 0px 40px -19px rgba(9, 35, 81, 1);
	box-shadow: 0px 0px 40px -19px rgba(9, 35, 81, 1);
}

.dropdown-menu-small-devices .leftmenulink,
.dropdown-menu-small-devices .menu-line {
	margin-bottom: var(--xs-spacing);
}

.middle-navbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.middle-navbar-wrapper .howcanwehelpfield {
	width: auto;
}

.logo-leftground,
.burger-menu-icon {
	height: 28px;
	margin-inline: auto;
}

.burger-menu {
	background: none;
	border: none;
}

/* END OF NAVBAR SMALL DEVICES */

/* LOGIN / ONBOARD */

.leftground {
	float: left;
	width: 15%;
	height: 100%;
	/*background:url("i/leftbackground.png");
background-repeat:no-repeat;
background-position:left;*/
}
.middleground {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70%;
	text-align: center;
}
.rightground {
	float: left;
	width: 14%;
	height: 100%;
	/*background:url("i/rightbackground.png");
background-repeat:no-repeat;
background-position:right;*/
}

.logo-middleground {
	width: 250px;
	text-align: center;
}
.topheader {
	height: 96px;
}

.login-wrapper,
.onboard-wrapper {
	width: 100%;
	max-width: 800px;
}

.login-patienticon-wrapper {
	padding-bottom: 80px;
}

.onboard-patienticon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--xs-spacing);
}

.pacient-icon-login {
	height: 54px;
	margin-bottom: var(--xs-spacing);
	margin-top: var(--xs-spacing);
}

.pacient-icon-onboard {
	height: 72px;
}

.pacient-login-title {
	color: var(--white-color);
	font-size: 40px;
}

.pacient-onboard-title {
	margin-left: var(--xl-spacing);
	color: var(--white-color);
	font-size: 32px;
}

.loginrow,
.onboardrow {
	position: relative;
	padding-block: var(--s-spacing);
	color: #fff;
}

.onboardrow:has(input[type="checkbox"]), .checkbox-row {
	padding-block: var(--xxs-spacing);
	text-align: left;
}


.loginfield,
.onboardfield {
	color: #fff;
	border: 0;
	border-radius: 0 !important;
	border-bottom: solid 1px #fff;
	background: inherit;
	padding-block: var(--xs-spacing);
	width: 100%;
	max-width: 608px;
	text-align: center;
	font-size: 1rem;
}

.loginfield:focus,
.onboardfield:focus,
.howcanwehelpfield:focus {
	outline: none;
}

.send-code-btn {
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
}

.send-code-btn input {
	cursor: pointer;
}

.logincodesubmit {
	background: none;
	border: 0;
	color: #fff;
}

/* END OF LOGIN / ONBOARD */


/* MY ACCOUNT PAGE */

.myaccount-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.myaccount-form-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--s-spacing);
	margin-bottom: var(--xl-spacing);
}

.myaccount-form-field .onboardfield {
	width: 100% !important;
	max-width: 100%;
	text-align: left;
}

.myaccount-form-field .onboarsubmit {
	margin-block: 10px;
}

.myaccount-form-submit {
	margin-bottom: var(--s-spacing);
	text-align: left;
}

/* END OF MY ACCOUNT PAGE */

/* DOCTORS PAGE */

.doctors-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.doctors-list-row {
	/* width: 100%; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--l-spacing);
	padding: var(--xxs-spacing);
}

.doctors-list-row-not-validated {
	background:#600;
	border-radius: 8px;
}

.doctors-list-info-wrapper {
	display: flex;
	align-items: center;
	width: 35%;
	padding-right: var(--s-spacing);
}

.doctor-list-photo {
	height: 60px;
}

.doctor-list-photo img {
	height: 60px;
	border-radius: 30px;
	margin-right: var(--xs-spacing);
}

.doctors-list-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--xxs-spacing);
	height: 76px;
	text-align: left;
}

.doctors-list-info p:last-child {
	font-weight: 300;
}

.doctors-list-documents-visible-cmr {
    display:block ;
}
.doctors-list-documents-invisible-cmr {
    display:none !important;
}

.doctors-list-documents-visible-malpraxis {
    display:block;
}
.doctors-list-documents-invisible-malpraxis {
    display:none !important;
}

.doctors-list-documents-visible-id {
    display:block;
}
.doctors-list-documents-invisible-id {
    display:none !important;
}

.doctors-row-middle {
	display: flex;
	align-items: center;
	gap: var(--xs-spacing);
	width: 55%;
	padding-right: var(--xs-spacing);
}

.doctors-list-occupation-rate {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
}

.doctors-list-score-wrapper {
	width: 50%;
	text-align: left;
	padding-right: var(--xs-spacing);
}

.doctors-list-score-wrapper img {
	margin-top: var(--xxs-spacing);
}

.occupation-rate-bar {
	width: 80%;
	height: 6px;
	background-color: var(--primary-patients-color-20);
	text-align: left;
	border-radius: 8px;
	margin-top: var(--xxs-spacing);
}

.occupation-rate-bar-progress {
	height: 6px;
	border-radius: 8px;
	background: var(--primary-patients-color);
}

.filterline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-spacing);
}

.filterline .rightside {
	display: flex;
	gap: var(--m-spacing);
}

.filterline .filter-button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	color: #fff;
	font-size: 16px;
}

/* END OF DOCTORS PAGE */

/* DOCTORS SETTINGS */
.boxes-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.boxes-row form {
	flex: 1;
	display: flex;
}

.boxes-row .dash-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
}

.program-select-wrapper {
	display: flex;
	justify-content: center;
}

/* END OF DOCTORS SEETTINGS */

/* MESSAGES PAGE */

.messages-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.message-list-row {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: var(--l-spacing);
	border-bottom: 1px solid #ffffff50;
	padding-bottom: var(--xs-spacing);
}

.message-doctor-col {
	width: 20%;
	text-align: left;
}

.message-date-col {
	width: 20%;
	text-align: left;
}

.message-hour-col {
	width: 10%;
	text-align: left;
}

.message-body-col {
	width: 50%;
}

/* END OF MESSAGES PAGE */

/* CONVERSATION */

.conversation-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.title-message-conversation {
	font-size: 24px;
	text-align: left;
}

.subtitle-message-conversation {
	font-size: 18px;
	text-align: left;
	color: #999;
}

.message-interlocutor {
	font-size: 14px;
	color: #999;
	text-align: left;
}

.message-content {
	font-size: 18px;
	color: #fff;
	text-align: left;
}

.messagefield {
	color: #fff;
	border: 0;
	border-bottom: solid 1px #fff;
	background: inherit;
	padding: var(--xs-spacing);
	width: 100%;
	text-align: left;
	font-size: 1rem;
	margin-block: var(--s-spacing);
}

.messagefield:focus {
	outline: none;
}

/*END OF CONVERSATION */

/* APPOINTMENTS PAGE */

.appointments-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.appointments-patient-header {
	display: flex;
	padding-inline: var(--xs-spacing);
	margin-bottom: var(--xxl-spacing);
}

.appointments-past-tittle-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: var(--m-spacing);
	position: relative;
	margin-inline: var(--xs-spacing);
}

.appointments-past-title {
	padding-inline: var(--xxs-spacing);
	color: #00000085;
	position: absolute;
	left: 30px;
	background-color: var(--white-color);
}

.dashed-line {
	width: 100%;
	border-bottom: dashed 2px #a2c0d4;
}

.appointment-box {
	border-radius: 24px;
	margin-bottom: var(--m-spacing);
	margin-inline: var(--xs-spacing);
	padding: var(--xs-spacing);
}
.appointment-color-green {
	background: #1cc96db3;
}
.appointment-color-red {
	background: #f5432fb3;
}
.appointment-color-yellow {
	background: #fcc63db3;
}
.appointment-color-grey {
	color: #fff;
	background: var(--dark-green);
	opacity: 70%;
}
.appointment-date {
	text-align: left;
	font-size: 16px;
	color: var(--dark-green);
	opacity: 70%;
}
.appointment-doctor {
	text-align: left;
	font-size: 24px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.appointment-table {
	display: table;
	width: 100%;
}
.appointment-row {
	display: table-row;
}
.appointment-label {
	display: table-cell;
	width: 200px;
	text-align: left;
	padding-bottom: var(--s-spacing);
	padding-right: var(--s-spacing);
}
.appointment-info {
	display: table-cell;
	z-index: 1;
	text-align: left;
	color: var(--dark-green);
	opacity: 50%;
	/* font-weight: 300; */
	padding-bottom: var(--s-spacing);
}

.appointment-row:nth-last-child(2) .appointment-info {
	opacity: 100%;
}
.appointment-info-grey {
	display: table-cell;
	z-index: 1;
	text-align: left;
	font-weight: 300;
	color: var(--white-color);
	padding-bottom: var(--s-spacing);
}

.appointment-row:not(:last-child) .appointment-info-grey {
	opacity: 50%;
}

.appointment-color-grey .appointment-date {
	color: var(--white-color);
	opacity: 70%;
}

.appointments-tudor-table-header {
    background: #CCC;
    padding: 2px;
    margin: 1px;
}

/* END OF APPOINTMENTS PAGE */

/* CONSULTATION WINDOW */

.consultation-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

.consultation-buttons-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--s-spacing);
	margin-block: var(--s-spacing) var(--xs-spacing);
}

/* END OF CONSULTATION WINDNOW */

/* PAYMENT HISTORY PACIENT */

.payment-history-pacient-title {
	margin-top: var(--s-spacing);
	margin-inline: var(--xs-spacing);
}

/* END OF PAYMENT HISTORY PACIENT */



/* CALENDAR PAGE */

.calendar-box {
	padding: var(--xs-spacing);
}

.calendar-box .pagetitle {
	margin-top: var(--xxs-spacing);
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--l-spacing);
	text-align: right;
	width: 100%;
}
.calendar-header-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	text-align: left;
	padding-right: 30px;
}

.calendar-header-left input[type="image"] {
	height: 48px;
}

.calendar-header-doctor-wrapper {
	display: flex;
	align-items: center;
	padding-right: var(--s-spacing);
	padding-block: 20px;
}

.calendar-header-doctor-photo {
	height: 50px;
}

.calendar-header-doctor-photo img {
	height: 50px;
	border-radius: 30px;
	margin-right: var(--xs-spacing);
}

.calendar-header-buttons-wrapper {
	display: flex;
	align-items: center;
	gap: var(--l-spacing);
}



.calendar-header-right {
	display: flex;
	align-items: center;
	font-size: 16px;
	min-width: 280px;
}

.current-month {
	padding-inline: var(--xxs-spacing);
	color: var(--primary-doctors-color);
}

.calendar-month-nav-wrapper {
	display: flex;
	align-items: center;
}

.calendar-month-nav {
	background: inherit;
	border: 0;
	font-size: 16px;
	color: var(--primary-doctors-color);
	cursor: pointer;
}

.current-month-nav .calendar-month-nav {
	margin-left: var(--m-spacing);
	color: var(--black-color);
	opacity: 50%;
}

.calendar-table-container {
	width: 100%;
	position: relative;
}

.calendar-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: var(--s-spacing);
}
.calendar-weekdays {
	background: var(--primary-doctors-color-20);
}

.calendar-weekdays-patients,
.calendar-date-bar-patients {
	background: var(--primary-patients-color-20);
}

.calendar-days-background {
	background-color: var(--off-white);
	border-radius: 24px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 84px;
	z-index: -1;
}

.calendar-weekday-cell:first-child {
	border-radius: 50px 0px 0px 50px;
}

.calendar-weekday-cell:last-child {
	border-radius: 0px 50px 50px 0px;
}

.calendar-weekday-cell {
	width: calc(100% / 7);
	text-align: center;
	padding: 20px;
}
.calendar-day-cell {
	width: calc(100% / 7);
	padding: var(--xs-spacing) var(--s-spacing);
	text-align: left;
	font-size: 20px;
}

.calendar-date-bar {
	width: 100%;
	height: 8px;
	background: var(--primary-doctors-color-20);
	border-radius: 8px;
	margin-top: var(--xs-spacing);
}


.calendar-over-one {
	position: relative;
	width:100%;
	height:8px;
	/* border:solid 1px var(--primary-doctors-color-20); */
	background: var(--primary-doctors-color-20);
	border-radius:8px;
}

.calendar-patients .calendar-over-one {
	background: var(--primary-patients-color);
}

.calendar-over-two {
	position: absolute;
	height: 8px;
	top: 0;
	background: #0AD0F1;
	border-radius: 8px;
}

.calendar-over-three {
	position: absolute;
	width:8px;
	height:8px;
	top:0;
	background:var(--busy-red);
	border-radius:8px;
}

.calendar-over-four {
	position: absolute;
	width:100%;
	height:8px;
	/* border:solid 1px var(--primary-doctors-color-20); */
	background: var(--primary-doctors-color-20);
	border-radius:8px;
}

.calendar-over-five {
	position: absolute;
	height:8px;
	margin-top:0;
	background:var(--primary-doctors-color-20);
	border-radius:8px;
}

.calendar-over-six {
	position: absolute;
	width:8px;
	height:8px;
	top:0;
	background: var(--busy-red);
	border-radius:8px;
}

.calendar-footer-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-spacing);
	margin-top: var(--xl-spacing);
}

.legend-wrapper {
	display: flex;
	align-items: center;
}

.legend-circle-available-doctors, .legend-circle-busy, .legend-circle-unavailable, .legend-circle-available-patients {
	width: 12px;
	height: 12px;
	border-radius: 20px;
	margin-right: var(--xxs-spacing);
} 

.legend-circle-available-doctors {
	background-color: var(--primary-doctors-color-20);
}
.legend-circle-available-patients {
	background-color: var(--primary-patients-color-20);
}
.legend-circle-appointment {
	background-color: var(--succes-color);
}
.legend-circle-busy {
	background-color: var(--busy-red);
}
.legend-circle-unavailable {
	background-color: var(--grey-color);
}

/* END OF CALENDAR PAGE */


/* BOOKING PAGE */

.booking-shroud {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
}

.booking-window {
	background: var(--white-color);
	border-radius: 24px;
	width: 55%;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	padding: var(--xs-spacing) var(--l-spacing);
	overflow-y: auto;
}

.booking-summary-title {
	font-size: 28px;
	padding-bottom: 20px;
}
.booking-table {
	display: table;
	width: 100%;
	margin-top: 20px;
}
.booking-row {
	display: table-row;
	text-align: left;
}
.booking-label {
	width: 200px;
	display: table-cell;
	vertical-align: top;
	padding-bottom: 20px;
}
.booking-field {
	display: table-cell;
	vertical-align: top;
	padding-bottom: 20px;
}
.hours-field {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	row-gap: 10px;
}
.booking-day {
	color: var(--primary-doctors-color);
	font-weight: medium;
}
.booking-day-confirm {
	color: var(--succes-color);
	font-weight: medium;
}
.booking-hour {
	color: var(--primary-doctors-color);
	font-weight: medium;
}
.booking-hour-confirm {
	color: var(--succes-color);
	font-weight: medium;
}
.booking-hour-label {
	display: table-cell;
	width: 100px;
	cursor: pointer;
}
.booking-hour-radio {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
}
input:checked ~ .booking-hour-span {
	color: var(--primary-doctors-color);
}
.booking-reason, .booking-reason-confirm {
	font-family: "Readex Pro", sans-serif;
	font-size: 14px;
	border: 0;
	width: 100%;
	padding: 10px;
}

.booking-reason {
	border-bottom: solid 2px var(--primary-doctors-color);
}

.booking-reason-confirm {
	border-bottom: solid 2px var(--succes-color);
}
.booking-note {
	font-size: 14px;
}
.booking-centered {
	padding-bottom: var(--xxs-spacing);
}
.booking-footer-note-wrapper {
	margin-block: var(--xs-spacing);
}
.booking-price {
	color: var(--primary-doctors-color);
	font-weight: medium;
}
.booking-price-confirm {
	color: var(--succes-color);
	font-weight: medium;
}
.booking-fineprint {
	color: var(--primary-doctors-color);
	font-size: 12px;
	padding: 0 0 30 0px;
	display: flex;
	align-items: center;
}

.booking-fineprint label {
	margin-left: var(--xxs-spacing);
}
.booking-file-upload input {
	margin-bottom: var(--xs-spacing);
}
.booking-submit, .booking-submit-confirm {
	font-family: "Readex Pro", sans-serif;
	color: #fff;
	padding-inline: var(--xl-spacing);
    height: 36px;
    cursor: pointer;
    transition: 0.3s;
	border: 0;
	border-radius: 24px;
}
.booking-submit {
	background: var(--primary-doctors-color);
}
.booking-submit:hover {
    background: var(--dark-blue);
}
.booking-submit-confirm {
	background: var(--succes-color);
}
.booking-submit-confirm:hover {
	background: var(--dark-green);
}

/* END OF BOOKING PAGE */


/* ADMIN DOCTORS PAGE */

.admin-doctors-list-row {
	/* width: 100%; */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--l-spacing);
	padding: var(--xxs-spacing);
}

.admin-doctors-list-row-not-validated {
	background:#600;
	border-radius: 8px;
}

.admin-doctors-row-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 40%;
	margin-right: var(--s-spacing);
}

.admin-doctors-row-middle {
	display: flex;
    align-items: center;
	justify-content: space-between;
    gap: var(--xs-spacing);
    /* width: 40%; */
    /* padding-inline: var(--xs-spacing); */
}

.admin-doctors-row-left .doctors-list-info-wrapper {
	width: 60%;
}

.doctors-list-buttons-wrapper{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/* width: 30%; */
}

.doctors-list-score-ocupation-wrapper {
	margin-right: var(--xs-spacing);
}

.doctors-list-buttons,
.doctors-list-documents {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block: var(--xxs-spacing);
}
.doctors-list-buttons p,
.doctors-list-documents p {
	margin-right: var(--xxs-spacing);
}
.doctors-list-buttons img,
.doctors-list-documents img {
	width: 24px;
}


.admin-doctors-row-middle .doctors-list-score-wrapper,
.admin-doctors-row-middle .doctors-list-occupation-rate {
	margin-block: var(--xxs-spacing);
}

.doctors-list-score-ocupation-wrappe {
	margin-right: var(--xs-spacing);
}

.doctors-list-documents-wrapper {
	display: flex;
	align-items: center;
}

.doctors-list-documents-wrapper .doctors-list-documents {
	margin-right: var(--xs-spacing);
}

.doctors-list-book-btn {
	margin-block: var(--xs-spacing);
}

@media (max-width: 1470px) {
	.admin-doctors-row-left {
		width: 100%;
		margin-right: 0;
	}
	.admin-doctors-row-middle {
		width: 70%;
	}
	.doctors-list-buttons-wrapper {
		flex-direction: row;
		width: 50%;
		justify-content: flex-end;
	}

	.doctors-list-buttons {
		margin-inline: var(--xs-spacing);
	}

	.admin-doctors-row-left .doctors-list-info-wrapper {
	width: 40%;
	padding-right: 0;
	}

	.doctors-list-documents-wrapper {
		flex-wrap: wrap;
	}
}

@media (max-width: 1470px) {
	.admin-doctors-list-row {
		flex-direction: column;
		align-content: center;
	}
	.admin-doctors-row-middle {
		width: 100%;
	}
}

/* END OF ADMIN DOCTORS PAGE */


/* FOOTER */

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: var(--s-spacing);
	margin-top: var(--xxl-spacing);
}
.footer_row {
	display: flex;
	justify-content: space-between;
	gap: var(--xl-spacing);
	max-width: 1100px;
	width: 100%;
}

.footer_logo_container {
	max-width: 300px;
	width: 40%;
}
.servicestatus {
	display: flex;
	align-items: center;
	gap: 80px;
	padding-bottom: var(--l-spacing);

}
.sitelink {
	color: var(--primary-doctors-color);
	font-size: 16px;
	text-decoration: none;
}
.footer_links_container {
	display: flex;
	justify-content: flex-end;
	gap: var(--xxxl-spacing);
	width: 60%;
	margin-bottom: var(--l-spacing);
}
.links_title {
	font-weight: bold;
	font-size: 14px;
	opacity: 0.7;
	margin-bottom: var(--xs-spacing);
}
.links_col {
	margin-bottom: var(--s-spacing);
}
.footer_links_wrapper {
	display: flex;
	gap: var(--xxs-spacing);
	flex-direction: column;
}
.footer_link {
	color: var(--grey-color);
	font-size: 14px;
	text-decoration: none;
	transition: all .3s;
}
.footer_link:hover {
	color: var(--primary-doctors-color)
}
.legalnotice {
	font-size: 12px;
	color: var(--grey-color);
	/* font-weight: 100; */
	max-width: 850px;
	text-align: center;
	margin-bottom: var(--s-spacing);
}

/* END OF FOOTER */

/* MEDIA QUERRIES  */

@media (max-width: 1300px) {
	.notifybar {
		display: none;
	}
	.leftbar {
		width: 15%;
	}

	.doctors-row-middle {
		flex-direction: column;
		align-items: flex-start;
	}

	.calendar-header {
		flex-direction: column;
		gap: var(--m-spacing);
	}

	.calendar-header-left {
		flex-direction: column;
		gap: var(--m-spacing);
		justify-content: center;
		padding-right: 0px;
	}

	.calendar-header-doctor-wrapper {
		padding-block: 0px;
	}

	.booking-window {
		max-height: 70vh;
	}
}

@media (max-width: 999px) {
	/* LOGIN / ONBOARD */
	.send-code-btn {
		top: 90px;
		right: 50%;
		transform: translateX(50%);
	}

	.user-loginfield {
		margin-bottom: var(--m-spacing);
	}

	.onboard-patienticon-wrapper {
		flex-direction: column;
	}

	.pacient-onboard-title {
		margin-left: 0px;
		font-size: 24px;
		margin-top: var(--xs-spacing);
	}
	/* END OF LOGIN / ONBOARD */

	.rightbar, .leftbar   {
		display: none;
	}

	.middlebar {
		width: 100%;
	}

	.middlebar .howcanwehelp {
		display: none;
	}

	.calendar-header,
	.calendar-header-right {
		flex-direction: column;
	}

	.calendar-table:first-child {
		margin-bottom: 0;
	}

	.calendar-weekdays {
		display: none;
	}

	.calendar-day-cell {
		font-size: 16px;
		text-align: center;
		/* padding: var(--xxs-spacing); */
	}

	.calendar-date-bar {
		width: 60%;
		margin-inline: auto;
		height: 3px;
		margin-top: 4px;
	}

	.calendar-box .pagetitle {
		text-align: center;
	}

	.calendar-header-right {
		width: 100%;
	}

	.current-month-nav .calendar-month-nav {
		margin-left: 0;
	}

	.calendar-month-nav-wrapper {
		width: 80%;
		justify-content: space-between;
		order: 1;
		background-color: var(--primary-doctors-color-20);
		padding: var(--xs-spacing) var(--xl-spacing);
		/* margin-inline: var(--xs-spacing); */
		border-radius: 40px;
	}

	.current-month-nav {
		order: 0;
		margin-bottom: var(--s-spacing);
	}

	.calendar-days-background {
		top: 0;
	}

	.boxes-row {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	/* LOGIN / ONBOARD */
	.leftground,
	.rightground {
		display: none;
	}

	.checkbox-row input[type="checkbox"] {
	vertical-align: middle;
}

	.middleground {
		width: 100%;
	}

	.login-box,
	.onboard-box,
	.dash-box,
	.doctor-box,
	.message-box {
		margin-block: var(--xs-spacing);
		/* margin-bottom: var(--xxl-spacing); */
		padding-inline: var(--xs-spacing);
	}
	/* .loginfield,
	.onboardfield,
	.select-field {
		width: 90%;
	} */

	.loginrow:last-child {
		width: 100%;
	}
	/* END OF LOGIN / ONBOARD */

	/* .myaccount-form-field .onboardfield {
		width: 100%;
	} */

	

	.rightmenu-icon-login {
		width: 28px;
	}

	.doctors-list-row,
	.message-list-row {
		flex-direction: column;
		justify-content: center;
		gap: var(--xs-spacing);
	}

	.doctors-list-info-wrapper,
	.doctors-list-occupation-rate {
		justify-content: center;
		align-items: center;
	}

	.doctors-list-info-wrapper,
	.doctors-list-score-wrapper,
	.doctors-list-occupation-rate,
	.doctors-row-middle {
		width: 100%;
	}

	.doctors-row-middle {
		padding-right: 0;
	}

	.doctors-list-score-wrapper,
	.doctors-list-occupation-rate,
	.occupation-rate-bar {
		text-align: center;
	}

	.message-doctor-col,
	.message-body-col,
	.message-hour-col,
	.message-date-col {
		width: 100%;
		text-align: center;
	}

	.calendar-footer-legend {
		justify-content: center;
	}

	.booking-window {
		width: 80%;
		max-height: 65vh;
		top: 15vh;
		transform: translateX(-50%);
		scroll-behavior: auto;
	}

	.booking-window .calendar-header-doctor-wrapper {
		margin-bottom: 20px;
		justify-content: center;
	}

	.booking-label {
		padding-bottom: var(--xxs-spacing);
	}

	/* FOOTER */

	.footer_row {
		flex-direction: column;
	}
	.footer_logo_container {
		width: 100%;
	}
	.footer_links_container {
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		gap: 0;
	}
	.links_col {
		width: 100%;
	}
	/* END OF FOOTER */
}

@media (max-width: 550px) {
	.middle-navbar-wrapper .notifications {
		display: none;
	}

	.calendar-header-buttons-wrapper {
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 468px) {
	.input-text-field {
		width: 100px;
	}

	/* .loginfield,
	.onboardfield,
	.select-field {
		width: 95%;
	} */

	.appointment-label,
	.appointment-info-grey {
		width: 50%;
	}

	.filterline {
		flex-direction: column;
		justify-content: center;
	}

	.filterline .leftside {
		margin-bottom: var(--s-spacing);
	}

	.calendar-table-container input[type="image"] {
		height: 45px;
	}

	.calendar-day-cell {
		padding: var(--xxs-spacing);
	}

	.booking-window {
		width: 75%;
		max-height: 70vh;
		padding: var(--s-spacing);
	}

	.booking-table {
		display: block;
	}

	.booking-row {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.booking-row:not(:nth-child(2), :last-child) {
		align-items: center;
	}

	.booking-row:nth-child(4) .booking-field {
		width: 100%;
	}

	.booking-hours-title {
		text-align: center;
		font-size: 24px;
		margin-bottom: var(--xs-spacing);
	}

	.booking-label {
		width: auto;
	}

	.booking-field {
		width: 100%;
	}

	.booking-reason {
		width: 100%;
	}
}
</style>
<!-- -->