#main-content {
	position: relative;
}

.small-box h3 > span {
	display: inline-block;
	margin-left: 0.75rem;
	font-size: 50%;
	font-weight: 400;
	opacity: 0.8;
}

.connectedSortable .card-header,
.connectedSortable .nav-tabs-custom {
	cursor: move;
}

.content-buttons {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.content-buttons .btn {
	margin-right: 7px;
}

.content-footer {
	padding: 10px .5rem 25px;
}

.align-left {
	margin-right: auto;
}

.fixed-bottom-bar {
	position: fixed;
	background-color: #fff;
	bottom: 0;
	right: 0;
	padding: 10px 7px;
	box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
	width: 100%;
	z-index: 1198;
	transition: all 0.2s ease;
}

.fixed-bottom-bar.collapse {
	display: block;
	box-shadow: none;
	bottom: -58px;
}

.toolbar-group {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.toolbar-group > .toolbar-item,
.toolbar-group > .btn,
.toolbar-group > .form-group {
		margin: 0 7px 0 0;
}

.table-striped .progress {
	background: rgba(0, 0, 0, 0.1);
}

.card-tools > form {
	display: inline;
}

.swal2-container {
	z-index: 1201 !important;
}

.direct-chat-messages {
	height: auto;
	max-height: 22rem;
}

.direct-chat-primary .right > .direct-chat-text > a {
	color: #fff;
	text-decoration: underline;
}

.modal-backdrop {
	z-index: 1199;
}

.modal {
	z-index: 1200;
}

.modal-dialog {
	position: relative;
}

.modal-header {
	padding: 0.5rem 1rem;
}

.modal-title {
	font-size: 1.5rem;
	font-weight: 400;
}

.modal-content {
	border-radius: 0.5rem;
}

.modal-header .close {
	padding: 0;
	margin: -2px -0.5rem -1rem auto;
	background-color: #ccc;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
}

.modal-footer.buttons > form {
	margin-right: auto;
}

td.actions {
	vertical-align: middle;
	padding: 0 0.75rem;
}

td.actions > .btn {
	margin: -.75rem 0;
}

.btn {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.9rem;
}

.btn-xs {
	font-size: .75rem;
}

.btn-sm {
	font-size: .875rem;
}

.btn-lg {
	font-size: 1.25rem;
	font-weight: 400;
}

.bg-whited {
	background-color: rgba(255,255,255,0.8);
}

.btn.bg-whited {
	color: #4b4b4b;
}

.btn.bg-whited:hover {
	background-color: rgba(0,0,0,0.08);
	color: #212529;
}

.btn-default.active {
	background-color: #ddd;
	border-color: #ccc;
}

.text-default {
	color: #212529;
}

.text-decoration-line-through {
	text-decoration: line-through !important;
}

.error .form-control {
	border-color: #dc3545;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.form-control-sm.custom-select {
	height: calc(1.8125rem + 2px) !important;
	padding: .25rem 1.75rem 0.25rem .5rem !important;
	font-size: .875rem !important;
	width: auto !important;
}

.custom-control-input:disabled ~ label,
.custom-control-input[disabled] ~ label {
	color: #6c757d;
}

.table .form-group {
	margin-bottom: 0;
}

.bg-danger .table th,
.bg-danger .table td {
	border-color: rgba(0,0,0,0.15);
}

.bg-danger a {
	color: rgba(255,255,255,0.8);
}

.bg-danger a:hover {
	color: #fff;
}

.form-group.required label:after {
	visibility: visible;
	content: "\f621";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	display: inline-block;
	color: #eb6463;
	font-size: 10px;
	margin: 5px 0 0 5px;
}

.form-group.error .invalid-feedback {
	display: block;
}

.form-group-tip {
	margin-top: -22px;
}

.colorpicker-input-addon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(2.25rem + 2px);
}

.colorpicker-input-addon::before {
	content: none;
}

.colorpicker-input-addon > i {
	border-radius: 0.15rem;
}

.wysihtml5-toolbar {
	border-color: #ced4da !important;
	background-color: rgba(0,0,0,0.01);
}

.wysihtml5-sandbox {
	border-radius: 0 0 4px 4px !important;
	border: 1px solid #ced4da !important;
}

.custom-control-label::before {
	box-shadow: none;
}

.badge-default {
	background-color: #adb5bd;
	color: #fff;
}

.badge-xs {
	padding: .2em .4em .3em .4em;
	font-size: 65%;
	line-height: normal;
}

.rounded-xs {
	border-radius: 0.1rem !important;
}

table th > a {
	color: #212529;
}

table th > a::after {
	display: inline-block;
	margin-left: 5px;
	color: #ccc;
	font-family: "Font Awesome 5 Free";
	font-size: 12px;
	content: "\f0dc";
}

table th.sorting_asc > a::after {
	color: #212529;
	content: "\f0d8";
}

table th.sorting_desc > a::after {
	color: #212529;
	content: "\f0d7";
}

.sortable-handle {
	cursor: grab;
}

.sortable-placeholder {
	background-color: #fcfcfc;
}

table .sortable-placeholder {
	display: table-row;
}

table > tbody > .ui-sortable-helper {
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

/* Table items */

.table-items .error.invalid-feedback {
	display: none;
}

/* Products */

.products-attributes,
.products-options {
	position: relative;
}

.products-attributes .error.invalid-feedback,
.products-options .error.invalid-feedback {
	display: none;
}

.product-attribute,
.product-option {
	background-color: #fff;
}

.product-attribute.contain-error,
.product-option.contain-error {
	background-color: #dc3545;;
}

.product-attribute.active,
.product-option.active {
	background-color: rgba(0,0,0,0.01);
}

.product-attribute > td.actions,
.product-option > td.actions {
	position: relative;
}

.product-attribute.active > td.actions::after,
.product-option.active > td.actions::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -24px;
	margin-top: -15px;
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid #007bff;
}

.products-attributes-values,
.products-options-values {
	position: absolute;
	background-color: #fdfdfd;
	margin: 35px 0 0 -1px;
	top: 0;
	left: 100%;
	width: 100%;
	z-index: 1199;
}

.product-attribute-value > td,
.product-option-value > td {
	padding: .5rem 0.75rem;
}

.product-option-value > td > label {
	margin: 0;
}

.products-variants .custom-switch label {
	font-weight: 400;
	font-size: 14px;
}

@media (max-width: 998px) {
	.product-attribute,
	.product-option {
		position: relative;
	}
	.product-attribute.active > td.actions::after,
	.product-option.active > td.actions::after {
		margin: 1px 0 0 0;
		bottom: 0;
		right: -18px;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid #007bff;
	}
	.products-attributes-values,
	.products-options-values {
		left: 0;
		top: 100%;
		margin: 0;
	}
}

/* Medias */

.media-item > .card {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding-top: 100%;
	cursor: pointer;
	transition: all 0.4s ease;
}

.sortable .media-item > .card {
	cursor: grab;
}

.media-item.ui-sortable-helper {
	z-index: 1200 !important;
}

.media-item-checkbox {
	display: none;
}

.media-item > .card::before {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -2.5rem 0 0 -2.5rem;
	width: 5rem;
	line-height: 1.2;
	height: 5rem;
	font-family: "Font Awesome 5 Free";
	font-size: 4rem;
	content: "\f87c";
	color: #eee;
	font-weight: 900;
	text-align: center;
}

.media-item > .card img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	z-index: 1197;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.media-item > .card > .card-body {
	padding: 0;
}

.media-item > .card > .media-actions {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	z-index: 1198;
}

.media-item > .card > .media-actions::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	transition: all 0.2s ease;
	z-index: 1197;
	pointer-events: none;
}

.media-item:hover > .card > .media-actions {
	opacity: 1;
}

.media-item:hover > .card > .media-actions::before {
	opacity: 1;
}

.media-item > .card > .media-actions > .btn {
	border-color: #fff;
	color: #fff;
	margin: 0 3px;
	margin-top: 100%;
	transition: margin 0.3s ease;
	z-index: 1199;
}

.media-item > .card > .media-actions > .btn.btn-lg { margin: 0 7px; }

.media-item:hover > .card > .media-actions > .btn {
	margin-top: 0;
}

.media-item.selected > .card {
	background-color: #007bff;
}

.media-item:not([data-media-selection]) > .card > .card-body::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f00c";
	text-align: center;
	display: block;
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 1.5rem;
	background-color: #fff;
	z-index: 1200;
	opacity: 0;
	transition: all 0.2s ease;
}

.media-item:hover > .card > .card-body::after {
	opacity: 0.5;
	color: #000;
}

.media-item.selected > .card > .card-body::after {
	opacity: 1;
	color: #007bff;
}

.media-item.selected > .card img {
	transform: scale(0.85);
}

.media-item.selected > .card > .media-actions::before {
	transform: scale(0.85);
}

.medias-widget .media-item-sortable {
	display: none;
	position: absolute;
	bottom: 0.8rem;
	color: #fff;
	font-size: 12px;
	text-align: center;
	left: 0;
	right: 0;
	line-height: 1;
	z-index: 1200;
}

.medias-widget .sortable .media-item-sortable {
	display: block;
}

.medias-widget .sortable-placeholder {
	display: flex;
	position: relative;
	margin-right: 7.5px;
	margin-left: 7.5px;
	box-shadow: none;
	border-radius: .25rem;
}

.medias-widget .sortable-placeholder:before {
	content: "";
	position: absolute;
	border: 2px dashed #c2cdda;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: .25rem;
}

.medias-browse {
	position: relative;
	padding: 15px 7px;
	height: 24rem;
	overflow-y: scroll;
	margin: 0 -1rem -1rem -1rem;
	border-top: 1px solid #e9ecef;
}

.media-picker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px !important;
	background: #f9f9fc;
	border: 1px dashed #c2cdda;
	border-radius: 5px;
	cursor: pointer;
	color: #c2cdda;
}

.media-picker:focus {
	outline: 0;
}

.media-picker::before {
	display: block;
	content: "\f382";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1rem;
	text-indent: 0;
	z-index: 99;
}

.media-picker:hover {
	border-color: #8abcf3;
	color: #007bff;
	background: transparent;
}

.media-picker > img {
	position: absolute;
	border-radius: 5px;
	left: -1px;
	top: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	z-index: 100;
}

.media-picker:hover > img {
	opacity: 0.3;
	z-index: 98;
}

.media-picker > .media-picker-clear {
	opacity: 0;
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 2rem;
	height: 2rem;
	background-color: #dc3545;
	color: #fff;
	border-radius: 1rem;
	font-weight: 800;
	line-height: 1.5;
	font-size: 1.3rem;
	text-align: center;
	z-index: 99;
}

.media-picker:hover > .media-picker-clear {
	opacity: 1;
}

/* Dropdown submenu */

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: 0px;
	margin-left: 0px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

.dropdown-submenu > .dropdown-menu.dropdown-menu-right {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: -1px;
}

/* Uploader */

.uploader-widget {
	position: relative;
	display: block;
	background: #f9f9fc;
	border: 2px dashed #c2cdda;
	padding: 0.3rem 2rem 1rem;
	text-align: center;
	color: #5b5b7b;
	border-radius: 10px;
	font-weight: 500;
	overflow: hidden;
}

.uploader-widget::before {
	display: block;
	color: #007bff;
	content: "\f382";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 32px;
	text-indent: 0;
}

.uploader-widget.hover {
	border-color: #007bff;
	border-style: solid;
	color: #007bff;
	background: #fafafe;
}

.uploader-widget > input {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.uploader-widget > span {
	display: block;
}

.uploader-widget.uploading > span {
	display: block;
	text-indent: -9999em;
}

.uploader-widget .uploader-progress {
	display: none;
}

.uploader-widget.uploading .uploader-progress {
	display: block;
}

.uploader-widget .uploader-progress {
	position: absolute;
	width: 40%;
	background: #f9f9fc;
	border-radius: 10px;
	overflow: hidden;
	margin-left: calc(30% - 2rem);
	bottom: 1.5rem;
	border: 2px solid #007bff;
}

.uploader-widget .uploader-progress-bar {
	height: 1rem;
	background-color: #007bff;
	width: 0;
	transition: all 0.3s ease;
}

@media (min-width: 768px) {
	.uploader-widget { font-size: 20px; }
	.uploader-widget::before { font-size: 48px; }
}

/* Treeview */

.treeview {
	position: relative;
	padding: 0 1rem 0 0;
	overflow: hidden;
}

.treeview ul {
	position: static;
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}

.treeview li {
	position: static;
	display: block;
	margin: 0;
	padding: 0 0 0 1.75rem;
	overflow: hidden;
}

.treeview .treeview-row {
	padding: 0.75rem 0;
	margin: 0;
	display: flex;
}

.treeview li:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	height: 100%;
	z-index: 0;
}

.treeview li.odd:before {
	background-color: #f2f2f2;
}

.treeview li.even:before {
	background-color: #fff;
}

.treeview .treeview-col {
	padding: 0 0.5rem;
	z-index: 1;
}

.treeview .treeview-col > form {
	display: inline;
}

.treeview .treeview-col:first-child {
	flex-grow: 1;
}

.treeview .treeview-row:before {
	position: absolute;
	content: "\f07c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 16px;
	margin-left: -1rem;
	color: #adb5bd;
}

.treeview .treeview-row:after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	background-color: #dee2e6;
	height: 1px;
	margin-top: -0.75rem;
}

/* Loading */

.loading {
	min-height: 60px;
}

.loading:after {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	margin: -30px 0 0 -30px;
}

.loading:before {
	position: fixed;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(255,255,255,0.5);
}

.loading.spinner:after {
	content: " ";
	border: 16px solid rgba(255,255,255,0.5);
	border-top: 16px solid #007bff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: loading 2s linear infinite;
}

.loading.spinner-modal:before {
	display: none;
}

.loading.spinner-modal.bg:before {
	display: block;
}

.loading.spinner-modal:after {
	content: " ";
	border: 26px solid rgba(255,255,255,0.5);
	border-top: 26px solid #007bff;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: loading 2s linear infinite;
	margin: -60px 0 0 -60px;
}

.loading.spinner-clip {
	position: relative;
	min-height: 140px;
}

.loading.spinner-clip:before {
	position: absolute;
	bottom: 0;
	right: 0;
}

.loading.spinner-clip:after {
	position: absolute;
	content: " ";
	border: 26px solid rgba(255,255,255,0.5);
	border-top: 26px solid #007bff;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: loading 2s linear infinite;
	margin: -60px 0 0 -60px;
}

@keyframes loading {
	0% { 
		transform: rotate(0deg);
	}
	100% { 
		transform: rotate(360deg);
	}
}