/* vim: set ts=2 sw=2 sts=2 et: */

/**
 * Slidebar styles
 *
 * Copyright (c) 2011-present Qualiteam software Ltd. All rights reserved.
 * See https://www.x-cart.com/license-agreement.html for license details.
 */

@media (max-width: 991px) {
	#themetweaker-panel-loader-point {
		display: none;
	}
}

.themetweaker-panel-wrapper,
.themetweaker-panel {
  color: #333;
}

.themetweaker-panel {
	position: fixed;
	width: 100%;
	bottom: 0;
	top: auto !important;
	left: 0;
	z-index: 1000000;
	padding: 0;
	background: #fff;
	box-shadow: 0 -1px 0 0 #ececec;
}
#themetweaker-panel button,
#themetweaker-panel button span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
}

#themetweaker-panel button:active {
  outline: 0;
  background-image: none;
  box-shadow: -1px 0 0px 0px #ececec, 1px 0 0px 0px #ececec;
  background: #f8fdff;
}

#themetweaker-panel .regular-button.disabled {
  background: none;
  -moz-opacity: .3;
  -khtml-opacity: .3;
  -webkit-opacity: .3;
  opacity: .3;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  filter: alpha(opacity=30);
}

.themetweaker-panel-shortcut {
	cursor: pointer;
	position: fixed;
	bottom: 10px;
	height: 30px;
	top: auto !important;
	left: 0;
	z-index: 99999;
	padding: 0;
}

.themetweaker-panel--initial {
	pointer-events: none;
}

.themetweaker-panel--initial xlite-themetweaker-modal {
	display: none;
}

.themetweaker-panel--initial.state-on .themetweaker-panel-shortcut {
	display: none;
}

.themetweaker-panel--initial.state-off .themetweaker-panel {
	display: none;
}

.themetweaker-panel--initial .themetweaker-panel--inner {
	-webkit-filter: blur(2px) grayscale(1);
	        filter: blur(2px) grayscale(1);
	opacity: 0.1;
}

body.live-css-reloading .themetweaker-panel {
	-webkit-transition: none !important;
	transition: none !important;
}

.themetweaker-panel--tabs, .themetweaker-panel--actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	height: 100%;
	line-height: 20px;
}

.themetweaker-panel--header {
	font-size: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.themetweaker-panel--actions-wrapper, .themetweaker-panel--tabs-wrapper {
	min-height: 30px;
	z-index: 999;
	box-shadow: 0 1px 0 0 #ececec, 0 5px 10px 0 rgba(0, 0, 0, 0.03);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.themetweaker-panel--actions-wrapper {
	width: 100%;
}

.themetweaker-panel--actions {
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.themetweaker-action {
	padding: 0 20px;
	vertical-align: middle;
	font-size: 12px;
}

button.themetweaker-action,
a.themetweaker-action {
	cursor: pointer;
	border-radius: 0;
	border: none;
	background: #000;
}

button.themetweaker-action span,
button.themetweaker-action:not(.disabled):hover span,
a.themetweaker-action span,
a.themetweaker-action:not(.disabled):hover span {
	color: #fff;
}

.themetweaker-action_switcher {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.themetweaker-action_switcher .onoffswitch {
	display: block;
	height: auto;
	padding: 0;
	-webkit-transform: scale(0.8);
	        transform: scale(0.8);
}

.themetweaker-action_switcher .table-value {
	margin-left: 10px;
}

.themetweaker-action_switcher .table-label {
	padding: 0;
}

.themetweaker-action_switcher label {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.themetweaker-action_save:not(.disabled):hover,
.themetweaker-action_save:not(.disabled):focus {
	background: #0ba2e8;
}

#themetweaker-panel .themetweaker-action_save.disabled {
  background: #000;
}

.themetweaker-tab-wrapper {
	height: 100%;
	vertical-align: middle;
}

.themetweaker-tab {
	height: 100%;
	border-radius: 0;
	border: none;
	background: #fff;
	font-size: 12px;
	cursor: pointer;
	padding: 0 20px;
	line-height: 30px;
	vertical-align: middle;
}

.themetweaker-tab.disabled, .themetweaker-action.disabled {
	pointer-events: none;
}

.themetweaker-tab:before, .themetweaker-action:before {
	content: initial;
	margin: 0;
}

.themetweaker-tab:hover,
.themetweaker-action:hover,
.themetweaker-tab:focus,
.themetweaker-action:focus {
	border: none;
}

.themetweaker-tab + .themetweaker-tab {
	box-shadow: -1px 0 0px 0px #ececec;
}

.themetweaker-tab:last-child {
	box-shadow: -1px 0 0px 0px #ececec, 1px 0 0px 0px #ececec;
}

.themetweaker-tab svg {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.themetweaker-tab svg + span {
	margin-left: 25px;
}

.themetweaker-tab span {
	color: #3b4859;
}

.themetweaker-tab svg g,
.themetweaker-tab_inline_editor svg path {
	stroke: #3b4859;
}

.themetweaker-tab svg path {
	fill: #3b4859;
}

.themetweaker-tab:hover span,
.themetweaker-tab:focus span {
	color: #0ba2e8;
}

.themetweaker-tab:hover svg g,
.themetweaker-tab:focus svg g,
.themetweaker-tab_inline_editor:hover svg path,
.themetweaker-tab_inline_editor:focus svg path {
	stroke: #0ba2e8;
}

.themetweaker-tab:hover svg path,
.themetweaker-tab:focus svg path {
	fill: #0ba2e8;
}

.themetweaker-tab.active {
	border: none;
	background-color: #4f5b6a;
	pointer-events: none;
	cursor: default;
}

.themetweaker-tab.active span,
.themetweaker-tab.active:hover span {
	color: #fff;
}

.themetweaker-tab.active svg g,
.themetweaker-tab.active:hover svg g,
.themetweaker-tab_inline_editor.active svg path,
.themetweaker-tab_inline_editor.active:hover svg path {
	stroke: #fff;
}

.themetweaker-tab.active svg path,
.themetweaker-tab.active:hover svg path {
	fill: #fff;
}

.themetweaker-tab_hide {
	width: 36px;
	height: 30px;
	box-sizing: content-box;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: center;
	    align-self: center;
}

.themetweaker-close-icon:hover:before,
.themetweaker-close-icon:hover:after,
.themetweaker-close-icon:focus:after,
.themetweaker-close-icon:focus:before {
	background-color: #0ba2e8;
}

.themetweaker-close-icon:before,
.themetweaker-close-icon:after {
  position: absolute;
  top: 50%;
  left: 49%;
  content: '';
  height: 16px;
  width: 1px;
  background-color: #3b4859;
  display: inline;
}

.themetweaker-close-icon:before {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	        transform: translate(-50%, -50%) rotate(45deg);
}

.themetweaker-close-icon:after {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	        transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * the following styles are auto-applied to elements with
 * v-transition="expand" when their visiblity is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

/* always present */
.expand-transition {
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
	height: 0 !important;
	opacity: 0;
}

/*
 * Reloading animation styles
 */

.reloading {
	position: relative;
}

.reloading:before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	content: "";
	display:block;
	z-index: 1000;

	background: rgba(255,255,255, 0.9);

	-webkit-animation: appear 0.3s ease-in-out;
	animation: appear 0.3s ease-in-out;
}

.reloading.reloading-animated:after {
	position: absolute;
	width: 10px;
	height: 10px;
	content: "";
	display:block;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	opacity: 0.99;
	z-index: 1002;
	bottom: 0;
	border-radius: 100%;
	box-shadow: 10px 10px #808080, -10px 10px #25c5df, -10px -10px #808080, 10px -10px #25c5df;
	-webkit-animation: spin ease infinite 2s;
	animation: spin ease infinite 2s;
}

.themetweaker-panel-wrapper .reloading-animated:after {
	-webkit-transform: scale(0.8);
	        transform: scale(0.8);
}

@-webkit-keyframes spin {
	0%,
	100% {
		box-shadow: 10px 10px #808080, -10px 10px #25c5df, -10px -10px #808080, 10px -10px #25c5df;
	}
	25% {
		box-shadow: -10px 10px #25c5df, -10px -10px #808080, 10px -10px #25c5df, 10px 10px #808080;
	}
	50% {
		box-shadow: -10px -10px #808080, 10px -10px #25c5df, 10px 10px #808080, -10px 10px #25c5df;
	}
	75% {
		box-shadow: 10px -10px #25c5df, 10px 10px #808080, -10px 10px #25c5df, -10px -10px #808080;
	}
}


@keyframes spin {
	0%,
	100% {
		box-shadow: 10px 10px #808080, -10px 10px #25c5df, -10px -10px #808080, 10px -10px #25c5df;
	}
	25% {
		box-shadow: -10px 10px #25c5df, -10px -10px #808080, 10px -10px #25c5df, 10px 10px #808080;
	}
	50% {
		box-shadow: -10px -10px #808080, 10px -10px #25c5df, 10px 10px #808080, -10px 10px #25c5df;
	}
	75% {
		box-shadow: 10px -10px #25c5df, 10px 10px #808080, -10px 10px #25c5df, -10px -10px #808080;
	}
}

@-webkit-keyframes appear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes appear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}