.appointment-wrap {
	box-shadow: $box-shadow;
	padding: 24px 24px 10px 24px;
	margin-bottom: 24px;
	border: 1px solid $border-color;
	@include rounded(10px);
	& > ul {		
		display: flex;
		display: -webkit-flex;
		align-items:center;
		-webkit-align-items:center;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		flex-wrap: wrap;
		@include respond-below(sm) {
			display: block;
		}
		& > li {
			margin-bottom: 14px;
			&:first-child {
				min-width: 150px;
			}
			&.appointment-info {
				min-width: 190px;
			}
			&.mail-info-patient {
				min-width: 190px;
			}
		}
	}
}
.appointment-info {
	p {
		color: $gray-600;
		margin-bottom: 4px;
		font-size: $font-size-16;
		i {
			margin-right: 5px;
			font-size: $font-size-16;
			color: $gray-900;
		}
		&.md-text {
			color: $gray-900;
			margin-bottom: 0;
		}
	}
}
.patinet-information {		
	display: flex;
	display: -webkit-flex;
	align-items:center;
	-webkit-align-items:center;
	min-width: 175px;
	& > a {
		flex-shrink: 0;
	}
	img {
		width: 48px;
		height: 48px;
		border-radius: 10px;
		margin-right: 10px;
	}
	.patient-info {
		margin: 0;
		p {
			color: $primary;
			font-size: $font-size-12;
			font-weight: $font-weight-medium;
			margin-bottom: 2px;
			&.visit {
				font-weight: $font-weight-normal;
				color: $gray-600;
			}
		}
		h6 {
			font-size: $font-size-16;
			font-weight: $font-weight-medium;
			color: $gray-900;
			margin-bottom: 0;
			a {
				color: $gray-900;
				&:hover {
					color: $primary;
				}
			}
		}
	}
}
.appointment-type {
	p {
		font-size: $font-size-16;
		color: $gray-900;
		i {
			margin-right: 5px;
		}
		margin-bottom: 0;
		&.md-text {
			color: $gray-900;
			margin-bottom: 5px;
		}
	}
}
.request-action {
	li {
		margin-right: 15px;
		position: relative;
		padding-right: 15px;
		display: inline-block;
		&:last-child {
			margin-right: 0;
			padding-right: 0;
			&::before {
				content: none;
			}
		}
		&::before {
			@include position(absolute, 50%, 0, null, null);
			@include transform(translateY(-50%));
			content: "";	
			background: $gray-transparent;
			width: 1px;
			height: 19px;
		}
		a {
			font-size: $font-size-15;
			font-weight: $font-weight-medium;
			i {
				margin-right: 6px;
			}
			&.accept-link {
				color: $success;
			}
			&.reject-link {
				color: $danger;
			}
		}
	}
}
.dashboard-header {
	display: flex;
	display: -webkit-flex;
	align-items:center;
	-webkit-align-items:center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	border-bottom: 1px solid $border-color;
	margin-bottom: 24px;
	padding-bottom: 10px;
	flex-wrap: wrap;
	h3 {
		font-size: $font-size-24;
		font-weight: $font-weight-semibold;
		margin-bottom: 10px;
		@include respond-below(lg) {
			font-size: $font-size-22;
		}
		@include respond-below(md) {
			font-size: $font-size-20;
		}
	}
	ul {
		li {
			margin-bottom: 10px;
		}
	}
}
.md-text {
	font-size: $font-size-14;
	font-weight: $font-weight-medium;
}
.text-green {
	color: $success;
}
.text-blue {
	color: $primary;
}
.text-indigo {
	color: $indigo;
}
.text-blue-600 {
	color: $primary !important;
}
.success-wrap {
	.icon-success {
		width: 64px;
		height: 64px;
		@include rounded(50%);
		display: flex;
		display: -webkit-flex;
		align-items:center;
		-webkit-align-items:center;
		justify-content: center;
		-webkit-justify-content: center;
		margin: 0  auto 24px;
		background: $__blue__18;
		font-size: $font-size-20;
		color: $white;
		@include respond-below(custom767) {
			width: 50px;
			height: 50px;
			font-size: $font-size-16;
		}
	}
	h3 {
		font-weight: $font-weight-medium;
		margin-bottom: 5px;
		color: $gray-900;
	}
	p {
		color: $gray-900;
		margin-bottom: 24px;
	}
	.btn {
		font-weight: $font-weight-semibold;
		font-size: $font-size-15;
		padding: 8px 10px;
		@include respond-below(sm) {
			margin-top: 5px;
		}
	}
	.form-wrap {
		margin-bottom: 15px;
	}
	.form-check {
		font-size: $font-size-16;
		color: $__midnight_black;
		font-weight: $font-weight-medium;
		@include respond-below(custom991) {
			font-size: $font-size-15;
		}
	}
}
.success-info {
	margin-bottom: 24px;
}
.info-modal {
	.modal-body {
		padding: 40px;
		@include respond-below(custom767) {
			padding: 25px;
		}
	}
}
.loader-item {
	margin-top: 16px;
	@include respond-below(custom767) {
		margin-top: 5px;
	}
}
.btn-load {
	border: 1px solid $gray-transparent;
	background: $white;
	border-radius: 6px;
	font-weight: $font-weight-semibold;
	font-size: $font-size-15;
	padding: 8px 11px;
	color: $gray-900;
	box-shadow: 0px 1px 2px 0px #0000000D;
	&:hover {
		background: $gray-transparent;
		color: $gray-900;
	}
}
.dashboard-header {
	.header-list-btns {
		display: flex;
		align-items: center;
		li {
			.header-dropdown {
				.dropdown-toggle {
					@include rounded(5px);
					padding: 8px 15px 8px 8px;
					font-size: $font-size-14;
				}
				.dropdown-avatar {
					width: 16px;
					height: 16px;
				}
			}
			.view-icons {
				a {
					border: 1px solid $border-color;
					border-radius: 5px;
					background: $white;
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					color: $gray-800;
					&.active, &:hover {
						background: $primary;
						color: $white;
						border-color: $primary;
					}
				}
			}
			.dash-search-input {
				position: relative;
				.form-control {
					height: 32px;
					min-height: 32px;
					border: 1px solid $gray-transparent;
					border-radius: 4px;
					padding: 6px 15px 6px 36px;
					width: 200px;
					font-size: $font-size-14;
				}
				.search-icon {
					position: absolute;
					left: 16px;
					top: 50%;
					font-size: $font-size-14;
					transform: translateY(-50%);
					color: $gray-900;
				}
			}
		}
		
	}
}
.dash-search-input {
	position: relative;
	.form-control {
		height: 38px;
		min-height: 38px;
		border: 1px solid $border-color;
		border-radius: 5px;
		padding-left: 34px;
	}
	.search-icon {
		position: absolute;
		left: 16px;
		top: 50%;
		font-size: $font-size-14;
		transform: translateY(-50%);
		color: $gray-900;
	}
}
.appointment-info {
	.apponitment-types {
		align-items: center;
		li {
			font-size: $font-size-14;
			font-weight: $font-weight-medium;
			color: $gray-900;
			line-height: 1;
			& +li {
				border-left: 1px solid $gray-transparent;
				margin-left: 8px;
				padding-left: 8px;
			}
		}
	}
}
.mail-info-patient {
	li {
		color: $gray-600;
		i {
			margin-right: 5px;
			font-size: $font-size-13;
			color: $gray-900;
		}
		& +li {
			margin-top: 4px;
		}
	}
}
.appointment-action {
	ul {
		display: flex;
		align-items: center;
		li {
			& +li {
				margin-left: 8px;
			}
			a {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				font-size: $font-size-14;
				background: $gray-transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				&:hover {
					background: $primary;
					color: $white;
				}
			}
		}
	}
}
.appointment-start {
	a {
		color: $gray-900;
		font-weight: $font-weight-semibold;
		text-decoration: underline;
		&:hover {
			color: $primary;
		}
	}
}
.patient-info {
	h6 {
		display: inline-flex;
		align-items: center;
		.badge {
			&.new-tag {
				background: $purple;
				font-size: $font-size-10;
				color: $white;
				margin-left: 5px;
				font-weight: $font-weight-medium;
				padding: 4px 4px;
				@include rounded(20px);
			}
		}
	}
}

.form-sorts  {
    &.dropdown {
        background: $white;
        border: 1px solid $border-color;
        height: 32px;
        border-radius: 5px;
        padding: 5px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
        a {
            color: $gray-600;
			font-size: 14px;
			display: flex;
			align-items: center;
			i {
				color: $gray-900;
			}
            &.dropdown-toggle {
                &::after {
                    margin-left: 8px;
                }
            }
        }
    }
}
.filter-checks {
    .checkboxs {
        display: block;
        cursor: pointer;
        user-select: none;
		.check-title {
			padding-left: 25px;
			color: $gray-900;
		}
      }
      .checkboxs input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      .checkboxs input ~ .checkmarks {
        border-radius: 5px;
      }
      .checkboxs input:checked ~ .checkmarks {
        background-color: $primary;
        border-color: $primary;
      }
      .checkboxs input:checked ~ .checkmarks:after {
        display: block;
      }
      .checkboxs .checkmarks {
        height: 18px;
        width: 18px;
        position: absolute;
		border: 1px solid $border-color;
        top: 3px;
        left: 0;
      }
      .checkboxs .checkmarks:after {
        content: "";
        position: absolute;
        display: none;
      }
      .checkboxs .checkmarks:after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid $white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }
}
.filter-set-content-head {
    a {
        i {
            transition: 0.5s all;
			font-size: $font-size-16;
        }
        &:not(.collapsed) {
            i {
                transform: rotate(-90deg);
                transition: 0.5s all;
            }
        }
    }
}
.form-sorts {
    position: relative;
    .filter-dropdown-menu {
        padding: 20px;
        border-radius: 5px;
        background: $white;
        border: 1px solid $border-color;
        box-shadow: $box-shadow;
        position: absolute;
        z-index: 9;
        min-width: 350px;
        right: 0;
        top: 40px;
        opacity: 0;
        display: none;
        @include respond-below(sm) {
            right: unset;
            left: 0;
            min-width: 280px;
        }
    }
    &.table-filter-show {
        .filter-dropdown-menu {
            display: block;
            opacity: 1;
        }
    }
    .filter-set-head {
        h4 {
            font-size: $font-size-20;
            margin-bottom: 15px;
            padding-bottom: 15px;
        }
    }
    .filter-set-content {
        margin-bottom: 15px;
        .filter-set-content-head {
            a {
                display: flex;
                align-items: center;
                justify-content: space-between;
				background: $light-transparent;
				padding: 10px;
				font-size: $font-size-16;
				color: $gray-900;
				font-weight: $font-weight-medium;
            }
        }
    }
    .filter-reset-btns {
        display: flex;
		align-items: center;
        padding-top: 15px;
        a {
			flex: 1;
			display: inline-flex;
			justify-content: center;
            @include respond-below(sm) {
                padding: 10px 30px;
            }
        }
        .btn-light {
            margin-right: 15px;
        }
    }
}
.filter-set-contents {
    ul {
        margin-top: 20px;
        li {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
            .rating {
                margin-left: 28px;
                span {
                    margin-left: 5px;
                }
            }
            .collapse-inside-text {
                margin-left: 28px;
                h5 {
                    margin-bottom: 0;
                    font-size: $font-size-14;
                    font-weight: $font-weight-medium;
                }
            }
        }
    }
}
.setting-title {
	h5, h6 {
		font-size: $font-size-16;
		color: $gray-900;
		margin-bottom: 16px;
	}
}
.appointment-tabs {
	ul {
		&.available-nav {
			margin-bottom: 4px;
		}
		li {
			margin-right: 10px;
			margin-bottom: 20px;
			&:last-child {
				margin-right: 0;
			}
			.nav-link {
				background: $light-transparent;
				border-radius: 5px;
				border: 1px solid $border-color;
				color: $gray-900;
				padding: 4px 12px;
				font-weight: $font-weight-medium;
				font-size: $font-size-14;
				display: inline-flex;
				display: -webkit-inline-flex;
				align-items:center;
				-webkit-align-items:center;
				@include respond-below(sm) {
		            text-align: center;
		        }
				span {
					background: $white;
					padding: 1px 8px;
					color: $gray-900;
					font-weight: $font-weight-medium;
					border-radius: 30px;
					border: 1px solid $border-color;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: $font-size-10;
					margin-left: 10px;
				}
				&.active {
					background: $primary;
					color: $white;
					border-color: $primary;
					span {
						border-color: $white;
					}
				}
				&:hover {
					background: $primary;
					color: $white;
					border-color: $primary;
				}
			}
			@include respond-below(sm) {
	            margin-right: 0;
	        }
		}
		@include respond-below(sm) {
            display: block;
        }
	}
}
.grid-patient {
	.patinet-information .patient-info {
		p {
			margin-bottom: 0;
		} 
		h6 {
			margin-bottom: 5px;
		}
	}
	.appointment-wrap.appointment-grid-wrap > ul > li {
		margin-bottom: 15px;
	}
	.appointment-action {
		border-top: 1px solid $gray-transparent;
		padding-top: 15px;
	}
}
.appointment-tab-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	.filter-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.daterange-wraper {
			margin-bottom: 20px;
			width: 230px;
			input.form-control {
				border: 1px solid $border-color;
				min-height: 32px;
				height: 32px;
				border-radius: 5px;
				padding-left: 28px;
				color: $gray-900;
				&::placeholder {
					color: $gray-300;
				}
			}
			i {
				position: absolute;
				left: 8px;
				top: 50%;
				transform: translateY(-50%);
				color: $gray-900;
			}
		}
	}
}
.accordion {
	.filter-set-content {
		& +.filter-set-content {
			border-top: 1px solid $border-color;
			padding-top: 15px;
		}
	}
}
.appointment-tab-content {
	padding-top: 10px;
}
.appointment-detail-btn {
	a {
		border: 1px solid $primary;
		color: $primary;
		font-weight: $font-weight-medium;
		font-size: $font-size-13;
		padding: 5px 17px;
		border-radius: 44px;
	}
}
.dashboard-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
	ul {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
		li {
			.page-link {
				background: $white;
				border-color: $border-color;
				width: 30px;
				height: 30px;
				color: $gray-900;
				@include rounded(50%);
				margin-right: 0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: $font-size-14;
				&.active {
					background: $primary;
					border-color: $primary;
					color: $white;
				}
				&:hover {
					background: $primary;
					border-color: $primary;
					color: $white;
				}
				&.prev, &.next {
					width: auto;
					padding: 0 16px;
					@include rounded(30px);	
				}
			}
		}
	}
}
.user-avatar {
	img {
		width: 24px;
		height: 24px;
		@include rounded(4px);
	}
}
.bg-red {
	background: $danger !important;
}
.btn-gray {
	background: $gray-transparent;
	border: 1px solid $border-color;
	color: $gray-900;
	box-shadow: inset 0 0 0 0 $white;
	&:hover {
		color: $white !important;
		background-color: $dark;
		border-color: $dark !important;
		box-shadow: inset 0 0 0 50px $dark;
		outline-color: $dark;
		-webkit-transition: 0.7s;
		-ms-transition: 0.7s;
		transition: 0.7s;
	}
}
.modal-button {
	.btn + .btn {
		@include respond-below(sm) {
			margin-top: 15px;
		}
	}
}
.col-form-label {
	font-size: $font-size-14;
	font-weight: $font-weight-medium;
	color: $gray-600;
	padding: 0 0 10px 0;
}
.form-label {
	font-size: $font-size-14;
	font-weight: $font-weight-medium;
	color: $gray-900;
	margin-bottom: 4px;
}
.loader-item {
	.btn {
		padding: 9px 16px;
	}
}