<?php
require_once __DIR__ . '/admin_page_header.php';




?><?php require_once __DIR__ . '/../header.php'; ?>
<style>
	.plugin-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 64px;
		background: #F4F4F4;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20px;
		padding-right: 40px;
	}

	.container>h2 {
		font-family: "Lato";
		font-weight: 700;
		font-size: 24px;
		line-height: 30px;
		margin-top: 64px;
	}

	.nav-link-line {
		position: relative;
		align-items: center;
		gap: 30px;
	}

	.nav-link-line:after {
		background-color: #e2e2e3;
		content: "";
		display: inline-block;
		height: 2px;
		position: absolute;
		top: 25px;
		width: 100%;
	}

	.nav-link-line>.nav-link-page>.side-menu__label {
		cursor: pointer;
		font-family: Lato !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 14px !important;
		text-decoration: none !important;
		color: #4e4e4e !important;
	}

	.nav-link-line>.nav-link-page>.side-menu__label:hover {
		color: #f98ab1 !important;
		transition: all 0.4s;
	}

	.nav-link-line>.active {
		background: none !important;
		padding: 0 !important;
		margin: 0 10px 0 10px !important;
		border: none;
		border-radius: 0 !important;
		display: flex;
		height: auto;
		font-weight: 700 !important;
	}

	.nav-link-line>.active>.side-menu__label {
		color: #f98ab1 !important;
		position: relative;
	}

	.nav-link-line>.active>.side-menu__label:before {
		background-color: #f98ab1;
		content: "";
		display: inline-block;
		height: 2px;
		position: absolute;
		top: 25px;
		width: 100%;
		z-index: 1000;
	}

	.container {
		padding: 40px !important;
		padding-top: 20px !important;
	}

	.user-notiflications,
	.user-img-header {
		cursor: pointer;
	}


	.my_acc_popup {
		position: fixed;
		width: 20%;
		border: 1px solid #D4D4D5;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		z-index: 100000;
		background: #FFF;
		top: -1000px;
		transition: all 0.4s;
		right: 80px;
		justify-content: space-between;
	}

	.my_acc_popup_active {
		top: 70px;
	}

	.name_acc {
		margin-bottom: 15px;
		font-weight: 700;
		font-size: 18px;
		line-height: 23px;
		color: #000;
		opacity: 0.9;
	}

	.email_acc {
		margin-bottom: 15px;
		font-size: 14px;
		line-height: 16px;
		font-weight: 400;
		color: #000;
		opacity: 0.4;
	}

	.manage_acc {
		color: #000;
		opacity: 0.8;
		font-size: 14px;
		line-height: 18px;
		text-decoration: underline;
	}

	.gap-15 {
		gap: 15px;
	}

	.log-out {
		padding: 15px 0 25px 25px;
		border: 1px solid #707070;
		margin: 0;
		transition: all 0.4s;
	}

	.log-out:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.log-out-link {
		font-size: 14px;
		line-height: 18px;
		font-weight: 400;
		color: #000;
		opacity: 0.9;
		text-decoration: none;
		transition: all 0.4s;
	}

	.log-out-link:hover {
		color: #f98ab1 !important;
	}

	.user-img-header {
		cursor: pointer;
	}

	.notiflication-title {
		color: #FFFFFF;
		opacity: 0.9;
		font-size: 24px;
		line-height: 30px;
		font-weight: 700;
		margin-bottom: 15px;
	}

	.notiflication-tab {
		background-color: #FFF;
		border: 1px solid #D4D4D5;
		margin-bottom: 15px;
		border-radius: 6px;
		height: auto;
		min-height: 428px;
		position: relative;
	}

	.notiflication-tab-content {
		padding: 20px 60px 15px 10px;
	}

	.tab-content-title {
		font-weight: 700;
		font-size: 18px;
		line-height: 23px;
		color: #000;
		opacity: 0.9;
		margin-bottom: 25px;
	}

	h2,
	p {
		margin: 0;
	}

	.tab-content-text {
		font-size: 14px;
		font-weight: 400;
		line-height: 18px;
		color: #000;
		opacity: 0.8;
		margin-bottom: 55px;
	}

	.op-40 {
		opacity: 0.4;
	}

	.mb-1 {
		margin-bottom: 0.5em;
	}

	.tab-content-line {
		border-top: 1px solid #DADADB;
		margin-top: -55px;
	}

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

	a:hover {
		color: inherit;
	}

	.tab-content-nav {
		padding-left: 25px;
		padding-bottom: 30px;
		position: absolute;
		bottom: 0;
		display: flex;
		gap: 45px;
	}

	.content-nav-link {
		font-size: 16px;
		line-height: 24px;
		font-weight: 400;
		color: #707070;
		transition: all 0.4s;
	}

	.adjust-goals {
		color: #F98AB1;
	}

	.content-nav-link:hover {
		color: #F98AB1;
	}

	.notiflication-body.notiflication-body-active::-webkit-scrollbar {
		width: 0px;
		background: rgba(255, 255, 255, 0.0);
	}

	.notiflication-body {
		background-color: #42273A;
		padding: 30px 20px 70px 20px;
		width: 21%;
		min-height: 100vh;
		position: fixed;
		overflow-y: auto;
		top: 70px;
		bottom: 0;
		right: 100%;
		z-index: 100000;
		transition: all 0.4s;
	}

	.notiflication-body-active {
		right: 500px;
	}

	.gap-15>.user-img-header {
		width: 39px;
		height: 39px;
		border-radius: 50%;
	}

	.circle-gal-menu {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.woocommerce-filters .components-popover {
		position: fixed;
	}

	.PresetDateRangePicker_panel {
		padding: 0 22px 11px
	}

	.PresetDateRangePicker_button {
		position: relative;
		height: 100%;
		text-align: center;
		background: 0 0;
		border: 2px solid #00a699;
		color: #00a699;
		padding: 4px 12px;
		margin-right: 8px;
		font: inherit;
		font-weight: 700;
		line-height: normal;
		overflow: visible;
		box-sizing: border-box;
		cursor: pointer
	}

	.PresetDateRangePicker_button:active {
		outline: 0
	}

	.PresetDateRangePicker_button__selected {
		color: #fff;
		background: #00a699
	}

	.SingleDatePickerInput {
		display: inline-block;
		background-color: #fff
	}

	.SingleDatePickerInput__withBorder {
		border-radius: 2px;
		border: 1px solid #dbdbdb
	}

	.SingleDatePickerInput__rtl {
		direction: rtl
	}

	.SingleDatePickerInput__disabled {
		background-color: #f2f2f2
	}

	.SingleDatePickerInput__block {
		display: block
	}

	.SingleDatePickerInput__showClearDate {
		padding-right: 30px
	}

	.SingleDatePickerInput_clearDate {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		padding: 10px;
		margin: 0 10px 0 5px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%)
	}

	.SingleDatePickerInput_clearDate__default:focus,
	.SingleDatePickerInput_clearDate__default:hover {
		background: #dbdbdb;
		border-radius: 50%
	}

	.SingleDatePickerInput_clearDate__small {
		padding: 6px
	}

	.SingleDatePickerInput_clearDate__hide {
		visibility: hidden
	}

	.SingleDatePickerInput_clearDate_svg {
		fill: #82888a;
		height: 12px;
		width: 15px;
		vertical-align: middle
	}

	.SingleDatePickerInput_clearDate_svg__small {
		height: 9px
	}

	.SingleDatePickerInput_calendarIcon {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		display: inline-block;
		vertical-align: middle;
		padding: 10px;
		margin: 0 5px 0 10px
	}

	.SingleDatePickerInput_calendarIcon_svg {
		fill: #82888a;
		height: 15px;
		width: 14px;
		vertical-align: middle
	}

	.SingleDatePicker {
		position: relative;
		display: inline-block
	}

	.SingleDatePicker__block {
		display: block
	}

	.SingleDatePicker_picker {
		z-index: 1;
		background-color: #fff;
		position: absolute
	}

	.SingleDatePicker_picker__rtl {
		direction: rtl
	}

	.SingleDatePicker_picker__directionLeft {
		left: 0
	}

	.SingleDatePicker_picker__directionRight {
		right: 0
	}

	.SingleDatePicker_picker__portal {
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%
	}

	.SingleDatePicker_picker__fullScreenPortal {
		background-color: #fff
	}

	.SingleDatePicker_closeButton {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		padding: 15px;
		z-index: 2
	}

	.SingleDatePicker_closeButton:focus,
	.SingleDatePicker_closeButton:hover {
		color: #b0b3b4;
		text-decoration: none
	}

	.SingleDatePicker_closeButton_svg {
		height: 15px;
		width: 15px;
		fill: #cacccd
	}

	.DayPickerKeyboardShortcuts_buttonReset {
		background: 0 0;
		border: 0;
		border-radius: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		padding: 0;
		cursor: pointer;
		font-size: 14px
	}

	.DayPickerKeyboardShortcuts_buttonReset:active {
		outline: 0
	}

	.DayPickerKeyboardShortcuts_show {
		width: 22px;
		position: absolute;
		z-index: 2
	}

	.DayPickerKeyboardShortcuts_show__bottomRight {
		border-top: 26px solid transparent;
		border-right: 33px solid #00a699;
		bottom: 0;
		right: 0
	}

	.DayPickerKeyboardShortcuts_show__bottomRight:hover {
		border-right: 33px solid #008489
	}

	.DayPickerKeyboardShortcuts_show__topRight {
		border-bottom: 26px solid transparent;
		border-right: 33px solid #00a699;
		top: 0;
		right: 0
	}

	.DayPickerKeyboardShortcuts_show__topRight:hover {
		border-right: 33px solid #008489
	}

	.DayPickerKeyboardShortcuts_show__topLeft {
		border-bottom: 26px solid transparent;
		border-left: 33px solid #00a699;
		top: 0;
		left: 0
	}

	.DayPickerKeyboardShortcuts_show__topLeft:hover {
		border-left: 33px solid #008489
	}

	.DayPickerKeyboardShortcuts_showSpan {
		color: #fff;
		position: absolute
	}

	.DayPickerKeyboardShortcuts_showSpan__bottomRight {
		bottom: 0;
		right: -28px
	}

	.DayPickerKeyboardShortcuts_showSpan__topRight {
		top: 1px;
		right: -28px
	}

	.DayPickerKeyboardShortcuts_showSpan__topLeft {
		top: 1px;
		left: -28px
	}

	.DayPickerKeyboardShortcuts_panel {
		overflow: auto;
		background: #fff;
		border: 1px solid #dbdbdb;
		border-radius: 2px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 2;
		padding: 22px;
		margin: 33px
	}

	.DayPickerKeyboardShortcuts_title {
		font-size: 16px;
		font-weight: 700;
		margin: 0
	}

	.DayPickerKeyboardShortcuts_list {
		list-style: none;
		padding: 0;
		font-size: 14px
	}

	.DayPickerKeyboardShortcuts_close {
		position: absolute;
		right: 22px;
		top: 22px;
		z-index: 2
	}

	.DayPickerKeyboardShortcuts_close:active {
		outline: 0
	}

	.DayPickerKeyboardShortcuts_closeSvg {
		height: 15px;
		width: 15px;
		fill: #cacccd
	}

	.DayPickerKeyboardShortcuts_closeSvg:focus,
	.DayPickerKeyboardShortcuts_closeSvg:hover {
		fill: #82888a
	}

	.CalendarDay {
		box-sizing: border-box;
		cursor: pointer;
		font-size: 14px;
		text-align: center
	}

	.CalendarDay:active {
		outline: 0
	}

	.CalendarDay__defaultCursor {
		cursor: default
	}

	.CalendarDay__default {
		border: 1px solid #e4e7e7;
		color: #484848;
		background: #fff
	}

	.CalendarDay__default:hover {
		background: #e4e7e7;
		border: 1px double #e4e7e7;
		color: inherit
	}

	.CalendarDay__hovered_offset {
		background: #f4f5f5;
		border: 1px double #e4e7e7;
		color: inherit
	}

	.CalendarDay__outside {
		border: 0;
		background: #fff;
		color: #484848
	}

	.CalendarDay__outside:hover {
		border: 0
	}

	.CalendarDay__blocked_minimum_nights {
		background: #fff;
		border: 1px solid #eceeee;
		color: #cacccd
	}

	.CalendarDay__blocked_minimum_nights:active,
	.CalendarDay__blocked_minimum_nights:hover {
		background: #fff;
		color: #cacccd
	}

	.CalendarDay__highlighted_calendar {
		background: #ffe8bc;
		color: #484848
	}

	.CalendarDay__highlighted_calendar:active,
	.CalendarDay__highlighted_calendar:hover {
		background: #ffce71;
		color: #484848
	}

	.CalendarDay__selected_span {
		background: #66e2da;
		border: 1px solid #33dacd;
		color: #fff
	}

	.CalendarDay__selected_span:active,
	.CalendarDay__selected_span:hover {
		background: #33dacd;
		border: 1px solid #33dacd;
		color: #fff
	}

	.CalendarDay__last_in_range {
		border-right: #00a699
	}

	.CalendarDay__selected,
	.CalendarDay__selected:active,
	.CalendarDay__selected:hover {
		background: #00a699;
		border: 1px solid #00a699;
		color: #fff
	}

	.CalendarDay__hovered_span,
	.CalendarDay__hovered_span:hover {
		background: #b2f1ec;
		border: 1px solid #80e8e0;
		color: #007a87
	}

	.CalendarDay__hovered_span:active {
		background: #80e8e0;
		border: 1px solid #80e8e0;
		color: #007a87
	}

	.CalendarDay__blocked_calendar,
	.CalendarDay__blocked_calendar:active,
	.CalendarDay__blocked_calendar:hover {
		background: #cacccd;
		border: 1px solid #cacccd;
		color: #82888a
	}

	.CalendarDay__blocked_out_of_range,
	.CalendarDay__blocked_out_of_range:active,
	.CalendarDay__blocked_out_of_range:hover {
		background: #fff;
		border: 1px solid #e4e7e7;
		color: #cacccd
	}

	.CalendarMonth {
		background: #fff;
		text-align: center;
		vertical-align: top;
		-webkit-user-select: none;
		user-select: none
	}

	.CalendarMonth_table {
		border-collapse: collapse;
		border-spacing: 0
	}

	.CalendarMonth_verticalSpacing {
		border-collapse: separate
	}

	.CalendarMonth_caption {
		color: #484848;
		font-size: 18px;
		text-align: center;
		padding-top: 22px;
		padding-bottom: 37px;
		caption-side: top
	}

	.CalendarMonth_caption__verticalScrollable {
		padding-top: 12px;
		padding-bottom: 7px
	}

	.CalendarMonthGrid {
		background: #fff;
		text-align: left;
		z-index: 0
	}

	.CalendarMonthGrid__animating {
		z-index: 1
	}

	.CalendarMonthGrid__horizontal {
		position: absolute;
		left: 0
	}

	.CalendarMonthGrid__vertical {
		margin: 0 auto
	}

	.CalendarMonthGrid__vertical_scrollable {
		margin: 0 auto;
		overflow-y: scroll
	}

	.CalendarMonthGrid_month__horizontal {
		display: inline-block;
		vertical-align: top;
		min-height: 100%
	}

	.CalendarMonthGrid_month__hideForAnimation {
		position: absolute;
		z-index: -1;
		opacity: 0;
		pointer-events: none
	}

	.CalendarMonthGrid_month__hidden {
		visibility: hidden
	}

	.DayPickerNavigation {
		position: relative;
		z-index: 2
	}

	.DayPickerNavigation__horizontal {
		height: 0
	}

	.DayPickerNavigation__verticalDefault {
		position: absolute;
		width: 100%;
		height: 52px;
		bottom: 0;
		left: 0
	}

	.DayPickerNavigation__verticalScrollableDefault {
		position: relative
	}

	.DayPickerNavigation_button {
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		border: 0;
		padding: 0;
		margin: 0
	}

	.DayPickerNavigation_button__default {
		border: 1px solid #e4e7e7;
		background-color: #fff;
		color: #757575
	}

	.DayPickerNavigation_button__default:focus,
	.DayPickerNavigation_button__default:hover {
		border: 1px solid #c4c4c4
	}

	.DayPickerNavigation_button__default:active {
		background: #f2f2f2
	}

	.DayPickerNavigation_button__horizontalDefault {
		position: absolute;
		top: 18px;
		line-height: .78;
		border-radius: 3px;
		padding: 6px 9px
	}

	.DayPickerNavigation_leftButton__horizontalDefault {
		left: 22px
	}

	.DayPickerNavigation_rightButton__horizontalDefault {
		right: 22px
	}

	.DayPickerNavigation_button__verticalDefault {
		padding: 5px;
		background: #fff;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);
		position: relative;
		display: inline-block;
		height: 100%;
		width: 50%
	}

	.DayPickerNavigation_nextButton__verticalDefault {
		border-left: 0
	}

	.DayPickerNavigation_nextButton__verticalScrollableDefault {
		width: 100%
	}

	.DayPickerNavigation_svg__horizontal {
		height: 19px;
		width: 19px;
		fill: #82888a;
		display: block
	}

	.DayPickerNavigation_svg__vertical {
		height: 42px;
		width: 42px;
		fill: #484848;
		display: block
	}

	.DayPicker {
		position: relative;
		text-align: left
	}

	.DayPicker,
	.DayPicker__horizontal {
		background: #fff
	}

	.DayPicker__verticalScrollable {
		height: 100%
	}

	.DayPicker__hidden {
		visibility: hidden
	}

	.DayPicker__withBorder {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .07);
		border-radius: 3px
	}

	.DayPicker_portal__horizontal {
		box-shadow: none;
		position: absolute;
		left: 50%;
		top: 50%
	}

	.DayPicker_portal__vertical {
		position: static
	}

	.DayPicker_focusRegion {
		outline: 0
	}

	.DayPicker_calendarInfo__horizontal,
	.DayPicker_wrapper__horizontal {
		display: inline-block;
		vertical-align: top
	}

	.DayPicker_weekHeaders {
		position: relative
	}

	.DayPicker_weekHeaders__horizontal {
		margin-left: 13px
	}

	.DayPicker_weekHeader {
		color: #757575;
		position: absolute;
		top: 62px;
		z-index: 2;
		text-align: left;
		padding: 0 !important
	}

	.DayPicker_weekHeader__vertical {
		left: 50%
	}

	.DayPicker_weekHeader__verticalScrollable {
		top: 0;
		display: table-row;
		border-bottom: 1px solid #dbdbdb;
		background: #fff;
		margin-left: 0;
		left: 0;
		width: 100%;
		text-align: center
	}

	.DayPicker_weekHeader_ul {
		list-style: none;
		margin: 1px 0;
		padding-left: 0;
		padding-right: 0;
		font-size: 14px
	}

	.DayPicker_weekHeader_li {
		display: inline-block;
		text-align: center;
		margin: 0 1px
	}

	.DayPicker_transitionContainer {
		position: relative;
		overflow: hidden;
		border-radius: 3px
	}

	.DayPicker_transitionContainer__horizontal {
		transition: height .2s ease-in-out
	}

	.DayPicker_transitionContainer__vertical {
		width: 100%
	}

	.DayPicker_transitionContainer__verticalScrollable {
		padding-top: 20px;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		overflow-y: scroll
	}

	.DateInput {
		margin: 0;
		padding: 0;
		background: #fff;
		position: relative;
		display: inline-block;
		width: 130px;
		vertical-align: middle
	}

	.DateInput__small {
		width: 97px
	}

	.DateInput__block {
		width: 100%
	}

	.DateInput__disabled {
		background: #f2f2f2;
		color: #dbdbdb
	}

	.DateInput_input {
		font-weight: 200;
		font-size: 19px;
		line-height: 24px;
		color: #484848;
		background-color: #fff;
		width: 100%;
		padding: 11px 11px 9px;
		border: 0;
		border-bottom: 2px solid transparent;
		border-radius: 0
	}

	.DateInput_input__small {
		font-size: 15px;
		line-height: 18px;
		letter-spacing: .2px;
		padding: 7px 7px 5px
	}

	.DateInput_input__regular {
		font-weight: auto
	}

	.DateInput_input__readOnly {
		-webkit-user-select: none;
		user-select: none
	}

	.DateInput_input__focused {
		outline: 0;
		background: #fff;
		border: 0;
		border-bottom: 2px solid #008489
	}

	.DateInput_input__disabled {
		background: #f2f2f2;
		font-style: italic
	}

	.DateInput_screenReaderMessage {
		border: 0;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px
	}

	.DateInput_fang {
		position: absolute;
		width: 20px;
		height: 10px;
		left: 22px;
		z-index: 2
	}

	.DateInput_fangShape {
		fill: #fff
	}

	.DateInput_fangStroke {
		stroke: #dbdbdb;
		fill: transparent
	}

	.DateRangePickerInput {
		background-color: #fff;
		display: inline-block
	}

	.DateRangePickerInput__disabled {
		background: #f2f2f2
	}

	.DateRangePickerInput__withBorder {
		border-radius: 2px;
		border: 1px solid #dbdbdb
	}

	.DateRangePickerInput__rtl {
		direction: rtl
	}

	.DateRangePickerInput__block {
		display: block
	}

	.DateRangePickerInput__showClearDates {
		padding-right: 30px
	}

	.DateRangePickerInput_arrow {
		display: inline-block;
		vertical-align: middle;
		color: #484848
	}

	.DateRangePickerInput_arrow_svg {
		vertical-align: middle;
		fill: #484848;
		height: 24px;
		width: 24px
	}

	.DateRangePickerInput_clearDates {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		padding: 10px;
		margin: 0 10px 0 5px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%)
	}

	.DateRangePickerInput_clearDates__small {
		padding: 6px
	}

	.DateRangePickerInput_clearDates_default:focus,
	.DateRangePickerInput_clearDates_default:hover {
		background: #dbdbdb;
		border-radius: 50%
	}

	.DateRangePickerInput_clearDates__hide {
		visibility: hidden
	}

	.DateRangePickerInput_clearDates_svg {
		fill: #82888a;
		height: 12px;
		width: 15px;
		vertical-align: middle
	}

	.DateRangePickerInput_clearDates_svg__small {
		height: 9px
	}

	.DateRangePickerInput_calendarIcon {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		display: inline-block;
		vertical-align: middle;
		padding: 10px;
		margin: 0 5px 0 10px
	}

	.DateRangePickerInput_calendarIcon_svg {
		fill: #82888a;
		height: 15px;
		width: 14px;
		vertical-align: middle
	}

	.DateRangePicker {
		position: relative;
		display: inline-block
	}

	.DateRangePicker__block {
		display: block
	}

	.DateRangePicker_picker {
		z-index: 1;
		background-color: #fff;
		position: absolute
	}

	.DateRangePicker_picker__rtl {
		direction: rtl
	}

	.DateRangePicker_picker__directionLeft {
		left: 0
	}

	.DateRangePicker_picker__directionRight {
		right: 0
	}

	.DateRangePicker_picker__portal {
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%
	}

	.DateRangePicker_picker__fullScreenPortal {
		background-color: #fff
	}

	.DateRangePicker_closeButton {
		background: 0 0;
		border: 0;
		color: inherit;
		font: inherit;
		line-height: normal;
		overflow: visible;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		padding: 15px;
		z-index: 2
	}

	.DateRangePicker_closeButton:focus,
	.DateRangePicker_closeButton:hover {
		color: #b0b3b4;
		text-decoration: none
	}

	.DateRangePicker_closeButton_svg {
		height: 15px;
		width: 15px;
		fill: #cacccd
	}

	.components-datetime {
		padding: 16px
	}

	.components-panel__body .components-datetime {
		padding: 0
	}

	.components-datetime .components-datetime__calendar-help {
		padding: 16px;
		min-width: 260px
	}

	.components-datetime .components-datetime__calendar-help h4 {
		margin: 0
	}

	.components-datetime .components-datetime__buttons {
		display: flex;
		justify-content: space-between
	}

	.components-datetime .components-datetime__date-help-toggle {
		display: block;
		margin-left: auto
	}

	.components-datetime fieldset {
		border: 0;
		padding: 0;
		margin: 0
	}

	.components-datetime input,
	.components-datetime select {
		box-shadow: 0 0 0 transparent;
		transition: box-shadow .1s linear;
		border-radius: 2px;
		border: 1px solid #757575
	}

	@media (prefers-reduced-motion:reduce) {

		.components-datetime input,
		.components-datetime select {
			transition-duration: 0s;
			transition-delay: 0s
		}
	}

	.components-datetime .components-button,
	.components-datetime input[type=number],
	.components-datetime select {
		height: 30px;
		margin-top: 0;
		margin-bottom: 0
	}

	.components-datetime .components-button:focus {
		z-index: 1
	}

	.components-datetime__date {
		min-height: 236px;
		border-top: 1px solid #ddd
	}

	.components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault {
		/*!rtl:begin:ignore*/
		left: 13px
			/*!rtl:end:ignore*/
	}

	.components-datetime__date .CalendarMonth_caption {
		font-size: 13px
	}

	.components-datetime__date .CalendarMonth_table {
		border-collapse: separate;
		border-spacing: 2px
	}

	.components-datetime__date .CalendarDay {
		font-size: 13px;
		border: none;
		border-radius: 50%;
		text-align: center
	}

	.components-datetime__date .CalendarDay:focus {
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
		outline: 2px solid transparent
	}

	.components-datetime__date .CalendarDay__selected {
		background: var(--wp-admin-theme-color);
		border: 2px solid transparent
	}

	.components-datetime__date .CalendarDay__selected:hover {
		background: var(--wp-admin-theme-color-darker-20)
	}

	.components-datetime__date .CalendarDay__selected:focus {
		box-shadow: inset 0 0 0 1px #fff
	}

	.components-datetime__date .DayPickerNavigation_button__horizontalDefault {
		padding: 2px 8px;
		top: 20px
	}

	.components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus {
		border-color: var(--wp-admin-theme-color);
		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
		outline: 2px solid transparent
	}

	.components-datetime__date .DayPicker_weekHeader {
		top: 50px
	}

	.components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul {
		margin: 1px;
		padding-left: 0;
		padding-right: 0
	}

	.components-datetime__date.is-description-visible .DayPicker {
		visibility: hidden
	}

	.components-datetime__date .CalendarDay .components-datetime__date__day {
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
		position: relative
	}

	.components-datetime__date .CalendarDay .components-datetime__date__day.has-events:before {
		content: " ";
		width: 4px;
		height: 4px;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		margin-left: -2px;
		bottom: 0;
		background-color: #fff
	}

	.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events:before {
		background: var(--wp-admin-theme-color)
	}

	.components-datetime__time {
		padding-bottom: 16px
	}

	.components-datetime__time fieldset {
		position: relative;
		margin-bottom: .5em
	}

	.components-datetime__time fieldset+fieldset {
		margin-bottom: 0
	}

	.components-datetime__time .components-datetime__time-field-am-pm fieldset {
		margin-top: 0
	}

	.components-datetime__time .components-datetime__time-wrapper {
		display: flex
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {
		display: inline-block;
		padding: 0 3px 0 0
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time {
		direction: ltr
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {
		margin-right: 4px
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {
		position: relative;
		z-index: 1
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] {
		padding: 2px;
		margin-right: 4px;
		text-align: center;
		-moz-appearance: textfield
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus {
		position: relative;
		z-index: 1
	}

	.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0
	}

	.components-datetime__time.is-12-hour .components-datetime__time-field-day input {
		margin: -4px 0 0 !important;
		border-radius: 2px 0 0 2px !important
	}

	.components-datetime__time.is-12-hour .components-datetime__time-field-year input {
		border-radius: 0 2px 2px 0 !important
	}

	.components-datetime__timezone {
		line-height: 30px;
		margin-left: 4px;
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted
	}

	.components-datetime__time-legend {
		font-weight: 600;
		margin-top: .5em
	}

	.components-datetime__time-legend.invisible {
		position: absolute;
		top: -999em;
		left: -999em
	}

	.components-datetime__time-field-day-input,
	.components-datetime__time-field-hours-input,
	.components-datetime__time-field-minutes-input {
		width: 35px
	}

	.components-datetime__time-field-year-input {
		width: 55px
	}

	.components-datetime__time-field-month-select {
		max-width: 145px
	}
</style>
<div class="sp-admin-overlay">
	<div class="sp-admin-container">
		<?php require __DIR__ . '/../left_sidebar.php'; ?>
		<!-- main-content opened -->
		<div class="main-content horizontal-content">
			<div class="page">
				<?php require __DIR__ . '/../page_header.php'; ?>
				<?php require SP_PLUGIN_DIR_PATH . 'pages/header_js.php'; ?>
				<!-- container opened -->
				<div class="container">
					<h2 class="purchase-or-title"><?php echo esc_html(__('Store Performance', 'inventory-management-woocommerce')); ?></h2>
					<div class="d-flex nav-link-line" style="margin-top: 40px;">
						<a class="nav-link-page <?php echo esc_attr('shelf_planner' == sanitize_text_field(empty($_GET['page']) ? '' : $_GET['page']) ? 'active' : ''); ?>" href="<?php echo esc_url(admin_url('admin.php?page=shelf_planner')); ?>"><span class="side-menu__label"> <?php echo esc_html(__('Home', 'inventory-management-woocommerce')); ?></span></a>
						<a class="nav-link-page <?php echo esc_attr('shelf_planner_retail_insights' == sanitize_text_field(empty($_GET['page']) ? '' : $_GET['page']) ? 'active' : ''); ?>" href="<?php echo esc_url(admin_url('admin.php?page=shelf_planner_retail_insights')); ?>"><span class="side-menu__label"> <?php echo esc_html(__('Store Perfomance', 'inventory-management-woocommerce')); ?></span></a>
					</div>
					<?php do_action('after_page_header'); ?>
					<div class="wrap">
						<div id="root"></div>
					</div>
				</div>
			</div>
		</div>
		<?php require __DIR__ . '/../popups.php'; ?>
		<script>
			var userImg = document.querySelectorAll('.user-img-header');
			var accPopup = document.querySelectorAll('.my_acc_popup');
			var userNotiflication = document.querySelectorAll('.user-notiflications');
			var userNotiflicationBody = document.querySelectorAll('.notiflication-body')

			for (let i = 0; i < userImg.length; i++) {
				userImg[i].addEventListener('click', (e) => {
					accPopup[i].classList.toggle('my_acc_popup_active')
				})
			};

			for (let j = 0; j < userNotiflication.length; j++) {
				userNotiflication[j].addEventListener('click', (e) => {
					userNotiflicationBody[j].classList.toggle('notiflication-body-active')
				})
			}
		</script>
	</div>
</div>

<?php 
require_once __DIR__ . '/../footer.php';
