@import url("common.css");
@import url("metismenu.min.css");
@import url("mCustomScrollbar.min.css");
@import url("toastr.min.css");
@import url("typeahead.css");
@import url("toastr-style.css");
@import url("../fonts/fonts.css");
:root {
	--primary-font: 'cairo';
	--primary-color: #fe582b;
	--primary-color-rgba: 254, 88, 43;
	--primary-color-bg: #fe582b11;
	--secondary-color: #5E7185;
	--green-color: #21A67A;
	--yellow-color: #EC7E00;
	--text-red: #DC2B2B;
	--progress-width: 94px;
	--progress-border-width: 6px;
	--progress-deg: 33;
	--progress-empty-color: #d1ece3;
	--progress-fill-color: #21a67a;
	--default-transition: all 0.3s ease-in-out;
	--primary-shadow: 0 0 0 3px rgba(123, 192, 2, 0.25);
}
html {
	box-sizing: border-box;
}
body {
	font-family: var(--primary-font);
	font-weight: 400;
	background: #ebeef3;
}
.block{
	width: 100%;
	float: left;
	position: relative;
}
.popover{
	max-width: 230px;
}
hr{
	border-color: #ddd;
}
body.of-hidden {
	overflow: hidden !important;
}
.form-group {
	position: relative;
}
.label-wrapper {
	width: 100%;
	float: left;
}
.label-wrapper label {
	float: left;
}
.label-wrapper ul {
	float: right;
	position: relative;
	top: -2px;
}
.label-wrapper ul li {
	font-size: 11px;
	color: #000;
	float: left;
	border: 1px solid #ddd;
	padding: 2px 7px 1px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.label-wrapper ul li+li {
	border-left: none;
}
.label-wrapper ul li:first-child {
	border-radius: 2px 0 0 2px;
}
.label-wrapper ul li:last-child {
	border-radius: 0 2px 2px 0;
}
.label-wrapper ul li.active {
	background: #666;
	color: #FFF;
	border-color: #666;
}
.label-wrapper ul li.error{
	color: #f44336;
}
.label-wrapper ul li.error.active {
	background: #f44336;
	color: #FFF !important;
	border-color: #f44336;
}
label {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin: 0 0 3px;
}
label img{
	width: 21px;
	margin: 0 3px 0 0;
}
label span {
	font-weight: 500;
	color: #ff0000;
}
label i {
	font-size: 12px;
	color: #999;
	margin: 0 0 0 8px;
}
.sub-label{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	float: right;
	position: relative;
    z-index: 1;
}
.sub-label{
	color: #666;
}
.form-control {
	font-size: 13px;
	color: #000;
	height: 32px;
	box-shadow: none;
	border-radius: 2px;
}
.form-control:hover, .form-control:focus {
	border-color: #f7643c !important;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(254, 88, 43, 0.18);
}
.form-control:focus {
	border-color: #ed4e23 !important;
	box-shadow: 0 0 0 3px rgba(254, 88, 43, 0.25);
}
.form-control::placeholder {
 color: #999 !important;
}
.form-control:-ms-input-placeholder {
 color: #999 !important;
}
.form-control::-ms-input-placeholder {
 color: #999 !important;
}
select.form-control {
	padding: 0 25px 0 12px;
	background: url(../img/select_caret.svg) no-repeat right .75rem center/8px, url(../img/select_bg.svg) repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
}
select, select option {
	font-family: 'cairo', sans-serif !important;
}
textarea.form-control {
	resize: none;
	min-height: 100px;
}
.input-date {
    background: url(../img/calendar_bg.svg) no-repeat right 5px center/18px;
}
.input-time {
    background: url(../img/clock_bg.svg) no-repeat right 5px center/20px;
}
.field-loader {
    background: url(../img/loaders_bg/field_loader.svg) no-repeat right 5px center/24px;
}
.search-field {
	background: url(../img/search-icon.png) no-repeat left 8px center;
	padding: 0 32px;
}
.field-loader.search-field {
	background: url(../img/loaders_bg/field_loader.svg) no-repeat right 5px center/24px, url(../img/search-icon.png) no-repeat left 8px center;
}
.date-control {
	background: url(../img/calendar_bg.svg) no-repeat right 10px center / 18px;
	padding: 0 30px 0 12px;
}
.time-control {
	background: url(../img/clock_bg.svg) no-repeat right 10px center / 20px;
	padding: 0 30px 0 12px;
}
.form-control[disabled], fieldset[disabled] .form-control{
	background-color: #f6f6f6 !important;
}
.form-control[readonly], .form-control.readonly{
	background-color: #f6f6f6;
    box-shadow: none !important;
    border-color: #ccc !important;
    cursor: not-allowed;
}
.form-control.readonly{
	pointer-events: none;
}
.row.custom-row-5 {
    margin: 0 -5px;
}
.row.custom-row-5 > [class*=col] {
    padding: 0 5px;
}
.d-inline-block{
	display: inline-block !important;
}
.nowrap{
	white-space: nowrap;
}
.custom-drawer.in + .custom-drawer.in .drawer-backdrop {
	background-color: rgba(0 0 0 / 30%);
}
.h-32{
	height: 32px !important;
	min-height: unset !important;
}
.input-popup.form-control[readonly] {
    background-color: #FFF;
    border-color: #e5e5e5;
}
.input-popup.form-control[readonly]:hover, .input-popup.form-control[readonly]:focus {
	border-color: #80bdff !important;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18) !important;
}
.input-popup.form-control[readonly]:focus {
	border-color: #2196f3 !important;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
}
.custom-control-group .input-group-addon{
	padding: 0;
}
.custom-control-group .input-group-addon .form-control{
	font-weight: 500;
	color: #000;
	width: auto;
	min-width: 50px;
	height: 30px;
	border: none !important;
	box-shadow: none !important;
}
.custom-backdrop {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.45);
	z-index: 999;
	opacity: 0;
	display: none;
	cursor: default;
	overflow: hidden;
	-webkit-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
}
body.menu-open .custom-backdrop {
	display: block;
	opacity: 1;
	-webkit-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
}
body.menu-open {
	overflow: hidden;
}
.custom-scroll{
	position: relative;
}
.drawer-body.custom-scroll.mCS_no_scrollbar{
	padding: 15px;
}
.content-wrapper.custom-scroll > .mCustomScrollBox > .mCSB_container{
	padding: 20px;
}
body.ps{
	overflow: inherit !important;
}
.content-wrapper{
	width: 100%;
    float: left;
	padding: 20px;
	height: calc( 100vh - 76px );
	overflow-y: auto;
	position: relative;
}
.content-wrapper.mCustomScrollbar {
	padding: 0;
}
.row.row-5{
	margin: 0 -5px;
}
.row.row-5 > *[class*=col]{
	padding: 0 5px;
}
.row.row-10{
	margin: 0 -10px;
}
.row.row-10 > *[class*=col]{
	padding: 0 10px;
}
.d-flex > label {
    width: 100%;
}

.product-title {
	width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    line-height: 20px;
    margin: 0 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.product-title strong{
	color: #000;
	display: inline-block;
	margin: 0 3px 0 0;
}
.order-badge{
	font-size: 10px;
	font-weight: 500;
	color: #FFF;
	line-height: 19px;
	padding: 1px 10px;
	background-color: #000;
	border: 1px solid transparent;
	text-transform: uppercase;
	border-radius: 2px;
	margin: 0 5px;
	user-select: none;
}
.order-badge.outline{
	background-color: transparent !important;
}
.order-badge.red{
	background-color: var(--primary-color);
}
.order-badge.green{
	background-color: #10B835;
}
.order-badge.outline.red{
	border-color: var(--primary-color);
	color: var(--primary-color);
}
.order-badge.outline.green{
	border-color: #10B835;
	color: #10B835;
}


.product-meta-wrap{
	width: 100%;
	float: left;
	padding: 12px 15px 0;
	background-color: #FBFBFB;
	border: 1px solid #eee;
	border-radius: 3px;
	margin: 0 0 20px;
}
.product-meta-wrap .order-badge{
	margin: 0;
}
.product-meta-heading{
	font-size: 13px;
	font-weight: 700;
	color: #000;
	display: block;
	margin: 0 0 5px;
}
.product-meta-wrap p{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	margin: 0;
}

.phone-wrap{
	display: flex;
	/* flex-wrap: wrap; */
}
.country-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.country-wrap img{
	width: 20px;
}
.ui-state-default {
    color: #000 !important;
}
body::-webkit-scrollbar {
	display: none;
}
body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
:root{ 
	scrollbar-width: none !important 
}
ul.bullets-ul{
	padding: 0 0 0 20px;
	margin: 0 0 10px;
}
ul.bullets-ul li{
	color: var(--primary-color);
	list-style-type: disc;
}
ul.bullets-ul li span{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: normal;
	margin: 0;
}
.drag-social i{
	font-size: 14px;
    color: #888;
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.drag-social:hover i{
    cursor: grab;
    color: var(--primary-color);
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
/*=================================
	TinyMCE editor code  
==================================*/
.tox-dialog__footer-end .tox-button:not(.tox-button--secondary){
	background: rgb(255,129,96) !important;
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%) !important;
	border: none !important;
	color: #FFF !important;
	box-shadow: none;
}
.tox-dialog__footer-end .tox-button:not(.tox-button--secondary):hover, .tox-dialog__footer-end .tox-button:not(.tox-button--secondary):focus, .tox-dialog__footer-end .tox-button:not(.tox-button--secondary):active, .tox-dialog__footer-end .tox-button:not(.tox-button--secondary):active:hover, .tox-dialog__footer-end .tox-button:not(.tox-button--secondary):active:focus{
	background: rgb(255,134,101) !important;
	background: linear-gradient(180deg, rgba(255,134,101,1) 0%, rgba(255,54,0,1) 100%) !important;
	color: #FFF !important;
}
.tox-dialog__footer-end .tox-button:not(.tox-button--secondary):focus{
	box-shadow: 0 0 0 3px rgba(254,88,43,0.3);
}
.tox-dialog__footer-end .tox-button--secondary{
	background: rgb(243,243,243) !important;
	background: linear-gradient(180deg, rgba(243,243,243,1) 0%, rgba(229,229,229,1) 100%) !important;
	border: none !important;
	color: #333 !important;
	box-shadow: none;
}
.tox-dialog__footer-end .tox-button--secondary:hover, .tox-dialog__footer-end .tox-button--secondary:focus, .tox-dialog__footer-end .tox-button--secondary:active, .tox-dialog__footer-end .tox-button--secondary:active:hover, .tox-dialog__footer-end .tox-button--secondary:active:focus{
	background: rgb(238,238,238) !important;
	background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%) !important;
	color: #333 !important;
}
.tox-dialog__footer-end .tox-button--secondary:focus{
	box-shadow: 0 0 0 3px rgba(204,204,204,0.3);
}
/*==========================
	No Thumb code  
===========================*/
.cart-item-wrap > .leftbar.no-thumb, .product-info > .leftbar.no-thumb{
	background: #FFF url(../img/no_thumb_2.svg) no-repeat center/50px !important;
}
.no-thumb .image{
	background: #f3f3f3 url(../img/no_thumb.svg) no-repeat center/30px !important;
}
.no-thumb img{
	display: none !important;
}
.cat-block > .leftbar .image-wrapper.no-thumb .image, .slider-image-thumb .no-thumb .image{
	background-size: 40px !important;
}
/*==========================
	Sweet Alert code  
===========================*/
.swal-modal{
	font-family: var(--primary-font);
	width: 260px;
	background: #FFF url(../img/delete_sweet_alert.svg) no-repeat top 18px center;
	padding: 140px 0 0;
	margin: 0 auto;
	will-change: auto !important;
	user-select: none !important;
}
.swal-title{
	font-size: 22px;
	font-weight: 500;
	color: #000;
	display: block;
	padding: 0 !important;
	margin: 0 !important;
}
.swal-text{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	padding: 0 !important;
	margin: 0 0 10px !important;
}
.swal-footer{
	margin: 0;
    padding: 0;
	text-align: center;
	display: flex;
    flex-direction: column-reverse;
}
.swal-modal button{
	min-width: 98px;
    min-height: 38px;
	font-weight: 500;
	border-radius: 6px;
	box-shadow: none !important;
	outline: none !important;
	transition: all 0.3s ease-in-out;
}
.swal-modal .swal-button.swal-button--confirm{
	background: rgb(255,129,129);
	background: linear-gradient(180deg, rgba(255,129,129,1) 0%, rgba(226,54,54,1) 100%);
	border: none !important;
	color: #FFF;
	font-size: 16px;
}
.swal-modal .swal-button.swal-button--confirm:hover, .swal-modal .swal-button.swal-button--confirm:focus, .swal-modal .swal-button.swal-button--confirm:active, .swal-modal .swal-button.swal-button--confirm:active:hover, .swal-modal .swal-button.swal-button--confirm:active:focus{
	background: rgb(255,99,99);
	background: linear-gradient(180deg, rgba(255,99,99,1) 0%, rgba(226,54,54,1) 100%);
	color: #FFF;
	box-shadow: none !important;
	transition: all 0.3s ease-in-out;
}
.swal-modal .swal-button.swal-button--cancel{
	background: rgb(243,243,243);
	background: linear-gradient(180deg, rgba(243,243,243,1) 0%, rgba(229,229,229,1) 100%);
	border: none !important;
	font-size: 14px;
	color: #333;
	margin: 1px 0 5px;
	background: none !important;
}
.swal-modal .swal-button.swal-button--cancel:hover, .swal-modal .swal-button.swal-button--cancel:focus, .swal-modal .swal-button.swal-button--cancel:active, .swal-modal .swal-button.swal-button--cancel:active:hover, .swal-modal .swal-button.swal-button--cancel:active:focus{
	background: rgb(238,238,238) !important;
	background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%) !important;
	color: #333;
	transition: all 0.3s ease-in-out;
}
.swal-modal .swal-button.swal-button--cancel:focus{
	box-shadow: 0 0 0 3px rgba(204,204,204,0.3) !important;
}
/*==========================
	Fieldset code 
===========================*/
fieldset{
	padding: 7px 15px 9px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 0 0 30px;
}
fieldset legend{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	background-color: #FFF;
	width: auto;
	padding: 0 5px;
	margin: 0 -5px;
	border: none;
}
fieldset hr {
	border-color: #f9f3f3;
    margin: 0px 0 5px;
    clear: both;
    position: relative;
    top: -5px;
}
fieldset table{
	width: 100%;
	margin: 0 0 10px;
}
fieldset table tbody tr td{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	padding: 5px 0;
}
fieldset table tbody tr td.text-red{
	color: #C9252D !important;
}
fieldset table tbody tr td.text-green, fieldset table tbody tr td.text-green i{
	color: #21A67A !important;
}
fieldset table tbody tr td i{
	display: inline-block;
	margin: 0 3px;
}
/*==========================
Fieldset code For Drawer 
===========================*/
.custom-drawer fieldset{
	padding: 10px 15px 0;
	border-radius: 2px;
	margin: 0;
}
.custom-drawer fieldset legend{
    font-weight: 700;
    color: #333;
    padding: 0 7px;
    margin: 0 -7px;
}
/*===============================================
	Loader for drawer & Modal & blocks code  
================================================*/
.modal.is-loading {
    overflow: hidden !important;
	/* pointer-events: none; */
	user-select: none;
}
.modal.is-loading .modal-dialog,
.modal.is-loading .drawer-wrapper{
	cursor: not-allowed;
}
.modal.is-loading .modal-dialog:before,
.modal.is-loading .drawer-wrapper:before {
    content: '';
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1150;
	border-radius: 3px;
}
.modal.is-loading .modal-dialog:after,
.modal.is-loading .drawer-wrapper:after {
    content: '';
    background: url(../img/loaders_bg/loader.svg) no-repeat center;
    background-size: 60px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1151;
}
/*==========================
	Custom Input Group code  
===========================*/
.input-group-addon{
	border-radius: 3px;
}
.input-group.custom-select-group .input-group-addon {
	padding: 0;
    border-radius: 2px;
    background-color: transparent;
}
.input-group.custom-select-group .input-group-addon select.form-control{
	border: none;
    border-radius: 0px;
    height: 30px;
    width: auto;
	min-width: 60px;
    padding: 0 20px 0 12px;
	box-shadow: none !important;
}
/*======================================
	bootstrap date time picker code  
=======================================*/
.bootstrap-datetimepicker-widget table td a{
	color: #000;
}
.bootstrap-datetimepicker-widget .picker-switch td span{
	display: none;
}
/*==========================
	CC Picker code  
===========================*/
.cc-picker-code-list{
	width: 305px;
	z-index: 9999 !important;
	margin: 0;
}
.cc-picker-code-filter {
    font-family: var(--primary-font);
    margin: 3px 0 0 0;
    padding: 1px;
    width: 305px;
    border: 1px solid #ccc;
	z-index: 9999 !important;
}
.cc-picker-code-select-enabled {
	background: url(../img/select_caret.svg) no-repeat right .75rem center/8px, url(../img/select_bg.svg) repeat;
    font-family: var(--primary-font);
    width: 90px;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 3px 0 0 3px;
}
.cc-picker + .form-control {
    width: calc( 100% - 90px );
    display: inline-block;
    border-radius: 0 3px 3px 0;
}
.cc-picker-code-select-enabled::after{
	display: none;
}
html[dir="rtl"] .cc-picker-code-select-enabled {
	background: url(../img/select_caret.svg) no-repeat left .75rem center/8px, url(../img/select_bg.svg) repeat;
	border: 1px solid #ccc;
	border-left: none;
    border-radius: 0 3px 3px 0;
}
html[dir="rtl"] .cc-picker + .form-control{
	border-radius: 3px 0 0 3px;
}
html[dir="rtl"] .cc-picker-flag{
	margin: 0 0 0 7px;
}
/*==========================
	Select 2 custom code  
===========================*/
.select2-container--default .select2-selection--multiple {
	background: #FFF;
	border: 1px solid #ccc !important;
	font-size: 13px;
	color: #333;
	padding: 0px 10px;
	height: auto !important;
	box-shadow: none;
	border-radius: 2px !important;
}
.select2-container--default .select2-selection--multiple:hover {
	border-color: #f7643c !important;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(254, 88, 43, 0.18);
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #ed4e23 !important;
	box-shadow: 0 0 0 3px rgba(254, 88, 43, 0.25);
	outline: 0;
	padding: 0;
}
.select2-container--default .select2-selection--multiple {
	padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #000 !important;
}
/*========= Select2 selcted li code ===========*/
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	width: auto;
	clear: both;
	font-size: 13px;
	color: #666;
	border: none !important;
	padding: 0 10px 0 40px !important;
	border-radius: 2px !important;
	background-color: #eff8fe !important;
	line-height: 30px;
	white-space: normal;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.d-inline-block ~ .select2-container--default .select2-selection--multiple .select2-selection__choice{
	border: 1px solid #e5e5e5 !important;
	clear: none;
}
.d-inline-block ~ .select2-container--default .select2-selection--multiple .select2-selection__choice:hover{
	border-color: #ccc !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
	background-color: #e9f2f8 !important;
	color: #222;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice span:last-child {
	font-size: 12px;
	font-weight: 700;
	color: #333;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	background: url(../img/close-circle-fill-red.svg) no-repeat center;
	background-size: 21px;
	margin-right: 15px !important;
	vertical-align: text-bottom;
	width: 21px;
	height: 21px;
	text-align: center;
	border-radius: 50%;
	color: #fff !important;
	text-indent: -9999px;
	position: absolute;
	left: 10px;
	top: 4px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:first-child {
	margin-top: 5px;
}
.select2-container .select2-selection__choice + .select2-search--inline {
    clear: none;
    margin: 10px 0 0;
}
.select2-container .select2-selection__choice + .select2-search--inline .select2-search__field {
	margin: -2px 0 0;
	clear: both;
}
/*======== Select2 open dropdown code ===============*/
.select2-container{
	width: 100% !important;
	z-index: 1100;
}
.select2-container--open .select2-dropdown {
	top: 3px;
	border: 1px solid #ccc !important;
}
.select2-search--dropdown .select2-search__field{
	height: 28px !important;
	border-color: #ccc !important;
	outline: none;
	border-radius: 2px !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: transparent !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #eff8fe !important;
	color: #666 !important;
}
.select2-container--default .cat-sep {
	margin: 0 5px;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #ccc !important;
    height: 32px !important;
    border-radius: 2px !important;
	transition: var(--default-transition);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 30px !important;
}
.select2-container--default .select2-selection--single:hover, .select2-container--default.select2-container--open .select2-selection--single{
	border-color: #f7643c !important;
	box-shadow: 0 0 0 3px rgba(254, 88, 43, 0.18);
	transition: var(--default-transition);
}
.custom-drawer .select2-container--default .select2-selection--single{
	height: 28px !important;
}
.custom-drawer .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
}
.custom-drawer .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
}

.multi-select-listing.select2-container--default .select2-results__option {
	padding: 6px 6px 6px 40px !important;
}
.multi-select-listing.select2-container--default .select2-results__option span:last-child {
	font-size: 12px;
	font-weight: 700;
	color: #333;
}
.multi-select-listing.select2-container--default .select2-results__option[aria-selected=false],
.multi-select-listing.select2-container--default .select2-results__option[aria-selected=true]{
	color: #999;
	background-color: transparent !important;
	background-image: url(../img/check_select_grey.svg);
	background-repeat: no-repeat;
	background-position: center left 8px;
}
.multi-select-listing.select2-container--default .select2-results__option[aria-selected=true] {
	background-image: url(../img/check_select_green.svg);
}
.multi-select-listing.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #eff8fe !important;
	color: #666 !important;
}
/*==========================
	Custom Tags Input code  
===========================*/
.bootstrap-tagsinput, .ul-tags{
	width: 100%;
	padding: 6px !important;
	border: 1px solid #ddd !important;
	line-height: 1.42857143 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 5px;
	overflow: hidden;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.bootstrap-tagsinput .twitter-typeahead{
	width:auto !important;
}
.bootstrap-tagsinput.is_focused {
	/* border-color: #ed4e23 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgb(254 88 43 / 25%);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; */
}
.bootstrap-tagsinput input, .bootstrap-tagsinput .twitter-typeahead input{
	height: 20px;
    padding: 0;
    box-shadow: none;
    border: none;
}
.bootstrap-tagsinput .twitter-typeahead input.tt-hint {
    display: none;
}
.custom-tag, .ul-tags li{
	font-size: 11px;
    font-weight: 500;
    color: #000 !important;
    padding: 3px 6px;
    line-height: 13px;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 2px;
    margin: 0 !important;
    display: flex;
    align-items: center;
}
.bootstrap-tagsinput .tag [data-role="remove"]{
	box-shadow: none !important;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after{
    content: "x";
    font-size: 10px;
    color: #666;
    padding: 0;
    font-weight: 700;
    user-select: none;
    line-height: unset;
}
.bootstrap-tagsinput .custom-tag [data-role="remove"]:hover:after{
	color: #E23636;
}
.custom-tag.disabled, .ul-tags li{
	background-color: #FFF5F2;
	border-color: #FFDCD2;
}
.custom-tag.disabled{
	cursor: not-allowed;
}
.custom-tag.disabled span{
	display: none !important;
}
html[dir="rtl"] .bootstrap-tagsinput .tag [data-role="remove"]{
	margin: 0 8px 0 0;
}
.fieldset-tags{
	padding: 5px 10px 10px !important;
	margin: 0 0 15px !important;
}
.fieldset-tags .ul-tags {
    padding: 0 !important;
    border: none !important;
}
/*================================
	Info Wrap Code 
=================================*/
.info-wrap{
	width: 100%;
	float: left;
	padding: 10px 10px 5px;
	background-color: #FFF7F5;
	border: 1px solid #FEDCD4;
	border-radius: 3px;
	margin: 0 0 15px;
}
.info-wrap.bg-green{
	background-color: #F5FFFC;
	border: 1px solid #C2E8DB;
}
.info-wrap span{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 26px;
	display: block;
	margin: 0 0 5px;
}
.info-wrap p{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: 22px;
}
.info-wrap .btn {
	min-height: 30px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 19px;
    margin: 0 0 10px;
	display: flex;
    align-items: center;
}
.info-wrap .btn i {
    font-size: 18px;
    display: inline-block;
    vertical-align: bottom;
	margin: 0 5px 0 0;
}
.info-wrap .btn i.icon-playlist-edit{
	font-size: 20px;
	vertical-align: top;
}
html[dir="rtl"] .info-wrap .btn i {
	margin: 0 0 0 5px;
}
/*================================
	Notice Bar Code 
=================================*/
.notice-wrap {
	width: calc( 100% + 40px );
    font-size: 13px;
    color: #FFF;
    min-height: 36px;
    background-color: #EF5350;
	margin: -20px 0 15px -20px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: sticky;
	top: -20px;
    z-index: 50;
	-webkit-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
}
html[dir="rtl"] .notice-wrap{
	margin: -20px -20px 15px 0;
}
/*================================
	Alerts code 
=================================*/
.alert{
	width: 100%;
    float: left;
	padding: 12px 15px 12px 63px;
	background-color: #FFF;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	margin: 0 0 15px;
	position: relative;
	-webkit-box-shadow: 0px 1px 6px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px 0px rgb(0 0 0 / 10%);
}
.alert::before{
	content: '';
	width: 4px;
	background-color: #000;
	position: absolute;
	top: 4px;
	left: 4px;
	bottom: 4px;
	z-index: 10;
}
.alert i{
	font-size: 18px;
	color: #999;
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	cursor: pointer;
}
.alert span{
	font-size: 13px;
	color: #000;
	line-height: 24px;
	display: block;
}
.alert span strong{
	display: inline-block;
	margin: 0 3px 0 0;
}
.alert.alert-success{
	background: #FFF url(../img/alerts_bg/success_bg.svg) no-repeat left 23px center;
}
.alert.alert-error{
	background: #FFF url(../img/alerts_bg/error_bg.svg) no-repeat left 23px center;
}
.alert.alert-info{
	background: #FFF url(../img/alerts_bg/info_bg.svg) no-repeat left 23px center;
}
.alert.alert-warning{
	background: #FFF url(../img/alerts_bg/warning_bg.svg) no-repeat left 23px center;
}
.alert.alert-success::before{
	background-color: #21A67A;
}
.alert.alert-error::before{
	background-color: #C9252D;
}
.alert.alert-info::before{
	background-color: #2680EB;
}
.alert.alert-warning::before{
	background-color: #F2952B;
}
html[dir="rtl"] .alert{
	padding: 12px 63px 12px 15px;
	background-position: right 23px center;
}
html[dir="rtl"] .alert::before{
	left: auto;
	right: 4px;
}
html[dir="rtl"] .alert i{
	right: auto;
	left: 0;
}
html[dir="rtl"] .alert span strong{
	margin: 0 0 0 3px;
}
/*================================
	Status Badge code 
=================================*/
.status-badge{
	font-size: 12px;
	font-weight: 500;
	position: relative;
	padding: 0 0 0 15px;
	letter-spacing: 0.25px;
	user-select: none;
}
.status-badge::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #000;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
    transform: translateY(-50%);
}
.status-icon{
	font-size: 22px;
	color: #ccc;
	vertical-align: middle;
}
.status-badge.green,  .status-icon.green, .status-badge.normal{
	color: #10B835;
}
.status-badge.green::before,
.status-badge.normal::before{
	background-color: #10B835;
}
.status-badge.red, .status-icon.red, .status-badge.high{
	color: #DC2B2B;
}
.status-badge.red::before,
.status-badge.high::before{
	background-color: #DC2B2B;
}
.status-badge.low, .status-icon.yellow{
	color: #F2952B;
}
.status-badge.low::before{
	background-color: #F2952B;
}
.status-badge.blue, .status-icon.blue{
	color: #2680EB;
}
.status-badge.blue::before{
	background-color: #2680EB;
}
/*================================
	Tiny mce editor code 
=================================*/
.mce-panel {display: grid;}
.mce-ico, html[dir="rtl"] .mce-ico{ font-family: 'tinymce',Arial !important; }
html[dir="rtl"] .mce-container, 
html[dir="rtl"] .mce-container *, 
html[dir="rtl"] .mce-widget, 
html[dir="rtl"] .mce-widget *, 
html[dir="rtl"] .mce-reset{
	direction: rtl;
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
html[dir="rtl"] .mce-btn-group .mce-btn {
	margin: 0 2px 0 0;
}
html[dir="rtl"] .mce-colorbutton .mce-preview {
	padding-right: 0;
	padding-left: 3px;
    margin-left: 0;
    margin-right: -17px;
}
html[dir="rtl"] .mce-btn-group:not(:first-child) {
	padding: 0;
	margin: 0;
}
html[dir="rtl"] .mce-flow-layout-item.mce-last {
    margin-right: 2px;
    margin: 0 0 0 2px;
}
/*============================================
Common image code with palceholder in table 
=============================================*/
.image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.logo-block .image-wrapper{
	flex-direction: column;
}
.image-wrapper .image{
	width: 36px;
    height: 36px;
    background: #f3f3f3;
	border-radius: 3px;
	display: flex;
    align-items: center;
	justify-content: center;
	position: relative;
}
.image-wrapper img{
	max-width: 100%;
	max-height: 100%;
	height: auto;
}
.image-wrapper i {
    font-size: 26px;
    display: none;
	color: #E23636;
	line-height: 36px;
}
.image-wrapper.is-loading .image > div,
ul.gallery-ul>li .gallery-wrap.is-loading .image {
	background: none !important;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(254, 97, 55, 0.3);
    border-radius: 50%;
    border-top-color: #fe6137;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    position: absolute;
    left: 8px;
    top: 8px;
	left: 50%;
    top: 50%;
    margin: -10px;
}
.image-wrapper.is-broken img, .image-wrapper.is-loading img, .image-wrapper.is-loading.is-broken i{
	display: none !important;
}
.no-thumb.is-loading .image{
	background-image: none !important;
}
.image-wrapper.is-broken i{
	display: block;
}
.image-wrapper .image + .image-meta{
	padding: 0 0 0 8px;
}
.image-wrapper .image-meta span{
	font-size: 13px;
	font-weight: 500;
	color: #222;
	display: block;
}
.image-wrapper .image-meta p{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	line-height: 12px;
	margin: 0;
	display: inline-block;
	position: relative;
}
.image-wrapper .image-meta p + p{
	border-left: 1px solid #ccc;
	padding: 0 0 0 7px;
	margin: 0 0 0 5px;
}
html[dir="rtl"] .image-wrapper .image-meta p + p{
	border-left: none;
	border-right: 1px solid #ccc;
	padding: 0 7px 0 0;
	margin: 0 5px 0 0;
}
.image-wrapper .btn {
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 8px;
    margin: 5px 0 0 5px;
}
html[dir="rtl"] .image-wrapper .btn {
    margin: 5px 5px 0 0 ;
}
.image-wrapper .image-info{
	width: 100%;
	min-height: 24px;
	font-size: 11px;
	font-weight: 500;
	color: #111;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 2px 2px;
	display: flex;
    justify-content: center;
    align-items: center;
	margin: -2px 0 10px;
	-webkit-box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 10%);
}
/*================================
	Page wrapper common code 
=================================*/
.page-wrapper{
	width: 100%;
	float: left;
}
.page-wrapper .page-sidebar{
	width: 250px;
	height: 100vh;
	float: left;
	background: rgb(243,243,243);
	background: linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(235,238,243,1) 100%);
}
.page-wrapper .page-content {
    width: calc( 100% - 250px );
    height: 100vh;
    float: right;
    background-color: #FFF;
    border-radius: 20px 0 0 20px;
    position: relative;
    /* z-index: 10; */
	-webkit-box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}

.block-loader {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 300;
}
body > .block-loader{
	position: fixed;
	z-index: 9999;
}
.block-loader::before{
	content: '';
	background-color: rgba(255,255,255,.65);
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 40;
}
.block-loader-wrap{
	width: 100px;
	height: 100px;
	position: relative;
	background-color: #FFF;
	z-index: 50;
	border-radius: 6px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
}
.loader-spinner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    animation: 1s spin linear infinite;
    border: calc(70px * .0353) solid #ccc;
    border-top-color: #fe582b;
}
@keyframes spin {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
.block-loader img {
    width: calc(70px * .7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal .block-loader::before {
    background-color: rgba(255,255,255,.8);
}
.modal .block-loader-wrap{
	width: 80px;
	height: 80px;
}
.modal .loader-spinner {
    width: 50px;
    height: 50px;
}
.modal .block-loader img {
    width: calc(50px * .6);
}


.is-block-loading > .block-loader,
.modal.is-block-loading .block-loader{
	display: flex;
}
.page-content.is-block-loading .block-loader::before{
	border-radius: 20px 0 0 20px;
}
/*================================
	Page sidebar code 
=================================*/
.site-logo{
	width: calc( 100% - 25px );
	float: right;
	margin: 25px 0 20px;
}
.user-dropdown{
    width: calc( 100% - 30px );
    display: flex;
	margin: 0 auto 20px;
}
.user-dropdown .dropdown-toggle{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	align-items: center;
	background-color: #FFF;
	cursor: pointer;
	border-radius: 10px;
	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	/* transition: var(--default-transition); */
}
.user-dropdown:hover .dropdown-toggle{
	border-radius: 10px 10px 0 0;
	/* transition: var(--default-transition); */
}
.user-dropdown .dropdown-toggle > .leftbar{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	user-select: none;
	background: rgb(255,129,96);
	background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%);
}
.user-dropdown .dropdown-toggle > .leftbar span{
	font-size: 18px;
	font-weight: 700;
	color: #FFF;
	text-transform: uppercase;
}
.user-dropdown .dropdown-toggle .user-counter {
    min-width: 21px;
    min-height: 13px;
    font-size: 10px;
    font-weight: 700;
    color: #FFF;
    line-height: 11px;
    background-color: #E23636;
    border: 1px solid #FFF;
    border-radius: 10px;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1px;
    right: -4px;
}
html[dir="rtl"] .user-dropdown .dropdown-toggle .user-counter{
	right: auto;
	left: -4px;
}
.user-dropdown .dropdown-toggle > .rightbar{
	width: calc( 100% - 40px );
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
	position: relative;
	padding: 0 15px 0 10px;
}
.user-dropdown .dropdown-toggle > .rightbar span, .user-dropdown .dropdown-toggle > .rightbar p{
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	letter-spacing: 0.5px;
}
.user-dropdown .dropdown-toggle > .rightbar span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin: 2px 0 0;
	margin: 0;
}
.user-dropdown .dropdown-toggle > .rightbar p{
	font-size: 12px;
	color: #666;
	margin: -4px 0 0;
}
.user-dropdown .dropdown-toggle > .rightbar i{
	font-size: 16px;
	color: #aaa;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%) rotate(0deg);
	transition: all .2s ease-in-out;
}
.user-dropdown:hover .dropdown-toggle > .rightbar i {
	transform: translateY(-50%) rotate(180deg);
	transition: all .2s ease-in-out;
}
.user-dropdown .dropdown-menu{
	left: 0;
	right: 0;
	padding: 13px 0 3px;
	margin: 0;
	border: none;
	border-top: 1px solid #eee;
	border-radius: 0 0 10px 10px;
	-webkit-box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 3%);
	-moz-box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 3%);
	box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 3%);
	/* transform-origin: top center;
	animation: user_dropdown_animation_2 .8s forwards; */
	/* -webkit-animation: user_dropdown_animation_1 .3s both;
	animation: user_dropdown_animation_1 .3s both; */
}
@keyframes user_dropdown_animation_1 {
	0% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
	0% {
		transform: translateY(-20px);
	}
}
@keyframes user_dropdown_animation_2 {
	0% {
		transform: perspective(8000px) rotateX(-10deg);
		opacity: 1;
	} 
	40% {
		transform: perspective(8000px) rotateX(20deg);
		opacity: 1;
	}
	70% {
		transform: perspective(8000px) rotateX(-5deg);
	}
	100% {
		transform: perspective(8000px) rotateX(0deg);
		opacity: 1;
	}
}
@keyframes user_dropdown_animation_3 {
	0% {
		transform: perspective(800px) rotateX(-90deg);
		opacity: 1;
	} 
	40% {
		transform: perspective(800px) rotateX(30deg);
		opacity: 1;
	}
	70% {
		transform: perspective(800px) rotateX(-10deg);
	}
	100% {
		transform: perspective(800px) rotateX(0deg);
		opacity: 1;
	}
}
.user-dropdown-open{
	transition: height 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* .user-dropdown:hover .dropdown-menu{
	display: block;
} */
.user-dropdown .dropdown-menu li{
	margin: 0 0 7px;
}
.user-dropdown .dropdown-menu li a{
	display: flex;
	flex-wrap: wrap;
	padding: 5px 13px;
	background-color: transparent !important;
}
.user-dropdown .dropdown-menu li a .leftbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.user-dropdown .dropdown-menu li a .leftbar i{
	font-size: 20px;
	color: #999;
	margin: 0 8px 0 0;
	transition: var(--default-transition);
}
.user-dropdown .dropdown-menu li a .leftbar span{
	font-size: 13px;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.25px;
	text-transform: capitalize;
	transition: var(--default-transition);
}
.user-dropdown .dropdown-menu li a .rightbar{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	margin: 0 0 0 auto;
}
.user-dropdown .dropdown-menu li a .rightbar i{
	font-size: 18px;
	color: #999;
	transition: var(--default-transition);
}
.user-dropdown .dropdown-menu li .badge {
    font-size: 10px;
    font-weight: 700;
    color: #FFF;
    line-height: 9px;
    background-color: var(--primary-color);
    min-width: 22px;
    height: 15px;
    text-align: center;
    border-radius: 10px;
}
.user-dropdown .dropdown-menu li a:hover .leftbar span, .user-dropdown .dropdown-menu li a:hover i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.user-dropdown .dropdown-menu li:last-child a:hover .leftbar span, .user-dropdown .dropdown-menu li:last-child a:hover .leftbar i{
	color: var(--text-red);
	transition: var(--default-transition);
}
.language-wrap {
	width: calc( 100% + 10px);
	float: left;
	height: 60px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	-webkit-box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0);
	-moz-box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0);
	box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0);
	transition: var(--default-transition);
}
.scroll-active .language-wrap {
	-webkit-box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1);
	transition: var(--default-transition);
}
.language-drodpown {
    width: calc( 100% - 30px );
	width: 36px;
	display: flex;
	margin: 0 0 0 15px;
	position: relative;
	/* z-index: 5; */
}

.language-drodpown .dropdown-toggle{
	width: 36px;
	height: 36px;
	background-color: #FFF;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	z-index: 20;
	cursor: pointer;
	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
}
.language-drodpown .dropdown-toggle img{
	width: 26px;
	height: 26px;
	border-radius: 50%;
}
.language-drodpown .dropdown-menu{
	width: 220px;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
	padding: 8px 0 0;
    margin: 0;
    min-height: 100px;
	display: block !important;
	z-index: -1;
	opacity: 0;
	border-radius: 10px;
	transition: all .3s ease-in-out;
	-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
}
.language-drodpown:hover .dropdown-toggle{
	box-shadow: none;
}
.language-drodpown:hover .dropdown-menu{
	opacity: 1;
	z-index: 1;
	transition: all .3s ease-in-out;
}
.language-drodpown .dropdown-menu li a{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 4px 10px;
	background-color: transparent !important;
	transition: var(--default-transition);
}
.language-drodpown .dropdown-menu li a:hover{
	background-color: #fafafa !important;
	transition: var(--default-transition);
}
.language-drodpown .dropdown-menu li a > .leftbar{
	width: 26px;
	height: 26px;
	border-radius: 50%;
}
.language-drodpown .dropdown-menu li a > .rightbar{
	width: calc( 100% - 26px );
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 0 15px;
	position: relative;
}
.language-drodpown .dropdown-menu li span{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	letter-spacing: 0.25px;
}
.language-drodpown .dropdown-menu li a > .rightbar p{
	font-size: 11px;
	color: #999;
	letter-spacing: 0.25px;
	margin: 0;
}
.language-drodpown .dropdown-menu li a > .rightbar i{
	font-size: 20px;
	color: #aaa;
	position: absolute;
	top: 50%;
	right: -3px;
	transform: translateY(-50%);
	opacity: 0;
	transition: var(--default-transition);
}
.language-drodpown .dropdown-menu li a:hover > .rightbar i{
	opacity: 1;
	transition: var(--default-transition);
}
.language-drodpown .dropdown-menu li.active a > .rightbar i{
	color: #444;
	opacity: 1;
}
.li-last{
	min-height: 45px;
    padding: 0 0 0 48px;
	margin: 2px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	border-top: 1px solid #eee;
}
.li-last span{
	font-size: 13px;
	margin: 8px 0 0;
}
.nav-wrapper{
	width: 100%;
	float: left;
	height: calc( 100vh - 215px );
	overflow-y: auto;
	position: relative;
	margin: 0 0 5px;
}
ul.custom-nav li {
	margin: 0 0 5px;
}
ul.custom-nav li a {
	font-size: 13px;
	font-weight: 500;
	color: #111;
	text-decoration: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0 10px 18px;
	white-space: nowrap;
	position: relative;
	transition: var(--default-transition);
}
.page-wrapper .left-column ul.custom-nav li a span{
	opacity: 1;
	visibility: visible;
	margin: 0;
	transition: var(--default-transition);
}
ul.custom-nav li a i {
	font-size: 19px;
	color: #A1B0C0;
	margin: 0 18px 0 0;
	vertical-align: text-bottom;
	transition: var(--default-transition);
}
ul.custom-nav li.active > a span{
	font-weight: 700;
}
ul.custom-nav li:hover a i, ul.custom-nav li.active > a i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
ul.custom-nav li ul.mm-collapse, ul.custom-nav li ul.mm-collapsing {
	margin: 6px 0 0;
}
ul.custom-nav li ul.mm-collapse li, ul.custom-nav li ul.mm-collapsing li {
	border-left: 4px solid transparent;
	margin: 0;
}
ul.custom-nav li ul.mm-collapse li a, ul.custom-nav li ul.mm-collapsing li a {
	font-size: 13px;
	padding: 9px 0 8px 52px;
	color: #666;
}
ul.custom-nav li ul.mm-collapse li.active, ul.custom-nav li ul.mm-collapsing li.active {
	border-color: var(--primary-color) !important;
}
ul.custom-nav li ul.mm-collapse li.active a, ul.custom-nav li ul.mm-collapsing li.active a {
	background: #f6f8f9;
	font-weight: 600;
	color: var(--primary-color);
}
ul.custom-nav .has-arrow:after{
	width: 0.45em;
    height: 0.45em;
	color: #aaa;
	right: 25px;
	transform: rotate(-225deg) translateY(-50%);
}
/*================================
	Page Header code 
=================================*/
.page-header{
	min-height: 48px;
	padding: 5px 20px;
	margin: 0;
	border: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	z-index: 1;
}
.mobile-menu {
    width: 50px;
    height: 50px;
    background-color: #FEF1EE;
    position: fixed;
    left: 0;
    top: 0;
	z-index: 100;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}
.mobile-menu i{
	font-size: 24px;
	color: var(--primary-color);
}
.page-header .page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.page-header .page-title .back-btn{
	width: 34px;
	height: 34px;
	background-color: #F3F3F3;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex: none;
	margin: 0 10px 0 0;
	cursor: pointer;
}
.page-header .page-title .back-btn a {
    display: flex;
}
.page-header .page-title .back-btn i{
	font-size: 22px;
	color: #333;
}
.page-header .page-title span{
	font-size: 22px;
	font-weight: 500;
	color: #000;
	letter-spacing: 0.5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.page-buttons{
	display: flex;
    flex-wrap: wrap;
	margin: 0 0 0 auto;
}
.page-buttons .btn {
    font-size: 13px;
    font-weight: 500;
	padding: 5px 17px;
	min-width: 85px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: center;
}
.page-buttons .btn i{
	font-size: 20px;
	margin: 0 5px 0 0;
}
.page-buttons .btn + .btn{
	margin: 0 0 0 5px;
}
.page-buttons .select-dropdown {
	display: flex;
	gap: 5px;
	align-items: center;
}
.page-buttons .select-dropdown select {
	max-width: 180px;
}
.notification-control ul {
	display: flex;
}
.notification-control ul li{
	position: relative;
}
.notification-control ul li a{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.notification-control ul li + li{
	padding: 0 0 0 15px;
	margin: 0 0 0 15px;
}
html[dir="rtl"] .notification-control ul li + li{
	padding: 0 15px 0 0;
	margin: 0 15px 0 0;
}
.notification-control ul li + li::before{
	content: '';
	width: 1px;
	height: 25px;
	background-color: #e5e5e5;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
html[dir="rtl"] .notification-control ul li + li::before{
	left: auto;
	right: 0;
}
.notification-counter {
	font-size: 11px;
	font-weight: 500;
	color: #FFF;
	line-height: 10px;
	min-width: 27px;
	min-height: 16px;
	background-color: var(--primary-color);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
}
.notification-counter.green {
	background: #10B835;
}
.notification-counter.yellow {
	background: #F2952B;
}
.notification-counter.red {
	background: #E23636;
}
.notification-counter.blue {
	background: #2680EB;
}
/*================================
	Breadcrumb code 
=================================*/
.breadcrumb-wrapper .breadcrumb{
	background-color: #fbfbfb;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-radius: 0px;
	padding: 1px 20px;
	margin: 0;
	display: flex;
}
.breadcrumb-wrapper .breadcrumb li{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.breadcrumb-wrapper .breadcrumb li a{
	color: #333;
}
.breadcrumb-wrapper .breadcrumb li i{
	font-size: 14px;
	color: #aaa;
	position: relative;
	top: 1px;
	display: inline-block;
}
.breadcrumb-wrapper .breadcrumb li:first-child a{
	width: 24px;
	height: 24px;
	color: var(--primary-color);
	background-color: #ffefeb;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px 0 0 4px;
	margin: 0 20px 0 0;
}
.breadcrumb-wrapper .breadcrumb li:first-child a i{
	color: var(--primary-color);
	position: relative;
	top: auto;
	left: 2px;
}
.breadcrumb-wrapper .breadcrumb li:first-child:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 10px solid #ffefeb;
    position: absolute;
    top: 50%;
    left: calc( 100% - 20px );
	transform: translateY(-50%);
    z-index: 2;
}
.breadcrumb-wrapper .breadcrumb li:nth-child(2) i,
.breadcrumb>li+li:before{
	display: none;
}
/*================================
	Custom Heading code 
=================================*/
.custom-heading{
	width: 100%;
	float: left;
	min-height: 36px;
	background-color: var(--primary-color-bg);
	border: 1px solid var(--primary-color);
	border-left-width: 3px;
	border-radius: 2px;
	padding: 4px 5px;
	margin: 0 0 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.custom-heading > .leftbar{
	min-width: 26px;
	min-height: 26px;
	background-color: var(--primary-color);
	border-radius: 3px;
	margin: 0 15px 0 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.custom-heading > .leftbar:before {
	content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--primary-color);
    transform: translateY(-50%) rotate(90deg);
}
.custom-heading > .leftbar i{
	font-size: 18px;
	color: #FFF;
}
.custom-heading > .rightbar{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}
.custom-heading > .rightbar span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* flex: auto; */
}
.custom-heading > .rightbar span strong{
	display: inline-block;
}
.custom-heading > .rightbar .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 4px 8px;
	margin: 0 0 0 auto;
}
html[dir="rtl"] .custom-heading > .rightbar .btn{
	margin: 0 auto 0 0;
}
.custom-table.custom-table-red .custom-heading{
	background-color: #FFE8E8;
	border-color: #E23636;
}
.custom-table.custom-table-red .custom-heading > .leftbar{
	background-color: #E23636;
}
.custom-table.custom-table-red .custom-heading > .leftbar:before{
	border-bottom-color: #E23636;
}
/*================================
	Basic Flex code 
=================================*/
.basic-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 0 20px;
}
.basic-flex > .leftbar{
	display: flex;
	align-items: center;
	flex: 1;
}
.basic-flex > .leftbar span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    display: block;
}
.basic-flex > .rightbar .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.basic-flex > .rightbar .btn i {
    font-size: 17px;
}
/*================================
	Custom Table code 
=================================*/
.custom-table{
	width: 100%;
	float: left;
	margin: 0 0 15px;
}
.custom-table .table-counter{
	font-size: 18px;
    font-weight: 700;
    color: #333;
	width: 100%;
	float: left;
    display: flex;
    flex-wrap: wrap;
}
.custom-table .table-meta {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
	margin: 0 0 20px;
}
.custom-filter.flex-auto {
    flex: auto;
}
.custom-table .table-meta .custom-filter .form-group{
	margin: 0;
}
.custom-table .table-meta .custom-filter .form-control{
	min-width: 200px;
	height: 36px;
}
.custom-table .table-meta .custom-filter + .custom-filter,
.custom-table .table-meta .custom-filter + .leftbar,
.custom-table .table-meta > .leftbar + .rightbar{
	margin: 0 0 0 10px;
}
.custom-table .table-meta > .leftbar.f-auto{
	flex: auto;
}
.custom-table .table-meta .form-control.search-field{
	min-width: 250px;
	border: 1px solid #ddd;
	height: 36px;
	border-radius: 2px;
}
.custom-table .table-meta > .rightbar .btn{
	min-height: 36px;
	padding: 7px 24px;
	border-radius: 3px;
}
.custom-table .table-meta > .rightbar .btn + .btn{
	margin: 0 0 0 7px;
}
.custom-table .table-meta > .rightbar .btn.btn-primary-outline:hover, .custom-table .table-meta > .rightbar .btn.btn-primary-outline:focus{
	background: rgba(254,88,43,.08);
	color: var(--primary-color);
}
.custom-table .table-meta > .rightbar .btn.btn-primary-outline:focus{
	box-shadow: 0 0 0 3px rgba(254,88,43,.3);
}
.custom-table .table-responsive{
	overflow-x: unset;
}
.custom-table .table{
	border-color: transparent;
}
.custom-table .table>thead>tr>th{
	font-size: 12px;
	font-weight: 700;
	color: #000;
	background-color: #F4F4F4;
	border: none;
	padding: 6px 8px;
	letter-spacing: 0.20px;
	text-transform: uppercase;
	vertical-align: middle;
}
.custom-table .table>thead>tr>th .custom-control {
    font-weight: 700;
}
.custom-table .table>thead>tr>th span {
    font-size: 11px;
    color: #666;
    padding: 0 3px;
}
.custom-table .table>tbody>tr>td{
	font-size: 13px;
	font-weight: 500;
	color: #222;
	padding: 10px 8px;
	border: none;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}
.custom-table .table>tbody>tr>td.border-0{
	border: none !important;
}
.custom-table .table>tbody>tr>td.w-120{
	width: 120px !important;
}
.custom-table .table>tbody>tr>td.w-200{
	width: 200px !important;
}
.custom-table .table>tfoot{
	background-color: #f4f4f4;
	position: sticky;
	bottom: -15px;
}
.custom-table .table>tfoot:before {
    content: '';
    border: 1px solid var(--primary-color);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.custom-table .table>tfoot td {
    position: relative;
}
.custom-table .table>tbody>tr>td.vertical-top{
	vertical-align: top;
}
.custom-table .table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fafafa;
}
.custom-table .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #FFF;
}
.custom-table.custom-table-red .table>thead>tr>th{
	background-color: #FFE8E8;
}
.custom-table.custom-table-red .table-striped>tbody>tr:nth-of-type(even){
	background-color: #FFFAFA;
}
.custom-table .table>tbody>tr>td .btn, .custom-table .table>tfoot>tr>td .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	/* min-width: 75px; */
}
.custom-table .table>tbody>tr>td .btn + .btn{
	margin: 0 0 0 3px;
}
.custom-table .table>tbody>tr>td .btn i, .custom-table .table>tfoot>tr>td .btn i{
	font-size: 18px;
	display: inline-block;
	vertical-align: bottom;
	margin: 0 3px 0 0;
}
.custom-table .table>tbody>tr>td .btn.btn-icon i, .custom-table .table>tfoot>tr>td .btn.btn-icon i{
	margin: 0 !important;
}
.custom-table .table>tbody>tr>td .btn-icon, .custom-table .table>tfoot>tr>td .btn-icon{
	width: 28px;
	height: 28px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.custom-table .table>tbody>tr>td.text-right .btn-icon {
    float: right;
}
.custom-table .table .w-40{
	width: 40px !important;
}
.custom-table .table .w-70{
	width: 70px !important;
}
.custom-table .table>tbody>tr>td i.icon-check-circle{
	font-size: 16px;
	color: #21A67A;
}
.custom-drawer .custom-table .table>tbody>tr>td .btn-icon i.icon-menu-right {
    font-size: 11px;
    position: relative;
    top: -3px;
}
html[dir="rtl"] .custom-table .table>tbody>tr>td .btn-icon i.icon-menu-right{
	transform: rotate(180deg);
	position: relative;
	left: -2px;
}
.custom-table .table>tbody>tr>td .status-icon{
	font-size: 20px;
	margin: 0 2px 0 0;
}
html[dir="rtl"] .custom-table .table>tbody>tr>td .status-icon{
	margin: 0 0 0 2px;
}
.custom-table .table>tbody>tr>td .btn-icon.btn-default{
	border: 1px solid #ddd !important;
}
.custom-drawer .custom-table .table .form-control{
	height: 28px;
}
.table-heading{
	display: flex;
}
.custom-table .table>thead>tr>th a{
	color: #000;
	display: flex;
	/* flex-wrap: wrap; */
	align-items: center;
}
.custom-table .table>thead>tr>th.text-right a{
	float: right;
}
.custom-table .table>thead>tr>th i{
    font-size: 9px;
    color: #999;
    line-height: 6px;
	margin: 0 3px;
}
.custom-table .table>thead>tr>th i.active{
	color: var(--primary-color);
}
.anchor-remove{
	width: 22px;
	height: 22px;
	line-height: 22px;
	border: 1px solid #E23636;
	border-radius: 3px;
	text-align: center;
	display: inline-block;
	transition: var(--default-transition);
}
.anchor-remove i{
	font-size: 16px;
	color: #E23636;
	position: relative;
    top: 1px;
	transition: var(--default-transition);
}
.anchor-remove:hover{
	background-color: #E23636;
	transition: var(--default-transition);
}
.anchor-remove:hover i{
	color: #FFF;
	transition: var(--default-transition);
}
.custom-table .table-dropdown {
	float: right;
}
.custom-table .table-dropdown .dropdown-toggle{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--default-transition);
}
.custom-table .table-dropdown .dropdown-toggle i{
	font-size: 22px;
	color: #666;
	transition: var(--default-transition);
}
.custom-table .table-dropdown:hover .dropdown-toggle{
	background-color: #f2f2f2;
	transition: var(--default-transition);
}
.custom-table .table-dropdown:hover .dropdown-toggle i{
	color: #333;
	transition: var(--default-transition);
}
.custom-table .table-dropdown .dropdown-menu{
	min-width: 100px;
	border: none;
    top: 50%;
    left: auto;
    right: calc( 100% + 3px );
	transform: translateY(-50%);
	display: block;
	opacity: 0;
	z-index: -1;
	margin: 0 -15px 0 0;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	transition: var(--default-transition);
}
.custom-table .table-dropdown:hover .dropdown-menu{
	opacity: 1;
	z-index: 999;
	margin: 0 !important;
	transition: var(--default-transition);
}
.custom-table .table-dropdown .dropdown-menu:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    transform: translateY(-50%) rotate(90deg);
}
.custom-table .table-dropdown .dropdown-menu li a{
	font-size: 13px;
	font-weight: 500;
	color: #666;
	padding: 6px 7px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.custom-table .table-dropdown .dropdown-menu li a i{
	font-size: 16px;
	display: inline-block;
	margin: 0 5px 0 0;
	position: relative;
    right: -10px;
	transition: var(--default-transition);
}
.custom-table .table-dropdown:hover .dropdown-menu li a i{
    right: 0;
	transition: var(--default-transition);
}
.custom-table .table-dropdown .dropdown-menu li.li-delete a{
	color: #E23636;
}
.custom-table .table-dropdown .dropdown-menu li.text-primary a{
	color: var(--primary-color);
}
.custom-table .table-dropdown .dropdown-menu li + li a{
	margin-top: 5px;
}
.action-btn{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.action-btn a{
	font-size: 22px;
}
.action-btn a .icon-pencil-fill{
	font-size: 18px;
}
.action-btn .del-icon{
	color: #E23636;
	transition: var(--default-transition);
}
.action-btn .del-icon:hover{
	color: #f72e2e;
	transition: var(--default-transition);
}
.table-pagination{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.table-pagination > .leftbar{
	display: flex;
	flex: auto;
}
.table-pagination > .rightbar span{
	font-size: 12px;
	color: #666;
	letter-spacing: 0.25px;
}
.table-pagination .pagination{
	margin: 0;
}
.table-pagination .pagination ul{
	display: flex;
	flex-wrap: wrap;
}
.table-pagination .pagination li > *{
	font-size: 13px;
	font-weight: 500;
	color: #666;
	width: 26px;
	height: 26px;
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(238,238,238,1) 100%);
	border: 1px solid #ddd;
	border-radius: 3px;
	letter-spacing: 0.5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: var(--default-transition);
}
.table-pagination .pagination li:not(:last-child) > *{
	margin: 0 5px 0 0;
}
.table-pagination .pagination li i{
	font-size: 25px;
}
.table-pagination .pagination li > *:hover{
	color: #333;
	border-color: #999;
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(221,221,221,1) 100%);
	transition: var(--default-transition);
}
.table-pagination .pagination li.active > *{
	color: var(--primary-color);
	border-color: var(--primary-color);
	background: rgb(250,250,250);
	background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(221,221,221,1) 100%);
	transition: var(--default-transition);
}
.custom-drawer .custom-table .table-meta {
    margin: 5px 0 20px;
    margin: -15px 0 5px;
    padding: 15px 0;
    position: sticky;
    top: -15px;
    z-index: 10;
    background-color: #FFF;
}
.widgets-wrapper .custom-table .table>thead>tr>th,
.custom-tabs .custom-table .table>thead>tr>th,
.custom-drawer .custom-table .table>thead>tr>th{
	padding: 11px 8px;
	border-top: 3px solid var(--primary-color);
}
.custom-drawer .custom-table .table>thead>tr>th{
	white-space: nowrap;
}
.custom-drawer .custom-table .table-meta > .leftbar.f-auto .form-control{
	font-weight: 500;
}
.custom-drawer .custom-table .table>tbody>tr>td .custom-control{
	display: inline-block;
	vertical-align: top;
}
/*==========================================
	Offers Table code 
============================================*/
.custom-table .table>tbody>tr[class^='promoted'] td{
	background-color: rgba(var(--primary-color-rgba), .04);
	border-bottom-color: rgba(var(--primary-color-rgba), .15);
	position: relative;
}
.custom-table .table>tbody>tr.promoted-parent td:first-child:before {
    content: '';
    background: url(../img/tree_plus.svg) no-repeat center;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.custom-table .table>tbody>tr.promoted-parent td:first-child:after{
	content: '';
	border-left: 1px dashed var(--primary-color);
	position: absolute;
    left: 50%;
    display: block;
    bottom: 0;
    top: calc( 50% + 8px );
}
.custom-table .table>tbody>tr.promoted-child td:first-child::before{
	content: '';
	border-left: 1px dashed var(--primary-color);
	position: absolute;
    left: 50%;
    display: block;
    top: 0;
	bottom: 0;
}
.custom-table .table>tbody>tr.promoted-child.last td:first-child::before{
	bottom: 50%;
}
.custom-table .table>tbody>tr.promoted-child td:first-child:after{
	content: '';
	border-bottom: 1px dashed var(--primary-color);
	position: absolute;
    left: 50%;
    display: block;
    top: 50%;
    right: 0;
}
html[dir="rtl"] .custom-table .table>tbody>tr.promoted-child td:first-child::after{
	right: 50%;
    left: 0;
}
.custom-table .table>tbody>tr>td .price + .price{
	font-size: 11px;
	font-weight: 500;
	color: #C9252D;
	display: block;
	text-decoration: line-through;
	margin: 2px 0 0;
}
/*================================
	Btn Group code 
=================================*/
.btn-group {
    display: flex;
}
.text-right .btn-group, 
.pull-right .btn-group{
	float: right;
}
.btn-group .btn, .custom-table .table>tbody>tr>td .btn-group .btn{
	min-height: 26px;
	padding: 1px 10px 3px;
    line-height: 1;
	display: flex;
    align-items: center;
}
.btn-group .btn + .btn{
	margin: 0 0 0 -1px !important;
}
html[dir="rtl"] .text-right .btn-group, 
html[dir="rtl"] .pull-right .btn-group{
	float: left;
}
html[dir="rtl"] .btn-group .btn + .btn{
	margin: 0 -1px 0 0 !important;
}
html[dir="rtl"] .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
html[dir="rtl"] .btn-group>.btn:last-child:not(:first-child), 
html[dir="rtl"] .btn-group>.dropdown-toggle:not(:first-child) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/*================================
	Note code 
=================================*/
.note {
	font-size: 14px;
	font-weight: 500;
	color: #222;
	display: block;
	margin: 0 0 10px;
}
.note a{
	font-size: 13px;
	color: var(--primary-color);
	display: inline-block;
	margin: 0 2px;
}
/*==========================================
	Custom Sub Footer code 
============================================*/
.custom-sub-footer{
	width: 100%;
	float: left;
}
.custom-sub-footer p{
	font-size: 13px;
	font-weight: 500;
	color: #333;
}
.custom-sub-footer p a{
	font-weight: 700;
	color: var(--primary-color);
	display: inline-block;
	text-decoration: underline;
}
/*==========================================
	Edit product page code 
============================================*/
.channel-grid{
	display: inline-grid;
	border: 1px solid #eee;
	border-top: none;
}
.channel-grid .table{
	margin: 0;
}
.channel-grid .table thead tr th, 
.channel-grid .tablet body tr td {
    white-space: nowrap;
}
.channel-grid .table thead tr th .d-flex{
	display: flex;
	flex-wrap: initial;
}
.channel-grid.table-wrapper .table.table-bordered{
	border-left: none;
	border-right: none;
}
.channel-grid .table thead tr > th:first-child, 
.channel-grid .table tbody tr > td:first-child{
	font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
	z-index: 10;
    background: #f2f5f6;
}
html[dir="rtl"] .channel-grid .table thead tr > th:first-child, 
html[dir="rtl"] .channel-grid .table tbody tr > td:first-child{
	left: auto;
	right: 0;
}
.channel-grid.table-wrapper .table>thead>tr>th .custom-control {
	display: inline;
    position: relative;
    /* top: -3px; */
    vertical-align: text-bottom;
}


.variation-block{
	width: 100%;
	float: left;
}
.variation-block hr {
	border-color: #ddd;
}
.variation-block .custom-control.custom-radio{
	margin-right: 15px;
}




.tax-box{
	width: 100%;
	float: left;
	border: 1px solid #ddd;
}
.tax-box-header{
	width: 100%;
	float: left;
	min-height: 44px;
	background-color: #f4f4f4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.tax-box-icon {
	width: 30px;
	height: 30px;
	background: rgb(255,129,96);
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%);
	border-radius: 50%;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	margin: 0 10px;
}
.tax-box-icon i{
	font-size: 22px;
	color: #FFF;
}
.tax-box-header span{
	font-size: 13px;
	font-weight: 700;
	color: #333;
	letter-spacing: 0.10px;
}
.tax-box-body{
	width: 100%;
	float: left;
}
.tax-box-body ul li{
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	color: #333;
	padding: 9px 10px;
	letter-spacing: 0.10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.tax-box-body ul li:not(:last-child){
	border-bottom: 1px solid #ddd;
}
.tax-box-body ul li p{
	margin: 0 0 0 auto;
}

.realted-item-wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.realted-item-wrap > .leftbar{
	width: calc( 100% - 290px );
}
.realted-item-wrap.no-item > .leftbar{
	display: none;
}
.realted-item-wrap > .rightbar{
	width: 100%;
    height: 220px;
    background-color: #FFF8F6;
    border: 1px dashed #F9B9A7;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
}
.realted-item-wrap:not(.no-item) > .rightbar{
	width: 260px;
	padding: 0 25px;
	position: sticky;
	top: 0;
}
.realted-item-wrap > .rightbar img{
	margin: 0 0 14px;
}
.realted-item-wrap > .rightbar span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0 0 10px;
    word-break: break-all;
}
.realted-item-wrap > .rightbar .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 7px 21px;
	margin: 0 0 7px;
	border-radius: 6px;
}

/*================================
	Custom Tabs code 
=================================*/
.custom-tabs {
    width: 100%;
    float: left;
}
.custom-tabs .nav-tabs.primary-tabs {
    width: calc( 100% + 40px );
    position: relative;
    left: -20px;
    padding: 0 20px;
}
.widgets-wrapper .custom-tabs .nav-tabs.primary-tabs {
    width: calc( 100% + 30px );
    left: -15px;
}
.custom-tabs .nav-tabs.primary-tabs>li>a{
	font-size: 14px;
	font-weight: 500;
	color: #666;
	display: flex;
    align-items: center;
	border: none !important;
	padding: 10px 1px;
	background-color: transparent !important;
	position: relative;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.primary-tabs>li:not(:last-child)>a{
	margin: 0 35px 0 0;
}
.custom-tabs .nav-tabs.primary-tabs>li>a:hover, .custom-tabs .nav-tabs.primary-tabs>li.active>a{
	color: #000;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.primary-tabs>li>a:after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	background-color: #000;
	opacity: 0;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.primary-tabs>li>a:hover:after{
	background-color: #666;
}
.custom-tabs .nav-tabs.primary-tabs>li>a:hover:after, .custom-tabs .nav-tabs.primary-tabs>li.active>a:after{
	opacity: 1;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs>li>a i{
	font-size: 18px;
	color: #E23636;
	margin: 0 7px 0 0;
	display: none;
}
.custom-tabs .nav-tabs>li.error>a i{
	display: block;
}
.custom-tabs .nav-tabs.primary-tabs>li.error>a{
	color: #E23636;
}

.custom-tabs .nav-tabs.primary-tabs>li.error.active>a::after,
.custom-tabs .nav-tabs.primary-tabs>li.error>a:hover:after{
	background-color: #E23636;
}


.custom-tabs .nav-tabs.secondary-tabs {
	width: 100%;
	float: left;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.custom-tabs .nav-tabs.secondary-tabs>li>a{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	display: flex;
    align-items: center;
	border: none !important;
	padding: 6px 20px;
	background-color: #eee;
	border-radius: 4px;
	position: relative;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.secondary-tabs>li:not(:last-child)>a{
	margin: 0 8px 0 0;
}
.custom-tabs .nav-tabs.secondary-tabs>li>a:hover, .custom-tabs .nav-tabs.secondary-tabs>li.active>a{
	background-color: rgb(255,129,96);
    background-image: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%);
	color: #FFF;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.secondary-tabs>li.error>a, .custom-tabs .nav-tabs.secondary-tabs>li.error>a:hover{
	color: #E23636 !important;
	background: #eee !important;
	color: #FFF;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.secondary-tabs>li.error.active>a, .custom-tabs .nav-tabs.secondary-tabs>li.error.active>a:hover{
	color: #FFF !important;
	background: rgb(255,129,129);
	background: linear-gradient(180deg, rgba(255,129,129,1) 0%, rgba(226,54,54,1) 100%) !important;
	color: #FFF;
	transition: all .2s ease-in-out;
}
.custom-tabs .nav-tabs.secondary-tabs>li.error.active>a i,  .custom-tabs .nav-tabs.secondary-tabs>li.error.active>a:hover i{
	font-size: 18px;
	color: #FFF !important;
}

.custom-tabs .tab-content{
	width: 100%;
	float: left;
	padding: 20px 0;
}
.custom-tabs .nav-tabs.secondary-tabs + .tab-content{
	padding: 15px 0;
}
.role-listing .custom-control{
	margin: 5px 30px 20px 0;
}
/*==================================
	Custom Tabs Vertical Code
===================================*/
.custom-tabs-vertical {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 0 20px;
}
.custom-tabs-vertical .nav-tabs{
	min-width: 130px;
	display: flex;
	flex-direction: column;
	border: none;
	margin: 20px 0 0;
}
.custom-tabs-vertical .nav-tabs>li{
	display: flex;
	margin: 0;
}
.custom-tabs-vertical .nav-tabs>li>a{
	width: 100%;
	font-size: 13px;
	color: #000;
	padding: 11px 10px;
	border: none;
	margin: 0;
	position: relative;
}
.custom-tabs-vertical .nav-tabs>li>a::after{
	content: '';
	width: 1px;
	background-color: #fcfcfc;
	position: absolute;
	top: 0;
	right: -2px;
	bottom: 0;
}
.custom-tabs-vertical .nav>li>a:focus, .custom-tabs-vertical .nav>li>a:hover{
	background-color: transparent;
}
.custom-tabs-vertical .nav-tabs>li.active>a, .custom-tabs-vertical .nav-tabs>li.active>a:focus, .custom-tabs-vertical .nav-tabs>li.active>a:hover,
.custom-tabs-vertical .nav-tabs>li.selected>a, .custom-tabs-vertical .nav-tabs>li.selected>a:focus, .custom-tabs-vertical .nav-tabs>li.selected>a:hover{
	color: #000;
	font-weight: 700;
	background-color: #fcfcfc;
	border: 1px dashed #ccc;
	border-right-color: transparent;
	border-radius: 4px 0 0 4px;
}
.custom-tabs-vertical .nav-tabs>li.active>a .custom-control {
    font-weight: 700;
}
.custom-tabs-vertical .nav-tabs>li.active>a .custom-radio .custom-indicator {
    border: 1px solid #000;
    background-color: #000;
}
.custom-tabs-vertical .nav-tabs>li.active>a .custom-radio .custom-indicator:after {
    content: '';
	top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: #FFF;
}



.custom-tabs-vertical .tab-content{
	flex: 1;
	min-height: 160px;
	padding: 15px 20px;
	background-color: #fcfcfc;
	border: 1px dashed #ccc;
	border-radius: 5px;
}

/*==================================
	Custom Collapse Code
===================================*/
.custom-collapse .panel-group{
	margin: 0;
}
.custom-collapse .panel{
	border: none;
	box-shadow: none;
}
.custom-collapse .panel-heading {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    padding: 0 !important;
    display: block !important;
}
.custom-collapse .panel-heading a{
    color: #000;
	padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
	position: relative;
}
.custom-collapse .panel-heading a::before{
	content: '';
	width: calc( 100% - 50px );
	height: 1px;
	background-color: #ddd;
	position: absolute;
	top: 50%;
	z-index: 10;
}
.custom-collapse .panel-heading a span {
    background-color: #FFF;
    position: relative;
    z-index: 50;
    padding: 0 10px 0 0;
}
.custom-collapse .panel .panel-arrow{
	width: 20px;
	height: 20px;
	background-color: #aaa;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 0 0 auto;
	position: relative;
    z-index: 50;
	transition: var(--default-transition);
}
.custom-collapse .panel-heading a:hover .panel-arrow,
.custom-collapse .panel-heading a[aria-expanded="true"] .panel-arrow{
	background-color: var(--primary-color);
	transition: var(--default-transition);
}
.custom-collapse .panel .panel-arrow i{
	font-size: 16px;
	color: #FFF;
	transition: var(--default-transition);
}
.custom-collapse .panel-heading a[aria-expanded="true"] .panel-arrow i{
	transform: rotate(180deg);
	transition: var(--default-transition);
}
.custom-collapse .panel-body{
	padding: 20px 0 0;
	border: none !important;
}
.custom-collapse .panel-body .table{
	margin: 0;
}


/*==================================
	Media Gallery Code
===================================*/
.library-wrapper{
	/* overflow: hidden; */
	padding-top: 0;
}
.library-wrapper.drawer-body{
	overflow: auto;
}
.library-wrapper > .leftbar{
	width: calc( 100% - 305px );
	float: left;
}
.library-wrapper > .rightbar {
    width: 280px;
    float: right;
    position: sticky;
    top: 15px;
    margin: 15px 0 0;
}
.library-search-form{
	position: sticky;
	top: 0;
	z-index: 10;
}
.library-search {
    width: 100%;
    float: left;
    display: flex;
    position: sticky;
    top: 0;
	z-index: 200;
    background-color: #FFF;
    padding: 15px 0;
}
.custom-drawer .library-search {
    /* width: calc( 100% - 30px);
    margin: 15px auto 0; */
    float: none;
}
.library-search > .leftbar{
	flex: auto;
}
.library-search > .rightbar{
	margin: 0 0 0 10px;
}
.library-search .form-control{
	width: calc( 100% - 5px );
	font-size: 13px;
	color: #555;
	height: 36px;
	border-color: #ddd;
}
.library-search > .rightbar .btn {
    padding: 7px 24px;
    border-radius: 3px;
}
.library-search > .rightbar .btn + .btn {
    margin: 0 0 0 7px;
}
.custom-library {
    width: calc( 100% + 5px );
    float: left;
    /* height: calc( 100vh - 145px); */
	margin: 0 0 0 -5px;
	overflow-x: hidden;
    overflow-y: auto;
	position: relative;
}
.custom-library .table-pagination{
	float: left;
	margin: 15px 0;
}
.custom-library * {
    box-sizing: content-box;
}
.custom-library li{
	list-style-type: none;
}
.dz-row{
	width: 11.11%;
	float: left;
	position: relative;
	padding: 5px;
	box-sizing: border-box !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.dz-attachment {
	position: relative;
}
.dz-select {
    position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 150;
	margin: 0;
	opacity: 0;
}
.dz-select input {
    display: none;
}
.dz-select span{
	background-image: url(../img/library-icons.png);
    background-repeat: no-repeat;
	background-position: -13.5px 4px;
    float: right;
    height: 16px;
    width: 16px;
	background-color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dz-select span:hover{
	background-position: -43px 3px;
}
.dz-row.dz-row-active .dz-select{
	opacity: 1;
}
.dz-preview{
	position: relative;
}
.dz-details {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 2px;
}
.dz-row.dz-error .dz-details{
	border-color: #f44336;
}
.dz-row.dz-row-active .dz-details {
	border: 1px solid var(--primary-color);
}
.dz-thumb{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.dz-preview:before {
	content: "";
	display: block;
	padding-top: 100%;
}
.dz-preview img{
	max-width: 100%;
}
.dz-filename{
	min-height: 23px;
	background-color: #FFF;
	border-top: 1px solid #ddd;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.dz-filename span{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	padding: 0 3px;
	letter-spacing: 0.5px;
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
}
.dz-row.dz-error .dz-filename{
	background-color: #FFF2F2;
	border-color: #FFA2A2;
}
.dz-row.dz-error .dz-filename span{
	color: #E23636;
}
.dz-row .dz-preview.is-broken .dz-thumb{
	transform: none;
}
.dz-row .dz-preview.is-broken .dz-thumb i {
    font-size: 32px;
    display: block;
    color: #E23636;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.dz-progress.progress {
	width: calc( 100% - 18px );
	background: #d6e4f2;
	height: 5px;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 180;
}
.dz-progress.progress .progress-bar{
	background-color: #1b67b3;
	box-shadow: none;
}
.dz-success-mark, .dz-error-mark {
	font-size: 40px;
	pointer-events:none;
	opacity:0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -20px;
}
.dz-success-mark i, .dz-error-mark i{
    z-index: 50;
    position: relative;
}
.dz-success-mark i:before, .dz-error-mark i:before {
    z-index: 50;
    position: relative;
}
.dz-success-mark i:after, .dz-error-mark i:after {
    content: '';
    background: #FFF;
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 0;
    border-radius: 50%;
    z-index: 1;
    width: 80%;
    margin: 0 auto;
    height: 80%;
}
.dz-success-mark i{
	color: #10b835;
}
.dz-error-mark i{
	color: #e23636;
}

@-webkit-keyframes passing-through {
	0% {
		opacity: 0;
		-webkit-transform: translateY(40px);
		-moz-transform: translateY(40px);
		-ms-transform: translateY(40px);
		-o-transform: translateY(40px);
		transform: translateY(40px);
	}
	30%, 70% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-40px);
		-moz-transform: translateY(-40px);
		-ms-transform: translateY(-40px);
		-o-transform: translateY(-40px);
		transform: translateY(-40px);
	}
}
@-moz-keyframes passing-through {
	0% {
		opacity: 0;
		-webkit-transform: translateY(40px);
		-moz-transform: translateY(40px);
		-ms-transform: translateY(40px);
		-o-transform: translateY(40px);
		transform: translateY(40px);
	}
	30%, 70% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-40px);
		-moz-transform: translateY(-40px);
		-ms-transform: translateY(-40px);
		-o-transform: translateY(-40px);
		transform: translateY(-40px);
	}
}
@keyframes passing-through {
	0% {
		opacity: 0;
		-webkit-transform: translateY(40px);
		-moz-transform: translateY(40px);
		-ms-transform: translateY(40px);
		-o-transform: translateY(40px);
		transform: translateY(40px);
	}
	30%, 70% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-40px);
		-moz-transform: translateY(-40px);
		-ms-transform: translateY(-40px);
		-o-transform: translateY(-40px);
		transform: translateY(-40px);
	}
}

.dz-preview.is-loading{
	background: url(../img/loaders_bg/loader-img-orange.svg) no-repeat center/70px;
}
.dz-thumb i,
.dz-row .dz-preview.is-broken .dz-thumb img,
.dz-preview.is-loading .dz-thumb img,
.dz-row .dz-progress,
.dz-row.dz-complete .dz-progress,
.dz-row.dz-complete.dz-processing .dz-progress{ 
	display:none; 
}
.dz-row.dz-processing .dz-progress{ 
	display:block; 
}
.dz-row.dz-error .dz-select,
.dz-row.is-broken .dz-select{
	pointer-events: none;
}
.dz-row.dz-success .dz-success-mark{
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-row.dz-error .dz-error-mark{
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-row.dz-complete.dz-upload-complete.dz-success .dz-success-mark,
.dz-row.dz-complete.dz-upload-complete.dz-error .dz-error-mark{
	animation: none;
}

.dz-delete {
	-webkit-animation: fadeOut ease 0.5s;
	-moz-animation: fadeOut ease 0.5s;
	-o-animation: fadeOut ease 0.5s;
	animation: fadeOut ease 0.5s;
	width: 0px;
	transition: width 0.5s ease-in-out;
}


@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (max-width: 1700px) {
	.dz-row{
		width: 14.25%;
	}
}
@media (max-width: 1450px) {
	.library-wrapper > .leftbar {
		width: calc( 100% - 285px );
	}
	.library-wrapper > .rightbar {
		width: 260px;
	}
	.dz-row{
		width: 16.66%;
	}
}
@media (max-width: 1390px) {
	.dz-row{
		width: 20%;
	}
}
@media (max-width: 1024px) {
	.dz-row{
		width: 20%;
	}
}
@media (max-width: 767px) {
	.dz-row{
		width: 33.3333%;
		width: 50%;
	}
}

.library-drawer .dz-row{
	width: 25%;
}
.upload-wrapper{
	width: 100%;
	min-height: 300px;
	padding: 0 10px;
	background-color: #FFF8F6;
	border: 1px dashed #F9B9A7;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0);
	transition: var(--default-transition);
}
.upload-wrapper.dz-drag-hover{
	box-shadow: 0px 3px 30px 0px rgba(var(--primary-color-rgba), 50%);
	transition: var(--default-transition);
}
.upload-wrapper img{
	pointer-events: none;
	user-select: none;
	margin: 0 0 8px;
}
.upload-wrapper span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
}
.upload-wrapper span + p{
	color: #999;
	margin: 2px 0 4px;
}
.upload-wrapper .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 21px;
    margin: 0 0 7px;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}
.upload-wrapper .btn i {
    font-size: 20px;
}
.upload-wrapper p, .ul-upload_info li{
	font-size: 12px;
	color: #666;
	text-align: center;
	margin: 0 0 3px;
}
.ul-upload_info li strong{
	font-weight: 500;
	color: #000;
}
.custom-tabs .upload-wrapper{
	min-height: 200px;
	margin: 0 0 20px;
}
.custom-tabs .upload-wrapper span{
	margin: 3px 0 12px;
}



.library-meta {
	width: 100%;
	float: left;
	padding: 5px;
}
.custom-drawer hr {
    border-color: #e5e5e5;
    width: calc( 100% + 30px );
    float: left;
    position: relative;
    left: -15px;
	margin: 10px 0 20px;
}
.library-meta hr {
    border-color: #e5e5e5;
    width: calc( 100% + 40px );
    float: left;
    position: relative;
    left: -20px;
	margin: 10px 0 20px;
}
.library-meta-header {
	width: 100%;
	overflow: hidden;
	padding: 0 0 10px;
}
.library-meta-header > .leftbar {
	width: 100px;
	float: left;
}
.library-meta-header > .rightbar {
	width: calc( 100% - 115px );
	float: right;
}
.library-meta-header > .leftbar .photo-thumb {
	width: 100%;
	height: 100px;
	background: #fafafa;
	border: 1px solid #ddd;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.library-meta-header > .leftbar.no-thumb .photo-thumb{
	background: #fafafa url(../img/photo_thumb.svg) no-repeat center/40px;
}
.library-meta-header > .leftbar.is-loading .photo-thumb,
.library-meta-header > .leftbar.is-broken .photo-thumb{
	background: #fafafa;
}
.library-meta-header > .leftbar .photo-thumb > div .del-item {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: #f44336;
    cursor: pointer;
	opacity: 0;
	transition: var(--default-transition);
}
.library-meta-header > .leftbar:hover .photo-thumb > div .del-item{
	opacity: 1;
	transition: var(--default-transition);
}
.library-meta-header > .leftbar.is-loading .photo-thumb > div .del-item,
.library-meta-header > .leftbar.no-thumb .photo-thumb > div .del-item{
	display: none;
}
.library-meta-header > .leftbar .photo-thumb > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.library-meta-header > .leftbar .photo-thumb img {
	max-width: 100%;
	max-height: 100%;
	height: 98px;
}
.library-meta-header > .leftbar i {
    display: none;
    font-size: 32px;
    color: #E23636;
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
}
.library-meta-header > .leftbar.is-loading .photo-thumb > div {
    background: none !important;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(254, 97, 55, 0.3);
    border-radius: 50%;
    border-top-color: #fe6137;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    position: absolute;
    left: 50%;
    top: 50%;
	margin: -10px;
}
.library-meta-header > .leftbar.is-broken i{
	display: block;
}
.library-meta-header > .leftbar.is-loading .photo-thumb img,
.library-meta-header > .leftbar.is-broken .photo-thumb img{
	display: none;
}
.library-meta-header > .rightbar span, .library-meta-header > .rightbar p {
	font-size: 12px;
	font-weight: 500;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
.library-meta-header > .rightbar span {
	font-size: 13px;
	font-weight: 500;
	color: #000;
	margin: 0 0 2px;
}
.library-meta-header > .rightbar p {
	color: #666;
	line-height: 20px;
	margin: 0;
}
.library-meta-header > .rightbar p i {
	padding: 0 5px;
    display: inline-block;
    font-style: normal;
}
.library-meta-header > .rightbar a {
	font-size: 12px;
	font-weight: 500;
	color: #2196f3;
	margin: 5px 0 0;
	width: 100%;
	display: inline-block;
}
.library-meta-header > .rightbar a+a {
	margin: 4px 0 0;
}
.library-meta-header > .rightbar .btn{
	font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    display: flex;
    align-items: center;
	margin: 15px 0 0;
}
.library-meta-header > .rightbar .btn i{
	font-size: 18px;
	margin: 0 3px 0 0;
}
.library-meta-body {
	width: 100%;
	display: inline-block;
}
.library-meta-body.meta-labels {
	font-size: 12px;
	display: block;
	float: left;
	width: 100%;
	box-sizing: content-box;
}
.library-meta-body.meta-labels .form-group {
	width: 100%;
	float: left;
	margin-bottom: 8px;
}
.library-meta-body.meta-labels span {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	float: left;
	min-height: 22px;
	padding-top: 8px;
	max-width: 80px;
	min-width: 30%;
	margin-right: 4%;
	text-align: right;
	word-wrap: break-word;
}
.library-meta-body.meta-labels .form-control {
	color: #333;
	box-sizing: border-box;
	margin: 1px;
	width: 65%;
	float: right;
}
.library-meta-body.meta-labels .span-error {
	font-size: 12px;
	width: 65%;
	float: right;
}
.library-meta-body.meta-labels textarea.form-control {
	min-height: 60px;
	resize: none;
}
ul.rotate-ul li {
	float: left;
}
ul.rotate-ul li a {
	padding: 2px 5px;
	display: block;
	transition: var(--default-transition);
}
ul.rotate-ul li:not(.last) a{
	border: 1px solid #ccc;
}
ul.rotate-ul li a i {
	font-size: 22px;
	color: #999;
	margin: 0;
	display: inline-block;
	position: relative;
	top: 2px;
	transition: var(--default-transition);
}
ul.rotate-ul li.first a{
	border-right: none;
}
ul.rotate-ul li.last a i{
	color: #E23636 !important;
}
ul.rotate-ul li.first a {
	border-radius: 2px 0 0 2px;
}
ul.rotate-ul li.second a {
	border-radius: 0 2px 2px 0;
}
html[dir="ltr"] ul.rotate-ul li.first:hover + li a{
	border-left-color: #FE582B !important;
}
ul.rotate-ul li:not(.last) a:hover{
	background-color: #FFF8F6;
	border-color: #FE582B !important;
	transition: var(--default-transition);
}
ul.rotate-ul li:not(.last) a:hover i{
	color: #FE582B;
	transition: var(--default-transition);
}
ul.rotate-ul li:not(.last) a:focus{
	background-color: #FE582B;
	border-color: #FE582B;
	transition: var(--default-transition);
}
ul.rotate-ul li:not(.last) a:focus i{
	color: #FFF;
	transition: var(--default-transition);
}
ul.rotate-ul li.last a{
	border: none !important;
}
/*=============================================
	Gallery Thumb in Edit Products Page Code
===============================================*/
ul.gallery-ul>li {
    width: 120px;
    height: 120px;
    height: auto;
    min-height: 120px;
    float: left;
    margin: 0 15px 15px 0;
    position: relative;
}
ul.gallery-ul>li .gallery-wrap {
	width: 120px;
	height: 120px;
	background-color: #fafafa;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
    text-align: center;
	border: 1px solid #ddd;
}
ul.gallery-ul>li .gallery-wrap img {
    max-width: 100%;
    height: 118px;
    object-fit: cover;
    object-position: center;
}
ul.gallery-ul>li .gallery-wrap i {
	font-size: 30px;
	color: #E23636;
	display: none;
}
ul.gallery-ul>li .gallery-wrap span {
    background: #FFF;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 18px;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
    text-align: center;
    color: #FF2929;
    cursor: pointer;
}
ul.gallery-ul>li .gallery-wrap.is-loading {
    pointer-events: none;
}
ul.gallery-ul>li .gallery-wrap.is-loading img,
ul.gallery-ul>li .gallery-wrap.is-broken img,
ul.gallery-ul>li .gallery-wrap.is-loading span,
ul.gallery-ul>li .gallery-wrap.is-broken span{
    display: none;
}
ul.gallery-ul>li .gallery-wrap.is-broken i {
    display: block;
}

/*=====================================
	Categories Tree Design Code
======================================*/
.category-wrapper {
	background: #f6f6f6;
	border: 1px solid #E6EBED;
	padding: 10px 20px 20px;
}
.category-wrapper .scope {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
	margin: 0 5px;
}
.dd {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	max-width: 600px;
	list-style: none;
	font-size: 13px;
	line-height: 20px;
}
.dd-list {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dd-list .dd-list {
	width: 100%;
	padding-left: 30px;
}
.dd-collapsed .dd-list {
	display: none;
}
.dd-item, .dd-empty, .dd-placeholder {
	min-width: 400px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 20px;
	font-size: 13px;
	line-height: 20px;
}
.dd-item{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid transparent;
	margin: 10px 0 0;
}
.dd-item.active{
	border: 1px solid var(--primary-color);
}
.dd-handle {
    background: #FFF;
	margin: 0;
    width: 36px;
    text-align: center;
    border-right: 1px solid #ddd;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	cursor: move;
	position: relative;
}
.dd-item.active .dd-handle {
	background-color: rgba(var(--primary-color-rgba), .05);
}
.dd-handle i {
	font-size: 18px;
    color: #999;
    padding: 14px 0;
    display: block;
}
.dd-placeholder, .dd-empty {
	margin: 5px 0;
	padding: 0;
	min-height: 30px;
	background: #f2fbff;
	border: 1px dashed #b6bcbf;
}
.dd-empty {
	border: 1px dashed #bbb;
	min-height: 100px;
	background-color: #e5e5e5;
}
.dd-dragel {
	position: absolute;
	pointer-events: none;
	z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
	margin-top: 0;
}
.dd-dragel .dd-handle {
	-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
	box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
.dd-content {
	width: calc( 100% - 36px );
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 7px 10px;
    color: #333;
    text-decoration: none;
    background: #FFF;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    min-height: 46px;
    display: flex;
	justify-content: flex-start;
    align-items: center;
}
.dd-item.active .dd-content {
	background-color: rgba(var(--primary-color-rgba), .05);
}
.dd-content span img{
	width: 30px;
	height: 30px;
	margin: 0 10px 0 0;
}
.dd-content span{
	order: 3;
}
.dd-dragel > .dd-item > .dd-content {
	margin: 0;
}
.dd-caret i{
	color: #666;
	line-height: 32px;
}
.dd-menu {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: #999;
    display: inline-block;
    text-align: center;
    position: relative;
    top: 0;
    font-size: 20px;
    -wekbit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    order: 3;
	margin: 0 0 0 auto;
}
.category-wrapper .dd-menu.open {
    background: #eee;
    color: #333;
    -wekbit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}



.category-wrapper .dropdown-menu{
	min-width: 100px;
	border: none;
	top: 100%;
    left: auto;
    right: 0;
	display: block;
	opacity: 0;
	z-index: -1;
	margin:  15px 0 0;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
	transition: var(--default-transition);
}
.category-wrapper .dd-menu.open .dropdown-menu{
	opacity: 1;
	z-index: 999;
	margin: 0;
	transition: var(--default-transition);
}
.category-wrapper .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -7px;
    right: 9px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
}
.category-wrapper .dropdown-menu li a{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	padding: 6px 7px;
	display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
}
.category-wrapper .dropdown-menu li.li-delete a{
	color: #E23636;
}
.category-wrapper .dropdown-menu li a i {
    font-size: 15px;
    display: inline-block;
    margin: 0 5px 0 0;
}


.dd-checkbox {
    width: 16px;
    height: 16px;
    margin: 0 15px 0 10px;
    order: 2;
}
.dd-checkbox .custom-control {
    width: 16px;
    height: 16px;
    margin: 0 !important;
    padding: 0;
}

.dd-item.disabled .dd-handle i,
.dd-item.disabled .dd-content > span,
.dd-item.disabled .dd-buttons,
.dd-item.disabled .dd-list .dd-checkbox{
	pointer-events: none;
	opacity: .3;
	user-select: none;
}
.dd-item.disabled .dd-menu {
	pointer-events: all;
	opacity: 1;
	user-select: unset;
}
.dd-item.disabled .dd-handle{
	border-color: rgba(221,221,221, .3);
}
.dd-item.disabled .dd-list{
	pointer-events: none;
}


.dd-item button {
    position: absolute;
    right: 50px;
    top: 14px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: #2196f3;
    outline: none;
    padding: 0;
}

.dd-content span i.icon-broken-img {
    display: inline-block;
    color: #bf3d33;
    font-size: 20px;
    margin: 5px 0 0;
}


/*===============================================
	edit category popup
=================================================*/
.cat-block{
	width: 100%;
	float: left;	
	margin: 15px 0 0;
}
.cat-block > .leftbar{
	width: 150px;
	float: left;
}
.cat-block > .rightbar{
	width: calc( 100% - 180px );
	float: right;
}
.cat-block > .leftbar .image-wrapper .image{
	width: 100%;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	min-height: 150px;
	margin: 0 0 10px;
}
.cat-block > .leftbar .image-wrapper img {
    display: block;
    margin: 0 auto;
}
/* .cat-block > .leftbar .image-wrapper i{
	font-size: 42px;
	color: #bbb;
} */
/*============================
	Custom Steps Code
==============================*/
.custom-steps{
	width: 100%;
	min-height: 40px;
	background-color: #FBFBFB;
	border: 1px solid #eee;
	border-radius: 3px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 0 30px;
}
.custom-steps ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.custom-steps ul li.disabled {
	cursor: not-allowed;
}
.custom-steps ul li.disabled a{
	pointer-events: none;
}
.custom-steps ul li a{
	font-size: 14px;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.10px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.custom-steps ul li a i.first{
	font-size: 18px;
	color: #000;
	margin: 0 5px 0 0;
	display: none;
}
.custom-steps ul li a i.last{
	font-size: 20px;
	color: #666;
	margin: 0 8px;
}
.custom-steps ul li.completed a i.first{
	display: inline-block;
}
.custom-steps ul li.last a i.last{
	display: none;
}
.custom-steps ul li.active a{
	color: #000;
}
.custom-steps ul li.completed a, .custom-steps ul li.completed a i{
	color: #21A67A;
}
.custom-steps-arrows a {
    font-size: 12px;
    font-weight: 500;
	color: #FFF;
	background: rgb(255,129,96);
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	top: 7px;
	transition: var(--default-transition);
}
.custom-steps-arrows a:hover {
    background: rgb(255,134,101);
    background: linear-gradient(180deg, rgba(255,134,101,1) 0%, rgba(255,54,0,1) 100%);
	transition: var(--default-transition);
}
.custom-steps-arrows a i{
	font-size: 16px;
	display: inline-block;
}
.custom-steps-arrows a.first {
    left: 10px;
    padding: 4px 7px 4px 2px;
}
.custom-steps-arrows a.last {
    right: 10px;
    padding: 4px 3px 4px 7px;
}
.custom-steps-arrows a.disabled {
    opacity: .7;
    cursor: not-allowed;
	background: rgb(255,129,96) !important;
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%) !important;
}
.red-box .custom-steps-arrows a, .red-box .custom-steps-arrows a.disabled{
	pointer-events: none;
	background: rgb(255,129,129) !important;
    background: linear-gradient(180deg, rgba(255,129,129,1) 0%, rgba(226,54,54,1) 100%) !important;
}
.red-box .custom-steps-arrows a:hover {
    background: rgb(255,99,99) !important;
    background: linear-gradient(180deg, rgba(255,99,99,1) 0%, rgba(226,54,54,1) 100%) !important;
}
/*================================
	Sales Module code 
=================================*/
.order-info{
	width: 350px;
	float: right;
	padding: 4px 0 0;
	margin: -10px 0 0;
	border: 1px dashed var(--primary-color);
	border-radius: 3px;
}
.order-info ul li{
	width: 100%;
	float: left;
	font-size: 13px;
	font-weight: 500;
	color: #333;
	padding: 5px 10px;
}

.order-info ul li.li-total{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	padding: 7px 10px;
	margin: 6px 0 0;
	border-top: 1px dashed var(--primary-color);
}
.billing-info p{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.billing-info p strong{
	font-weight: 700;
	color: #000;
	margin: 0 20px 0 0;
}
.billing-info p .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	margin: 0 0 0 auto;
}
.billing-info ul li{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	line-height: 24px;
	position: relative;
	padding: 0 0 0 35px;
	margin: 0 0 15px;
}
.billing-info ul li i{
	font-size: 24px;
	color: #999;
	position: absolute;
	left: 0;
	top: 1px;
}
.billing-info hr{
	border-color: #ddd;
}
.sale-notes{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: 26px;
	padding: 10px;
	background-color: #FFF7F5;
	border: 1px solid #FEDCD4;
	border-radius: 3px;
}
.order-history-meta{
	display: flex;
    align-items: center;
	margin: 0 0 15px;
}
.order-history-meta span{
	font-size: 13px;
	font-weight: 700;
	color: #000;
	margin: 0 15px 0 0;
}
html[dir="rtl"] .order-history-meta span{
	margin: 0 0 0 15px;
}
.order-history-meta .btn {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 7px;
    display: flex;
    align-items: center;
}
.order-history-meta .btn i{
	font-size: 16px;
	margin: 0 5px 0 0;
}
html[dir="rtl"] .order-history-meta .btn i{
	margin: 0 0 0 5px;
}
.order-wrap ul, .order-wrap li{
	display: flex;
	flex-wrap: wrap;
}
.order-wrap li{
	width: 100%;
}
.order-wrap li .order-col{
	padding: 9px 15px;
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
	flex: 1;
}
.order-wrap .order-header li .order-col{
	padding: 7px 15px;
}
.order-wrap li .order-col.first{
	padding-left: 40px;
}
.order-wrap .order-body li .order-col{
	min-height: 50px;
}
.order-header{
	background: #f4f4f4;
}
.order-header span {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    display: block;
    letter-spacing: 0.2px;
	text-transform: uppercase;
}
.order-body li{
	position: relative;
	border-top: 1px solid #eee;
}
.order-body li:nth-child(even){
	background-color: #fafafa;
}
.order-body li .order-col.first:before {
    content: '';
    width: 30px;
    background: #FFF;
    display: block;
    position: absolute;
    left: 0;
    z-index: 1;
    bottom: -1px;
    right: 0;
    top: 0;
}
.order-body li .order-col.first:after{
	content: '';
    width: 10px;
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    background-color: #FFF;
    display: block;
    z-index: 5;
}
.order-body li:nth-child(even) .order-col.first:after{
	content: '';
    width: 15px;
    position: absolute;
    left: 20px;
    top: -1px;
    bottom: -1px;
    background-color: #fafafa;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
    display: block;
    z-index: 5;
}
.order-body li:last-child .order-col.first:after{
	border-bottom: none;
}
.order-body li:before {
    content: '';
    width: 12px;
    height: 12px;
	background: #FFF;
    border: 2px solid #C9D4DA;
	border-radius: 50%;
    position: absolute;
	top: 15px;
    left: 0;
    z-index: 10;
}
.order-body li:after {
    content: '';
	height: 100%;
	border-left: 1px solid #C9D4DA;
    position: absolute;
	top: 15px;
    left: 5px;
    bottom: 0;
    z-index: 8;
}
.order-body li:last-child:after{
	height: calc( 100% - 20px );
}
.order-body .order-col span, .order-body .order-col p{
	font-size: 13px;
    font-weight: 500;
    color: #666;
    display: block;
}
.order-body .order-col.first span{
	color: #222;
}
.order-body .order-col p{
	font-size: 12px;
	margin: 0;
}


/*==================================================
	Red Box code for sales and shipping return
===================================================*/
.red-box .custom-steps{
	background-color: #FFFAFA;
	border: 1px solid #FFE8E8;
}
.red-box .custom-steps ul li.active a, .red-box .custom-steps ul li.completed a, .red-box .custom-steps ul li a i.first{
	color: #E23636;
}
.red-box .custom-steps ul li a i.last{
	color: #F2B0B0;
}




.red-box .custom-table .table>thead>tr>th{
	background-color: #FFE8E8;
}
.red-box .custom-table .table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fffafa;
}
.red-box .custom-control input:checked ~ .custom-indicator {
    border: 1px solid #E23636;
    background-color: #E23636;
}
.red-box .order-info{
	border-color: #E23636;
}
.red-box .order-info ul li.li-total {
    color: #E23636 ;
    border-top-color: #E23636;
}

/*============================================
	Ad Banner code 
=============================================*/
.banner-dropdowon .dropdown-toggle {
    width: 100%;
    float: left;
    font-size: 13px;
    color: #333;
    height: 32px;
	background: url(../img/select_caret.svg) no-repeat right .75rem center/8px, url(../img/select_bg.svg) repeat;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px 12px;
	margin: 0 0 15px;
	cursor: pointer;
}
.banner-dropdowon .dropdown-menu {
	left: 0;
	right: 0;
	top: calc( 100% + 38px );
	-webkit-box-shadow: 0px 2px 15px 7px rgba(146, 155, 163, 0.3);
	-moz-box-shadow: 0px 2px 15px 7px rgba(146, 155, 163, 0.3);
	box-shadow: 0px 2px 15px 7px rgba(146, 155, 163, 0.3);
}
.banner-dropdowon .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -7px;
	right: 15px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
}
.banner-dropdowon .dropdown-menu li a{
	padding: 14px 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
}
.banner-dropdowon .dropdown-menu li:last-child a{
	border: none;
}
.banner-dropdowon .dropdown-menu li a span{
	font-size: 13px;
	flex: 1;
}
.banner-dropdowon .dropdown-menu>li>a:focus, .banner-dropdowon .dropdown-menu>li>a:hover {
    background-color: #fafafa;
}
html[dir="rtl"] .banner-dropdowon .dropdown-menu:before{
	right: auto;
	left: 15px;
}
/*============================================
	Option Box code 
=============================================*/
.options-box-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 5px;
}
.options-box-header span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	flex: 1;
}
.options-box-header .custom-control{
	display: inline-block !important;
}
.options-box-body{
	width: 100%;
	float: left;
	background-color: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 10px 8px;
	height: 150px;
	overflow-y: auto;
	margin: 0 0 20px;
}
/*==========================
	Slider Box Code 
===========================*/
.slider-drawer .drawer-body{
	height: calc( 100vh - 50px );
}
.slider-box-header {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 5px;
	min-height: 40px;
	background-color: #fafafa;
	border-radius: 3px;
	margin: 0 0 20px;
}
.view-port {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	flex: auto;
}
.slider-box-header .form-control{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	width: 165px;
	height: 32px;
}
.slider-box-header .btn{
	padding: 5px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.slider-box-header .btn i{
	font-size: 20px;
	margin: 0 3px 0 0;
}
.slider-box-header .nav-tabs{
	border: none;
}
.slider-box-header .nav-tabs>li>a{
    font-size: 26px;
    color: #666;
	margin: 0 1px 0 0;
    border: none !important;
	background-color: #f4f4f4 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0px;
    padding: 6px 9px 5px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	transition: var(--default-transition);
}
.slider-box-header .nav-tabs>li>a:hover{
	border-color: var(--primary-color) !important;
	transition: var(--default-transition);
}
.slider-box-header .nav-tabs>li.active>a{
	color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	transition: var(--default-transition);
}
.slide-move, .slide-del, .slide-duplicate {
    width: 15px;
    height: 15px;
    background: url(../img/icon-move.svg) no-repeat center;
    position: absolute;
    top: -24px;
    right: 23px;
    border-radius: 2px;
    cursor: move;
}

.slider-box-body{
	width: 100%;
	float: left;
}
.slider-box {
    border: 1px dashed #aaa;
    min-height: 500px;
    margin: 0 0 15px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-size: auto !important;
}
.desktop-view, .tablet-view, .mobile-view {
    width: 100%;
    float: none;
    margin: 0 auto !important;
}
.tablet-view {
    width: 768px;
    width: 100%;
    max-width: 768px;
	background-size: contain !important;
}
.mobile-view {
    width: 380px;
	min-height: 270px !important;
	background-size: contain !important;
}
.slider-drawer .custom-collapse .panel-body{
	padding: 15px 0 0;
}
.slider-image{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 35px;
}
.slider-image-meta {
    flex: auto;
}
.slider-image-meta span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	letter-spacing: 0.5px;
	margin: 0 0 5px;
}
.slider-image-meta p{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.5px;
	margin: 0 0 2px;
}
.slider-image-meta .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 4px 9px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 10px 0 0;
}
.slider-image-meta .btn i{
	font-size: 18px;
	margin: 0 3px 0 0;
}
.slider-image-thumb .image-wrapper .image {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}























.slider-drawer .table{
	margin: 0 0 10px;
}
.slider-drawer .table>tbody>tr>td{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	padding: 5px 0;
	border: none;
	vertical-align: middle;
}
.slider-drawer .table>tbody>tr>td:first-child{
	min-width: 125px;
	text-transform: capitalize;
}
.slider-drawer .table>tbody>tr>td .form-control {
	font-size: 12px;
	height: 32px;
}
.slider-drawer .qty-group {
    width: 100%;
    height: 30px;
    float: left;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
	position: relative;
}
.slider-drawer .qty-group input {
    width: calc( 100% - 20px );
    height: 28px;
    font-size: 12px;
    color: #333;
    outline: none;
    border: none;
    vertical-align: middle;
    user-select: none;
    padding: 0 0 0 12px;
}
.slider-drawer .qty-group .qty-minus, 
.slider-drawer .qty-group .qty-plus {
    width: 20px;
    height: 14px;
    float: left;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    background-size: 20px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.slider-drawer .qty-group .qty-plus {
    background: url(../img/slider_caret_up.svg) no-repeat center;
}
.slider-drawer .qty-group .qty-minus {
    background: url(../img/slider_caret_down.svg) no-repeat center;
    top: auto;
    bottom: 0;
    border-bottom: none;
}
.slider-drawer .table>tbody>tr>td > .leftbar{
	width: 40px;
	float: left;
}
.slider-drawer .table>tbody>tr>td > .rightbar{
	width: calc( 100% - 40px );
	float: right;
}
.model-wrap{
	width: 190px;
	height: 140px;
	margin: 20px auto;
	border: 1px dashed #ccc;
}
.model-wrap input{
	font-size: 11px;
	color: #333;
	width: 25px;
	height: 18px;
	border: 1px solid #ddd;
	outline: none;
	position: absolute;
	text-align: center;
	border-radius: 2px;
}
.model-wrap span {
    font-size: 11px;
    color: #333;
	margin-left: 5px;
    display: inline-block;
}
.border-wrap span {
    margin-left: 12px;
    position: relative;
    top: -2px;
}
.radius-wrap {
    width: 100%;
    position: relative;
    height: 139px;
}
.radius-wrap input:nth-child(1){
	top: -1px;
	left: -1px;
}
.radius-wrap input:nth-child(2){
	top: -1px;
	right: -1px;
}
.radius-wrap input:nth-child(3){
	right: -1px;
	bottom: 0;
}
.radius-wrap input:nth-child(4){
	left: -1px;
	bottom: 0;
}
.border-wrap {
    width: calc( 100% - 70px );
    height: 125px;
    margin: 5px 0 0 35px;
    position: relative;
    margin-top: -132px;
}

.border-wrap input:nth-child(1){
	top: -1px;
	left: 50%;
	margin-left: -12px;
}
.border-wrap input:nth-child(2) {
    top: 50%;
    right: -30px;
	transform: translateY(-50%);
}
.border-wrap input:nth-child(3) {
    left: 50%;
    bottom: 0;
    margin-left: -12px;
    right: auto;
}
.border-wrap input:nth-child(4){
	left: -30px;
	top: 50%;
	transform: translateY(-50%);
}
.border-wrap i{
	font-size: 15px;
    color: #000;
    position: absolute;
	cursor: pointer;
}
.border-wrap i:nth-child(1){
    top: 0;
    left: 50%;
    margin-left: -8px;
}
.border-wrap i:nth-child(2){
	top: 50%;
    right: -25px;
	transform: translateY(-50%);
}
.border-wrap i:nth-child(3){
	left: 50%;
    bottom: 0;
    margin-left: -8px;
    right: auto;
}
.border-wrap i:nth-child(4){
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
}
.padding-wrap {
    width: calc( 100% - 70px );
    height: 80px;
    margin: 5px 0 0 35px;
    background: #f2f2f2;
	border: 1px solid #ccc;
    position: relative;
    margin-top: -103px;
}
.pd-box {
    width: 24px;
    height: 24px;
    background: #ddd;
    border: 1px solid #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
}
.padding-wrap input:nth-child(1){
	top: 4px;
	left: 50%;
	margin-left: -12px;
}
.padding-wrap input:nth-child(2) {
    top: 50%;
    right: 10px;
	transform: translateY(-50%);
}
.padding-wrap input:nth-child(3) {
    left: 50%;
    bottom: 4px;
    margin-left: -12px;
    right: auto;
}
.padding-wrap input:nth-child(4){
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.drawrpallete-wrapper > button{
	width: 30px !important;
	height: 30px !important;
	border: none !important;
	border-radius: 3px;
	background-image: none !important;
}
.drawrpallete-wrapper > div{
	z-index: 99 !important;
}

/*==========================
	theme listing code 
===========================*/
ul.theme-listing{
	margin: 0 -10px;
}
ul.theme-listing li {
    width: 20%;
    float: left;
    margin: 0 0 20px 0;
    padding: 0 10px;
}
@media (max-width: 1440px) {
	ul.theme-listing li {
		width: 25%;
	}
}

.theme-wrap{
	width: 100%;
	height: 310px;
	background-color: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	overflow: hidden;
}
ul.theme-listing li.active .theme-wrap{
	-webkit-box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%);
}
.theme-wrap:after{
	content: "";
    display: block;
    padding-top: 66.66666%;
}
.theme-body{
	width: 100%;
	height: calc( 100% - 85px );
	overflow: hidden;
	position: relative;
	background: #f3f3f3;
	background-size: cover;
	background-position: top;
	transition: all 1.2s ease-in-out;
}
.theme-body:hover{
	background-position: bottom;
	transition: all 1.2s ease-in-out;
}
ul.theme-listing li.is-loading .theme-body{
	background: url(../img/loaders_bg/loader-img-orange.svg) no-repeat center/60px !important;
}
.theme-footer{
	min-height: 85px;
	padding: 11px 10px;
	background: #fafafa;
	border-top: 1px solid #ddd;
}
.theme-footer span {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	/* line-height: 26px; */
	width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	letter-spacing: 0.10px;
	margin: 0 0 13px;
}
.theme-meta {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.theme-meta a:not(.btn){
	width: 26px;
	height: 26px;
	font-size: 20px;
	color: #FFF;
	background-color: #8E9BA4;
	border-radius: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: all .3s ease-in-out;
}
.theme-meta a:not(.btn) + a{
	margin: 0 0 0 5px;
}
.theme-meta a:not(.btn):hover{
	background-color: #74828c;
	transition: all .3s ease-in-out;
}
ul.theme-listing li.active .theme-meta a:not(.btn){
	background-color: #5E7185;
}
ul.theme-listing li.active .theme-meta a:not(.btn):hover{
	background-color: #4f6173;
	transition: all .3s ease-in-out;
}
.theme-footer .btn {
    font-size: 12px;
    font-weight: 500;
	line-height: 22px;
    padding: 0 8px;
    margin: 0 auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.theme-footer .btn i{
	font-size: 16px;
	color: #FFF;
	margin: 0 3px 0 0;
	display: none;
}
ul.theme-listing li.active .theme-footer .btn i{
	display: inline-block;
}
ul.theme-listing li.active .theme-footer span{
	font-weight: 700;
}
ul.theme-listing li.active .theme-footer .btn, 
ul.theme-listing li.active .theme-footer .btn:hover, 
ul.theme-listing li.active .theme-footer .btn:focus{
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	color: #FFF;
}
.colors-listing{
	padding: 20px 0 10px;
}
.colors-listing ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.colors-listing ul li .custom-control {
    width: 90px;
    height: 82px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0 !important;
	margin: 0;
	transition: all .3s ease-in-out;
}
.colors-listing ul li:hover .custom-control{
	border-color: #999;
	transition: all .3s ease-in-out;
}
.colors-listing ul li .custom-control .custom-indicator {
    width: 0;
    height: 0;
    opacity: 0;
}
.colors-listing ul li .color-box{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background-color: #000;
}
.colors-listing ul li .color-box i {
    font-size: 20px;
    color: #FFF;
	margin: 0 !important;
	display: none;
}
.colors-listing ul li.active .color-box i{
	display: block;
}
.colors-listing ul li span{
	font-size: 12px;
	font-weight: 400;
	color: #333 !important;
	display: block;
	text-align: center;
	margin: 4px 0 0;
}

.color-box-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.color-box-wrap .color-box{
	width: 24px;
	height: 24px;
	background-color: #fafafa;
	border-radius: 3px;
}
.color-box-wrap span{
	font-size: 13px;
	font-weight: 500;
	color: #222;
	padding: 0 8px;
}
.btn-resize{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 24px;
}
.logo-block > span{
	color: #000;
	display: block;
	margin: 0 0 3px;
}
.logo-block .image-wrapper .image {
    width: 100%;
    height: 200px;
    /* background-color: #FFF; */
    background: linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(235,238,243,1) 100%);
	border: 1px solid #ddd;
    margin: 0 0 10px;
}
.logo-block .image-wrapper.is-loading .image{
	background-color: #f3f3f3;
}
.logo-block .image-wrapper.no-thumb .image {
	border: 1px dashed #ddd;
    background: #FFF url(../img/no_thumb.svg) no-repeat center/60px !important;
}
.logo-block .image-wrapper span{
	font-size: 20px;
    color: #f44336;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    cursor: pointer;
	opacity: 0;
	z-index: -1;
	transition: var(--default-transition);
}
.logo-block .image-wrapper.has-logo:hover span{
	opacity: 1;
	z-index: 1;
	transition: var(--default-transition);
}
.logo-block .image-wrapper.is-loading span{
	display: none;
}
.logo-block .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 5px 12px;
}
/*==========================================
	Theme Setup Modal code 
============================================*/
.theme-setup-modal .modal-body{
	background-color: #f3f3f3;
}
.theme-setup-modal.custom-modal .modal-footer.text-center {
    padding: 19px 15px;
	justify-content: center;
    box-shadow: 0 1px 10px rgb(0 0 0 / 20%);
}
.theme-setup-modal.custom-modal .modal-footer span{
	font-size: 13px;
	font-weight: 500;
	color: #C9252D;
	display: block;
}
.theme-setup-wrap{
	width: 100%;
	padding: 5px;
	display: flex;
}
.theme-setup-wrap > .leftbar, .theme-setup-wrap > .rightbar{
	background-color: #FFF;
	min-height: 164px;
	padding: 7px 15px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}
.theme-setup-wrap > .leftbar{
	flex: 1;
}
.theme-setup-wrap.shipping-setup-wrap > .leftbar{
	padding: 0;
	border: none;
	box-shadow: none;
}
.theme-setup-wrap > .rightbar{
	width: 160px;
	margin: 0 0 0 20px;
}
.theme-setup-heading{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 26px;
	display: block;
}
.theme-setup-wrap > .leftbar ul li{
	margin: 20px 0 0;
}
.theme-setup-wrap > .leftbar ul li .progress{
	height: 7px;
	background-color: rgba(254, 88, 43, .2);
	box-shadow: none;
	margin: 0;
}
.theme-setup-wrap > .leftbar ul li .progress .progress-bar{
	background-color: var(--primary-color);
	box-shadow: none;
	border-radius: 4px;
}
.theme-setup-wrap > .leftbar ul li .progress-meta{
	display: flex;
	align-items: center;
	margin: 0 0 5px;
}
.theme-setup-wrap > .leftbar ul li .progress-meta span{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	margin: 0 10px 0 0;
}
.theme-setup-wrap > .leftbar ul li .progress-meta i.icon-check-circle{
	font-size: 16px;
	color: #21A67A;
	display: none;
}
.theme-setup-wrap > .leftbar ul li .progress-meta p{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	margin: 0 0 0 auto;
}
.theme-setup-wrap > .leftbar ul li .progress-meta img{
	width: 24px;
	margin: -5px 5px;
	display: none;
}
.theme-setup-wrap > .leftbar ul li .progress-meta i.icon-info-circle-fill{
	font-size: 16px;
	color: #000;
	cursor: pointer;
}
.theme-setup-wrap > .leftbar ul li.completed .progress{
	background-color: rgba(32, 166, 122, .2);
}
.theme-setup-wrap > .leftbar ul li.completed .progress .progress-bar{
	background-color: #21A67A;
}
.theme-setup-wrap > .leftbar ul li.completed .progress-meta i.icon-check-circle, .theme-setup-wrap > .leftbar ul li.active .progress-meta img{
	display: block;
}
.theme-confirm-box{
	width: 100%;
	min-height: 174px;
	background-color: #FFF;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.theme-confirm-box > i{
	font-size: 30px;
	color: #21A67A;
	margin: 0 0 5px;
}
.theme-confirm-box span{
	font-size: 16px;
	font-weight: 700;
	color: #000;
	display: block;
	margin: 0 0 10px;
}
.theme-confirm-box p{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	display: block;
	margin: 0 0 15px;
}
.theme-confirm-box .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	display: flex;
	align-content: center;
}
.theme-confirm-box .btn i{
	font-size: 18px;
	margin: 0 3px 0 0;
}
.theme-setup-wrap > .rightbar .circle-out { 
	position:relative; 
	width: var(--progress-width); 
	height: var(--progress-width); 
	border-radius: 50%; 
	background: var(--progress-empty-color); 
	margin: 15px auto 0;
	overflow: hidden; 
} 
.theme-setup-wrap > .rightbar .circle-in { 
	font-size: 24px;
	font-weight: 700;
	color: #21A67A;
	position: absolute; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - var(--progress-border-width)); 
	height: calc(100% - var(--progress-border-width)); 
	border-radius: 50%; 
	background: white; 
	user-select: none;
} 
.theme-setup-wrap > .rightbar .custom-progress { 
	height: calc(var(--progress-width) * 1.1); 
	width: calc(var(--progress-width) * 2.2); 
	background: var(--progress-fill-color); 
	position: absolute; 
	top: -110%; 
	left: -60%;
	transform: rotate(calc(var(--progress-deg) * 1.8deg)); 
	transform-origin: calc(var(--progress-width) * 1.1) calc(var(--progress-width) * 1.1); 
	transition: all .3s;
}
.popover-content .theme-setting-ul{
	width:calc( 100% + 20px );
}
.theme-setting-ul{
	margin: -10px;
}
.theme-setting-ul li{
	display: flex;
	align-items: center;
	padding: 7px 7px;
	border-bottom: 1px solid #e5e5e5;
}
.theme-setting-ul li:nth-child(even){
	background-color: #fafafa;
}
.theme-setting-ul li span, .theme-setting-ul li p{
	font-size: 11px;
	font-weight: 500;
	color: #000;
}
.theme-setting-ul li p{
	color: #666;
	margin: 0 0 0 auto;
}
.theme-setting-ul li i{
	font-size: 12px;
	color: #ccc;
	margin: 0 3px 0 0;
}
.theme-setting-ul li.completed i{
	color: #21A67A;
}
.theme-setting-ul li.active i{
	display: none;
}
.theme-setting-ul li img{
	width: 20px;
	margin: -2px 1px -2px -5px;
	display: none;
}
.theme-setting-ul li.active img{
	display: block;
}
/*==========================================
	Images Size Items code 
============================================*/
.theme-images-wrap fieldset ul{
	display: flex;
	justify-content: space-between;
}
.theme-images-wrap fieldset ul li{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	display: flex;
	align-items: center;
}
.theme-images-wrap fieldset ul li p{
	min-width: 50px;
	background-color: #F3F3F3;
	padding: 3px 8px;
	margin: 0 0 0 7px;
	border-radius: 3px;
	user-select: none;
}
html[dir="rtl"] .theme-images-wrap fieldset ul li p{
	margin: 0 7px 0 0;
}


















/*==========================================
	Widgets page code 
============================================*/
.widgets-wrap{
	width: 100%;
	max-height: calc( 100vh - 115px );
	overflow-y: auto;
	float: left;
	border: 1px solid #d5d5d5;
	background-color: #E8E8E8;
	border-radius: 3px;
	padding: 15px;
}
.widgets-wrap .row > .first{
	position: sticky;
	top: 0;
}
.widgets-panel-body .placeholder {
	border: 1px dashed #1159a2;
	min-height: 50px;
	background: #eee !important;
	margin: 0 0 10px;
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}
.ui-draggable-dragging{
	z-index: 1000 !important;
}
.widgets-panel-body li,
li.ui-draggable-dragging{
	list-style-type: none !important;
}
.widgets-panel-body.ui-state-default{
    border: none;
    background: none;
}
.widgets-wrapper{
	width: 100%;
	float: left;
	border: 1px solid #ddd;
	background-color: #f3f3f3;
	padding: 0 15px 10px;
	margin: 0 0 10px;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
}
.widgets-heading {
    width: calc( 100% + 30px );
    position: relative;
    left: -15px;
	background-color: #FFF;
	padding: 15px 15px 14px;
	margin: 0 0 20px;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
}
.widgets-wrapper .widgets-heading img{
	width: 20px;
	margin: 0 5px;
	display: none;
	user-select: none;
}
.widgets-wrapper.is-loading .widgets-heading img{
	display: inline-block;
}
.widgets-heading span{
	font-size: 15px;
	font-weight: 700;
	color: #000;
	display: inline-block;
	vertical-align: middle;
}
.widgets-listing ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.widgets-listing ul li{
	min-width: 200px;
	width: 49%;
	margin: 0 0 10px;
}
.widgets-listing.active ul li:not(.active){
	opacity: .5;
	pointer-events: none;
}
.widgets-listing ul li.disabled{
	opacity: .5;
	user-select: none;
	cursor: not-allowed;
}
.widgets-listing ul li.disabled .widget-box{
	pointer-events: none;
}
.widget-header{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	background: #FFF;
	padding: 8px 15px;
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	position: relative;
	cursor: pointer;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
}
.widgets-listing ul li.disabled .widget-header{
	box-shadow: none !important;
}
.widgets-wrapper .widget-header{
	font-size: 15px;
}
.widget-header > .middlebar{
	width: calc( 100% - 70px );
}
.widgets-panel-body .widget-header > .middlebar{
	width: calc( 100% - 35px );
}
.widget-header > .rightbar{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #f3f3f3;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 0 auto;
}
.widget-header span, .widget-header p{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.widget-header p{
	font-size: 11px;
	color: #666;
	margin: 0;
}
.widget-header > .leftbar i{
	font-size: 24px;
	color: #888;
	margin: 0 15px 0 0;
	transition: var(--default-transition);
}
.widgets-listing .widget-header:hover > .leftbar i,
.widgets-listing ul li.active .widget-header > .leftbar i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.widget-header > .rightbar i{
	font-size: 16px;
	color: #888;
	transform: none;
	transition: var(--default-transition);
}
.widget-header.open > .rightbar i{
	transform: rotate(180deg);
	transition: var(--default-transition);
}
.widgets-panel-body{
	width: 100%;
	float: left;
	min-height: 150px;
}
.widgets-wrapper.is-loading .widgets-panel-body:before {
    content: '';
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    left: 16px;
    right: 16px;
    top: 51px;
    bottom: 10px;
    z-index: 99;
}
.widgets-wrapper .widgets-panel-body.drop-hover{
	background-color: red;
}
.widget-content{
	border-top: 1px solid #eee;
	background-color: #FFF;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
}
.widget-body{
	width: 100%;
	float: left;
	padding: 15px 15px 5px;
}
.widget-body label{
	font-size: 13px;
}
.widget-body .form-control{
	font-size: 13px;
}
.widget-body textarea.form-control{
	min-height: 120px;
}
.widget-footer {
	min-height: 50px;
	border-top: 1px solid #ddd;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.widget-footer .del-widget{
	font-size: 13px;
	font-weight: 500;
	color: #E23636;
}
.widget-footer .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 17px;
    min-width: 85px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	margin: 0 0 0 auto;
}
.widget-footer .btn.is-loading {
    padding: 7px 35px 7px 18px;
}
.widget-footer .btn i {
    font-size: 20px;
    margin: 0 5px 0 0;
}
.ui-draggable-dragging {
	min-width: 300px;
}
.widgets-listing ul li .widget-header > .rightbar,
.widgets-panel-body .widget-header > .leftbar,
.widgets-panel-body .widget-header p,
.ui-draggable-dragging .widget-content,
.widgets-listing ul li .widget-content{
	display: none !important;
}
.widget-tabs-heading, .table-meta-tabs span{
	font-size: 18px;
	font-weight: 700;
	color: #000;
	display: block;
	margin: 0 0 20px;
}
.table-meta-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0 15px;
}
.table-meta-tabs span{
	flex: auto;
	margin: 0;
}
.table-meta-tabs span span, .table-meta-tabs span strong{
	font-size: 15px;
    font-weight: 500;
    color: #666;
	display: inline-block;
    margin: 0 3px;
}
.table-meta-tabs .btn {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2px 8px;
}
.table-meta-tabs .btn i{
	font-size: 20px;
	margin: 0 3px 0 0;
}
.widget-body .logo-block .image-wrapper .image {
    height: 168px;
}
.widget-body .logo-block .image-wrapper.no-thumb .image {
    background-size: 50px !important;
}
.services-row .col-xs-9{
	width: calc( 100% - 198px );
}
.services-row .col-xs-3{
	width: 198px;
	float: right;
}
.services-row .logo-block .image-wrapper.is-loading span, .services-row .logo-block .image-wrapper.is-loading.is-broken span{
	display: none !important;
}
/*==========================
	Store Setup code  
===========================*/
.setup-wrapper{
	width: 100%;
	float: left;
	position: relative;
	height: 100vh;
	background: #f3f3f3;
}
.setup-wrapper > .left-panel{
	width: 400px;
	height: 100vh;
	float: left;
	background: #FFF;
	position: relative;
	padding: 15px 30px 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	-webkit-box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.05);
}
.setup-wrapper > .right-panel{
	width: calc( 100% - 400px );
	height: 100vh;
	float: right;
	overflow: hidden;
	position: relative;
}
.setup-wrapper .logo-wrap img{
	width: 165px;
	margin: 0 0 55%;
}
.setup-wrapper > .left-panel ul li{
	width: 100%;
	float: left;
	margin: 0 0 20px;
}
.setup-wrapper > .left-panel ul li:last-child{
	margin: 0;
}
.setup-wrapper > .left-panel ul li a {
    background: #f9f9f9;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	cursor: not-allowed;
}
.setup-wrapper > .left-panel ul li a > .leftbar {
    width: 50px;
    height: 50px;
    background: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.setup-wrapper > .left-panel ul li a > .leftbar i{
	font-size: 23px;
	color: #b2b2b2;
}
.setup-wrapper > .left-panel ul li a > .rightbar{
	width: calc( 100% - 50px );
	float: right;
	display: flex;
	align-items: center;
	padding: 0 10px;
}
.setup-wrapper > .left-panel ul li a > .rightbar span{
	font-size: 14px;
	font-weight: 500;
	color: #666;
	display: block;
	flex: 1;
	padding: 0 10px;
}
.setup-wrapper > .left-panel ul li a > .rightbar i{
	font-size: 20px;
	color: #999;
	display: none;
}
.setup-wrapper > .left-panel ul li a > .rightbar img{
	width: 30px;
	display: none;
}
.setup-wrapper > .left-panel ul li.completed a{
	cursor: pointer;
}
.setup-wrapper > .left-panel ul li.active a{
	cursor: wait;
}
.setup-wrapper > .left-panel ul li.active a > .leftbar i,
.setup-wrapper > .left-panel ul li.active a > .rightbar span,
.setup-wrapper > .left-panel ul li.completed a > .leftbar i,
.setup-wrapper > .left-panel ul li.completed a > .rightbar span{
	color: #000;
}
.setup-wrapper > .left-panel ul li.completed a > .rightbar i{
	display: block;
}
.setup-wrapper > .left-panel ul li.active a > .rightbar img{
	display: block;
}
.setup-meta {
    position: absolute;
    left: 30px;
    bottom: 40px;
}
.setup-meta a{
	font-size: 13px;
	font-weight: 500;
	color: #FF1717;
}
.setup-meta a i {
	font-size: 22px;
	font-weight: 400;
    color: #FF1717;
    background-color: #FFEEEE;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
	line-height: 35px;
	vertical-align: sub;
	margin: 0 5px;
}
.setup-box {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 3000px;
    text-align: center;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.setup-box.first-slide {
	right: 0;
}
.setup-box.slide-in {
	animation: slide-in 500ms ease-in-out forwards;
}
.setup-box.slide-out {
	animation: slide-out 500ms ease-in-out forwards;
}
@keyframes slide-in {
  0% {
    right: 3000px;
  }
  100% {
    right: 0;
  }
}
@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: 3000px;
  }
}
.setup-box .step-number{
	font-size: 16px;
	font-weight: 600;
	color: #666;
	margin: 0 0 10px;
	display: none;
}
.setup-box .setup-title{
	font-size: 30px;
	color: #000;
	display: block;
	margin: 0 0 20px;
}
.setup-box .setup-description{
	font-size: 16px;
	color: #666;
	display: block;
}
.setup-box img{
	display: block;
	margin: 90px 0 150px;
}
.setup-box .btn {
    font-size: 16px;
    font-weight: 500;
    padding: 13px 49px;
    box-shadow: none;
}
.store-progress {
	height: 6px;
	width: 100%;
	max-width: 380px;
	background: #FFF;
	border-radius: 3px;
}
.store-progress .store-progress-inner {
	width: 50px;
	height: 4px;
	background: #ff853e;
	border-radius: 3px;
	margin: 0 auto;
	animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
  0% {
    transform-origin: left;
    transform: scalex(0.3);
  }
  25% {
    transform-origin: left;
    transform: scalex(1);
  }
  26% {
    transform-origin: right;
    transform: scalex(1);
  }
  50% {
    transform-origin: right;
    transform: scalex(0.3);
  }
  75% {
    transform-origin: right;
    transform: scalex(1);
  }
  76% {
    transform-origin: left;
    transform: scalex(1);
  }
  100% {
    transform-origin: left;
    transform: scalex(0.3);
  }
}


/*==========================================
	Sync Wrapper code 
============================================*/
.sync-wrapper{
	width: 100%;
	height: calc( 100vh - 150px );
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sync-wrapper img{
	margin: 0 0 30px;
}
.sync-wrapper span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	line-height: 26px;
	letter-spacing: 0.5px;
	display: block;
	margin: 0 0 0;
}
.sync-wrapper .btn {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 19px;
	margin: 30px 0 0;
}
.sync-wrapper .btn.is-loading{
	background: rgb(255,129,96) !important;
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%) !important;
}
.sync-wrapper .btn span{
	color: #FFF;
	margin: 0 4px;
	opacity: 0;
	transition: var(--default-transition);
}
.sync-wrapper .btn i{
	font-size: 20px;
	margin: 0 5px 0 0;
}
.sync-wrapper .btn.is-loading span{
	opacity: 1;
	transition: var(--default-transition);
}
.sync-wrapper .btn.is-loading i{
	-webkit-animation: rotation 3s infinite linear;
	animation: rotate 2s infinite linear;
}
@-webkit-keyframes rotate {
	from {
			-webkit-transform: rotate(0deg);
	}
	to {
			-webkit-transform: rotate(359deg);
	}
}
@keyframes rotate {
	from {
			-webkit-transform: rotate(0deg);
	}
	to {
			-webkit-transform: rotate(359deg);
	}
}
/*=============================
	Miscellaneous page code 
=============================*/
.tmp-editor-active{
	overflow: hidden;
}
.template-wrapper{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.template-header{
	width: 100%;
	min-height: 50px;
	padding: 8px 10px;
	background-color: #f6f6f6;
	border: 1px solid #ddd;
	border-radius: 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px;
}
.template-header .form-control, .tmp-btn-bar .form-control{
	font-size: 12px;
	font-weight: 500;
	width: auto;
	min-width: 110px;
	height: 30px;
}
.template-header .btn {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 5px 19px 4px;
}
.template-header .btn i {
    font-size: 19px;
    margin: 0 5px 0 0;
}
html[dir="rtl"] .template-header .btn i {
    margin: 0 0 0 5px;
}
.template-body{
	width: 100%;
    float: left;
	background-color: #f6f6f6;
	border-radius: 3px;
}
.template-body table{
	border-collapse: separate;
}
.email-builder-wrap{
	width: 100%;
	float: left;
}
.email-builder-wrap > .leftbar{
	width: 450px;
	float: left;
	height: 100vh;
	background-color: #FFF;
	border-radius: 0 10px 10px 0;
	-webkit-box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}
.email-builder-wrap > .rightbar{
	width: calc( 100% - 465px );
	float: right;
}
.tmp-meta-header{
	width: 100%;
	height: 50px;
	padding: 10px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.tmp-meta-body{
	width: 100%;
	height: calc( 100vh - 50px );
	overflow-y: auto;
}
.tmp-meta{
	padding: 5px 15px 15px;
}
.tmp-back-btn{
	font-size: 20px;
	font-weight: 500;
	color: #000;
	display: flex;
    align-items: center;
}
.tmp-back-circle{
	font-size: 22px;
	width: 34px;
	height: 34px;
	color: #000;
	background-color: #f3f3f3;
	border-radius: 50%;
	display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	margin: 0 10px 0 0;
}
.tmp-btn-bar{
	width: 100%;
	min-height: 50px;
	background-color: #FFF;
	padding: 10px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 20;
	border-radius: 0 0 0 10px;
	-webkit-box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}
.tmp-btn-bar > .rightbar{
	display: flex;
	margin: 0 0 0 auto;
}
.tmp-btn-bar > .rightbar .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 17px;
    min-width: 85px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.tmp-btn-bar > .rightbar .btn i {
    font-size: 20px;
    margin: 0 5px 0 0;
}
.tmp-btn-bar > .rightbar .btn + .btn {
    margin: 0 0 0 5px;
}
.email-builder-wrap > .rightbar .template-wrapper{
    width: 100%;
    max-width: 100%;
    float: left;
    height: calc( 100vh - 50px);
    margin: 0 auto;
    overflow-y: auto;
}
.email-builder-wrap > .rightbar .template-wrapper .template-body{
	background-color: transparent;
}


html[dir="rtl"] .email-builder-wrap > .leftbar {
    float: right;
    border-radius: 10px 0 0 10px;
}
html[dir="rtl"] .email-builder-wrap > .rightbar {
    float: left;
}
html[dir="rtl"] .tmp-back-circle {
    transform: rotate(180deg);
    margin: 0 0 0 10px;
}
html[dir="rtl"] .tmp-btn-bar > .rightbar{
	margin: 0 auto 0 0;
}
html[dir="rtl"] .tmp-btn-bar > .rightbar .btn i {
    margin: 0 0 0 5px;
}
html[dir="rtl"] .tmp-btn-bar > .rightbar .btn + .btn {
    margin: 0 5px 0 0;
}
html[dir="rtl"] .tmp-btn-bar {
    border-radius: 0 0 10px 0;
}
.email-meta-info.library-meta-header > .leftbar{
	width: 120px;
}
.email-meta-info.library-meta-header > .leftbar .photo-thumb{
	height: 120px;
	background-color: #f5f5f5;
}
.email-meta-info.library-meta-header > .rightbar{
	width: calc( 100% - 135px );
}
.email-meta-info.library-meta-header > .rightbar .btn{
	padding: 6px 29px;
    display: inline-block;
	margin: 20px 0 0;
}
.email-meta-info.library-meta-header > .rightbar .btn + .btn{
	margin: 20px 0 0 5px;
}
html[dir="rtl"] .email-meta-info.library-meta-header > .rightbar .btn + .btn {
    margin: 20px 5px 0 0;
}
.email-drawer.custom-drawer.in {
    width: 450px;
}
.email-drawer.custom-drawer.in .drawer-backdrop{
	opacity: 0 !important;
	animation: none !important;
}
.email-drawer .drawer-body {
    height: calc( 100vh - 50px );
}
.editor-wrap textarea{
	min-height: 380px;
}
.template-buttons {
	background-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.template-buttons .btn {
	width: 48%;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
	justify-content: center;
    padding: 7px;
	margin: 15px 0;
}
.template-buttons .btn i{
	font-size: 18px;
	margin: 0 5px 0 0;
}
.editor-footer {
    margin: 15px 0 0;
}
.editor-footer .btn {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 3px 7px;
    margin: 0 5px 0 0;
}
.editor-footer .btn i {
    font-size: 18px;
    margin: 0 3px 0 0;
}
.template-wrapper .first[class*=col]{
	position: relative;
	z-index: 50;
}
.template-panel {
    width: 100%;
    float: left;
    padding: 20px;
    /* background-color: #f6f6f6;
    height: calc( 100vh - 200px );
    overflow-y: auto; */
}
.template-collapse .panel-group{
	width: 100%;
	float: left;
}
.template-collapse .panel{
	border-color: #e5e5e5;
	box-shadow: none;
	border-radius: 0px;
}
.template-collapse .panel+.panel {
    margin-top: 0;
    border-top: none;
}
.template-collapse .panel-heading{
	background-color: #FFF;
	padding: 9px 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.template-collapse .panel-heading > .leftbar{
	display: flex;
	align-items: center;
	flex: auto;
}
.template-collapse .panel-heading > .leftbar i{
	font-size: 24px;
	color: #999;
	margin: 0 12px 0 0;
	transition: var(--default-transition);
}
.template-collapse .panel-heading > .leftbar span{
	font-size: 16px;
	font-weight: 700;
	color: #000;
	letter-spacing: 0.5px;
}
.template-collapse .panel-heading > .rightbar i{
	font-size: 24px;
	color: #999;
	display: block;
	transition: var(--default-transition);
}
.template-collapse .panel-heading:hover > .leftbar i,
.template-collapse .panel-heading[aria-expanded="true"] > .leftbar i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.template-collapse .panel-heading[aria-expanded="true"] > .rightbar i{
	transform: rotate(90deg);
	transition: var(--default-transition);
}


.template-collapse .panel-body{
	background-color: #f9f9f9;
}
.custom-collapse{
	width: 100%;
	float: left;
}
.template-collapse .custom-collapse .panel{
	box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 10%);
	box-shadow: none;
	border-radius: 3px;
}
.template-collapse .custom-collapse .panel-heading a{
	padding: 13px 10px;
}
.template-collapse .custom-collapse .panel-body{
	border-top: 1px solid #eee !important;
	border-top: 1px solid #ddd !important;
	/* background-color: #FFF; */
	padding: 10px 15px 5px;
}
.template-collapse .custom-collapse .model-wrap{
	background-color: #FFF;
}
.layout-listing ul li{
	width: 100%;
	min-height: 50px;
	padding: 9px 10px;
	display: flex;
    align-items: center;
	background-color: #FFF;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin: 0 0 10px;
}
.layout-listing ul li:last-child{
	margin: 0 0 5px;
}
.layout-listing ul li.active{
	background-color: #FEF2EF;
	border-color: var(--primary-color);
}
.layout-listing ul li img{
	max-width: 100%;
}
.layout-listing ul li .form-control{
	font-size: 13px;
	letter-spacing: 0.5px;
	height: 30px;
}
.layout-listing ul li .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 6px 22px;
	letter-spacing: 0.5px;
	margin: 0 0 0 10px;
}
.content-listing{
	padding: 15px 15px 0;
}
.content-listing ul{
	margin: 0 -6px;
}
.content-listing ul li{
	width: 33.33%;
	float: left;
	padding: 0 6px;
	margin: 0 0 15px;
	
}
.content-listing ul li .content-listing-wrap{
	background-color: #FFF;
	border: 1px solid #ddd;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	min-height: 88px;
	cursor: pointer;
	transition: var(--default-transition);
}
.content-listing ul li .content-listing-wrap i{
	font-size: 24px;
	color: #8E9BA4;
	margin: 0 0 5px;
	transition: var(--default-transition);
}
.content-listing ul li .content-listing-wrap span{
	font-size: 13px;
	color: #000;
	letter-spacing: 0.5px;
}
.content-listing ul li .content-listing-wrap:hover{
	border-color: var(--primary-color);
	transition: var(--default-transition);
}
.content-listing ul li .content-listing-wrap:hover i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.template-image-meta .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 20px;
}
.tmp-img-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 15px;
}
.tmp-img-wrap > .leftbar{
	display: flex;
	flex-direction: column;
}
.tmp-img-wrap > .leftbar .btn{
	padding: 6px 30px;
}
.tmp-img-wrap > .leftbar .btn + .btn{
	margin: 10px 0 0;
}
.tmp-img-wrap > .rightbar {
    width: 90px;
    height: 80px;
    background-color: #ddd;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}
.tmp-img-wrap > .rightbar img{
	width: 90px;
    height: 80px;
    object-fit: cover;
    object-position: center;
	border-radius: 3px;
}


.template-social-header{
	border-bottom: 1px dashed #8E9BA4;
	padding: 0 0 10px;
	margin: 0 0 15px;
}
.template-social-header .template-header-meta{
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}
.template-social-header .template-header-meta > .leftbar{
	width: calc( 100% - 195px );
}
.template-social-header .template-header-meta > .rightbar{
	width: 195px;
}
.template-social-header .template-header-meta > .leftbar span{
	font-size: 13px;
	color: #000;
}
.template-social-header .template-header-meta > .rightbar .row{
	position: relative;
}
.template-social-header .template-header-meta > .rightbar .form-control{
	font-size: 14px;
	font-weight: 500;
	border-color: #ddd;
	border-radius: 3px;
}
.social-seprator {
    font-size: 13px;
    color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.template-social-meta .table{
	margin: 0;
}
.template-social-meta .table>tbody>tr>td{
	padding: 10px 0;
	border: none;
	vertical-align: middle;
}
.template-social-meta .table>tbody>tr>td .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	box-shadow: none !important;
}
.template-social-meta .table>tbody>tr>td .btn i{
	font-size: 17px;
	vertical-align: bottom;
	margin: 0 2px 0 0;
}
.template-social-meta .table>tbody>tr>td img{
	width: 25px;
	margin: 0 5px;
}
.template-social-meta .drag-box i{
	font-size: 18px;
	color: var(--primary-color);
	cursor: pointer;
}

/* .template-panel .table tbody tr:hover{
	outline: 2px dashed #2680EB;
    outline-offset: -4px;
} */
.template-panel .table tbody tr.td-sortable > td:hover {
    outline: 2px dashed #FFB209;
    outline-offset: -2px;
}
.element-body:hover {
    outline: 2px dashed #6CA422;
    outline-offset: -2px;
}

.popover-content{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	letter-spacing: 0.5px;
	padding: 10px;
	overflow: hidden;
}
.popover-content > i{
	font-size: 20px;
    color: var(--primary-color);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 3px 5px;
    display: block;
	z-index: 1;
}
.color-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.color-wrap > .leftbar{
	width: 50px;
}
.color-wrap > .rightbar{
	width: calc( 100% - 50px );
	float: right;
}
.color-wrap > .leftbar input {
	width: 50px;
    height: 32px;
	background: #FFF url(../img/format_color.svg) no-repeat center 6px/22px;
    border: 1px solid #ccc;
	border-right: none;
    outline: none !important;
    text-indent: -99999px;
    border-radius: 3px 0 0 3px;
}
html[dir="rtl"] .color-wrap > .leftbar input {
	border-right: 1px solid #ccc;
	border-left: none;
    border-radius: 0 3px 3px 0;
}
.color-wrap > .leftbar input.btn-color_picker {
	cursor: pointer;
}
.color-wrap > .leftbar input.btn-color_picker:hover {
	box-shadow: 0 0 0 1px #ccc;
}
.template-social-meta .table-responsive{
	overflow-x: visible;
}
.template-panel .table {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
    border-collapse: collapse;
	border-collapse: separate;
	border-spacing: 0;
}
.template-panel .table .resizer {
	position: absolute;
	top: 0;
	right: -8px;
	bottom: 0;
	left: auto;
	width: 16px;
	z-index: 5;
	cursor: col-resize;
}
.template-panel .table tbody tr{
	position: relative;
}
.template-panel .table tbody tr td{
	padding: 18px 8px;
	position: relative;
	
	/* background-color: #FFF; */
	background-clip: padding-box;
}
.tox .tox-collection__item-label{
	white-space: nowrap !important;
}
.template-panel .table tbody tr.td-sortable > td{
	border: 1px solid transparent;
	border: none;
}
.template-panel .table tbody tr.td-sortable > td:hover{
	border-color: #ddd;
}
.template-panel .table tbody tr td.row-sort{
	padding: 0;
    border: none;
}
.template-panel .table tbody tr td.ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #333;
}
.template-panel table table tr td::before{
	/* content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	user-select: none; */
}
.template-panel .table tbody tr td.active {
    background-color: #fef2ef;
	background-color: #fff8f6;
}
.template-panel table table tr td.active::before{
	display: none;
}
.tmp-save {
    font-size: 22px;
    color: #00a1f6;
    position: absolute;
    right: 5px;
    bottom: 0;
	cursor: pointer;
	display: none;
}
.ui-focused .tmp-save{
	display: block;
}

.ui-sortable-helper {
    /* display: table; */
}

.ui-state-highlight td {
    /* background-color: #ffefeb !important; */
}

.ui-state-highlight{
	/* background-color: #ffefeb !important;
	border-color: var(--primary-color) !important; */
}

.template-panel .ui-state-highlight{
	/* border-color: #ddd !important; */
}

.ui-state-active{
	/* background-color: #ffefeb !important; */
}

.template-panel div[contenteditable=true] {
	border: 1px dashed transparent;
	min-width:100px;
}
.template-panel div[contenteditable=true]:hover,
.template-panel td:hover div[contenteditable=true] {
	border: 1px solid var(--primary-color);
}

.column-tooltip{
	position: absolute;
    left: 0;
    top: -22px;
	background-color: #295885;
	background-color: #00a1f6;
	background-color: #ffb209;
	border-radius: 2px;
	display: none;
	overflow: hidden;
}
.column-tooltip span {
    padding: 5px;
    display: flex;
    cursor: pointer;
    z-index: 10;
    border-right: 1px solid rgba(255,255,255,.4);
}
html[dir="rtl"] .column-tooltip span {
	border-right: none;
    border-left: 1px solid rgba(255,255,255,.4);
}
.column-tooltip span:last-child{
	border: none !important;
}
.column-tooltip span i{
	font-size: 16px;
	color: #FFF;
}
.template-panel .table tbody tr.tr-sortable.active .row-tooltip,
.column-tooltip .save-box,
td.active .column-tooltip .edit-box,
td.active .column-tooltip .save-box,
td.active .column-tooltip .delete-box{
	display: none;
}
td.active .column-tooltip .save-box{
	display: flex;
}
.template-panel .table tbody tr td .element-content{
	pointer-events: none;
	user-select: none;
}
.template-panel .table tbody tr.tr-sortable.active td .element-content{
	pointer-events: unset;
	user-select: auto;
}
.row-tooltip {
    position: absolute;
    left: -23px;
    top: 0;
	z-index: 1;
	display: none;
}
.row-tooltip span{
	font-size: 16px;
	color: #FFF;
	width: 24px;
	height: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,.4);
}
.row-tooltip span:last-child{
	border: none !important;
}



.row-tooltip .drag-box{
	background-color: #2680EB;
}
.row-tooltip .edit-box, .row-tooltip .save-box, .row-tooltip .delete-box{
	background-color: #5E7185;
}
.row-tooltip .save-box,
.row-active .row-tooltip .delete-box,
.row-active .row-tooltip .edit-box{
	display: none;
}
.row-active .row-tooltip .save-box{
	display: flex;
}
.row-active .td-sortable:before, .row-hover .td-sortable:before{
	content: '';
	outline: 2px dashed #2680EB;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	outline-offset: 5px;
	z-index: 1;
}
.content-tooltip {
	min-height: 30px;
    background-color: #6ca422;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
	z-index: 10;
	border-radius: 2px;
    display: none;
	overflow: hidden;
}
.content-tooltip span {
    padding: 5px;
    display: flex;
	cursor: pointer;
	z-index: 10;
    border-right: 1px solid rgba(255,255,255,.4);
}
html[dir="rtl"] .content-tooltip span {
	border-right: none;
    border-left: 1px solid rgba(255,255,255,.4);
}
.content-tooltip span:last-child{
	border: none !important;
}


.content-tooltip span i{
	font-size: 19px;
	color: #FFF;
}
.content-tooltip .object-name {
	font-size: 10px;
	font-weight: 500;
	color: #FFF;
    background-color: #5E7185;
	text-transform: capitalize;
	align-items: center;
}
.table tr:hover td > .row-tooltip{
	display: block;
}
.table tr td:hover > .element-body .content-tooltip,
.table tr td:hover > .column-tooltip{
	display: flex;
}
.ui-focused .content-tooltip,
td.active .content-tooltip,
.row-active .column-tooltip,
.row-active .content-tooltip{
	display: none !important;
}

.content-placeholder{
	background-color: #FEF2EF;
    border: 1px dashed var(--primary-color);
    border-radius: 5px;
    margin: 2px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 78px;
}
.content-placeholder i{
	font-size: 22px;
	color: var(--primary-color);
}
.content-placeholder span{
	font-size: 12px;
	font-weight: 500;
	color: var(--primary-color);
}


.ui-wrapper{
	border: 1px solid #000;
	top: auto !important;
	left: auto !important;
	overflow: inherit !important;
}
.ui-wrapper img{
	max-width: 100%;
	max-height: 100%;
}
.ui-resizable-se, .ui-resizable-sw, .ui-resizable-ne, .ui-resizable-nw{
	width: 7px !important;
	height: 7px !important;
	background-image: none !important;
	background-color: #000;
}
.ui-resizable-ne {
    right: -3px !important;
    top: -4px !important;
}
.ui-resizable-se {
	right: -3px !important;
	bottom: -4px !important;
}
.ui-resizable-sw {
    left: -3px !important;
    bottom: -4px !important;
}
.ui-resizable-nw {
    left: -3px !important;
    top: -4px !important;
}
.colorpicker{
	z-index: 9999 !important;
}
body.email-gallery-open .email-drawer{
	pointer-events: none;
}
/*=======================
	Shipping Info code 
==========================*/
.address-seprator {
    border-left: 1px solid #8E9BA4;
    position: relative;
    display: flex;
    margin: 0 0 15px;
}
.address-seprator span {
	width: 35px;
	height: 35px;
    background: #FFF;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 1px solid #5E7185;
	border-radius: 50%;
	box-shadow: 0 0 0 5px #FFF;
}
.address-seprator i {
    font-size: 24px;
    color: #5E7185;
    position: relative;
	top: -1px;
}
.Shipping-panel {
    display: flex;
}
.Shipping-info {
    margin: 0 0 15px;
}
.Shipping-info ul li {
    font-size: 13px;
    color: #000;
    line-height: 24px;
    margin: 0;
}
.Shipping-info i {
    display: none;
}
.Shipping-info span {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    display: block;
    margin: 0 0 7px;
	text-transform:capitalize;
}
.Shipping-info p {
    font-size: 13px;
    color: #000;
    line-height: 24px;
    margin: 0;
}
.Shipping-info .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	margin: 10px 0 0;
}
.shipping-table .table>tbody>tr>td{
	color: #333;
	border: none;
	vertical-align: middle;
}
.shipping-table .table>tbody>tr>td strong{
	font-weight: 500;
	color: #000;
}

.shipping-table .table>tbody>tr>td .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	margin: 0 0 0 5px;
}
/*==========================
	Register Page Code 
===========================*/
.login-page {
    width: 100%;
    float: left;
	padding: 0 0 100px;
}
.login-logo{
	width: 150px;
	margin: 35px auto;
}
.login-logo img{
	width: 150px;
}
.login-panel {
	width: 100%;
	overflow: hidden;
	max-width: 350px;
	padding: 15px 25px 25px;
	background: #fff;
	border: 0px solid #fff;
	border-radius: 3px;
	margin: 0 auto 20px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
.form-title{
	font-size: 24px;
	font-weight: 500;
	color: #000;
	display: block;
	margin: 0 0 19px;
}
.login-panel label{
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 1px;
}
html[dir="ltr"] .login-panel label{
	letter-spacing: 0.3px;
}
.login-panel .form-control{
	font-size: 13px;
}
.login-panel .form-control[readonly] {
    background-color: #eee;
    box-shadow: none !important;
    border-color: #ccc;
}
.login-panel .btn{
	font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    margin: 5px 0 0;
    letter-spacing: 0.5px;
}
.reg-link p, .reg-link p a{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	text-align: center;
}
.reg-link p a{
	font-weight: 400;
	display: inline-block;
	transition: all .3s ease;
	color: #333;
}
.reg-link p a:hover{
	color: #f0603b;
	transition: all .3s ease;
}
.change-url {
    font-size: 12px;
    color: #1968b3 !important;
    position: absolute;
    bottom: 35px;
    right: 0;
    font-weight: 500;
}
html[dir="rtl"] .change-url {
	right: auto;
    left: 0;
}
/*==========================
	Login Footer Code 
===========================*/
.login-page .login-footer{
	background: #f3f4f6;
	position: fixed;
	left: 0 !important;
	right: 0 !important;
	bottom: 0;
	min-height: 80px;
	display: flex;
    align-items: center;
	padding: 0 30px;
}
.login-page .login-footer .container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.login-page .login-footer .left-col{
	width: calc( 100% - 420px );
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-end;
}
.login-page .login-footer .right-col{
	width: 420px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.login-page .login-footer .right-col .form-control{
	font-size: 12px;
	color: #333;
	border-color: #666 !important;
	min-width: 180px;
	height: 28px;
	background-color: transparent!important;
	width: auto;
	border-radius: 4px;
	box-shadow: none !important;
}
.login-page .login-footer .left-col ul,
.login-page .login-footer .left-col span{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.login-page .login-footer .left-col span {
    font-size: 13px;
    color: #8f8f8f;
    margin: 0 0 3px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.login-page .login-footer .left-col ul li a{
	font-size: 12px;
	font-weight: 500;
	color: #333;
	display: block;
	margin: 0 0 10px 25px;
	transition: all .3s ease;
}
.login-page .login-footer .left-col ul li:first-child a{
	margin: 0 0 10px !important;
}
.login-page .login-footer .left-col ul li a:hover{
	color: #f0603b;
	transition: all .3s ease;
}
html[dir="rtl"] .login-page .login-footer .left-col ul li a{
	margin: 0 25px 10px 0;
}
/*==========================
	validation error Code 
===========================*/
.validation-error {
	width: 100%;
	float: left;
	background: #FFF9F9;
	border: 1px solid #C9252D !important;
	padding: 9px;
	margin: 0 0 15px;
	position: relative;
	border-radius: 3px;
}
.validation-error ul {
	border: 0px;
	padding: 0px !important;
}
.validation-error ul li {
	font-size: 13px;
	color: #FFF;
}
.validation-error i {
	font-size: 20px;
	color: #C9252D !important;
	position: absolute;
    top: 0;
    right: 0;
    padding: 9px 5px;
    cursor: pointer;
}
.validation-error ul li span {
	font-size: 14px;
    font-weight: 500;
	color: #C9252D;
	line-height: 20px;
}
.validation-error ul li span .error{
	color: #C9252D !important;
}
html[dir="rtl"] .validation-error i {
	right: auto;
	left: 0;
}
/*=======================
	Ticket code
========================*/
.ticket-wrapper {
    width: calc( 100% + 40px );
    height: calc( 100vh - 76px);
    margin: -20px;
	position: relative;
	overflow: hidden;
}
.ticket-wrapper > .leftbar{
	width: 100%;
	float: left;
	position: relative;
	transition: var(--default-transition);
}
.ticket-wrapper.col-open > .leftbar{
	width: calc( 100% - 300px );
	transition: var(--default-transition);
}
.ticket-wrapper > .rightbar{
	width: 300px;
	float: right;
	
	background-color: #FBFBFB;
	border-left: 1px solid #ddd;
	position: relative;
	position: absolute;
    right: -300px;
    top: 0;
    bottom: 0;
	box-shadow: -2px 0 6px rgba(0,0,0,0.0);
	transition: var(--default-transition);
}
.ticket-wrapper.col-open > .rightbar{
	right: 0;
	box-shadow: -2px 0 6px rgba(0,0,0,0.08);
	transition: var(--default-transition);
}
.ticket-meta-wrap{
	padding: 10px;
	height: calc( 100vh - 76px);
	overflow-y: auto;
}
.ticket-meta-wrap.custom-scroll > .mCustomScrollBox > .mCSB_container{
	padding: 10px;
}
.panel-cursor{
	width: 140px;
	height: 22px;
	background-color: #FFF;
	background-image: url(../img/panel_bars.svg), url(../img/panel_bars.svg);
    background-repeat: no-repeat;
    background-size: 20px;
	background-position: center left 5px, center right 5px;
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	-webkit-box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
    -ms-box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
    -o-box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
    box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
	transition: var(--default-transition);
}
.panel-cursor i {
    font-size: 18px;
    color: #666;
    display: block;
	transition: var(--default-transition);
}



.ticket-wrapper > .rightbar .panel-cursor {
    width: 20px;
    height: 100px;
	background-image: url(../img/panel_bars_vertical.svg), url(../img/panel_bars_vertical.svg);
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center top 12px, center bottom 12px;
    border-radius: 3px 3px 0 0;
    position: absolute;
    left: -20px;
    top: 50%;
	margin: -50px 0 0;
}
.ticket-wrapper.col-open > .rightbar .panel-cursor i{
	transform: rotate(180deg);
	transition: var(--default-transition);
}
.message-attachment-wrap .panel-cursor {
    position: absolute;
	left: 50%;
    transform: translateX(-50%);
    bottom: 0;
	border-radius: 3px 3px 0 0;
	box-shadow: 0px 4px 15px 0px rgb(0 0 0 / 20%);
}
.message-attachment-wrap.panel-open .panel-cursor {
    bottom: 120px;
	transition: var(--default-transition);
}
.message-attachment-wrap .panel-cursor span{
	font-size: 11px;
	font-weight: 500;
	color: #000;
}
.message-attachment-wrap.panel-open .panel-cursor i{
	transform: rotate(180deg);
	transition: var(--default-transition);
}







.message-wrapper {
    width: 100%;
	height: calc( 100vh - 196px );
	overflow-y: auto;
    position: relative;
	padding: 20px 0 0;
}
ul.message-ul{
	padding: 0 20px;
	/* max-height: 550px;
    overflow-y: auto; */
}
ul.message-ul li.message-li {
    display: flex;
	flex-wrap: wrap;
	margin: 0 0 10px;
	/* max-height: 550px;
	overflow-y: auto; */
}
ul.message-ul li.message-li .message-row{
	display: flex;
	flex-wrap: wrap;
}
ul.message-ul li.message-li:nth-child(even){
	justify-content: flex-end;
}
ul.message-ul li.message-li:nth-child(even) .message-row{
	flex-direction: row-reverse;
}
ul.message-ul li.message-li .message-row > .leftbar{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 20px;
}
ul.message-ul li.message-li .message-row > .rightbar{
	max-width: 480px;
	flex: 1;
	padding: 0 7px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:not(:last-child){
	margin:  0 0 10px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:not(:last-child) .message-meta span{
	padding: 0 15px;
}
ul.message-ul li.message-li .message-row > .rightbar ul li:last-child .message-wrap:before {
    content: '';
    background: url(../img/orange-corner.svg) no-repeat;
    position: absolute;
    bottom: -3px;
    left: -17px;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar ul li:last-child .message-wrap:before {
    background: url(../img/gray-corner.svg) no-repeat;
    transform: rotate(90deg);
    left: auto;
    right: -14px;
    transform: rotate(180deg);
    bottom: 0;
}
ul.message-ul li.message-li .message-row > .leftbar span{
	font-size: 13px;
	font-weight: 700;
	color: #FFF;
	width: 30px;
	height: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	border-radius: 50%;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .leftbar span{
	background-color: #5E7185;
}
ul.message-ul li.message-li .message-row > .rightbar .message-wrap{
	padding: 10px 14px;
	background-color: #FFF5F2;
	border-radius: 5px;
	position: relative;
	margin: 0 15px;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar .message-wrap{
	background-color: #E8EFF3;
}
ul.message-ul li.message-li .message-row > .rightbar .message-wrap .message-span{
	font-size: 13px;
	color: #202123;
	line-height: 18px;
	word-wrap: break-word;
}
ul.message-ul li.message-li .message-row > .rightbar .message-meta span{
	font-size: 11px;
	font-weight: 500;
	color: #63697B;
	line-height: 12px;
	display: block;
	margin: 5px 0;
}
ul.message-ul li.message-li:nth-child(even) .message-row > .rightbar .message-meta span{
	text-align: right;
}
.message-box {
    width: 100%;
    float: left;
	padding: 0 10px;
	background-color: #FFF;
    border-top: 1px solid #ddd;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
	align-items: center;
	border-radius: 0 0 0 20px;
}
.message-box > .leftbar{
	width: calc( 100% - 100px );
	float: left;
	height: 119px;
}
.message-box > .rightbar{
	width: 100px;
	float: right;
}
.message-box > .rightbar ul {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.message-box > .rightbar ul li{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.message-box > .rightbar ul li.send-li{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--primary-color);
	margin: 0 0 0 15px;
}
.message-box > .rightbar ul li.send-li i {
    font-size: 20px;
    color: #FFF;
    position: relative;
    left: 2px;
}
.message-box > .rightbar ul li:not(.send-li) i{
	font-size: 22px;
	color: #575F6A;
}
.message-box .form-control {
    border: none !important;
    box-shadow: none !important;
    min-height: unset;
    height: 95px;
    padding: 10px 0 5px;
}
/* .message-box .form-control::placeholder {
	transform: translateY(20px);
} */



.message-attachment {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.message-attachment ul, .message-attachment ul li{
	display: flex;
	flex-wrap: wrap;
}
.message-attachment ul li{
	min-width: 150px;
	align-items: center;
	background-color: #FFF;
	border-radius: 2px;
	margin: 6px 10px 0 0 !important;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
}
.message-attachment ul li > .leftbar{
	display: flex;
	align-items: center;
	flex: 1;
	padding: 7px 10px;
}
.message-attachment ul li > .rightbar{
	width: 30px;
	height: 34px;
    display: flex;
	justify-content: center;
	align-items: center;
	border-left: 1px solid #e5e5e5;
}
.message-attachment ul li > .leftbar i {
    font-size: 18px;
    color: #999;
    display: inline-block;
	vertical-align: text-top;
	position: relative;
	margin: 0 3px 0 0;
}
.message-attachment ul li > .leftbar span{
	font-size: 12px;
	font-weight: 500;
    color: #000;
    max-width: 90px;
	letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.message-attachment ul li > .rightbar i {
    font-size: 18px;
	color: #666;
	text-align: center;
	cursor: pointer;
}
ul.message-ul li.message-li:nth-child(odd) .message-row > .rightbar ul li .message-attachment ul li > .rightbar i {
	color: var(--primary-color);
}
.message-attachment ul li.is-loading > .rightbar {
    border: none;
    background: url(../img/loaders_bg/loader.svg) no-repeat center/25px;
}
.message-attachment ul li.is-loading > .rightbar i{
	display: none;
}
.message-attachment-wrap {
    width: 100%;
    float: left;
	position: relative;
}
.message-attachment-wrap .message-attachment {
	padding: 5px 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -120px;
    height: 120px;
	overflow-y: auto;
    display: block;
    background: #fafafa;
	border-top: 1px solid #ddd;
	transition: var(--default-transition);
}
.message-attachment-wrap.panel-open .message-attachment {
    bottom: 0px;
	transition: var(--default-transition);
}
.message-attachment-wrap .message-attachment.custom-scroll > .mCustomScrollBox > .mCSB_container{
	padding: 5px 20px;
}
.ticket-attachment ul{
	border: 1px dashed #aaa;
	overflow: hidden;
	border-radius: 3px;
}
.ticket-attachment ul li{
	width: 100%;
	float: left;
	background-color: #FFF;
	border-bottom: 1px dashed #aaa;
	padding: 4px 8px;
	display: flex;
	align-items: center;
}
.ticket-attachment ul li:last-child{
	border: none;
}
.ticket-attachment ul li > .leftbar{
	width: calc( 100% - 80px );
	float: left;
	position: relative;
	padding: 0 0 0 30px;
}
.ticket-attachment ul li > .rightbar{
	width: 80px;
	float: right;
	text-align: right;
}
.ticket-attachment ul li > .rightbar a{
	font-size: 12px;
	font-weight: 500;
	color: var(--primary-color);
	display: block;
}
.ticket-attachment ul li > .leftbar i{
	font-size: 20px;
	color: #999;
	position: absolute;
	left: 0;
	top: 9px;
}
.ticket-attachment ul li > .leftbar span, .ticket-attachment ul li > .leftbar p{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ticket-attachment ul li > .leftbar span{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	display: block;
	margin: 7px 0 2px;
}
.ticket-attachment ul li > .leftbar p{
	font-size: 11px;
	font-weight: 500;
	color: #999;
	margin: 0;
}
.ticket-meta{
	border: 1px dashed #aaa;
	overflow: hidden;
	background-color: #FFF;
	border-radius: 3px;
	margin: 0 0 20px;
}
.ticket-meta-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 5px 10px;
	min-height: 45px;
	background-color: #fafafa;
	border-bottom: 1px solid #ddd;
}
.ticket-meta-header span{
	font-size: 12px;
	font-weight: 500;
	flex: auto;
}
.ticket-meta-header .form-control{
	font-size: 12px;
	width: 110px;
	height: 28px;
}
.ticket-meta-body .table{
	margin: 7px 0;
}
.ticket-meta-body .table>tbody>tr>td{
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border: none;
}
/*=======================
	Resize Images code
========================*/
.resize-wrapper ul li{
	width: 100%;
	float: left;
	margin: 0 0 35px;
}
.resize-wrapper ul li > .leftbar{
	width: 250px;
	float: left;
}
.resize-wrapper ul li > .rightbar{
	width: calc( 100% - 500px );
	float: left;
}
.resize-wrapper ul li > .leftbar span{
	font-size: 13px;
	font-weight: 500;
	color: #000;
}
.resize-wrapper ul li .progress{
	width: 100%;
	max-width: 800px;
	padding: 2px;
	background-color: #FFF;
	border: 1px solid var(--primary-color);
	box-shadow: none;
	border-radius: 10px;
	margin: 0;
}
.resize-wrapper ul li .progress-bar{
	font-size: 12px;
	font-weight: 700;
	background-color: var(--primary-color);
	line-height: 14px;
	box-shadow: none;
	border-radius: 7px;
}
.resize-wrapper ul li .progress.disabled{
	opacity: .5;
}
/*====================================
	Dashboard Page code
=====================================*/
.ticker-wrapper{
	width: 100%;
    float: left;
    min-height: 120px; 
	padding: 5px 25px;
    background: url(../img/dashboard_bg.svg);
	background-position: bottom;
    background-size: cover;
    position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	margin: 0 0 20px;
	border-radius: 5px;
}
.ticker-wrapper span{
	font-size: 22px;
	color: #FFF;
	margin: 0 0 12px;
}
.ticker-wrapper .btn {
	font-size: 13px;
	font-weight: 500;
	padding: 6px 24px;
    align-self: flex-start;
	text-transform: capitalize;
}
.ticker-wrapper img{
	position: absolute;
	top: -10px;
	right: 30px;
}
.dashboard-chart{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.dashboard-chart > .leftbar{
	width: calc( 100% - 460px );
}
.dashboard-chart > .rightbar{
	width: 420px;
}
.chart-tabs-wrapper {
    width: 100%;
    display: flex;
	align-items: center;
}
.chart-tabs-wrapper .nav-tabs.primary-tabs{
	left: 0;
}
.chart-tabs-wrapper .form-control {
    width: 150px;
    width: auto;
    min-width: 150px;
    max-width: 200px;
    margin: 0 0 0 30px;
}
.chart-wrapper{
	background-color: #fafafa;
}
.highcharts-axis-line{
	display: none;
}
.chart-box ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.chart-box ul li {
    width: 100%;
    min-height: 88px;
    padding: 14px 15px 14px 65px;
    border: 1px solid #ddd;
    border-right: 3px solid #ddd;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	position: relative;
    margin: 0 0 20px;
}
.chart-box ul li .icon-circle{
	width: 68px;
	height: 68px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	left: -25px;
}
.chart-box ul li .icon-circle i{
	font-size: 28px;
	color: #FFF;
}
.chart-box ul li .icon-circle i.icon-cart{
	font-size: 24px;
}
.chart-box ul li:nth-child(1){
	border-color: #03A9F4;
}
.chart-box ul li:nth-child(1) .icon-circle{
	background-color: #03A9F4;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(3, 169, 244);
	-moz-box-shadow: 0px 0px 15px 0px rgba(3, 169, 244);
	box-shadow: 0px 0px 15px 0px rgba(3, 169, 244);
}
.chart-box ul li:nth-child(2){
	border-color: #C9252D;
}
.chart-box ul li:nth-child(2) .icon-circle{
	background-color: #C9252D;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(201, 37, 45);
	-moz-box-shadow: 0px 0px 15px 0px rgba(201, 37, 45);
	box-shadow: 0px 0px 15px 0px rgba(201, 37, 45);
}
.chart-box ul li:nth-child(3){
	border-color: #F2952B;
}
.chart-box ul li:nth-child(3) .icon-circle{
	background-color: #F2952B;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(242, 149, 43);
	-moz-box-shadow: 0px 0px 15px 0px rgba(242, 149, 43);
	box-shadow: 0px 0px 15px 0px rgba(242, 149, 43);
}
.chart-box ul li:nth-child(4){
	border-color: #21A67A;
}
.chart-box ul li:nth-child(4) .icon-circle{
	background-color: #21A67A;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(33, 166, 122);
	-moz-box-shadow: 0px 0px 15px 0px rgba(33, 166, 122);
	box-shadow: 0px 0px 15px 0px rgba(33, 166, 122);
}
.chart-box ul li .chart-box-meta span{
	font-size: 16px;
	font-weight: 500;
	color: #333;
	display: block;
	margin: 0;
}
.chart-box ul li .chart-box-meta p{
	font-size: 22px;
	font-weight: 700;
	color: #222;
	margin: 0;
}
/*=================================================
	404 & Permission code
===================================================*/
.error-wrap{
	height: 100vh;
	align-items: center;
}
.error-wrap img{
	width: 500px;
	margin: 0 0 30px;
}
.error-wrap.no-permission img{
	width: 300px;
}
.error-wrap span{
	font-size: 24px;
	font-weight: 500;
	color: #111;
	display: block;
	margin: 0 0 5px;
}
.error-wrap p{
	font-size: 16px;
	color: #111;
	margin: 0 0 25px;
}
.error-wrap .btn {
    font-size: 13px;
    font-weight: 500;
	padding: 7px 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-wrap .btn i{
	font-size: 18px;
	display: inline-block;
	margin: 0 5px 0 0;
}
html[dir="rtl"] .error-wrap .btn i{
	margin: 0 0 0 5px;
}
/*=================================================
	Database Operation Page code
===================================================*/
.operation-listing ul {
	display: flex;
    flex-wrap: wrap;
}
.operation-listing ul li{
	display: flex;
	margin: 0 0 25px;
}
.operation-listing ul li .operation-wrap{
	display: flex;
	border: 1px solid #ddd;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap:hover{
	border-color: var(--primary-color);
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap::before{
	content: '';
	height: 4px;
	background-color: #ddd;
	position: absolute;
    left: -1px;
    right: -1px;
    top: -2px;
    border-radius: 5px 5px 0 0;
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap:hover::before{
	background-color: var(--primary-color);
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap .custom-table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	margin: 0 0 10px;
}
.operation-listing ul li .operation-wrap .custom-table .table>thead>tr>th{
	padding: 10px 16px;
	text-transform: capitalize;
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap:hover .custom-table .table>thead>tr>th{
	background-color: var(--primary-color-bg);
	transition: var(--default-transition);
}
.operation-listing ul li .operation-wrap .custom-table .table>thead>tr>th.w-40{
	width: 40px;
}
.operation-listing ul li .operation-wrap .custom-table .table>tbody>tr>td{
	font-size: 11px;
	padding: 10px 16px;
	border-bottom: 1px solid #f3f3f3;
}
.operation-listing ul li .operation-wrap .custom-table .table>tbody>tr>td i:not(.btn i){
	font-size: 16px;
	color: #21A67A;
}
.operation-listing-footer {
    width: 100%;
	padding: 0 10px;
    display: flex;
    align-items: center;
}
.operation-listing-footer > .leftbar {
	font-size: 11px;
	font-weight: 500;
	color: #666;
    flex: 1;
}
.operation-listing-footer > .rightbar{
	display: flex;
}
.operation-listing-footer > .rightbar .btn {
    font-size: 13px;
    font-weight: 500;
    padding: 7px 22px;
	margin: 0 0 0 10px;
	border-radius: 5px;
    display: flex;
    align-items: center;
}
.operation-listing-footer > .rightbar .btn i {
    font-size: 18px;
    margin: 0 5px 0 0;
}
html[dir="rtl"] .operation-listing-footer > .rightbar .btn {
    margin: 0 10px 0 0;
}
html[dir="rtl"] .operation-listing-footer > .rightbar .btn i {
    margin: 0 0 0 5px;
}
/*==========================
	Custom Block code
===========================*/
.custom-block{
	width: 100%;
	float: left;
	background-color: rgba(var(--primary-color-rgba), 4%);
	padding: 10px 10px 0;
	border: 1px solid rgba(var(--primary-color-rgba), 35%);
	border-radius: 3px;
}
.custom-block-heading{
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
	display: block;
	margin: 0 0 15px;
}
/*==========================
	Popover code
===========================*/
.popover{
	font-family: var(--primary-font);
	min-width: 200px;
	max-width: 230px;
	/* max-width: unset; */
	padding: 0;
	border: 1px solid var(--primary-color);
	border-radius: 3px;
	z-index: 1100;
	-webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0px 3px 20px 0px rgba(92, 42, 42, 0.35);
	box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.35);
}
.popover-content {
    padding: 5px 10px;
	display: flex;
}
.popover>.arrow {
    border-width: 8px;
}
.popover.left>.arrow {
    right: -9px;
}
.popover.top>.arrow {
    border-top-color: var(--primary-color);
	bottom: -8px;
}
.popover.bottom>.arrow {
    border-bottom-color: var(--primary-color);
	top: -9px;
}
html[dir="rtl"] .popover.top>.arrow {
	left: auto;
	right: 50%;
	margin: 0 -11px 0 0;
}
html[dir="rtl"] .popover.top>.arrow:after {
    margin: 0 -10px 0 0;
}
.popover.left>.arrow{
	border-left-color: var(--primary-color);
}
ul.tax-ul{
	width: 100%;
}
ul.tax-ul li{
	font-size: 13px;
	font-weight: 500;
	color: #333;
	overflow: hidden;
	margin: 0 0 8px;
	display: flex;
	white-space: nowrap;
}
ul.tax-ul li .pull-right {
    margin: 0 0 0 auto;
    padding: 0 0 0 5px;
}
html[dir="rtl"] ul.tax-ul li .pull-right {
    margin: 0 auto 0 0;
    padding: 0 5px 0 0;
}
ul.tax-ul li:last-child{
	margin: 0;
}
ul.tax-ul li .price {
    margin: 0 0 0 5px;
}
html[dir="rtl"] ul.tax-ul li .price {
    margin: 0 5px 0 0;
}
ul.items-ul li{
	white-space: normal;
}
/*==========================
	Offers Popover code
===========================*/
.offers-popover .popover{
	min-width: 350px;
	max-width: unset;
	padding: 0;
	border-color: #EC407A;
}
.offers-popover .popover-content{
	padding:0;
}
.offers-popover .popover.top>.arrow {
    border-top-color: #EC407A;
	bottom: -9px;
}
.offers-popover .popover.bottom > .arrow:after{
	border-bottom-color: #FFE8E8;
}
.offers-popover .popover.bottom>.arrow {
	border-bottom-color: var(--primary-color) !important;
	top:-9px
}
.offers-wrapper{
	width: 100%;
}
.offers-wrapper .table{
	margin: 0;
}
.offers-wrapper .table thead tr th{
	font-size: 12px;
	font-weight: 700;
	color: #000;
	border-bottom: 1px solid #f9c5d7;
    padding: 4px;
	background-color: rgba(236,64,122,0.10);
}
.offers-wrapper .table tbody tr td{
	font-size: 12px;
	color: #000;
	padding: 6px;
	border-color: #ddd;
	position: relative;
}
.offers-wrapper .table tbody tr td .price, .offers-wrapper .table tbody tr td .price *{
	font-size: 12px !important;
	font-weight: normal !important;
	display: inline-block !important;
}
.offers-wrapper .table thead tr th:first-child, .offers-wrapper .table tbody tr td:first-child{
	width: 40px;
}
.offers-wrapper .table tbody tr.promoted-parent td, .offers-wrapper .table tbody tr.promoted-child td{
	background-color: #fafafa;
	border-color: #f3f3f3;
}
.offers-wrapper .table tbody tr.promoted-parent td:first-child::before{
    content: '';
    width: 7px;
    height: 7px;
    background-color: #FFF;
    border: 1px solid #EC407A;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-44%);
    z-index: 10;
}
.offers-wrapper .table tbody tr.promoted-parent td:first-child::after{
	content: '';
    border-left: 1px dashed #EC407A;
    position: absolute;
    left: 50%;
    display: block;
    bottom: 0;
    top: 50%;
}
.offers-wrapper .table tbody tr.promoted-child td:first-child::before,
.offers-wrapper .table tbody tr.promoted-parent.single td:first-child::before{
	content: '';
    background: url(../img/gift.svg) no-repeat center/13px;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-44%) translateY(-50%);
	border: none;
    border-radius: 0px;
    z-index: 10;
}
.offers-wrapper .table tbody tr.promoted-child td:first-child::after{
	content: '';
    border-left: 1px dashed #EC407A;
	border-bottom: none;
    position: absolute;
    left: 50%;
    display: block;
    bottom: 0;
    top: 0;
}
.offers-wrapper .table tbody tr.promoted-child.last td:first-child::after{
	bottom: 50%;
}
.offers-wrapper .table tbody tr.promoted-parent.single td:first-child::after{
	display: none;
}
.offers-header{
	width: 100%;
	min-height: 26px;
	padding: 2px 10px;
	background-color: rgba(236,64,122,0.10);
	border-bottom: 1px solid #f9c5d7;
	display: flex;
	align-items: center;
}
.offers-header span{
	font-size: 13px;
	font-weight: 700;
	color: #000;
}
.offers-header p{
	font-size: 10px;
	color: #EC407A;
	margin: 0 0 0 auto;
}
html[dir="rtl"] .offers-header p{
	margin: 0 auto 0 0;
}
.offers-listing{
	padding: 10px;
}
.offers-listing ul{
	border: 1px dashed #EC407A;
	border-radius: 3px;
	margin: 0 0 10px;
}
.offers-listing ul li{
	font-size: 11px;
	font-weight: 500;
	color: #000;
	padding: 4px 10px;
}
.offers-listing ul li:not(:last-child){
	border-bottom: 1px dashed #EC407A;
}
.offer-time{
	font-size: 11px;
	font-weight: 500;
	color: #333;
	display: block;
	text-align: center;
}
.offer-time strong{
	color: #E94141;
	display: inline-block;
}
.offers-footer{
	background-color: #f3f3f3;
	font-size: 11px;
	color: #666;
	width: 100%;
	min-height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;	
}
/*==========================
	Listing Panel code
===========================*/
.listing-panel{
	border: 1px solid #eee;
	border-radius: 3px;
}
.listing-panel-header{
	width: 100%;
	min-height: 50px;
	background-color: #f6f6f6;
	padding: 5px 20px;
	display: flex;
	align-items: center;
	z-index: 1;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 16%);
}
.listing-panel-body{
	background-color: #fafafa;
	padding: 10px;
	border-top: 1px solid #eee;
}
.listing-panel-header span{
	font-size: 16px;
	font-weight: 500;
	color: #000;
}
.listing-panel-header span strong{
	font-size: 14px;
	font-weight: 500;
	color: #666;
	display: inline-block;
}
/*==========================
	Phone Order code
===========================*/
.phone-order-wrapper{
	height: 100vh !important;
}
.step-screen-bar{
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	right: 0;
}
.step-screen-bar span{
	font-size: 12px;
	font-weight: 500;
	color: #707070;
}
.step-screen-bar .btn{
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	margin: 0 10px;
	text-transform: capitalize;
}
.step-screen{
	width: 100%;
	height: calc( 100vh - 40px );
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.step-screen img{
	max-width: 100%;
	max-height: 300px;
	margin: 0 auto 10px;
}
.step-screen span{
	font-weight: 500;
	color: #000;
	display: block;
}
.step-span{
	font-size: 28px;
	margin: 0 0 60px;
}
.step-sub-span{
	font-size: 22px;
	margin: 10px 0 15px;
}
.step-screen p{
	font-weight: 500;
	color: #666;
	margin: 0 0 30px;
}
.step-screen .btn{
	font-size: 13px;
    font-weight: 500;
    padding: 7px 22px;
    text-transform: capitalize;
    border-radius: 6px;
}
.phone-order-steps{
	display: flex;
	justify-content: space-between;
}
.phone-order-steps > .leftbar{
	flex: 1;
}
.phone-order-steps > .rightbar{
	width: 300px;
	margin: 0 0 0 30px;
}
.phone-order-steps > .rightbar .order-summary-wrap{
	width: 100%;
	float: left;
	background-color: #FFF;
	border: 1px solid #eee;
	border-radius: 3px;
	margin: 0 0 10px;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 16%);
}
.phone-order-steps > .rightbar .order-summary-wrap + .btn{
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 6px;
	text-transform: uppercase;
}
.cart-note {
    width: 100%;
    float: left;
    border: 1px solid rgb(243 53 53 / 40%);
    background-color: #FFF;
    display: flex;
    min-height: 55px;
    align-items: center;
    padding: 5px 10px;
    margin: 15px 0 0;
    border-radius: 5px;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 10%);
	position: relative;
}
.cart-note i {
    font-size: 24px;
    color: #F33535;
	opacity: .6;
    margin: 0 10px 0 0;
}
.cart-note span {
    font-size: 12px;
	font-weight: 500;
    color: #777;
    line-height: 16px;
}
.cart-note span strong {
    font-weight: 700;
	color: #666;
    display: inline-block;
}
.phone-order-steps ul.panel-group li.panel{
	border: none;
	border-radius: 0px;
	box-shadow: none;
	margin: 0 0 10px !important;
}
.phone-order-steps ul.panel-group li.panel.disabled{
	opacity: .5;
	cursor: not-allowed;
	user-select: none;
}
.phone-order-steps ul.panel-group li.panel.disabled .panel-heading{
	pointer-events: none;
}
.phone-order-steps ul.panel-group li.panel .panel-heading {
    width: 100%;
    min-height: 50px;
	padding: 5px 20px;
	background-color: #F6f6f6;
	border: 1px solid #eee;
	border-radius: 3px;
    display: flex;
    align-items: center;
	cursor: pointer;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 16%);
}
.phone-order-steps ul.panel-group li.panel .panel-body{
	border: 1px solid #eee;
	border-radius: 0 0 3px 3px;
}
.phone-order-steps ul.panel-group li.panel .panel-body.cart-body{
	background-color: #fafafa;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .leftbar{
	width: 35px;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .middlebar{
	flex: 1;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .rightbar{
	width: 24px;
	height: 24px;
	background-color: #FFF;
	border: 1px solid #ddd;
	border-radius: 50%;
	display: none;
	justify-content: center;
    align-items: center;
	box-shadow: inset 0px 2px 3px 0px rgb(0 0 0 / 10%);
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .rightbar i{
	font-size: 18px;
	color: #999;
	transform: rotate(180deg);
	transition: var(--default-transition);
}
.phone-order-steps ul.panel-group li.panel .panel-heading.collapsed > .rightbar i{
	transform: none;
	transition: var(--default-transition);
}
.phone-order-steps ul.panel-group li.panel.completed .panel-heading > .rightbar{
	display: flex;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .leftbar .step-counter{
	width: 24px;
	height: 24px;
	padding: 1px;
	border: 1px solid #5E7185;
	border-radius: 50%;
	display: flex;
	justify-content: center;
    align-items: center;
}
.phone-order-steps ul.panel-group li.panel.completed .panel-heading > .leftbar .step-counter{
	border-color: var(--primary-color);
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .leftbar .step-counter span{
	font-size: 12px;
	font-weight: 700;
	color: #5E7185;
	position: relative;
}
.phone-order-steps ul.panel-group li.panel.completed .panel-heading > .leftbar .step-counter span{
	display: none;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .leftbar .step-counter i{
	font-size: 22px;
	color: var(--primary-color);
	display: none;
}
.phone-order-steps ul.panel-group li.panel.completed .panel-heading > .leftbar .step-counter i{
	display: block;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .middlebar .step-name{
	font-size: 16px;
	font-weight: 500;
	color: #000;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .middlebar .step-sub-info{
	font-size: 14px;
	font-weight: 500;
	color: #666;
}
.phone-order-steps.completed ul.panel-group li.panel{
	margin: 0 0 6px !important;
}
.phone-order-steps.completed ul.panel-group li.panel .panel-heading{
	min-height: 36px;
	padding: 5px 10px;
	pointer-events: none;
	user-select: none;
}
.phone-order-steps.completed ul.panel-group li.panel .panel-heading > .leftbar{
	width: 30px;
}
.phone-order-steps.completed ul.panel-group li.panel .panel-heading > .leftbar .step-counter{
	width: 20px;
	height: 20px;
}
.phone-order-steps.completed ul.panel-group li.panel .panel-heading > .leftbar .step-counter i{
	font-size: 18px;
}
.phone-order-steps.completed ul.panel-group li.panel.completed .panel-heading > .rightbar{
	display: none;
}
.phone-order-steps.completed ul.panel-group li.panel .panel-heading > .middlebar .step-name{
	font-size: 14px;
}
.phone-order-steps ul.panel-group li.panel .panel-heading > .middlebar .step-sub-info{
	font-size: 13px;
}
.phone-order-steps ul.panel-group li.panel .panel-body{
	padding: 10px;
}
.table-customer tbody tr{
	cursor: pointer;
}
.table-customer tbody tr td i{
	font-size: 20px !important;
	color: var(--primary-color) !important;
	opacity: 0;
	transition: var(--default-transition);
}
.table-customer tbody tr.selected td{
	background-color: rgba(var(--primary-color-rgba), 10%);
	transition: var(--default-transition);
}
.table-customer tbody tr.selected td i{
	opacity: 1;
	transition: var(--default-transition);
}
.empty-panel-wrap{
	width: 100%;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.empty-panel-wrap span{
	font-size: 18px;
	font-weight: 500;
	color: #000;
	display: block;
	margin: 3px 0;
}
.empty-panel-wrap p{
	font-weight: 500;
	color: #666;
	margin: 0 0 15px;
}
.empty-panel-wrap .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 7px 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
}
.empty-panel-wrap .btn i{
	font-size: 18px;
	margin: 0 5px 0 0;
}
.product-info{
	width: 100%;
	display: flex;
	padding: 0 0 15px;
	margin: 0 0 10px;
	border-bottom: 1px solid #eee;
}
.product-info > .leftbar{
	width: 70px;
	height: 70px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.product-info > .leftbar img{
	max-width: 100%;
	max-height: 100%;
	align-self: center;
}
.product-info > .rightbar{
	width: calc( 100% - 70px );
	padding: 0 10px;
}
.product-info > .rightbar .product-title{
	font-size: 15px;
	font-weight: 500;
	color: #000;
	line-height: 24px;
	display: block;
	margin: 0 0 7px;
}
.product-info .special-price, .product-info .regular-price {
    font-size: 16px;
    font-weight: 700;
	color: #000;
	display: inline-block;
	position: relative;
}
.product-wrapper .special-price + .regular-price {
    font-size: 12px;
	font-weight: 500;
    color: #E23636;
	margin: 0 5px;
}
.special-price + .regular-price:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #E23636;
    transform: translateY(-50%);
}
.qty-group {
	width: 90px;
	height: 26px;
	float: left;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin: 0 0 10px;
}
.qty-group .qty-minus, .qty-group .qty-plus {
	font-size: 16px;
	color: #666;
	width: 22px;
	height: 24px;
	float: left;
	background-color: #fafafa;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	transition: var(--default-transition);
}
.qty-group .qty-minus{
	border-right: 1px solid #ddd;
}
.qty-group .qty-plus{
	border-left: 1px solid #ddd;
}
.qty-group [class*=qty]:hover{
	color: var(--primary-color);
	background-color: #FFF5E8;
	background-color: rgba(var(--primary-color-rgba), 10%);
	transition: var(--default-transition);
}
.qty-group input {
	width: calc( 100% - 44px );
	height: 24px;
	font-size: 13px;
	font-weight: 700;
	color: #333;
	text-align: center !important;
	outline: none;
	border: none;
	float: left;
	vertical-align: middle;
	user-select: none;
}
.product-meta ul.meta-ul>li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eee;
	padding: 0 0 5px;
	margin: 0 0 20px;
}
.product-meta ul.meta-ul>li:last-child{
	border: none;
	margin: 0;
}
.spec-grid table{
	width: 100%;
}
.spec-grid table tr td{
	font-size: 13px;
	color: #000;
	padding: 5px 0;
	vertical-align: middle;
}
.spec-grid table tr td:first-child{
	font-weight: 700 !important;
}
ul.custom-meta li{
	float: left;
	position: relative;
}
ul.custom-meta li:not(:last-child){
	margin: 0 8px 0 0;
}
html[dir="rtl"] ul.custom-meta li:not(:last-child){
	margin: 0 0 0 8px;
}
ul.custom-meta li:not(:last-child) a:after{
	content: ', ';
    position: absolute;
    right: -5px;
    bottom: 1px;
}
html[dir="rtl"] ul.custom-meta li:not(:last-child) a:after{
	content: '،';
	right: auto;
	left: -5px;
	bottom: 0;
}
ul.custom-meta li a{
	color: #000;
	transition: var(--default-transition);
}
ul.custom-meta li a:hover{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.meta-dropdown .dropdown-toggle{
	min-width: 200px;
	min-height: 30px;
	padding: 5px 10px;
	font-size: 13px;
	color: #000;
	background: url(../img/detail_caret.svg) no-repeat right 10px center/10px 10px, url(../img/select_bg.svg) repeat;
	border: 1px solid #ddd;
	border-radius: 3px;
	text-transform: capitalize;
	display: inline-block;
	cursor: pointer;
}
.spec-grid table tr:last-child td .meta-dropdown .dropdown-toggle{
	margin: 0 0 5px;
}
.meta-dropdown .dropdown-menu {
    min-width: 200px;
    top: calc( 100% + 10px );
    right: auto;
    left: 0;
    padding: 2px 0;
    margin: 0;
	z-index: 10;
    border: none;
	user-select: none;
	-webkit-box-shadow: 0px 1px 25px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 1px 25px 0px rgb(0 0 0 / 25%);
    box-shadow: 0px 1px 25px 0px rgb(0 0 0 / 25%);
}
.meta-dropdown .dropdown-menu:before, .address-box-wrap .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    transform: translateX(-50%);
}
.meta-dropdown .dropdown-menu li a{
	background-color: transparent !important;
	padding: 14px 10px;
	border-bottom: 1px solid #e5e5e5;
}
.meta-dropdown .dropdown-menu li:last-child a{
	border: none;
}
.meta-dropdown .dropdown-menu li.disabled a{
	background-color: #fafafa !important;
	user-select: none;
}
.meta-list{
	width: 100%;
	display: flex;
	align-items: center;
}
.meta-list-badge{
	min-width: 36px;
	min-height: 22px;
	font-size: 12px;
	font-weight: 700;
	color: #666;
	border: 1px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	margin: 0 7px 0 0;
	transition: var(--default-transition);
}
.meta-dropdown .dropdown-menu li:not(.disabled) .meta-list-badge, .meta-dropdown .dropdown-menu li:not(.disabled).active .meta-list-badge{
	border-color: var(--primary-color);
	color: var(--primary-color);
	transition: var(--default-transition);
}
.meta-list-name{
	font-size: 13px;
	color: #000;
	text-transform: capitalize;
}
.meta-dropdown .dropdown-menu li.disabled .meta-list-badge, .meta-dropdown .dropdown-menu li.disabled .meta-list-name{
	opacity: .6;
}
.meta-list i{
	font-size: 18px;
	color: #ccc;
	opacity: 0;
	margin: 0 0 0 auto;
	transition: var(--default-transition);
}
.meta-dropdown .dropdown-menu li:not(.disabled):hover i{
	opacity: 1;
	transition: var(--default-transition);
}
.meta-dropdown .dropdown-menu li.active i{
	color: var(--primary-color);
	opacity: 1;
	transition: var(--default-transition);
}
html[dir="rtl"] .meta-dropdown .dropdown-toggle {
    background: url(../img/detail_caret.svg) no-repeat left 10px center/10px 10px, url(../img/select_bg.svg) repeat;
}
html[dir="rtl"] .meta-dropdown .dropdown-menu {
    left: auto;
    right: 0;
}
html[dir="rtl"] .meta-list-badge{
	margin: 0 0 0 7px;
}
html[dir="rtl"] .meta-list i{
	margin: 0 auto 0 0;
}
.product-control table {
    width: 100%;
    margin: 0 0 5px;
}
.product-control table td {
	font-size: 13px;
	font-weight: 500;
	color: #000;
	vertical-align: top;
}
.product-control table td.first {
	min-width: 80px;
	vertical-align: top;
}
.product-control table td.first span{
	font-weight: 700 !important;
	display: block;
	margin: 0 0 1px;
}
.product-control table td.first p{
	font-size: 11px;
	line-height: 13px;
	color: #666;
	margin: 0;
}
.product-control table td .regular-price {
    font-size: 13px;
    font-weight: 500;
	color: #000;
	display: inline-block;
	position: relative;
}
.bundle-listing ul li {
	margin: 0 0 7px;
}
.bundle-listing ul li span {
    font-size: 14px;
	font-weight: 500;
    color: #333;
}
.bundle-listing ul li span i {
    font-style: normal;
	display: inline-block;
    margin: 0 8px;
}
.bundle-listing ul li span strong{
	font-weight: 500;
	color: #999;
	display: inline-block;
}
.tax-icon{
	font-size: 22px;
	color: #B4BBC2;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
.product-control table tr td .btn-offers {
    font-size: 18px;
    color: #EC407A;
    vertical-align: top;
	cursor: pointer;
	display: inline-block;
}
ul.cart-popover li{
	width: 100%;
	float: left;
	font-size: 12px;
	font-weight: 500;
	color: #333;
	margin: 0 0 3px;
}
ul.cart-popover li.first, ul.cart-popover li.last{
	width: calc( 100% + 20px );
	padding: 0 10px;
	position: relative;
	left: -10px;
}
ul.cart-popover li.first {
    border-bottom: 1px solid rgba(var(--primary-color-rgba), .3);
    padding-bottom: 4px;
    margin: 0 0 5px;
}
ul.cart-popover li.last {
	border-top: 1px solid rgba(var(--primary-color-rgba), .3);
    font-size: 13px;
    font-weight: 500;
    color: #000;
    padding: 5px 10px 3px;
	margin: 3px 0 0;
}
ul.cart-popover li.last .pull-right span{
	color: #000;
}
ul.cart-popover li.first + li.last {
    border: none;
    padding-top: 0;
}
ul.cart-popover li.li-th {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    background-color: rgba(var(--primary-color-rgba), .07);
    border-bottom: 1px solid rgba(var(--primary-color-rgba), .3);
    min-height: 26px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
    left: -10px;
    width: calc( 100% + 20px );
    margin: -5px 0 5px;
}
ul.cart-popover li:not(li.first) + li ul.ul-sub-cart-popover li.li-th{
	border-top: 1px solid rgba(var(--primary-color-rgba), .3);
	margin: 5px 0;
}
.stock-info, .hold-info{
	font-size: 10px;
	font-weight: 500;
	color: #FFF;
	padding: 2px 6px;
	line-height: 13px;
	background-color: #21a67a;
	border: 1px solid #21a67a;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 3px;
	user-select: none;
}
.hold-info{
	border-color: #607D8B;
	background-color: #607D8B;
}
.stock-info.sold-out{
	background-color: #E23636;
	border-color: #E23636;
}
.stock-qty{
	margin: 0 0 0 5px;
	padding: 0 0 0 9px;
	position: relative;
	display: inline-block;
}
.stock-info.sold-out .stock-qty{
	display: none;
}
.stock-qty::before{
	content: '';
	width: 1px;
	background-color: #FFF;
	position: absolute;
	left: 0;
	top: -3px;
	bottom: -3px;
}
html[dir="rtl"] .stock-info {
    padding: 3px 9px 1px;
}
html[dir="rtl"] .stock-qty{
	margin: 0 5px 0 0;
	padding: 0 9px 0 0;
}
html[dir="rtl"] .stock-qty::before{
	left: auto;
	right: 0;
	top: -3px;
	bottom: -1px;
}
.summary-block-heading{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	display: block;
	padding: 15px 0;
	text-align: center;
}
.summary-block{
	padding: 0 15px;
}
.custom-drawer .summary-block{
    background-color: #fafafa;
    border: 1px dashed #999;
    border-radius: 4px;
    position: sticky;
    bottom: -5px;
}
.custom-drawer .summary-block:after {
    content: '';
    background-color: #FFF;
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -12px;
    display: block;
    height: 11px;
}
.custom-drawer .summary-block-listing{
	padding: 5px 0 0;
}
.summary-block-header, .summary-block-body {
    display: flex;
    flex-wrap: wrap;
}
.summary-block-listing-1{
	width: calc( 100% + 30px );
	padding: 12px 15px 15px;
	background-color: #fafafa;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	position: relative;
	left: -15px;
	margin: 0 0 10px;
}
.summary-block-listing-1 + .summary-block-listing-1 {
	margin: -11px 0 10px;
}
.summary-sub-header {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
}
.summary-sub-header span {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    line-height: 22px;
    flex: 1;
}
.summary-block .summary-sub-header .btn {
    font-size: 10px;
    font-weight: 500;
    border-radius: 0px;
    padding: 2px 10px 0px;
    margin: 0;
}
.summary-block-body p {
    width: 100%;
    font-size: 12px;
    color: #666;
    line-height: 18px;
    margin: 0;
}
.summary-block-listing ul {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.summary-block-listing ul li {
    width: 100%;
    float: left;
    padding: 2px 0;
    margin: 0 0 5px;
}
.summary-block-listing ul li span {
    font-size: 13px;
	font-weight: 500;
    color: #333;
    line-height: 24px;
}
.summary-block-listing ul li .pull-right span {
    font-weight: 700 !important;
}
.summary-block-listing ul li.li-total {
    width: calc( 100% + 30px );
    position: relative;
    left: -15px;
    padding: 12px 15px 10px;
    margin: 5px 0 0;
    border-top: 1px solid #ececec;
}
.custom-drawer .summary-block-listing ul li.li-total {
    border-top: 1px dashed #999;
}
.summary-block-listing ul li.li-total span {
    font-size: 15px;
    font-weight: 700;
}
.summary-block-listing ul li.li-redeem {
    background-color: rgba(var(--primary-color-rgba), .05);
    width: calc( 100% + 30px );
    position: relative;
    left: -15px;
    padding: 5px 15px;
    margin: 0 0 12px;
    display: block;
}
.summary-block-listing ul li.li-redeem span {
    font-size: 12px;
    line-height: 20px;
}
.summary-block-listing ul li.li-redeem a {
    font-size: 12px;
	font-weight: 500;
    color: var(--primary-color);
}
.cart-close-box {
    font-size: 15px;
    color: #E94141;
    width: 20px;
    height: 20px;
    border: 1px solid #E94141;
    border-radius: 3px;
    display: inline-block;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    margin: 0 7px;
    transition: var(--default-transition);
}
.cart-close-box:hover {
    color: #FFF;
    background-color: #E94141;
    transition: var(--default-transition);
}
.loyalty-radio-wrap{
	width: 100%;
	float: left;
	display: flex;
	align-items: center;
	margin: 10px 0 15px;
}
.loyalty-radio-wrap > .leftbar span{
	font-size: 13px;
	font-weight: 500;
}
.loyalty-radio-wrap > .rightbar{
	display: flex;
	margin: 0 0 0 auto;
}
html[dir="rtl"] .loyalty-radio-wrap > .rightbar{
	margin: 0 auto 0 0 ;
}
.loyalty-radio-wrap > .rightbar .custom-radio{
	margin: 0 !important;
}
.loyalty-radio-wrap > .rightbar .custom-radio:not(:last-child){
	margin: 0 20px 0 0 !important;
}
html[dir="rtl"] .loyalty-radio-wrap > .rightbar .custom-radio:not(:last-child){
	margin: 0 0 0 20px !important;
}
.loyalty-field-wrap .form-group{
	width: 100%;
	margin-bottom: 0px;
}
.loyalty-field{
	display: flex;
	margin: 0 0 15px;
}
.loyalty-field .input-group-addon{
	font-size: 13px;
	padding: 6px 18px;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 -1px;
}
.loyalty-field .form-control{
	font-size: 13px;
	color: #333;
}
.loyalty-field .btn{
	font-size: 13px;
	font-weight: 400;
    padding: 6px 20px;
    margin: 0 0 0 10px;
	text-transform: capitalize !important;
}
html[dir="rtl"] .loyalty-field .btn{
    margin: 0 10px 0 0;
}
.loyalty-table .table tr td{
	font-size: 13px;
	font-weight: 500;
	color: #000;
	border-top: none;
	border-bottom: 1px solid #ddd;
}
.loyalty-table .table{
	margin: 0 0 15px;
}
.loyalty-sub-info{
	width: 100%;
	float: left;
	padding: 6px 10px 0;
	background-color: rgba(var(--primary-color-rgba), 5%);
	border: 1px dashed var(--primary-color);
	border-radius: 3px;
	margin: 0 0 15px;
}
.loyalty-sub-info ul li{
	width: 100%;
	float: left;
	margin: 0 0 4px;
}
.loyalty-sub-info ul li span{
	font-size: 11px;
	color: #666;
}
.loyalty-sub-info ul li p{
	font-size: 12px;
	font-weight: 700;
	color: #000;
	margin: 0;
}
.loyalty-sub-info ul li p span{
	font-weight: 700;
}
.custom-modal .modal-footer.loyalty-footer {
    min-height: 50px;
    background-color: #fafafa;
	border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 0 0 4px 4px;
}
.loyalty-footer span {
    font-size: 13px;
    color: #333;
}
.loyalty-footer span a {
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
}
ul.cart-ul li.cart-li {
	width: 100%;
	float: left;
	background-color: #FFF;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	position: relative;
	box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 8%);
}
ul.cart-ul li.cart-li + li{
	margin: 5px 0 0;
}
.custom-drawer .cart-ul li.cart-li:last-child {
    margin: 5px 0 20px;
}
.cart-item-wrap{
	display: flex;
}
.cart-item-del{
	font-size: 16px;
	color: #E23636;
	width: 24px;
	height: 24px;
	background-color: #FFE2E2;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 3px 0 5px;
	transition: var(--default-transition);
}
.cart-item-del:hover{
	color: #FFF;
	background-color: #E23636;
	transition: var(--default-transition);
}
.cart-item-wrap > .leftbar{
	width: 90px;
	height: 90px;
	border-right: 1px solid #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cart-item-wrap > .leftbar img{
	max-width: 100%;
	align-self: center;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar {
    width: calc( 100% - 100px );
    display: flex;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-item-info {
    padding: 0 10px;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 26px;
    display: block;
    margin: 5px 0 0;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-item-info ul li {
    font-size: 12px;
	font-weight: 500;
    color: #666;
    line-height: 18px;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-item-info ul li strong {
    min-width: 35px;
    display: inline-block;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-meta-info {
    padding: 8px 25px 5px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 0 0 auto;
}
.cart-listing-final ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-meta-info {
    padding: 8px 5px 5px 0;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-meta-info .cart-price-info {
    display: flex;
    align-items: center;
    margin: 0 0 6px;
}
.item-price-saved {
    margin: -8px 0 4px;
}
.item-price-saved * {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    display: inline-block;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-meta-info .qty-group{
	margin: 0;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .price{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .special-price, 
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .regular-price {
    font-size: 15px;
	color: #000;
	display: inline-block;
	position: relative;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .special-price + .regular-price {
    font-size: 13px;
	font-weight: 500;
    color: #E23636;
	margin: 0 5px;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .price *{
	font-weight: 700 !important;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info i:not(.btn-offers){
	font-size: 18px;
	color: #999;
	margin: 0 5px 0 0;
	cursor: pointer;
}
ul.cart-ul li.cart-li .cart-item-wrap > .rightbar .cart-price-info .btn-offers{
	font-size: 16px;
	color: #EC407A;
	margin: 0 10px 0 0;
	cursor: pointer;
}
.cart-listing-footer{
	width: 100%;
	padding: 10px 0 0;
	display: flex;
	justify-content: space-between;
}
.cart-listing-footer .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 6px 22px;
	text-transform: capitalize;
	display: flex;
	align-items: center;
	border-radius: 4px;
}
.cart-listing-footer .btn i{
	font-size: 18px;
	margin: 0 5px 0 0;
}
.cart-listing-footer .btn + .btn{
	margin: 0 0 0 10px;
}
.cart-listing-footer .btn-red-outline{
	width: 32px;
	height: 32px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.cart-listing-footer .btn-red-outline i{
	margin: 0 !important;
}
.cart-listing-footer .btn-red-outline:not(:hover):not(:focus){
	background-color: #FFF;
}
.checkout-options {
    width: 100%;
    float: left;
    display: flex;
	justify-content: space-between;
    align-items: center;
	gap: 10px;
    margin: 0 0 20px;
}
.checkout-options > .rightbar {
    display: flex;
    justify-content: flex-end;
	gap: 10px;
}
.checkout-options > .leftbar span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    display: block;
    margin: 0 0 2px;
}
.checkout-options > .leftbar p {
    font-size: 12px;
    color: #777;
    margin: 0;
	word-break: break-word;
}
.checkout-options > .leftbar ul li {
    width: 100%;
    float: left;
    font-size: 13px;
    color: #222;
}
.checkout-options > .leftbar ul li + li{
	margin: 5px 0 0;
}
.checkout-options > .leftbar ul li span {
    font-size: 13px;
	font-weight: 700;
    display: inline-block;
    margin: 0;
}
.checkout-options > .rightbar .form-group {
    margin: 0;
}
.checkout-options > .rightbar .form-control {
    min-width: 150px;
    max-width: 225px;
    font-size: 13px;
    color: #000;
    border-radius: 2px;
}
.checkout-options > .rightbar .btn {
    font-size: 12px;
    font-weight: 700;
    padding: 7px 19px;
    text-transform: uppercase;
    border-radius: 2px;
}
.checkout-options-wrap hr, .card-form hr {
    width: 100%;
    border-color: #e5e5e5;
	position: static;
    margin: 5px 0 15px;
}
.ship-control {
    margin: 0 0 5px;
}
.ship-control-heading {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    display: block;
    margin: 0 0 10px;
    text-transform: capitalize;
}
.ship-control-body {
    padding: 0 0 0 15px;
}
.ship-control .custom-control strong {
    font-weight: 700 !important;
	display: inline-block;
}
.checkout-form .bfh-selectbox-filter-container .form-control {
    height: 25px;
}
.checkout-form-buttons {
    display: flex;
    gap: 10px;
    margin: 5px 0 0;
}
.checkout-form-buttons .btn {
    min-width: 110px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    text-transform: uppercase;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form-box{
	display: none;
}
.card-form {
    width: 100%;
    float: left;
}
.card-form .custom-control {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    display: inline-block;
    margin: 0 15px 0 0;
}
.card-form textarea.form-control {
    height: auto;
    min-height: 80px;
}
.card-form .form-control.card-field{
	background: #FFF url(../img/card_bg/card_bg.png) no-repeat 5px center;
	padding: 6px 12px 6px 50px;
}
.card-form .form-control.card-visa{
	background: #FFF url(../img/card_bg/visa.png) no-repeat 5px center;
}
.card-form .form-control.card-mastercard{
	background: #FFF url(../img/card_bg/mastercard.png) no-repeat 5px center;
}
.card-form .form-control.card-discover{
	background: #FFF url(../img/card_bg/discover.png) no-repeat 5px center;
}
.card-form .form-control.card-american{
	background: #FFF url(../img/card_bg/american.png) no-repeat 5px center;
}
html[dir="rtl"] .card-form .form-control.card-field{
	padding: 6px 50px 6px 12px;
	background-position: right 5px center !important;
}
.custom-control span{
	color: #333;
}
.phone-order-final {
    width: 100%;
    min-height: 275px;
	background-color: #fafafa;
	border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	border-radius: 0 0 6px 6px;
}
.phone-order-final img{
	max-width: 140px;
	margin: 0 auto 10px;
}
.phone-order-final span{
	font-size: 18px;
	font-weight: 500;
	color: #000;
	display: block;
	margin: 0 0 2px;
}
.phone-order-final p{
	font-weight: 500;
	color: #666;
	line-height: 26px;
}
.phone-order-final .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 6px 20px;
	text-transform: capitalize;
	display: flex;
	align-items: center;
	border-radius: 6px;
}
.phone-order-final .btn i{
	font-size: 20px;
	margin: 0 5px 0 0;
}
.order-listing ul li{
	padding: 7px 10px;
	background-color: #FFF;
	border: 1px solid #e5e5e5;
	box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 8%);
	display: flex;
}
.order-listing ul li + li{
	margin: 5px 0 0;
}
.order-listing ul li > .leftbar{
	width: calc( 100% - 250px );
	padding: 0 5px;
}
.order-listing ul li > .rightbar{
	width: 250px;
	display: flex;
	justify-content: flex-end;
}
.order-listing ul li > .rightbar .btn{
	font-size: 13px;
	font-weight: 500;
	padding: 5px 14px;
	align-self: flex-start;
}
.order-listing ul li > .rightbar .btn-icon {
	font-size: 18px;
    width: 31px;
    height: 31px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.order-listing ul li > .rightbar .btn + .btn{
	margin: 0 0 0 10px;
}
.order-listing ul li > .leftbar span{
	font-size: 15px;
	font-weight: 700 !important;
	color: #000;
	line-height: 22px;
	display: block;
}
.order-listing ul li .order-meta {
    width: 100%;
    display: flex;
}
.order-listing ul li .order-meta .order-meta-table + .order-meta-table{
	border-left: 1px solid #ddd;
	padding: 0 0 0 30px;
	margin: 0 0 0 30px;
}
.order-listing ul li > .leftbar table tr td, .order-listing ul li > .leftbar table tr td span{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	padding: 1px 0;
}
.order-listing ul li > .leftbar table tr td.first{
	min-width: 40px;
	font-weight: 700 !important;
}
.ship-control-listing ul li {
	width: 100%;
	float: left;
	min-height: 27px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.ship-control-listing ul li:not(:last-child){
	margin: 0 0 5px;
}
.ship-control-listing ul li .custom-control{
	display: inline-block;
	margin: 0 !important;
}
.quote-control {
    display: inline-block;
}
.quote-control .btn {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 7px;
	background-color: transparent !important;
	border-color: transparent;
    text-transform: capitalize;
}
.quote-control .btn:hover{
	color: #101010;
	border-color: #101010;
}
.quote-control .btn:focus{
	color: #101010;
}
.quote-control a{
	color: #101010;
}
.quote-control img{
	width: 26px;
	margin: 0 -5px;
	display: none;
}
.ship-control-listing ul li.is-loading .quote-control img{
	display: inline-block;
}
/*==================================
	Order Stats & Filter code
===================================*/
.order-stats{
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	position: sticky;
    bottom: -10px;
	margin: 15px 0;
}
.order-stats:after {
    content: '';
    height: 11px;
    background-color: #FFF;
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -12px;
}
.order-stats ul {
    width: 100%;
	min-height: 60px;
    display: flex;
}
.order-stats ul li {
	display: flex;
	flex-direction: column;
	justify-content: center;
    flex: 1;
	padding: 0 20px;
}
.order-stats ul li:first-child{
	max-width: 120px;
	padding: 0 15px;
}
.order-stats ul li:not(:last-child){
	border-right: 1px solid #e5e5e5;
}
html[dir="rtl"] .order-stats ul li:not(:last-child){
	border-right: none;
	border-left: 1px solid #e5e5e5;
}
.order-stats ul li:nth-child(even){
	background-color: #FFF;
}
.order-stats ul li span{
	font-size: 12px;
	font-weight: 500;
	color: #000;
	margin: 0 0 -1px;
}
.order-stats ul li:first-child span{
	font-size: 14px;
	font-weight: 700;
	color: #333;
}
.order-stats ul li p{
	font-size: 16px;
	font-weight: 700;
	color: #000;
	margin: 0;
}
.order-filter {
    flex: 0 0 20%;
}
.order-filter:not(:last-child) {
    margin: 0 10px 0 0;
    flex: 0 0 calc( 20% - 10px );
}
.order-filter .dropdown-toggle {
	width: 100%;
	height: 36px;
	font-size: 13px;
	font-weight: 500;
	color: #222;
    padding: 0 30px;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	user-select: none;
	text-transform: capitalize;
	display: flex;
	align-items: center;
	cursor: pointer;
    position: relative;
}
.order-filter .filter-dropdown .dropdown-toggle{
    background: url(../img/filter_bg.svg) no-repeat left 0.75rem center/13px, url(../img/select_caret.svg) no-repeat right 0.75rem center/10px, url(../img/select_bg.svg) repeat;
}
.order-filter .date-dropdown .dropdown-toggle{
    background: url(../img/calendar_filter_bg.svg) no-repeat left 0.75rem center/13px, url(../img/select_caret.svg) no-repeat right 0.75rem center/10px, url(../img/select_bg.svg) repeat;
}
.order-filter .dropdown-menu{
	top: calc( 100% + 7px );
	left: 0;
	right: 0;
    background-color: #FFF;
	border: none;
    border-radius: 0px;
	padding: 0;
	margin: 0;
    box-shadow: 0px 3px 20px 0px rgb(0 0 0 / 20%);
}
.order-filter .dropdown-menu:before {
    content: "";
    position: absolute;
    left: 10px;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
}
.order-filter .filter-dropdown .dropdown-menu .filter-dropdown-wrap{
    max-height: 360px;
    overflow-y: auto;
}
.order-filter .filter-dropdown .dropdown-menu:before {
    left: 50% !important;
	right: auto !important;
    transform: translateX(-50%);
}
.order-filter .filter-dropdown .dropdown-menu ul{
	width: 100%;
	float: left;
	padding: 0 0 10px;
	border-bottom: 1px solid #e5e5e5;
}
.order-filter .filter-dropdown .dropdown-menu ul:last-child{
	border: none;
}
.order-filter .filter-dropdown .dropdown-menu ul li.li-heading{
	font-size: 14px;
	font-weight: 700;
	color: #000;
	padding: 10px 10px 5px;
	display: block;
}
.order-filter .filter-dropdown .dropdown-menu ul li a{
	padding: 5px 10px;
	display: flex;
	align-items: center;
	transition: var(--default-transition);
}
.order-filter .filter-dropdown .dropdown-menu ul li a:hover{
	background-color: #f4f4f4;
	transition: var(--default-transition);
}
.order-filter .filter-dropdown .dropdown-menu ul li span{
	font-size: 12px;
	font-weight: 500;
	color: #333;
}
.order-filter .filter-dropdown .dropdown-menu ul li i{
	font-size: 16px;
	color: #ccc;
	margin: 0 0 0 auto;
	transition: var(--default-transition);
}
.order-filter .filter-dropdown .dropdown-menu ul li.active i{
	color: var(--primary-color);
	transition: var(--default-transition);
}
.phone-order-red .step-screen img {
    margin: 0 auto 30px;
}
.phone-order-red .phone-order-steps ul.panel-group li.panel.active .panel-heading > .leftbar .step-counter,
.phone-order-red .phone-order-steps ul.panel-group li.panel.completed .panel-heading > .leftbar .step-counter{
	border-color: #E23636;
}
.phone-order-red .phone-order-steps ul.panel-group li.panel .panel-heading > .leftbar .step-counter i,
.phone-order-red .phone-order-steps ul.panel-group li.panel.active .panel-heading > .leftbar .step-counter span,
.phone-order-red .summary-block-heading{
	color: #E23636;
}

/*================================
	Google Map
=================================*/
.map-custom iframe {
	border-radius: 3px;
}
.map-custom {
	margin: 0 0 10px 0;
}
.map-info ul li {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
}
.map-info ul li:last-child {
	border-bottom: 0px solid #eee;
}
.map-info ul li .rightbar {
	text-align: right;
}
html[dir="rtl"] .map-info ul li .rightbar {
	text-align: left;
}
.map-info ul li span {
	display: inline-block;
	width: 100%;
}

/*==================================
	Dotted List
===================================*/
.dotted-list {
	border: 1px dashed #707070;
	padding: 5px;
	border-radius: 3px;
}
.dotted-list li {
	font-size: 13px;
	text-align: center;
	margin-bottom: 5px;
	border-radius: 3px;
	background-color: #F3F3F3;
}
.dotted-list li:last-child {
	margin-bottom: 0;
}
.dotted-list li:nth-child(even) {
	background-color: #FAFAFA;
}
.dotted-list li a {
	display: inline-block;
	width: 100%;
	padding: 7px 5px;
	color: #000;
}
.dotted-list li a:hover {
	background-color: #f0f0f0;
}

/*==================================
	Custom Confirm
===================================*/
.custom-confirm {
	position: fixed;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	background-color: rgba(0,0,0,0.5);
}
.modal-backdrop + .custom-confirm {
	background-color: rgba(0,0,0,0.3);
}
.custom-confirm .confirm-box {
	background-color: #fff;
	padding: 30px;
	border-radius: 7px;
	box-shadow: 0 3px 20px 0 rgba(0,0,0,0.2);
	min-width: 350px;
}
.custom-confirm .confirm-box .confirm-message span {
	font-size: 15px;
    color: #000;
    margin-bottom: 30px;
    display: inline-block;
	text-align: center;
    width: 100%;
}
.custom-confirm .confirm-box .confirm-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
    width: 100%;
}
.custom-confirm .confirm-box .confirm-buttons button {
	padding: 8px 25px;
	border: 0;
	border-radius: 3px;
	font-weight: 500;
}
.custom-confirm .confirm-box .confirm-buttons .btn-ok button {
	background: rgb(255,129,96);
    background: linear-gradient(180deg, rgba(255,129,96,1) 0%, rgba(254,88,43,1) 100%);
	color: #fff;
}
.custom-confirm .confirm-box .confirm-buttons .btn-ok button:hover {
	background: rgb(255,134,101);
    background: linear-gradient(180deg, rgba(255,134,101,1) 0%, rgba(255,54,0,1) 100%);
}
.custom-confirm .confirm-box .confirm-buttons .btn-cancel button {
	background-color: #eee;
}
.custom-confirm .confirm-box .confirm-buttons .btn-cancel button:hover {
	background-color: #e5e5e5;
}
.custom-confirm.side-text .confirm-message span {
	text-align: left;
}
.custom-confirm.side-text .confirm-buttons {
    justify-content: end;
}
@keyframes confirmAlertZoom {
	0% {
	  transform: scale(0.9);
	}
	80%{
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}
  
.custom-confirm .confirm-box {  
	animation: .2s ease-in-out 0s 1 confirmAlertZoom;
}
  
/*================================
	Box Block
=================================*/
.boxes-block {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
}
.boxes-block .single-box-block {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #E5E5E5;
	border-radius: 3px;
	flex-direction: column;
	position: relative;
}
.boxes-block .single-box-block:before {
	content: '';
	position: absolute;
	height: 3px;
	width: 40px;
	left: 10px;
	background-color: var(--primary-color);
	border-radius: 0 0 10px 10px;
}
.single-box-block .block-info {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	gap: 3px;
}
.single-box-block .block-info .box-title {
	font-size: 14px;
	font-weight: 600;
	color: #000;
}
.single-box-block .block-info ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
	gap: 5px;
	color: #333;
	font-size: 12px;
}
.single-box-block .block-info ul li {
	border-right: 1px solid #ccc;
	padding-right: 5px;
}
.single-box-block .block-info ul li:last-child {
	border-right: none;
	padding-right: 0;
}
.single-box-block .block-status {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #FFF6EB;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 12px;
	padding: 5px 10px;
}
.single-box-block .block-status .countdown {
	font-weight: 500;
}
.single-box-block .box-block-buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px;
}
.single-box-block .box-block-buttons .box-left {
	display: flex;
	flex-direction: row;
	gap: 5px;
}
.single-box-block .box-block-buttons a.btn-icon {
	display: flex;
	flex-wrap: wrap;
	height: 30px;
	width: 30px;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
.single-box-block .box-block-buttons a.btn-icon.btn-secondary-outline:hover {
	background-color: var(--secondary-color);
	color: #fff;
}
.single-box-block.block-green::before {
	background-color: var(--green-color);
}
.single-box-block.block-green .block-status {
	background-color: #E5FFF6;
	color: var(--green-color);
}
.single-box-block.block-gray::before {
	background-color: var(--secondary-color);
}
.single-box-block.block-gray .block-status {
	background-color: #F2F4F6;
	color: var(--secondary-color);
}