
/* ==================== #Side Panel  ==================== */
.side_panel {
	text-align: center;
	transition: .4s;
	border-radius: 15px;
	overflow: hidden;
	width: 56px;
	height: 56px;
	background: var(--vireon-form-bg-color);
	color: var(--vireon-primary-color);
}

.wgl-mobile-header .side_panel {
	height: 40px;
	width: 40px;
	padding: 0;
	margin: -10px 0;
}

.side_panel .side_panel_inner {
	display: block;
	height: 100%;
}

.side_panel .side_panel_inner .side_panel-toggle {
	color: currentColor;
}

.side_panel .side_panel-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background: unset;
	border: unset;
	padding: unset;
	margin: unset;
}

.side_panel .side_panel-toggle:hover .side_panel-toggle-inner span:nth-child(1) {
	transform: translate(0px, 13px);
}

.side_panel .side_panel-toggle:hover .side_panel-toggle-inner span:nth-child(2) {
	transform: translate(0px, 0px);
}

.side_panel .side_panel-toggle:hover .side_panel-toggle-inner span:nth-child(3) {
	transform: translate(13px, 0px);
}

.side_panel .side_panel-toggle:hover .side_panel-toggle-inner span:nth-child(4) {
	transform: translate(13px, 13px);
}

.side_panel .side_panel-toggle-inner {
	width: 20px;
	height: 20px;
	line-height: 0;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.side_panel .side_panel-toggle-inner span {
	display: inline-block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 7px;
	color: inherit;
	vertical-align: top;
	background: currentColor;
	transition: .5s ease-in-out;
}

.side_panel .side_panel-toggle-inner span:nth-child(1) {
	transform: translate(0px, 0px);
}

.side_panel .side_panel-toggle-inner span:nth-child(2) {
	transform: translate(13px, 0px);
}

.side_panel .side_panel-toggle-inner span:nth-child(3) {
	transform: translate(13px, 13px);
}

.side_panel .side_panel-toggle-inner span:nth-child(4) {
	transform: translate(0px, 13px);
}

body.admin-bar #side-panel {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar #side-panel {
		top: 46px;
	}
}

body.side-panel--opened .side-panel_overlay {
	opacity: 1;
	visibility: visible;
}

.side-panel_overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(35, 35, 35, .6);
	visibility: hidden;
	opacity: 0;
	transition: .45s ease-in-out;
}

#side-panel {
	position: fixed;
	z-index: 4000;
	top: 0;
	bottom: 0;
	right: 0;
	width: calc(100% - 100px);
	max-width: 460px;
	background: transparent;
	transform: translateX(calc(100% + 80px));
	opacity: 0;
	transition: transform .45s ease-in-out, opacity .45s ease-in-out;
	color: #fff;
}

#side-panel.side-panel_position_left {
	left: 0;
	right: auto;
	transform: translateX(calc(-100% - 80px));
}

#side-panel.side-panel_position_left .side-panel_close {
	left: 100%;
	right: auto;
}

#side-panel.side-panel_open {
	transform: translateX(0);
	opacity: 1;
}

#side-panel .side-panel_sidebar {
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	left: 0;
	overflow-y: scroll;
	overscroll-behavior-y: contain;
	scrollbar-width: none;
}

#side-panel .side-panel_sidebar::-webkit-scrollbar {
	display: none;
}

#side-panel .side-panel_sidebar .widget ul li, #side-panel .side-panel_sidebar .widget ul li a {
	color: inherit;
}

#side-panel .side-panel_sidebar .widget:not(:first-child) {
	padding-top: 40px;
}

#side-panel .side-panel_sidebar .widget_media_gallery .gallery-item .gallery-icon {
	margin: 5px;
}

#side-panel .side-panel_sidebar .widget_media_gallery .gallery {
	margin: -5px;
}

#side-panel .side-panel_close {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 20px;
	right: calc(100% + 10px);
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 15px;
	line-height: 0;
	border: unset;
	text-align: center;
	cursor: pointer;
	color: var(--vireon-tertiary-color);
	background: var(--vireon-primary-color);
	transition: .45s ease-in-out;
	z-index: 1;
}

@media (max-width: 545px) {
	#side-panel .side-panel_close {
		top: 10px;
		right: calc(100% + 5px);
		width: 40px;
		height: 40px;
	}
}

#side-panel .side-panel_close::before {
	content: "";
	width: inherit;
	height: inherit;
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	border-radius: inherit;
}

#side-panel .side-panel_close .side-panel_close_icon {
	width: 20px;
	line-height: 0;
	cursor: pointer;
	transition: .4s;
}

#side-panel .side-panel_close .side-panel_close_icon span {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 2px;
	vertical-align: top;
	background: currentColor;
}

@media (max-width: 545px) {
	#side-panel .side-panel_close .side-panel_close_icon span {
		width: 20px;
	}
}

#side-panel .side-panel_close .side-panel_close_icon span:nth-child(1) {
	top: 1px;
	transform: rotate(45deg);
}

#side-panel .side-panel_close .side-panel_close_icon span:nth-child(2) {
	top: -1px;
	transform: rotate(135deg);
}

#side-panel .side-panel_close:hover .side-panel_close_icon {
	transform: scale(1.2);
}

#side-panel .elementor-container {
	max-width: 100% !important;
}
