@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

body {
	font-family: "Inter", sans-serif;
}

:root {
	--primary-color: #06605b;
	--secondary-color: #36b37e;
	--white-color: #fff;
	--black-color: #000;
}

a {
	color: var(--primary-color);
	transition: all 0.5s ease-in-out;
	text-decoration: none;
}

a:hover {
	color: #000;
}

p {
	color: #4d4d4d;
	font-size: 16px;
}

.pd-100 {
	padding: 100px 0;
}

.pd-40 {
	padding: 40px 0;
}

.pd-80 {
	padding: 80px 0;
}

.mb-100 {
	margin-bottom: 100px;
}

.mb-70 {
	margin-bottom: 70px;
}

.mb-50 {
	margin-bottom: 50px;
}

ul {
	padding-left: 0 !important;
	list-style: none;
}

.bg-grey {
	background: #f2f3f5;
}

.users-header .header-card {
	position: static;
}

/***Common Button Start***/
.common-btn {
	display: inline-block;
	padding: 12px 18px;
	background: var(--primary-color);
	color: #fff;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
	border: 1px solid var(--primary-color);
}

.common-btn:hover {
	background-color: #fff;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.common-bd-btn {
	display: inline-block;
	padding: 12px 18px;
	background: transparent;
	color: var(--primary-color);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
	border: 1px solid var(--primary-color);
}

.common-bd-btn:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.black-btn {
	display: inline-block;
	padding: 12px 22px;
	background: #000;
	color: #fff;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
	border: 1px solid #000;
}

.black-btn:hover {
	background-color: #fff;
	border-color: #000;
	color: #000;
}

.black-bd-btn {
	display: inline-block;
	padding: 12px 22px;
	background: transparent;
	color: #000;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
	border: 1px solid #000;
}

.black-bd-btn:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

.learn-btn {
	display: inline-block;
	margin-top: 40px;
}

/***Common Button End***/

/****Common Form Start****/
.common-form .form-label {
	color: #000;
}

.common-form .form-control {
	min-height: 45px;
	border-radius: 4px;
}

.common-form .form-control:focus {
	border: 1px solid var(--primary-color);
	box-shadow: none;
}

.common-form .form-select {
	min-height: 45px;
	border-radius: 4px;
}

.common-form .form-select:focus {
	border: 1px solid var(--primary-color);
	box-shadow: none;
}

.common-form textarea.form-control {
	min-height: 150px;
	border-radius: 4px;
}

.common-form textarea.form-control:focus {
	border: 1px solid var(--primary-color);
	box-shadow: none;
}

.common-form .form-check-input:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: none;
}

.common-form .form-check-label {
	color: #000;
}

/****Common Form End****/

/****Bredcrum Start****/
.page-title-area {
	background: url("../img/breadcrum.jpg");
	height: 250px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.page-title-area::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.55);
	content: "";
}

.page-title {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.277;
	color: #fff;
}

.breadcrumb-menu li {
	position: relative;
}

.breadcrumb-menu li span {
	font-size: 16px;
	font-weight: 400;
	color: #fff;
}

.breadcrumb-menu li a {
	font-weight: 900;
	display: inline-block;
}

.breadcrumb-menu ul {
	display: flex;
	justify-content: center;
	gap: 25px;
}

.page-title-wrapper {
	position: relative;
}

.trail-begin a {
	color: var(--primary-color);
	font-weight: 900;
}

.trail-items li:not(:last-child)::after {
	display: inline-block;
	color: #fff;
	content: ">";
	position: absolute;
	right: -16px;
	top: 0px;
	font-family: "Font Awesome 5 Pro";
}

/****Bredcrum End****/

/****Prodile Drop Down Start****/
.hdr-pro-view {
	display: flex;
}

.hdr-pro-view span {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	display: inline-block;
}

.hdr-pro-view span img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hdr-pro-view p {
	margin-bottom: 0;
}

.profile-drop .btn-secondary {
	background: none;
	border: none;
	padding: 0;
}

.profile-drop .dropdown-toggle::after {
	display: none;
}

.profile-drop .dropdown-menu {
	min-width: 220px;
	padding: 0;
	border: none;
	overflow: hidden;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	z-index: 999;
}

.profile-drop .dropdown-menu.show li a {
	padding: 10px 12px;
	border-bottom: 1px solid #f4f4f4;
	font-size: 14px;
	color: #000;
}

.profile-drop .dropdown-menu.show li a span {
	margin-right: 4px;
}

.profile-card-drop {
	display: flex;
	align-items: center;
	background: var(--primary-color);
	padding: 14px 12px;
	position: relative;
}

.profile-card-drop span {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	overflow: hidden;
	margin-right: 10px;
	min-width: 52px;
	min-height: 50px;
}

.profile-card-drop span img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-card-rt h4 {
	font-size: 16px;
	color: #000;
	font-weight: 600;
	margin-bottom: 0;
	color: #fff;
}

.profile-card-rt p {
	font-size: 14px;
	margin-bottom: 2px;
	color: #fff;
}

.profile-drop .dropdown-item {
	transition: all 0.5s ease-in-out;
}

.profile-drop .dropdown-item:hover {
	background: var(--primary-color);
	color: #fff !important;
}

.profile-drop .btn:first-child:active,
.profile-drop .btn.show {
	background: none !important;
	border-color: none !important;
}

/****Prodile Drop Down End****/

/****User Sidebar Start*****/
.dashboard_menu {
	background: var(--primary-color);
	overflow: hidden;
	border-radius: 8px;
}

.dasboard_header {
	padding: 30px 0px 20px 0;
	text-align: center;
}

.dasboard_header .dasboard_header_img {
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0px 0px 10px #3c3c3c38;
	width: 140px;
	height: 140px;
	position: relative;
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.dasboard_header .dasboard_header_img label {
	display: block;
	position: absolute;
	bottom: 0;
	right: 5px;
	font-size: 14px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0px 0px 10px #3c3c3c38;
	cursor: pointer;
	transition: all linear 0.3s;
	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.dasboard_header h2 {
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 5px;
	margin-top: 15px;
	text-align: center;
}

.dashboard_menu ul li a {
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	width: 100%;
	display: block;
	transition: all 0.3s linear 0s;
	background: none !important;
	color: #fff;
	border-top: 1px solid #ffffff42;
	padding: 0px 0px;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	text-transform: capitalize;
	position: relative;
}

.dashboard_menu ul li a.active,
.dashboard_menu ul li a:hover {
	background: #ffffff38 !important;
}

.dashboard_menu ul li a span {
	display: inline-block;
	transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	line-height: 50px;
}

/****User Sidebar End*****/

/*****USER DASHBOARD CSS Start *****/
.dashboard_content .table td,
.dashboard_content .table th {
	vertical-align: middle;
	font-size: 14px;
	padding: 0.6rem 0.6rem;
}

.dashboard_content .table th {
	border-bottom: 0px !important;
}

.dashboard_menu {
	background: var(--primary-color);
	overflow: hidden;
	border-radius: 8px;
}

.dasboard_header {
	padding: 30px 0px 20px 0;
	text-align: center;
}

.dasboard_header h2 {
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 0;
	margin-top: 10px;
	text-align: center;
}

.dasboard_header .dasboard_header_img {
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0px 0px 10px #3c3c3c38;
	width: 140px;
	height: 140px;
	position: relative;
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.dasboard_header .dasboard_header_img label {
	display: block;
	position: absolute;
	bottom: 0;
	right: 5px;
	font-size: 14px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	box-shadow: 0px 0px 10px #3c3c3c38;
	cursor: pointer;
	transition: all linear 0.3s;
	-webkit-transition: all linear 0.3s;
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.dasboard_header .dasboard_header_img img {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dashboard_area {
	overflow: hidden;
}

.dashboard_menu ul li a {
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	width: 100%;
	display: block;
	transition: all 0.3s linear 0s;
	background: none !important;
	color: #fff;
	border-top: 1px solid #ffffff42;
	padding: 0px 0px;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	text-transform: capitalize;
	position: relative;
}

.querry-count {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 25px !important;
	height: 25px !important;
	line-height: 25px !important;
	color: var(--primary-color) !important;
	font-size: 12px;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}

.dashboard_menu ul li a.active,
.dashboard_menu ul li a:hover {
	background: #ffffff38 !important;
}

.dashboard_menu ul li a span {
	display: inline-block;
	transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	line-height: 50px;
	background: rgba(255, 255, 255, 0.1);
	margin-right: 6px;
}

.inner_card p {
	color: #777;
}

.inner_card hr:not([size]) {
	color: #c1c1c1;
}

.inner_card {
	padding: 30px 30px;
}

.user_dashboard {
	background-color: #f4f4f4 !important;
}

.dashboard_content {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 3px 0 #9c9c9c33;
	height: 100%;
}

.db_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.db_inr_hd h4 {
	margin-bottom: 0px;
	font-weight: 600;
	text-transform: capitalize;
}

.edit-btn {
	width: 35px;
	height: 35px;
	display: inline-block;
	background: var(--primary-color);
	text-align: center;
	line-height: 35px;
	color: #fff;
	border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.edit-btn:hover {
	color: #fff;
	opacity: 0.85;
}

.db_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 12px;
}

.db_inr_hd h4 {
	margin-bottom: 0px;
	font-weight: 600;
	text-transform: capitalize;
}

/*****USER DASHBOARD CSS END *****/

/*****Notification CSS Start *****/
.notifi-card {
	padding: 12px 12px;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	background: #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	margin-bottom: 18px;
}

.notifi-details-card p {
	margin-bottom: 0;
	font-size: 12px;
}

.notifi-details-card h4 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.notifi-icon {
	width: 40px;
	height: 40px;
	background: var(--secondary-color);
	text-align: center;
	line-height: 40px;
	color: #fff;
	border-radius: 50%;
	margin-right: 12px;
	min-width: 40px;
}

.notification-day {
	font-size: 18px;
	margin-bottom: 10px;
}

.notifi-card.trancation-card p {
	margin-bottom: 4px;
	font-size: 12px;
}

/*****Notification CSS End *****/

/***User Address Page Start***/
.user-address .address-box {
	height: 100%;
	padding: calc(15px + (20 - 15)* ((100vw- 320px)/(1920- 320)));
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	background: #fff;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.user-address .address-box.add-new {
	cursor: pointer;
	color: #000;
}

.user-address .address-box.checked {
	border-color: #2c438a;
}

.user-address .address-box h3 {
	margin-bottom: 15px;
}

.user-address .address-box .plus-icon {
	padding: 10px;
	background-color: var(--primary-color);
	border-radius: 100px;
	color: #fff;
}

.user-address .address-box .plus-icon svg {
	width: calc(30px + (40 - 30)* ((100vw- 320px)/(1920- 320)));
	height: calc(30px + (40 - 30)* ((100vw- 320px)/(1920- 320)));
	stroke: #fff;
}

.user-address .address-box .radio-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
}

.user-address .address-box .option-wrap {
	margin-left: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
}

.user-address .address-box .option-wrap .edit,
.user-address .address-box .option-wrap .delet {
	cursor: pointer;
}

.user-address .address-box .option-wrap .edit svg,
.user-address .address-box .option-wrap .delet svg {
	width: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	height: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.user-address .address-box .option-wrap .edit svg {
	stroke: green;
}

.user-address .address-box .option-wrap .delet svg {
	stroke: red;
}

.user-address .address-box .option-wrap .edit svg:hover,
.user-address .address-box .option-wrap .delet svg:hover {
	stroke: #7b7b7b;
}

.user-address .address-box .address-detail {
	padding: 0 25px;
	margin-top: 18px;
	margin-bottom: -3px;
}

.user-address .address-box .address-detail p {
	margin-bottom: 5px;
	color: #000;
}

.user-address .address-box .address-detail>span {
	margin-top: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	color: #000;
}

.user-address .address-box .address-detail ul {
	margin-top: 15px;
	list-style: disc;
	padding-left: 19px;
}

.user-address .address-box .address-detail ul li {
	font-size: 16px;
	color: #262834;
	display: list-item;
}

.user-address .address-box .address-detail .btn-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.user-address .radio-box input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.user-address .badges.badges-theme {
	background-color: green;
	color: #fff;
	border: none;
	font-size: 12px;
}

.user-address .badges.badges-pill {
	padding: 3px 10px;
	border-radius: 100px;
}

.user-address .radio-box input[type="radio"]+.radio-label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	font-size: calc(14px + (16 - 14)* ((100vw- 320px)/(1920- 320)));
	font-weight: 500;
	color: var(--primary-color);
	cursor: pointer;
}

.user-address .radio-box input[type="radio"]+.radio-label::before {
	content: "";
	background: transparent;
	border-radius: 100%;
	border: 2px solid var(--primary-color);
	display: inline-block;
	width: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	height: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	position: relative;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
}

.user-address .radio-box input[type="radio"]:checked+.radio-label:before {
	background-color: var(--primary-color);
	-webkit-box-shadow: inset 0 0 0 3px #fff;
	box-shadow: inset 0 0 0 3px #fff;
}

.user-address .radio-box input[type="radio"]:focus+.radio-label:before {
	outline: none;
	border-color: var(--primary-color);
}

.user-address .radio-box input[type="radio"]:disabled+.radio-label:before {
	-webkit-box-shadow: inset 0 0 0 3px #fff;
	box-shadow: inset 0 0 0 3px #fff;
	border-color: var(--primary-color);
	background: #363636;
}

.user-address .radio-box input[type="radio"]+.radio-label:empty:before {
	margin-right: 0;
}

/**User Address Page End**/

/****User Payment Page Start****/
.user-payment .radio-box input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.user-payment .badges.badges-theme {
	background-color: var(--primary-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	font-size: 14px;
}

.user-payment .badges.badges-pill {
	padding: 3px 10px;
	border-radius: 100px;
}

.user-payment .radio-box input[type="radio"]+.radio-label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	font-size: calc(14px + (16 - 14)* ((100vw- 320px)/(1920- 320)));
	font-weight: 500;
	color: #262834;
	cursor: pointer;
}

.user-payment .radio-box input[type="radio"]+.radio-label:before {
	content: "";
	background: transparent;
	border-radius: 100%;
	border: 2px solid var(--primary-color);
	display: inline-block;
	width: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	height: calc(16px + (18 - 16)* ((100vw- 320px)/(1920- 320)));
	position: relative;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
}

.user-payment .radio-box input[type="radio"]:checked+.radio-label:before {
	background-color: var(--primary-color);
	-webkit-box-shadow: inset 0 0 0 3px #fff;
	box-shadow: inset 0 0 0 3px #fff;
}

.user-payment .radio-box input[type="radio"]:focus+.radio-label:before {
	outline: none;
	border-color: var(--primary-color);
}

.user-payment .radio-box input[type="radio"]:disabled+.radio-label:before {
	-webkit-box-shadow: inset 0 0 0 3px #fff;
	box-shadow: inset 0 0 0 3px #fff;
	border-color: var(--primary-color);
	background: #363636;
}

.user-payment .radio-box input[type="radio"]+.radio-label:empty:before {
	margin-right: 0;
}

.checkout .title-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 20px;
}

.accordion .accordion-item {
	background-color: #fff !important;
	line-height: 23px;
	border: 1px solid rgba(221, 221, 221, 0.5);
	border-radius: 10px;
}

.accordion .accordion-item:not(:first-of-type) {
	margin-top: calc(15px + (20 - 15)* ((100vw- 320px)/(1920- 320)));
}

.payment-section .accordion .accordion-item .accordion-body .filter-row .filter-col {
	border: #f0f3f8;
	background-color: rgba(229, 229, 229, 0.3);
	padding: calc(10px + (15 - 10)* ((100vw- 320px)/(1920- 320)));
	font-size: calc(14px + (16 - 14)* ((100vw- 320px)/(1920- 320)));
	border-radius: 5px;
	font-weight: 600;
	color: #767676;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
}

.payment-section .accordion .accordion-button {
	background: #0000 !important;
	box-shadow: none !important;
	font-weight: 500;
}

.payment-section .accordion-button:not(.collapsed) {
	color: #000;
}

.payment-section .accordion-button:focus {
	border-color: #0000 !important;
	box-shadow: none !important;
}

.payment-section .accordion .accordion-item .accordion-body .filter-row .filter-col .payment-card {
	width: calc(30px + (50 - 30)* ((100vw- 320px)/(1920- 320)));
	height: auto;
	margin-left: auto;
}

.payment-section .accordion .accordion-item .accordion-body .radio-box label span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.input-box label {
	margin-bottom: 10px;
}

/****User Payment Page End****/
.modal-header {
	background: #f4f4f4;
}

.modal-header .btn_close {
	position: absolute;
	right: -50px;
	top: -5px;
	opacity: 1;
	background: var(--primary-color);
	border: 0px;
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

/****Order Details Page Start****/
.order_dtl_wrapp .orders-img img {
	border-radius: 0.5rem;
	object-fit: cover;
	height: 3rem;
	margin-right: 0.5rem;
	width: 3rem;
}

.order_dtl_wrapp p {
	color: #808080;
	margin-bottom: 10px;
	font-size: 16px;
}

.order_dtl_wrapp .order-menu.style-1 img {
	/* border: 1px solid #cecece; */
	border-radius: 0.625rem;
	height: 5rem;
	object-fit: cover;
	width: 5rem;
}

.text-primary {
	color: var(--primary-color) !important;
}

.order_dtl_wrapp {
	max-width: 1000px;
	margin: 0 auto;
	width: 100%;
}

/****Order Details Page End****/

/****Appointment List Page Start****/
.common-tabs .nav-tabs {
	border: none;
	gap: 10px;
}

.common-tabs .nav-tabs .nav-link {
	color: #000;
	border-radius: 4px;
	border: 1px solid #dfdfdf;
}

.common-tabs .nav-tabs .nav-link.active {
	background: var(--primary-color);
	color: #fff;
}

/****Appointment List Page End****/

/*****Appointment Detail Page Start*****/
.dashboard-subs-card .order-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 10px;
	justify-content: space-between;
}

.dashboard-subs-card .order-box {
	padding: 15px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid rgba(221, 221, 221, 0.4);
}

.dashboard-subs-card .order-header span {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 100%;
	position: relative;
	color: #f84545;
	background: #f4f4f4;
}

.dashboard-subs-card .order-header .order-status.success {
	color: var(--theme-color);
}

.dashboard-subs-card .right-content .product-details .product-content h5 {
	font-size: 16px;
	color: #262834;
	font-weight: 500;
	margin-bottom: 4px;
}

.dashboard-subs-card .order-header .order-content .order-status.success {
	color: var(--theme-color);
}

.dashboard-subs-card .order-header .order-content p {
	margin-bottom: 0;
	color: #767676;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

.dashboard-subs-card .order-info {
	padding: 20px;
	margin-top: 20px;
	background-color: #f5f5f5;
}

.dashboard-subs-card .order-content .order-info .product-details {
	cursor: pointer;
}

.dashboard-subs-card .product-details .product-content h5 {
	font-size: 16px;
	color: #262834;
	font-weight: 500;
	margin-bottom: 4px;
}

.dashboard-subs-card .product-details .product-content>span span {
	color: #262834;
}

.dashboard-subs-card .product-content h5 {
	font-size: 16px;
	color: #262834;
	font-weight: 500;
	margin-bottom: 4px;
}

.dashboard-subs-card .product-details .product-content>span {
	display: flex;
	color: #626262;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	margin-bottom: 12px;
	font-weight: 600;
}

.dashboard-subs-card .product-details .product-content>span span {
	color: #262834;
}

.view-plan-btn {
	background: var(--theme-color);
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	display: inline-block;
	max-width: 120px;
	box-shadow: none;
	border: none;
}

.ellipse-drop .dropdown-toggle::after {
	display: none;
}

.ellipse-drop .dropdown-toggle {
	padding: 0;
	border: none;
	color: #000;
	background: transparent;
}

.ellipse-drop .dropdown-menu {
	border-radius: 0;
}

.ellipse-drop .dropdown-item:focus,
.ellipse-drop .dropdown-item:hover {
	background: #f4f4f4;
}

.ellipse-drop .dropdown-toggle:focus {
	background: transparent;
	color: #000;
}

/*****Appointment Detail Page End*****/
.doctor-card {
	border-radius: 8px;
	background: #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 16px;
	transition: all 0.5s ease-in-out;
	margin-bottom: 25px;
}

.doctor-img {
	height: 250px;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}

.doctor-img img {
	width: 100%;
	object-fit: cover;
	height: 100%;
	object-position: top center;
}

.doctor-img {
	height: 260px;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}

.doctor-dis h4 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 6px;
}

.doctor-dis p {
	font-size: 18px !important;
	margin-bottom: 0;
	color: #606060;
}

.doctor-dis .common-btn {
	display: inline-block;
	padding: 10px 14px;
	background: var(--primary-color);
	color: #fff;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
	border: 1px solid var(--primary-color);
}

.doctor-dis .common-btn:hover {
	background-color: #fff;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/***Doctor Filter Left***/
.right_sidebar_area {
	border: 1px solid rgba(221, 221, 221, 0.5);
	border-radius: 8px;
	background: #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.s_widget {
	border-bottom: 1px solid rgba(221, 221, 221, 0.5);
	padding: 15px 20px;
}

.filter-main-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.filter-main-heading h3 {
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 600;
}

.filter-main-heading a {
	color: var(--primary-color);
	font-size: 14px;
}

.tags li {
	display: inline-block;
	font-size: 14px;
}

.tags li.active a,
.tags li:hover a {
	background-color: var(--primary-color);
	color: #fff;
}

.tags li.active a,
.tags li:hover a svg {
	stroke: #fff;
}

.categories_widget ul {
	margin-left: 0;
	padding-left: 0;
}

.categories_widget ul li a {
	font-size: 12px;
	color: #334249;
	transition: all 400ms linear 0s;
}

.s_title h4 {
	font-weight: 600;
	color: #2e3c43;
	margin: 0;
	margin-bottom: 10px;
	font-size: 22px;
}

.category-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.catgory-check-card .checkbox-animate {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 15px;
	margin-bottom: 8px;
}

.catgory-check-card .checkbox-animate label {
	position: relative;
	cursor: pointer;
}

.catgory-check-card .checkbox-animate label input {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.catgory-check-card .input-check {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	border: 2px solid #ccc;
	position: relative;
	top: 6px;
	margin-right: 7px;
	transition: 0.4s;
}

.catgory-check-card .input-check::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 6px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: scale(0) rotate(-45deg);
	position: absolute;
	top: 5px;
	left: 3px;
	transition: 0.4s;
}

.catgory-check-card .checkbox-animate label input:checked~.input-check {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	animation-name: input-animate;
	animation-duration: 0.7s;
}

.catgory-check-card .checkbox-animate label input:checked~.input-check::before {
	transform: scale(1) rotate(-45deg);
	animation-name: input-check;
	animation-duration: 0.2s;
	animation-delay: 0.3s;
}

@keyframes input-animate {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1 .3, 0 .7);
	}

	55% {
		transform: scale(1);
	}

	70% {
		transform: scale(1 .2, 0 .8);
	}

	80% {
		transform: scale(1);
	}

	90% {
		transform: scale(1 .1, 0 .9);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes input-check {
	0% {
		transform: scale(0) rotate(-45deg);
	}

	100% {
		transform: scale(1) rotate(-45deg);
	}
}

.mob-filter {
	display: none;
}

.mob-filter a {
	border: 1px solid #dadada;
	padding: 6px;
	border-radius: 4px;
	width: 36px;
	height: 36px;
	display: block;
	margin-left: auto;
}

.mob-filter a i {
	color: #8b8b8b;
	font-size: 18px;
}

.mob-filter {
	margin-bottom: 25px;
	text-align: right;
}

.close-filter {
	display: none;
}

.filter-main-heading a {
	color: var(--primary-color);
	font-size: 14px;
}

.filter-main-heading h3 {
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 600;
}

.tags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px 8px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 10px 10px;
	margin-bottom: 0;
}

.tags li {
	display: inline-block;
	font-size: 14px;
}

.tags li a {
	display: block;
	color: #767676;
	padding: 6px 12px;
	border-radius: 100px;
	border: 1px solid rgba(221, 221, 221, 0.4);
	font-size: 12px;
	font-weight: 500;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 6px;
}

.tags li a svg {
	width: 15px;
	height: 15px;
}

.tags li a:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.price-card .price-input {
	width: 100%;
	display: flex;
	margin: 20px 0 20px 0px;
}

.price-card .price-input .field {
	display: flex;
	width: 100%;
	height: 45px;
	align-items: center;
}

.price-card .field input {
	width: 100%;
	height: 100%;
	outline: none;
	font-size: 14px;
	margin-left: 0;
	border-radius: 5px;
	text-align: center;
	border: 1px solid #e4e4e4;
	-moz-appearance: textfield;
}

.price-card input[type="number"]::-webkit-outer-spin-button,
.price-card input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.price-card .price-input .separator {
	width: 130px;
	display: flex;
	font-size: 19px;
	align-items: center;
	justify-content: center;
}

.price-card .slider {
	height: 5px;
	position: relative;
	background: #ddd;
	border-radius: 5px;
}

.price-card .slider .progress {
	height: 100%;
	left: 25%;
	right: 25%;
	position: absolute;
	border-radius: 5px;
	background: var(--primary-color);
}

.price-card .range-input {
	position: relative;
}

.price-card .range-input input {
	position: absolute;
	width: 100%;
	height: 5px;
	top: -5px;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.price-card input[type="range"]::-webkit-slider-thumb {
	height: 17px;
	width: 17px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #ccc;
	pointer-events: auto;
	-webkit-appearance: none;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.price-card input[type="range"]::-moz-range-thumb {
	height: 17px;
	width: 17px;
	border: none;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #ccc;
	pointer-events: auto;
	-moz-appearance: none;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/***Doctor Filter End***/
.sort-drop .form-select {
	min-height: 45px;
	box-shadow: none;
}

.sort-drop .form-select:focus {
	border-color: var(--primary-color);
}

/****Doctor Details Start****/
.shop-dtl-sec {
	background: #fff;
	border-radius: 10px;
	padding: 25px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.engneer-lft {
	border-radius: 10px;
	overflow: hidden;
	height: 380px;
}

.engneer-lft img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-item-title {
	font-size: 30px;
	font-weight: 600;
}

.single-item-rating i {
	color: #ffc107;
}

.rating-count {
	margin-left: 10px;
	display: inline-block;
}

.rating-count {
	margin-left: 2px;
	display: inline-block;
}

.single-item-content h6 {
	font-weight: 500 !important;
	font-size: 20px !important;
	color: #484848 !important;
	margin-bottom: 12px !important;
}

.single-item-details {
	background: #fff;
	border-radius: 10px;
	padding: 25px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.single-item-details .nav-tabs .nav-link {
	color: #545454;
	font-size: 20px;
	padding: 15px 25px;
	font-weight: 500;
	border: none;
	background: 0 0;
	border-bottom: 2px solid transparent;
}

.single-item-details .nav-tabs .nav-link:hover,
.single-item-details .nav-tabs .nav-link.active {
	border-bottom: 2px solid var(--primary-color);
	color: var(--primary-color);
}

.single-item-details .nav-tabs .nav-link:hover,
.single-item-details .nav-tabs .nav-link.active {
	border-bottom: 2px solid var(--primary-color);
	color: var(--primary-color);
}

.single-item-details .nav-tabs .nav-link {
	color: #545454;
	font-size: 16px;
	padding: 15px 25px;
	font-weight: 500;
	border: none;
	background: 0 0;
	border-bottom: 2px solid transparent;
}

.blog-comments-content h5 {
	color: #111;
}

.blog-comments h3 {
	color: #000;
}

.blog-comments-wrapper {
	margin: 30px 0;
}

.blog-comments-single {
	display: flex;
	justify-content: start;
	align-items: center;
	margin-top: 20px;
}

.blog-comments-content {
	padding: 0 0 0 10px;
}

.blog-comments-content h5 {
	color: #111;
}

.blog-comments-content span {
	font-size: 14px;
	color: var(--primary-color);
	font-weight: 500;
}

.blog-comments-content p {
	color: #555;
}

.blog-comments-form {
	padding: 30px;
	border-radius: 10px;
	background: var(--primary-color);
}

.blog-comments-form h3 {
	margin-bottom: 20px;
	color: #111;
}

.blog-comments-form label {
	color: #464646;
	cursor: pointer;
	font-weight: 400;
}

.blog-comments-form .form-control {
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: none;
}

.blog-comments-form {
	background: #f8f8f8;
	padding: 25px 30px;
	border-radius: 10px;
}

.blog-comments-form h3 {
	font-weight: 700;
}

.star-list {
	color: #ffc107;
}

.blog-comments-single img {
	border-radius: 50%;
	width: 60px;
}

.blog-commnt-outer {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #e3e3e3;
	padding-left: 30px;
	padding-right: 30px;
}

.blog-commnt-outer p {
	margin-bottom: 0;
}

.single-item-content h6 {
	font-weight: 500 !important;
	font-size: 16px !important;
	color: #484848 !important;
	margin-bottom: 9px !important;
}

.single-item-rating {
	margin-bottom: 10px;
}

.review-hd h4 {
	font-size: 16px;
}

.star-list i {
	font-size: 14px;
}

.common-card {
	background: #fff;
	border-radius: 10px;
	padding: 30px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.time-slot-card .treatment-type-select {
	text-align: center;
	display: flex;
	align-items: center;
	gap: 15px;
	flex-flow: wrap;
}

.time-slot-card .treatment-type-select .form-check {
	padding-left: 0;
	display: inline-block;
	margin-bottom: 0;
	vertical-align: text-bottom;
	flex: calc(30% - 15px);
	max-width: calc(30% - 15px);
}

.time-slot-card .treatment-type-select .form-check input[type="radio"]:checked~label {
	background-color: var(--primary-color);
	color: #ffffff;
}

.time-slot-card .treatment-type-select .form-check-label {
	padding: 10px 16px;
	border: 1px solid #dcdcdc;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.time-slot-card .treatment-type-select .form-check input[type="radio"] {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.time-slot-card .treatment-type-select .form-check input[type="radio"]:checked~label .sgn-rdo-icn {
	line-height: 27px;
}

.calender-rt .calendar {
	width: 390px;
	margin: 0px auto;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calender-rt .calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	background-color: var(--primary-color);
	color: white;
	border-radius: 10px 10px 0 0;
}

.calender-rt .calendar-header button {
	background: none;
	border: none;
	color: var(--primary-color);
	font-size: 20px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	background: #fff;
	line-height: 10px;
	border-radius: 4px;
}

.calender-rt .calendar-body {
	padding: 20px;
}

.calender-rt .day-names {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-bottom: 10px;
}

.calender-rt .day-names span {
	width: 50px;
	text-align: center;
	text-align: center;
}

.calender-rt .days {
	display: flex;
	flex-wrap: wrap;
}

.calender-rt .day {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	background: #f8f8f8;
}

.calender-rt .day:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.calender-rt .empty {
	background-color: transparent;
}

/*
.calender-rt .day:nth-child(7n) {
  background-color: #e3e3e3;
}*/
.calender-rt .day:nth-child(7n):hover {
	background-color: var(--primary-color);
	color: #fff;
}

.calender-rt .month-year {
	font-size: 20px;
}

/*****Checkout Page Start*****/
.checkout-widget-title {
	margin-bottom: 20px;
	font-size: 25px;
}

.checkout-widget {
	background: #fff;
	padding: 30px;
	margin-bottom: 30px;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.checkout-form .form-group label {
	margin-bottom: 5px;
	color: #000;
	font-size: 14px;
}

.checkout-form textarea.form-control {
	height: 120px;
}

.checkout.cart-summary {
	float: none;
	background: #f4f4f4;
	padding: 30px;
	border-radius: 12px;
	margin-bottom: 30px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	position: sticky;
	top: 10px;
}

.checkout.cart-summary h4 {
	font-size: 25px;
	margin-bottom: 20px;
}

.cart-summary li strong {
	color: #000;
}

.cart-summary li span {
	float: right;
}

.checkout.cart-summary li {
	width: 100%;
	margin-bottom: 12px;
}

.cart-total {
	padding-top: 10px;
	border-top: 1px solid #00000014;
}

.cart-total span {
	font-weight: 700;
	color: var(--primary-color);
}

.apply-coupon input {
	width: 100%;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 400;
	background: #fff;
	border: 1px solid var(--primary-color);
	border-radius: 6px;
}

.apply-coupon {
	position: relative;
}

.apply-coupon button {
	text-transform: capitalize;
	padding: 8px 16px;
	text-align: center;
	border-radius: 6px;
	background: var(--primary-color);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	transition: all 0.5s ease-in-out;
	border: none;
	box-shadow: none;
}

/*****Checkout Page End*****/

/****Thank You Page Start****/
.thank-card-inr {
	padding: 50px 20px;
	border-radius: 8px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	text-align: center;
}

.thank-check-icn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #29bf6c;
	color: #fff;
	display: inline-block;
	font-size: 34px;
	margin-bottom: 20px;
	line-height: 58px;
}

.thank-card-inr h4 {
	font-size: 44px;
	margin-bottom: 6px;
}

/****Thank You Page End****/

/****Shop Page start****/
.product-card {
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: 8px;
	/* border: 1px solid #e4e4e4; */
	overflow: hidden;
	margin-bottom: 30px;
}

.product-img {
	width: 100%;
	height: 260px;
	overflow: hidden;
	border-radius: 0;
	position: relative;
}

.product-img img {
	width: 100%;
	transition: all 0.5s ease-in-out;
	height: 100%;
	object-position: center center;
	object-fit: cover;
}

.product-card:hover .product-img img {
	transform: scale(1.1);
}

.product-dis h4 {
	font-size: 18px;
}

.product-dis h4 a {
	color: #000;
}

.product-dis p {
	margin-bottom: 12px;
}

.product-dis {
	padding: 20px 12px;
	background: #f4f4f4;
}

.product-card:hover .product-cart-btns {
	opacity: 1;
}

.product-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	transition: all 0.5s ease-in-out;
	opacity: 0;
}

.product-card:hover .product-overlay {
	opacity: 1;
}

.product-cart-btns {
	position: absolute;
	top: 20px;
	right: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	opacity: 0;
	transition: all 0.5s ease-in-out;
	z-index: 9;
}

.product-cart-btns a {
	width: 40px;
	height: 40px;
	text-align: center;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: 8px;
	line-height: 41px;
	color: #fff;
	font-size: 18px;
}

.wish-btn {
	background: #ff0f0f;
}

.cart-btn {
	background: var(--primary-color);
}

.product-filter-lft {
	position: sticky;
	top: 10px;
}

.shop-left-sec .mySwiper2 {
	height: 80%;
	width: 100%;
	border: 1px solid #ececec;
}

.shop-left-sec .mySwiper {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0px;
}

.shop-left-sec .mySwiper .swiper-slide img,
.shop-left-sec .mySwiper2 .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-left-sec .mySwiper .swiper-slide img {
	border: 1px solid #ececec;
}

.grn-tag {
	background: #84be52;
	padding: 5px 12px;
	display: inline-block;
	color: #ffff;
	border-radius: 4px;
	margin-bottom: 12px;
	font-size: 12px;
}

.single-item-title {
	font-size: 30px;
	font-weight: 600;
}

.single-item-rating {
	margin: 12px 0;
}

.single-item-action {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 15px;
	margin-bottom: 20px;
	padding: 16px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
}

.cart-qty {
	border: 1px solid #ccc !important;
	padding: 8px 10px !important;
	border-radius: 30px !important;
	max-width: 170px !important;
}

.cart-qty button {
	color: #000 !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 4px 13px !important;
	background: transparent !important;
}

.cart-qty input {
	width: 50px;
	padding: 4px 13px;
	border-radius: 4px;
	border: none;
	background: transparent;
	color: var(--primary-color);
	text-align: center;
}

.single-item-price h4 span {
	color: var(--primary-color);
	font-weight: 600;
}

.single-item-price h4 del {
	color: #a1a1a1;
	font-size: 18px;
}

.single-item-price {
	margin-bottom: 15px;
}

.single-item-rating p {
	line-height: 26px;
}

.single-additional-info p {
	line-height: 26px;
}

.shop-left-sec {
	height: 550px;
}

.single-item-info p {
	line-height: 26px;
	margin-top: 8px;
}

.ship-dtl p i {
	color: var(--primary-color);
}

.ship-dtl p b {
	color: #000;
	font-weight: 400 !important;
}

.ship-dtl p {
	margin-bottom: 0;
}

.swiper-button-next,
.swiper-button-prev {
	color: var(--primary-color);
}

/****Cart page Start****/
.cart-summary-card {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
	z-index: 9;
}

.cart-item-card {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.cart-remove {
	color: red;
	transition: all 0.2s ease-in-out;
}

.cart-remove:hover {
	color: red;
	transform: rotate(10deg);
}

.cart-section-new .quantity-input {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fafafa;
	min-width: 140px;
	justify-content: space-between;
}

.cart-section-new .quantity-btn {
	background: var(--primary-color);
	border: none;
	width: 32px;
	height: 32px;
	font-size: 1.2rem;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}

.cart-section-new .quantity-btn:hover {
	background: var(--primary-color);
	color: #fff;
}

.cart-section-new .quantity-input input[type="number"] {
	width: 70px;
	border: none;
	text-align: center;
	background: transparent;
	font-weight: 600;
	color: #222;
}

input[type="number"] {
	-moz-appearance: textfield;
}

.quantity-btn {
	width: 32px;
	height: 32px;
	background: #000;
	border: none;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	color: #fff;
	transition: background 0.2s;
	border-radius: 50%;
}

.quantity-input {
	display: flex;
	align-items: center;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	width: 150px;
	background: #fff;
	justify-content: space-between;
	height: 40px;
	padding: 5px;
	border-radius: 20px;
}

.cart-img {
	width: 150px;
	height: 130px;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}

/****Cart page ennd****/

/*****Mobile Sidebar Start*****/
.mobile-profile {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
}

.mobile-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.head-user {
	font-size: 20px;
}

/***Mobile User Menu Start***/
.menu-btn {
	display: inline-block;
	background: hsla(0, 0%, 89%, 0.52);
	padding: 10px 10px;
	border-radius: 6px;
	font-size: 14px;
	text-transform: uppercase;
	color: #000;
}

.mobile-profile {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
	border: 2px solid #fff;
	min-width: 40px;
	min-height: 40px;
}

.mobile-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.side-bar-links {
	height: calc(100vh - 182px);
}

.side-link-list {
	padding: 0;
}

.side-link-list li {
	border-bottom: 1px solid #ececec;
}

.side-link-list li a {
	padding: 12px 14px;
	display: flex;
	font-size: 16px;
	color: #222;
	align-items: center;
	width: 100%;
	position: relative;
	transition: all 0.5s ease-in-out;
}

.side-link-list li a:hover {
	background: var(--primary-color);
	color: #fff;
}

.sider-card {
	background: var(--primary-color);
	padding: 20px 15px;
	position: relative;
}

.sider-card .btn-close {
	position: absolute;
	right: 20px;
	filter: brightness(0) invert(1);
	opacity: 1;
}

.side-profile-card {
	display: flex;
	align-items: center;
}

.profile-img {
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	border: 2px solid #fff;
	display: inline-block;
	margin-right: 15px;
}

.profile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.side-profile-dis p {
	color: #fff;
	font-size: 16px;
	margin-bottom: 4px;
}

.side-profile-dis h4 {
	margin-bottom: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}

.mobile-menu-card .offcanvas-body {
	padding: 0;
}

.side-link-list li a::after {
	content: "\f105";
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-size: 24px;
	color: var(--primary-color);
	position: absolute;
	right: 19px;
	top: 50%;
	transform: translateY(-50%);
}

.side-link-list li {
	border-bottom: 1px solid #ececec;
}

.side-bar-links {
	height: calc(100vh - 182px);
}

.bars-btn {
	width: 40px;
	height: 40px;
	display: inline-block;
	border-radius: 8px;
	text-align: center;
	line-height: 40px;
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: #fff;
	transition: all 0.5s ease-in-out;
}

.bars-btn:hover {
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--primary-color);
}

.dashboard_menu.mobile-dash-menu {
	border-radius: 0 !important;
	min-height: calc(100vh - 112px);
	overflow-y: scroll;
	background: #fff;
}

.dashboard_menu.mobile-dash-menu ul li a,
.dashboard_menu.mobile-dash-menu ul li a span {
	color: #000;
}

.dashboard_menu.mobile-dash-menu ul li a {
	border-bottom: 1px solid #c5c5c5;
	border-top: none;
}

.dashboard_menu.mobile-dash-menu ul li a.active,
.dashboard_menu.mobile-dash-menu ul li a:hover {
	background: var(--primary-color) !important;
	color: #fff !important;
}

.dashboard_menu.mobile-dash-menu ul li a.active span,
.dashboard_menu.mobile-dash-menu ul li a:hover span {
	color: #fff !important;
}

.mobile-profile {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
}

.mobile-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.filter-card {
	background: #fff;
	padding: 10px 14px;
	border-radius: 8px;
}

.filter-btn {
	width: 38px;
	height: 38px;
	display: inline-block;
	background: var(--primary-color);
	color: #fff;
	text-align: center;
	line-height: 38px;
	border-radius: 6px;
	border: 1px solid var(--primary-color);
	transition: all 0.5s ease-in-out;
}

.filter-btn:hover {
	background: var(--primary-color);
	color: #fff;
	opacity: 0.85;
}

#filtersExample .offcanvas-header {
	background: #f4f4f4;
}

/***Mobile User Menu End***/

/* =============== STATIC PAGES CSS STARTS HERE ===============*/
.pad-tb {
	padding-top: 80px;
	padding-bottom: 80px;
}

.inner-banner {
	width: 100%;
	height: auto;
	min-height: 250px;
	background-image: url("../img/inr-bnr-img.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
	background-color: rgba(0 0 0/ 50%);
	background-blend-mode: multiply;
	display: flex;
	align-items: center;
	justify-content: start;
}

.inner-banner h1 {
	font-size: 45px;
	line-height: 55px;
	color: #fff;
	font-weight: 700;
}

.inner-banner nav ol {
	margin: 0;
	padding: 0;
}

.inner-banner nav ol li {
	color: #fff;
	font-size: 16px;
}

.inner-banner nav ol li a {
	color: #fff;
}

.inner-banner nav ol li.breadcrumb-item.active {
	color: #fff !important;
}

.inner-banner .breadcrumb-item+.breadcrumb-item::before {
	color: #fff;
}

.about-sec .text-counter-box .check-list li:not(:last-child) {
	margin-bottom: 20px;
}

.about-sec .text-counter-box .check-list li {
	color: var(--black-color);
	font-weight: 500;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 1;
}

.about-sec .check-list li i {
	margin-right: 10px;
	color: var(--primary-color);
}

.about-sec .text-box p {
	font-size: 15px;
	line-height: 28px;
	color: #444;
}

.about-sec .image {
	width: 100%;
	height: 430px;
	min-height: 430px;
	border-radius: 10px;
}

.about-sec .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.about-sec .text-counter-box p {
	font-size: 15px;
	line-height: 28px;
	color: #444;
}

.about-sec .text-counter-box .year-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 10px;
	padding: 30px;
}

.about-sec .text-counter-box .year-box .number {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	max-width: 100px;
	margin-right: 20px;
}

.about-sec .text-counter-box .year-box .number h2 {
	font-size: 48px;
	line-height: 65px;
	margin: 0;
}

.about-sec .text-counter-box .year-box .content {
	max-width: 160px;
}

.about-sec .text-counter-box .year-box .content span {
	font-size: 20px;
	line-height: 30px;
	color: var(--black-color);
}

.about-sec .text-counter-box .year-box.bg_one {
	background-color: #e7e0ff;
}

.about-sec .text-counter-box .year-box.bg_two {
	background-color: #ffd0cc;
}

.work-sec {
	background-color: #eff3ff;
}

.work-sec .image {
	width: 100%;
	height: 300px;
	min-height: 300px;
	border-radius: 10px;
}

.work-sec .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.work-sec .content-box {
	padding-left: 80px;
}

.work-sec .content-box .work-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.work-sec .content-box .work-box .icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-right: 30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: var(--white-color);
	font-size: 30px;
}

.work-sec .content-box .work-box .content h4 {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 34px;
}

.work-sec .content-box .work-box .content p {
	font-size: 18px;
	line-height: 30px;
	margin: 0;
}

.team-item .member-image {
	width: 100%;
	height: 365px;
	min-height: 365px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.team-item .member-image img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

.team-item .member-image .hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(64.97%, rgba(5, 27, 46, 0)), to(#051b2e));
	background: linear-gradient(180deg, rgba(5, 27, 46, 0) 64.97%, #051b2e 100%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	visibility: hidden;
	opacity: 0;
}

.team-item:hover .member-image .hover-overlay {
	visibility: visible;
	opacity: 1;
}

.team-item:hover .member-image .social-box {
	bottom: 30px;
}

.team-item .member-image .social-box a:hover {
	background-color: var(--white-color);
	color: var(--primary-color);
	border-color: transparent;
}

.team-item .member-image .social-box {
	position: absolute;
	bottom: -50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.team-item .member-image .social-box a {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	font-size: 14px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border: 1px solid var(--white-color);
	color: var(--white-color);
	margin-left: 5px;
	margin-right: 5px;
}

.team-item .member-info {
	padding-top: 25px;
}

.team-item .member-info h4 {
	margin-bottom: 5px;
	font-size: 24px;
	line-height: 34px;
}

.team-item .member-info h4 a {
	color: var(--black-color) !important;
}

.contact-top .contact-box {
	width: 100%;
	height: calc(100% - 20px);
	margin-bottom: 20px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 30px;
	border-radius: 4px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.contact-top .contact-box .icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.contact-top .contact-box .details h4 {
	font-size: 18px;
	line-height: 28px;
	color: var(--black-color);
	font-weight: 600;
}

.contact-top .contact-box .details p {
	font-size: 14px;
	line-height: 26px;
	color: #444;
	font-weight: 400;
	margin-bottom: 0 !important;
}

.contact-top .contact-box .details p a {
	color: #444;
}

.contact-top .contact-box .details p a:hover {
	color: var(--secondary-color);
}

.contact-form-outer {
	width: 100%;
	height: auto;
	padding: 30px;
	border-radius: 4px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#contact-form-submit {
	padding: 13px 25px !important;
	font-size: 16px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color) !important;
	border: none !important;
	border-radius: 4px !important;
	color: #fff !important;
	width: max-content !important;
}

#contact-form-submit:hover {
	background-color: var(--secondary-color) !important;
}

.iti {
	width: 100%;
}

.site-term-policy h1,
.site-term-policy h2,
.site-term-policy h3,
.site-term-policy h4,
.site-term-policy h5,
.site-term-policy h6 {
	font-size: 32px;
	line-height: 42px;
	color: var(--black-color);
	font-weight: 600;
}

.site-term-policy p,
.site-term-policy ul li {
	font-size: 14px;
	line-height: 26px;
	color: #444;
	font-weight: 400;
}

.contact-form .form-control,
.contact-form .form-select {
	width: 100%;
	min-height: 50px;
	border: 1px solid #ebebeb !important;
	box-shadow: none !important;
	border-radius: 4px !important;
}

/* =============== STATIC PAGES CSS ENDS HERE ===============*/

/* =============== PATIENT REGISTRATION PAGES CSS START HERE ===============*/
.doctor-dash .custom-tabs {
	border: 0 !important;
	margin-bottom: 25px;
	gap: 10px;
	flex-wrap: wrap;
}

.doctor-dash .custom-tabs .nav-link {
	border: none;
	color: var(--primary-color);
	padding: 10px 16px;
	border-radius: 6px;
	border: 1px solid var(--primary-color);
}

.doctor-dash .custom-tabs .nav-link.active {
	background-color: var(--primary-color);
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doctor-dash .custom-radio-group {
	display: flex;
	gap: 20px;
	margin-top: 8px;
}

.doctor-dash .custom-radio-group label {
	font-weight: 500;
}

.doctor-dash .profile-preview {
	width: 96px;
	height: 96px;
	background-color: #e9ecef;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.doctor-dash .btn-upload {
	display: inline-block;
	background-color: var(--primary-color);
	color: #fff;
	padding: 6px 16px;
	border-radius: 4px;
	cursor: pointer;
}

.doctor-dash .text-note {
	font-size: 12px;
	color: #444;
}

.doctor-dash .doc-bx img {
	width: 100%;
	height: 250px;
	min-height: 250px;
	object-fit: cover;
	border-radius: 8px;
}

.common-form .form-group {
	margin-bottom: 20px;
}

input#inputGroupFile01 {
	opacity: 0;
	height: 100%;
}

.upload-cntnt-card {
	border: 2px dashed var(--primary-color);
	height: 150px;
	border-radius: 8px;
	position: relative;
	margin-bottom: 12px;
	margin-top: 12px;
}

.form-control[type=file]:not(:disabled):not([readonly]) {
	cursor: pointer;
}

.upload-content-here {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.upload-content-here h4 {
	font-size: 24px;
	margin-bottom: 0;
	font-weight: 600;
}

.upload-cntnt-view {
	padding: 10px 10px;
	border: 2px dashed #ddd;
	border-radius: 4px;
}

.upload-icn-view {
	display: flex;
	align-items: center;
}

.upload-icn-view img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 4px;
}

.upload-icn-view h4 {
	margin-bottom: 0;
	font-size: 16px;
}

.trash-btn {
	display: inline-block;
	color: #f84545;
	padding: 6px 12px;
	background: #f84545;
	border-radius: 4px;
	color: #eee;
}

.trash-btn:hover {
	color: #fff;
	background: #fc3838;
}

.registration-doc-img {
	height: 150px;
	max-height: 150px;
	overflow: hidden;
	width: 100%;
	border-radius: 5px;
}

.registration-doc-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


button.btn.btn-default.btn-outline-secondary.fileinput-upload.fileinput-upload-button {
	display: none !important;
}

/* =============== PATIENT REGISTRATION PAGES CSS END HERE ===============*/

/* =============== MULTI STEP FORM CSS END START ===============*/
.step-indicator {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #ddd;
	color: #555;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	user-select: none;
	transition: background-color 0.3s, color 0.3s;
}

.step-indicator.first {
	background: var(--primary-color);
	color: white;
}

.step-indicator.active {
	background: var(--primary-color);
	color: white;
}

.progress-container {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
}

.progress-line {
	position: absolute;
	top: 50%;
	left: 15px;
	right: 15px;
	height: 4px;
	background: #ddd;
	transform: translateY(-50%);
	border-radius: 2px;
	z-index: 0;
}

.progress-line-filled {
	position: absolute;
	top: 50%;
	left: 15px;
	height: 4px;
	background: var(--primary-color);
	transform: translateY(-50%);
	border-radius: 2px;
	z-index: 0;
	transition: width 0.3s ease;
}

/* =============== MULTI STEP FORM CSS END END ===============*/
.checkbox-animate {
	display: flex;
	align-items: center;
	font-size: 15px;
	margin-bottom: 8px;
}

.checkbox-animate .form-check {
	padding-left: 0 !important;
}

.checkbox-animate input {
	position: absolute;
	opacity: 0;
}

.checkbox-animate label {
	position: relative;
	cursor: pointer;
	padding-left: 32px;
	/* leave space for fake box */
}

/* The custom box */
.checkbox-animate-remove label::before {
	content: none !important;
}

.checkbox-animate-remove label {
	position: relative;
	cursor: pointer;
	padding-left: 0px;
	/* leave space for fake box */
}

.checkbox-animate label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border: 2px solid #ccc;
	border-radius: 4px;
	transition: 0.4s;
}

/* The checkmark */
.checkbox-animate label::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	width: 13px;
	height: 6px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: scale(0) rotate(-45deg);
	transition: 0.3s;
}

/* When checked */
.checkbox-animate input:checked+label::before {
	background: var(--primary-color);
	border-color: var(--primary-color);
	animation: input-animate 0.7s;
}

.checkbox-animate input:checked+label::after {
	transform: scale(1) rotate(-45deg);
	animation: input-check 0.2s 0.3s forwards;
}

/* Animations */
@keyframes input-animate {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1 .3, 0 .7);
	}

	55% {
		transform: scale(1);
	}

	70% {
		transform: scale(1 .2, 0 .8);
	}

	80% {
		transform: scale(1);
	}

	90% {
		transform: scale(1 .1, 0 .9);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes input-check {
	0% {
		transform: scale(0) rotate(-45deg);
	}

	100% {
		transform: scale(1) rotate(-45deg);
	}
}

.required label::after {
	content: "*";
	color: red;
	margin-left: 3px;
}

.treatment-type-select .form-check label:has(input:checked) {
	background-color: #06605b;
	color: #fff;
}

#sub-slots {
	text-align: center;
	display: flex;
	align-items: center;
	gap: 15px;
	flex-flow: wrap;
}

#sub-slots .form-check {
	padding-left: 0px;
}

#sub-slots .form-check input {
	opacity: 0;
}

#sub-slots .form-check label {
	padding: 12px;
	border: 1px solid #eee;
	border-radius: 5px;
}

#sub-slots .form-check input[type=radio]:checked+label {
	background-color: #06605b;
	color: #fff;
}

.field-deliveryaddress-contact_no #deliveryaddress-contact_no {
	padding-left: 80px !important;
}
.video-call-wrapper {
	overflow: hidden !important;
	background-color: #000;
	width: 100%;
	height: calc(100vh - 155px);
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
}
.video-call-wrapper>.video-call-controls-wrapper {
	bottom: 20px !important;
}

.video-call-controls-wrapper {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -120px;
	width: fit-content;
	transition: all 0.2s;
	z-index: 10;
}

.call-controls {
	padding: 10px 30px;
	border-radius: 12px;
}

.call-controls button:nth-child(1) {
	transform: rotate(135deg);
}
.video_sec{
	padding:40px 0px;
}
.call-controls button {
	background: red;
	border: none;
	color: white;
	padding: 10px;
	border-radius: 100px;
	height: 40px;
	width: 40px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
#user_count p {
	color: #fff;
}
.call-recived-modal-bg {
	background-color: rgba(0, 0, 0, 0.75);
	justify-content: center;
	align-items: center;
	display: flex;
	z-index: 10;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
}
#whiteboard-btn {
	position: absolute;
	right: 10px;
	top: 10px;
}
.call-recieved-wrapper {
	width: 327px;
	min-height: 65%;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 10px;
	color: white;
	box-shadow: 0 .5rem 1rem rgba(255, 255, 255, 0.15) !important;
	border: 1px solid black;
	position: relative;
}

.caller-img {
	height: 150px;
	width: 150px;
	margin: 0 auto;
	margin-top: 50px;
	position: relative;
	display: flex;
}

.caller-img img {
	border-radius: 400px;
	z-index: 2;
}

.caller-img-bg {
	background-color: white;
	background: white;
	color: #fff;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 1;
	border-radius: 50%;
	height: 100%;
	width: 100%;
	animation: 0.6s pulse infinite;
}

@keyframes pulse {
	from {
		transform: none;
		opacity: 0.7;
	}

	to {
		transform: scale(1.5);
		opacity: 0;
	}

}

.caller-name {
	color: white;
	font-size: 20px;
	text-align: center;
}

.caller-name span:nth-child(2) {
	color: #c9ff0a;
	font-size: 15px;
	display: block;
}

.call-recieved-controls-wrapper {
	position: absolute;
	bottom: 20px;
	right: 0;
	left: 0;
	text-align: center;
}

.call-recieved-controls a {
	background: none;
	border: none;
	color: white;
	height: 50px;
	width: 50px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.call-recieved-controls a:nth-child(2) {
	background: #ff1616;
}

.call-recieved-controls a:nth-child(1) {
	background: #77ac29;
	margin: 0 25px;
}