.profile-sidebar {
    background-color: $white;
	border: 1px solid $border-color;
	box-shadow: $box-shadow;
	margin-bottom: 24px;
	overflow: hidden;
}
.pro-widget-content {
    border-bottom: 1px solid $border-color;
    text-align: center;
    @include margin-padding(null, 20px);
}
.profile-info-widget {
    text-align: left;
	@extend %display-flex;
	.booking-doc-img {
	    margin-right: 15px;
	    img {
		    height: 90px;
		    width: 90px;
		    object-fit: cover;
		    @include rounded(4px);
		}
	}
}
.profile-det-info {
	overflow: hidden;
	h3 {
		font-size: $font-size-17;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	}
}
.patient-details {
	h5 {
	    color: $__smokey-gray;
	    font-size: $font-size-13;
	    font-weight: $font-weight-normal;
	    margin-bottom: 8px;
	    i {
			width: 18px;
		}
	}
}
.dashboard-menu {
	ul {
	    color: $__smokey-gray;
	    font-size: $font-size-14;
	    line-height: $font-size-17;
	    list-style: $__none;
	    text-transform: $__capitalize;
	    @include margin-padding(0, 0);
	    li {
			line-height: $__inherit;
			a {
				i {
					font-size: $font-size-16;
				    margin-right: 10px;
				    width: 16px;
					display: $__inline__block;
					vertical-align: $__middle;
				}
				span {
					display: $__inline__block;
					vertical-align: $__middle;
				}
			}
		}
	}
	& > ul {
		& > li {
			position: $__relative;
			:last-child {
				border-bottom: 0;
			}
			& > a {
				color: $__smokey-gray;
				display: $__block;
				@include margin-padding(null, 16px 20px);
			}
			&:hover, &.active {
				& > a {
					color: $__celeste;
				}
			}
		}
	}
}
.unread-msg {
    background-color: $__primarycolor;
    color: $__dark__blue;
    font-size: 10px;
    font-style: $__normal;
    text-align: center;
    @include transform( translateY(-50%));
    @include position($__absolute, 50%, 20px, null, null);
    @include margin-padding(null, 0 5px);
    @include rounded(2px);
}
.patient-dashboard-top {
	@extend %display-flex;
	&  > div {
		width: $__full__width;
	}
	h6 {
		font-size: $font-size-18;
		margin-bottom: 0;
		sub {
			font-size: $font-size-12;
		}
	}
}
.patient-graph-box {
	@extend %display-flex;
}
.patient-graph-col {
	.graph-box {
		background: $__light__blue;
		border-bottom: 8px solid $__blue__13;
		width: $__full__width;
		@include margin-padding(15px 0, 22px);
		@extend %display-flex;
		@extend %flex-wrap;
		&.pink-graph {
			background-color: $__chilli__red;
			border-bottom: 8px solid $__chilli__red;
		}
		&.sky-blue-graph {
			background-color: $__sky__light__01;
			border-bottom: 8px solid $__sky__light__02;
		}
		&.orange-graph {
			background-color: $__light__orange__01;
			border-bottom: 8px solid $__light__orange__01;
		}
		h4 {
			color: $__white;
			margin-bottom: 15px;
			text-align: center;
		}
		& > div {
			width: $__full__width;
		}
		.graph-img {
			text-align: center;
			margin: 0 $__auto;
			width: $__full__width;
		}
		.graph-status-result {
			@extend %display-flex;
			@extend %flex-wrap;
			@extend %flex-end;
			h3 {
				color: $__white;
				margin-bottom: 0;
				line-height: 0.9;
				width: $__full__width;
			}
			span {
				&.graph-update-date {
					color: $__white;
					font-weight: $font-weight-medium;
					opacity: 0.7;
					text-align: center;
					width: $__full__width;
				}
			}
		}
	}
}
.patient-sidebar {
	&.profile-sidebar-new {
		.widget-profile {
			.profile-info-widget {
				&::after {
					background-image: url(../img/doctors-dashboard/patient-sidebar-bg.jpg);
				}
			}
		}
	}
	.profile-det-info {
		span {
			font-size: $font-size-14;
			color: $gray-900;
			font-weight: $font-weight-medium;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 8px;
			i {
				font-size: 8px;
				color: $primary;
				margin: 0 8px;
			}
		}
	}
}
.health-records {
	margin-bottom: 20px;
	span {
		font-size: $font-size-12;
		font-weight: $font-weight-medium;
		display: inline-flex;
		align-items: center;
		margin-bottom: 8px;
		color: $gray-900;
		i {
			margin-right: 5px;
		}
	}
	h3 {
		display: flex;
		align-items: center;
		font-size: $font-size-24;
		font-weight: $font-weight-semibold;
		sup {
			font-size: $font-size-12;
			font-weight: $font-weight-semibold;
			margin-left: 5px;
		}
		@include respond-below(lg) {
			font-size: $font-size-20;
		}
		@include respond-below(md) {
			font-size: $font-size-18;
		}
	}
	&.icon-orange {
		span {
			i {
				color: #EA580C;
			}
		}
		h3 {
			sup {
				color: $success;
			}
		}
	}
	&.icon-amber {
		span {
			i {
				color: #F59E0B;
			}
		}
	}
	&.icon-dark-blue {
		span {
			i {
				color: $info;
			}
		}
		h3 {
			sup {
				color: $orange;
			}
		}
	}
	&.icon-blue {
		span {
			i {
				color: $indigo;
			}
		}
	}
	&.icon-red {
		span {
			i {
				color: $danger;
			}
		}
		h3 {
			sup {
				color: $success;
			}
		}
	}
	&.icon-purple {
		span {
			i {
				color: $purple;
			}
		}
	}
}
.chart-over-all-report {
	text-align: center;
	padding-left: 24px;
	border-left: 1px solid $border-color;
	@include respond-below(custom575) {
		padding-left: 0;
		border-left: 0;
		margin-top: 20px;
	}
	h6 {
		margin-bottom: 15px;
	}
	span.health-percentage {
		display: block;
		margin: 10px 0;
		max-width: 130px;
		margin: 15px auto;
	}
}
.report-chart {
	.circle-graph3 {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		p {
			position: absolute;
			max-width: 100px;
			text-align: center;
			margin: auto;
			font-size: $font-size-14;
		}
	}
}
.del-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	@include rounded(50%);
	background: $danger-transparent;
	color: $danger;
	font-size: $font-size-24;
}
.doctor-available-head {
	.input-block-new {
		margin-bottom: 0;
	}
}
.report-gen-date {
	p {
		font-size: $font-size-14;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		line-height: normal;
		span {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 5px;
			background: $gray-transparent;
			flex-shrink: 0;
		}
	}
}
.header-dropdown {
	.dropdown-avatar {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		margin-right: 5px;
	}
}
.book-appointment-head {
	background: $indigo;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 10px;
	background-image: url(../img/bg/card-bg-small.png);
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 24px;
	h3 {
		font-size: $font-size-18;
		color: $__white;
		margin-bottom: 0;
		span {
			font-size: $font-size-14;
			font-weight: $font-weight-normal;
			color: $light;
			display: block;
			margin-bottom: 0;
		}
		@include respond-below(lg) {
			font-size: $font-size-14;
		}
	}
	.add-icon {
		a {
			font-size: $font-size-16;
			color: $__white;
		}
	}
}
.past-appointment {
	.card-btns {
		.btn-outline-primary {
			@include respond-below(custom575) {
				margin-right: 0 !important;
				margin-bottom: 15px;
				margin-top: 0;
			}
		}
	}
}
.doctor-fav-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.doctor-info-profile {
		display: flex;
		align-items: center;
		.table-avatar {
			flex-shrink: 0;
			img {
				width: 46px;
				height: 46px;
				border-radius: 5px;
				margin-right: 10px;
			}
		}
		.doctor-name-info {
			h5 {
				font-size: $font-size-16;
				font-weight: $font-weight-medium;
				margin-bottom: 0px;
			}
			span {
				font-size: $font-size-14;
				font-weight: $font-weight-normal;
			}
		}
	}
	.badge {
		@include rounded(10px);
		font-size: $font-size-14;
		display: inline-flex;
		align-items: center;
		padding: 9px 7px;
	}
	.cal-plus-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: $gray-transparent;
		font-size: $font-size-16;
		color: $gray-900;
		&:hover {
			background: $primary;
			color: $__white;
		}
	}
	& +.doctor-fav-list {
		margin-top: 16px;
	}
}
.dashboard-card-head {
	.header-title {
		h5 {
			span {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				border: 1px solid $gray-transparent;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				margin-right: 10px;
			}
		}
	}
	.owl-nav {
		button {
			border: 0;
			background: transparent;
			margin-top: 0;
			&.owl-next {
				margin-left: 0;
			}
			&:hover {
				color: $primary;
			}
		}
	}
	.header-dropdown-two {
		position: relative;
		&::before {
			content: "";
			width: 1px;
			height: 20px;
			background: $gray-transparent;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		margin-left: 10px;
	}
}
.apponiment-dates {
	ul {
		li {
			a {
				border: 1px solid $gray-transparent;
				border-radius: 10px;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 15px;
				text-align: center;
				position: relative;
				&.available-date {
					&:after {
						content: "";
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background: $__blue__18;
						position: absolute;
						right: 6px;
						top: 6px;
					}
				}
				h5 {
					font-size: $font-size-18;
					font-weight: $font-weight-semibold;
					margin-bottom: 0;
					span {
						display: block;
						font-weight: $font-weight-normal;
						font-size: $font-size-14;
						margin-top: 3px;
						color: $gray-600;
					}
				}
			}
		}
	}
}
.appointment-dash-card {
	border: 1px solid $gray-transparent;
	border-radius: 10px;
	padding: 15px;
	margin-top: 15px;
	.date-time {
		p {
			color: $gray-900;
			display: flex;
			align-items: center;
			margin: 20px 0;
			i {
				margin-right: 5px;
			}
		}
		
	}
	.card-btns {
		display: flex;
		align-items: center;
		@include respond-below(custom575) {
			display: block;
		}
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			i {
				margin-right: 5px;
			}
			&.btn-outline-primary {
				border-color: $primary;
				color: $primary;
				margin-left: 15px;
				border-width: 2px;
				@include respond-below(custom575) {
					margin-left: 0;
					margin-top: 15px;
				}
				&:hover {
					background: $primary;
					border-color: $primary;
					color: $__white;
				}
			}
		}
	}
	.appointment-date-info {
		h6 {
			margin-bottom: 8px;
		}
		ul {
			margin: 0 0 20px;
			li {
				color: $gray-600;
				border-color: $primary;
				display: flex;
				align-items: center;
				i {
					color: $gray-900;
					margin-right: 5px;
				}
				& +li {
					margin-top: 10px;
				}
			}
		}
	}
}
.chart-tabs {
	ul {		
		border-bottom: 1px solid $border-color;
		margin-bottom: 15px;
	}
	.nav-item {
		.nav-link {
			color: $gray-900;
			font-size: $font-size-16;
			font-weight: $font-weight-medium;
			margin-right: 15px;
			padding: 0 0 15px;
			position: relative;
			&.active {
				color: $primary;
				&::before {
					background: $primary;
				}
			}
			&:hover {
				color: $primary;
			}
			&::before {
				content: "";
				position: absolute;
				bottom: -2px;
				width: 100%;
				height: 3px;
				background: transparent;
			}
		}
	}
}
.patient-dash-tab {
	.nav-item {
		.nav-link {
			border: 1px solid $gray-transparent;
			background: $gray-transparent;
			border-radius: 44px;
			color: $gray-900;
			font-size: $font-size-13;
			font-weight: $font-weight-medium;
			margin-right: 15px;
			margin-bottom: 15px;
			padding: 6px 12px;
			&.active {
				background-image: $primary-gradient;
				color: $__white;
				border-color: $primary;
			}
			&:hover {
				background-image: $primary-gradient;
				color: $white;
				border-color: $primary;
			}
		}
	}
}
.past-appointment {
	border: 0;
	padding: 0;
	.doctor-fav-list {
		margin-bottom: 20px;
	}
}
.medical-detail-head {
	h6 {
		margin-bottom: 0;
		font-size: $font-size-18;
		font-weight: $font-weight-semibold;
	}
	p {
		margin-bottom: 0;
		display: flex;
		align-items: center;
		i {
			color: $gray-900;
		}
	}
}
.medical-details-item {
	padding-bottom: 0;
	.health-records {
		margin-bottom: 20px;
	}
}
.add-med-record {
	margin-bottom: 24px;
	text-align: right;
}
.cal-form-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
.med-detail-item {
	background: $primary-transparent;
	border-radius: 10px;
	padding: 20px 20px 0;
	.health-records {
		span {
			color: $gray-600;
		}
	}
}
.med-detail-patient {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: $box-shadow;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 15px;
	flex-wrap: wrap;
	row-gap: 15px;
	background: $light-transparent;
	@include respond-below(custom575) {
		padding: 15px;
	}
	.med-patient {
		display: flex;
		align-items: center;
		span {
			img {
				width: 64px;
				height: 64px;
				border-radius: 10px;
				margin-right: 10px;
			}
		}
		.name-detail {
			h5 {
				font-size: $font-size-16;
				font-weight: $font-weight-medium;
				margin-bottom: 8px;
			}
			ul {
				display: flex;
				align-items: center;
				li {
					font-size: $font-size-12;
					line-height: 1;
					& +li {
						border-left: 1px solid $border-color;
						margin-left: 10px;
						padding-left: 10px;
					}
				}
			}
		}

	}
	.date-cal {
		p {
			font-size: $font-size-12;
			margin-bottom: 0;
			span {
				display: block;
				i {
					color: $gray-900;
				}
			}
		}
	}
}