/**
 * @package   ModuloBox
 * @author    Themeone <themeone.master@gmail.com>
 * @copyright 2017 Themeone
 */

/* ============================================================
   SUMMARY
/* ============================================================

	00. Main containers
	01. SVG icons
	02. Header
	03. Tabs
	04. Submit buttons
	05. Form table
	06. Inputs
	07. Radio
	08. Slider
	09. Color field
	10. Checkbox
	11. Sorter
	12. Modal
	13. Sizes field table
	14. Typography fields
	15. Code field
	16. Media Queries

/* ============================================================
   00. Main containers
/* ============================================================ */

#modulobox {
	margin: 0 0 0 200px;
	padding: 60px 40px;
}
body.rtl #modulobox {
	margin: 0 200px 0 0;
}
.mobx-wrap {
	position: relative;
	min-height: 900px;
	margin: 30px 20px 20px 15px;
	padding: 0;
	background: #fff;
	border: none;
	box-shadow: 0px 1px 3px 0px rgba( 0, 0, 0, 0.06);
}
.mobx-wrap * {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mobx-info-bar {
	margin: 60px 0 0;
}


/* ============================================================
   01. SVG icons
/* ============================================================ */

.mobx-icon:before {
	content: "";
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	background-image: url(../icons/sprite.svg);
}
.mobx-settings-tab:before {
	background-position: 0 0;
}
.mobx-accessibility-tab:before {
	background-position: -32px 0;
}
.mobx-navigation-tab:before {
	background-position: -64px 0;
}
.mobx-controls-tab:before {
	background-position: -96px 0;
}
.mobx-caption-tab:before {
	background-position: -128px 0;
}
.mobx-thumbnails-tab:before {
	background-position: -160px 0;
}
.mobx-social-sharing-tab:before {
	background-position: -192px 0;
}
.mobx-slideshow-tab:before {
	background-position: -224px 0;
}
.mobx-zoom-video-tab:before {
	background-position: -256px 0;
}
.mobx-gallery-tab:before {
	background-position: -288px 0;
}
.mobx-customization-tab:before {
	background-position: -320px 0;
}
.mobx-import-export-tab:before {
	background-position: -352px 0;
}
.mobx-updates-support-tab:before {
	background-position: -384px 0;
}
.mobx-system-status-tab:before {
	background-position: -416px 0;
}
.mobx-premium-version-tab:before {
	background-position: -448px 0;
}
.mobx-wrap input[type="submit"][name="save"] {
	background-position: -16px -16px;
}
.mobx-wrap input[type="submit"][name="reset"] {
	background-position: -16px -48px;
}
.mobx-wrap input[type="submit"][name="export"] {
	background-position: -16px -82px;
}
.mobx-wrap input[type="submit"][name="import"] {
	background-position: -16px -114px;
}
.mobx-wrap input[type="submit"][name="preview"] {
	background-position: -16px -144px;
}
.mobx-wrap a.mobx-info-button {
	background-position: -16px -176px;
}
.mobx-wrap .mobx-ticket-button {
	background-position: -16px -208px;
}
.mobx-wrap .mobx-update-button,
.mobx-wrap .mobx-check-update-button {
	background-position: -16px -240px;
}

/* ============================================================
   02. Header
/* ============================================================ */

.mobx-header {
	position: relative;
	display: block;
	overflow: hidden;
	height: 60px;
	margin: 0;
	color: #ffffff;
	background-color: rgb(225, 91, 123);
	border-radius: 3px 3px 0 0;
	line-height: 60px;
	text-align: center;
}
.mobx-logo {
    position: relative;
    display: inline-block;
    float: left;
    height: 60px;
    width: 200px;
    padding: 0 20px;
    background-color: #d84367;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    background-image: url(../icons/logo.svg);
	background-position: 83px 14px;
	background-repeat: no-repeat;
}
body.rtl .mobx-logo {
    float: right;
}
.mobx-name {
	position: relative;
    display: inline-block;
    float: left;
    height: 60px;
    padding: 0 0 0 40px;
    font-size: 26px;
    font-weight: 300;
    opacity: 0.8;
}
body.rtl .mobx-name {
    float: right;
	padding: 0 40px 0 0;
}
.mobx-version {
    position: relative;
    display: inline-block;
    float: right;
    padding: 0 20px;
    font-size: 14px;
	font-style: italic;
    font-weight: 400;
    letter-spacing: 2px;
}
body.rtl .mobx-version {
	float: left;
}

/* ============================================================
   03. Tabs
/* ============================================================ */

.mobx-tabs {
	position: absolute;
	height: calc(100% - 60px);
	width: 200px;
	margin: 0;
	padding: 0;
	background-color: #283646;
	border-radius: 0 0 0 3px;
	text-transform: uppercase;	
}
body.rtl .mobx-tabs {
	border-radius: 0 0 3px 0;
}
.mobx-tabs li {
	position: relative;
	display: block;
	margin: 0;
	padding: 16px 4px 16px 50px;
	color: #ffffff;
	cursor: pointer;
	opacity: 0.65;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.8px;
	line-height: 18px;
	text-transform: uppercase;
	backface-visibility: hidden;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
body.rtl .mobx-tabs li {
	font-weight: normal;
	padding: 16px 50px 16px 4px;
}
.mobx-tabs li.mobx-tab-active {
	background-color: #1a222c;
	opacity: 1;
}
.mobx-tabs li.mobx-premium-version-tab {
	color: #f7ab13;
	opacity: 1;
}
.mobx-tabs li:hover {
	padding: 16px 4px 16px 60px;
	opacity: 1;	
}
body.rtl .mobx-tabs li:hover  {
	padding: 16px 60px 16px 4px;
}
.mobx-tabs li:hover:before {
	left: 30px;
}
body.rtl .mobx-tabs li:hover:before  {
	left: auto;
	right: 30px;
}
.mobx-tabs li:after {
	content: '';
	position: absolute;
	display: block;
	height: 20px;
	width: 20px;
	right: -40px;
	top: 15px;
	opacity: 0;
	background-color: #ffffff;
	will-change: transform;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.35s ease-out;
	transition: all 0.35s ease-out;
}
.mobx-tabs li.mobx-tab-active:after {
	right: -14px;
	opacity: 1;
}
.mobx-tab-content {
	position: relative;
	display: none;
	padding: 0;
	will-change: transform;
	-webkit-animation: mobx-tab .7s;
    animation: mobx-tab .7s;
}
.mobx-tab-content:first-of-type {
	display: block;
}
.mobx-tab-content h2,
.mobx-tab-content h3 {
	margin: 54px 0 0;
	padding-bottom: 8px;
	margin-bottom: 10px;
	color: #283646;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.mobx-tab-content h2 {
	margin: 0;
	padding: 0 0 12px 0;
	font-size: 26px;
}
.mobx-tab-content p,
.mobx-tab-content .mobx-list li {
	margin: 0;
	color: #939AAA;
	font-size: 14px;
    font-weight: 400;
    line-height: 22px;
	list-style-type: none;
}
.mobx-tab-content ol.mobx-list {
    counter-reset: item;
	margin: 13px 0 13px 20px
}
.mobx-tab-content ol.mobx-list li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
	line-height: 26px;
}
.mobx-tab-content h3 + p {
	margin: 0 0 14px 0;
	color: #939AAA;
	font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
.mobx-state-no,
.mobx-state-yes,
.mobx-state-none {
	padding: 0 0 0 30px;
	font-weight: 600;
	line-height: 30px;
}
.mobx-state-none {
	color: #939AAA;
}
.mobx-state-yes {
	color: #4ad68c;
	font-weight: 700;
}
.mobx-state-no {
	color: #DE496D;
	font-weight: 700;
}

@-webkit-keyframes mobx-tab {
	0% {
		-webkit-transform: translate(0, -5px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes mobx-tab {
	0% {
		transform: translate(0, -5px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* ============================================================
   04. Submit buttons
/* ============================================================ */

.mobx-wrap .mobx-button,
.mobx-wrap input[type="submit"],
.mobx-wrap input[type="submit"]:hover,
.mobx-wrap input[type="submit"]:focus,
.mobx-wrap input[type="submit"]:active {
	position: relative;
    display: inline-block;
	height: auto;
	margin: 0 10px 10px 0 !important;
	margin: 0;
	padding: 12px 20px;
	color: #ffffff;
	border: none;
	border-radius: 3px;
	box-shadow: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.mobx-button:not(.mobx-purchase-button),
.mobx-wrap input[type="submit"] {
	background-repeat: no-repeat;
    background-image: url(../icons/sprite.svg) !important;
	background-size: auto !important;
}
.mobx-button:not(.mobx-purchase-button):hover,
.mobx-wrap input[type="submit"]:hover {
	padding: 12px 20px 12px 40px;
    background-position-x: 12px;
    opacity: 0.9;
}
.mobx-tabs li:before {
    content: "";
    position: absolute;
    display: block;
    left: 20px;
    top: 17px;
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
body.rtl .mobx-tabs li:before {
	left: auto;
	right: 17px;
}
.mobx-wrap .mobx-info-button,
.mobx-wrap .mobx-update-button,
.mobx-wrap .mobx-ticket-button,
.mobx-wrap input[type="submit"][name="save"] {
	background-color: #1ab6ff;
}
.mobx-wrap .mobx-check-update-button,
.mobx-wrap input[type="submit"][name="export"],
.mobx-wrap input[type="submit"][name="import"] {
	background-color: #283646;
}
.mobx-wrap .mobx-renew-support,
.mobx-wrap input[type="submit"][name="reset"] {
	background-color: #e15b7b;
}
.mobx-wrap input[type="submit"][name="preview"] {
	float: right;
	background-color: #4ad68c;
	margin: 0 0 10px 0 !important;
}
.mobx-wrap a.mobx-purchase-button {
	margin: 32px 0 0 !important;
	padding: 12px 20px 12px 74px;
	background-color: #f7ab13;	
}
.mobx-wrap a.mobx-purchase-button span {
    position: absolute;
    display: block;
    height: 100%;
    width: 56px;
    left: 0;
    top: 0;
    line-height: 46px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    background-color: rgba(0,0,0,0.075);
}
.mobx-wrap .mobx-register-button,
.mobx-wrap .mobx-upload-button {
	height: 30px;
    margin: 0 0 14px 0;
    padding: 4px 18px;
    background: #1ab6ff;
	border: 0;
	border-radius: 0 3px 3px 0;
	box-shadow: none;
	box-sizing: border-box;
	color: #ffffff;
    cursor: pointer;
	outline: none;
	line-height: 22px;
    text-transform: uppercase;
	-webkit-transition: opacity 150ms ease-out;
	transition: opacity 150ms ease-out;
}
body.rtl .mobx-wrap .mobx-register-button,
body.rtl .mobx-wrap .mobx-upload-button {
	border-radius: 3px 0 0 3px;	
}
.mobx-wrap .mobx-upload-button:hover,
.mobx-wrap .mobx-register-button:hover,
.mobx-wrap a.mobx-purchase-button:hover {
	opacity: 0.9;
}
.mobx-wrap .mobx-registered {
    background-color: #4ad68c;
}
.mobx-wrap .mobx-registered:before {
    content: '';
    display: inline-block;
	height: 12px;
    width: 6px;
	margin: 0 12px 0 0;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* ============================================================
   05. Form table
/* ============================================================ */

#mobx-settings .form-table {
	margin: 0 0 40px;
}
#mobx-settings .form-table th,
#mobx-settings .form-table td {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 4px 0;
	font-weight: normal;
}
#mobx-settings .form-table th {
	vertical-align: top;
    color: #939AAA;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin: 6px 0 0 0;
}
#mobx-settings .mobx-status-table.form-table th,
#mobx-settings .mobx-status-table.form-table td {
	display: table-cell;
	vertical-align: middle;
}
.mobx-info-desc {
	position: absolute;
	display: block;
	top: 5px;
	right: -28px;
	height: 16px;
	width: 16px;
	margin: 5px;
	background-color: rgba(40, 54, 70, 0.5);
	background-image: url(../icons/sprite.svg);
	background-position: -480px 0;
	background-repeat: no-repeat;
	border-radius: 20px;
	vertical-align: top;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease-out;
	transition: background-color 150ms ease-out;
}
body.rtl .mobx-info-desc  {
	left: -28px;
	right: auto;
}
.mobx-status-table .mobx-info-desc {
    right: auto;
    left: 0;
    top: 6px;
}
body.rtl .mobx-status-table .mobx-info-desc {
    right: -30px;
    left: auto;
}
.mobx-info-desc:hover,
.mobx-info-desc.mobx-show-desc {
	background-color: #1ab6ff;
}
.mobx-field-desc {
	position: absolute;
	display: block;
	visibility: hidden;
	z-index: 9;
	bottom: 100%;
	right: -168px;
	width: 300px;
	opacity: 0;
	text-align: center;
	pointer-events: none;
	-webkit-transform: translateY(-20px);
	transform: translateY(-20px);
	-webkit-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
}
body.rtl .mobx-field-desc  {
	left: -162px;
	right: auto;
}
.mobx-status-table .mobx-field-desc {
	right: auto;
    left: -134px;
}
body.rtl .mobx-status-table .mobx-field-desc {
    right: -170px;
    left: auto;
}
.mobx-field-desc span {
	display: inline-block;
	margin: 0 0 2px;
	padding: 14px;
	color: #ffffff;
	background: rgba(40, 54, 70, 0.9);
	border-radius: 3px;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
}
.mobx-status-table .mobx-field-desc span {
	margin: 0;
}
.mobx-info-desc.mobx-show-desc + .mobx-field-desc {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.mobx-field-desc span:after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	margin: 0 0 0 -11px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid rgba(40, 54, 70, 0.9);
}
.mobx-status-table .mobx-field-desc span:after {
	bottom: -8px;
}
.mobx-premium-label {
    position: absolute;
    display: block;
    left: 100%;
    top: 5px;
    height: 16px;
	width: 16px;
    margin: 5px 5px 5px 7px;
    padding: 0;
    color: #ffffff;
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase;
	white-space: nowrap;
	background-image: url(../icons/sprite.svg);
	background-position: -512px 0;
	background-repeat: no-repeat;
	cursor: pointer;
}
body.rtl .mobx-premium-label  {
	left: auto;
	right: 100%;
}
.mobx-lock-customCSS,
.mobx-lock-customJSAfter,
.mobx-lock-customJSBefore {
	left: -8px;
	top: -30px;
}
body.rtl .mobx-lock-customCSS,
body.rtl .mobx-lock-customJSAfter,
body.rtl .mobx-lock-customJSBefore {
	left: auto;
	right: 0;
}
.mobx-premium-label span {
    position: relative;
    display: block;
    left: 28px;
    margin: 0;
    color: #f7ab13;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}
body.rtl .mobx-premium-label span  {
	left: auto;
	right: 28px;
}
.mobx-premium-label:hover span {
	left: 22px;
    opacity: 1;
}
body.rtl .mobx-premium-label:hover span  {
	left: auto;
	right: 22px;
}
.mobx-info-desc ~ .mobx-premium-label {
	margin: 5px 5px 5px 32px;
}
body.rtl .mobx-info-desc ~ .mobx-premium-label  {
	margin: 5px 32px 5px 5px;
}
.mobx-premium-label ~ *:not(.mobx-info-desc) {
    opacity: 0.5;
	pointer-events: none !important;
}

/* ============================================================
   06. Inputs
/* ============================================================ */

#mobx-settings select,
#mobx-settings input[type="text"],
#mobx-settings input[type="radio"] + label,
#mobx-settings input[type="number"],
#mobx-settings input[type="password"] {
	display: inline-block;
	background-color: #f5f8fb;
	height: 30px;
	max-height: 30px;
	margin: 0;
	padding: 4px 10px;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	box-sizing: border-box;
	outline: none;
	color: #4c5866;
	font-size: .8125rem;
	font-weight: 600;
	line-height: normal;
	-webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}
#mobx-settings input[type="text"]:focus,
#mobx-settings input[type="number"]:focus,
#mobx-settings input[type="password"]:focus,
#mobx-settings input[type="text"]:hover,
#mobx-settings input[type="number"]:hover,
#mobx-settings input[type="password"]:hover,
#mobx-settings input[type="radio"]:not(:checked) + label:hover,
#mobx-settings input[type="checkbox"]:hover:not(:checked) + label {
	background-color: #e0e5ea !important;
}
#mobx-settings input[type="text"] {
	width: 264px;
}
#mobx-settings input[type="number"] {
	width: 80px;
}
#mobx-settings input[type="file"] {
	display: none;
}
#mobx-settings input[type="text"].mobx-upload-input {
	margin: 0 0 14px 0;
	border-radius: 3px 0 0 3px;
}
#mobx-settings input[type="text"].mobx-upload-input:hover {
	cursor: pointer;
}
#mobx-settings input[type="password"] {
	width: 300px;
    margin: 0 0 14px 0;
    border-radius: 3px 0 0 3px;
}

/* ============================================================
   07. Radio
/* ============================================================ */

#mobx-settings input[type="radio"] {
	display: none;
}
#mobx-settings input[type="radio"] + label {
	margin: 0 6px 0 0;
	padding: 6px 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
#mobx-settings input[type="radio"]:checked + label {
	background: #DE496D;
	color: #ffffff;
}
#mobx-settings input[type="radio"] ~ label:last-of-type {
	margin: 0;
}

/* ============================================================
   08. slider
/* ============================================================ */

.mobx-ui-slider {
	position: relative;
	display: inline-block;
	height: 6px;
	width: 186px;
	margin: 0;
	padding: 0;
	background: #f5f8fb;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}
.mobx-ui-slider:hover {
	background-color: #e0e5ea;
}
.mobx-ui-slider .ui-widget-header {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	background: #DE496D;
	border-radius: 3px 0 0 3px;
}
.mobx-ui-slider.ui-widget-content .ui-state-default,
.mobx-ui-slider.ui-widget-content .ui-slider-handle {
	position: absolute;
	z-index: 2;
	top: -4px;
	height: 14px;
	width: 14px;
	margin: 0 0 0 -7px;
	text-decoration: none;
	outline: 1px none;
	cursor: pointer;
}
.mobx-ui-slider.ui-widget-content .ui-slider-handle:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background: #DE496D;
}
#mobx-settings input[type="text"].mobx-ui-slider-value {
	width: 62px;
	margin: 0 0 0 10px;
	padding: 3px 8px;
	text-align: right;
}
body.rtl #mobx-settings input[type="text"].mobx-ui-slider-value {
	margin: 0 10px 0 0;
}

/* ============================================================
   09. Color field
/* ============================================================ */

#mobx-settings .wp-color-result {
	position: relative;
	overflow: hidden;
	height: 30px !important;
	margin: 0 !important;
	border: 3px solid #f5f8fb;
	border-radius: 3px;
	box-shadow: none;
	-webkit-transition: border-color 150ms ease-out;
    transition: border-color 150ms ease-out;
}
#mobx-settings a.wp-color-result span {
	max-width: 50px;
}
#mobx-settings .wp-color-result:before {
    content: "";
    position: absolute;
    overflow: hidden;
    z-index: 2;
    left: -4px;
    top: -4px;
    width: 100%;
    height: 100%;
    border: 4px solid #f5f8fb;
    border-radius: 6px;
}
#mobx-settings .wp-color-result:after {
	height: 30px !important;
	max-height: 30px !important;
    padding: 0 12px;
    background: #f5f8fb;
    color: #4c5866;
    border: none;
	border-left: 3px solid #f5f8fb;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
	-webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}
#mobx-settings .wp-color-result-text {
	background: #f5f8fb !important;
	color: #4c5866 !important;
	height: 24px !important;
	padding: 0 12px !important;
	border: none !important;
	line-height: 24px !important;
	font-weight: 600 !important;
	-webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}
#mobx-settings .color-alpha {
	width: 31px !important;
}
#mobx-settings .wp-picker-container .button.button-small {
	height: 30px;
	margin: 0;
	color: #4c5866;
	background: #f5f8fb;
	border: none;
	box-shadow: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 30px;
	-webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}
#mobx-settings .wp-picker-container .mobx-color-picker {
	max-width: 128px;
	min-width: 74px;
    margin: 0 6px;
}
#mobx-settings .wp-picker-container .iris-picker {
	background: #f5f8fb;
	border: none;
}
#mobx-settings .iris-picker .iris-strip {
	width: 17px !important;
}
#mobx-settings .wp-color-result:hover {
	border-color: #e0e5ea !important;
}
#mobx-settings .wp-color-result:hover:after,
#mobx-settings .wp-color-result:hover .wp-color-result-text,
#mobx-settings .wp-picker-container .button.button-small:hover {
	border-color: #e0e5ea !important;
	background: #e0e5ea !important;
}

/* ============================================================
   10. Checkbox
/* ============================================================ */

.mobx-toggle {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 26px;
	width: 64px;
	margin: 1px 0 0 0;
	background-color: #f5f8fb;
	border-radius: 3px;
	backface-visibility: hidden;
}
.mobx-toggle input {
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	opacity: 0 !important;
}
.mobx-toggle:before,
.mobx-toggle label:before {
	content: "";
	position: absolute;
	margin: 0;
	padding: 0;
	opacity: 0.5;
}
.mobx-toggle:before {
	z-index: 2;
	left: 15px;
	top: 8px;
	height: 10px;
	width: 2px;
	background: #fff;
}
.mobx-toggle label:before {
	height: 6px;
	width: 6px;
	right: 10px;
	top: 8px;
	border: 2px solid #a2b0c1;
	border-radius: 6px;
	color: #a2b0c1;
	-webkit-transition: opacity 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: opacity 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mobx-toggle input:checked + label:before {
	opacity: 0;
}
.mobx-toggle input:checked + label {
	background-color: #DE496D;
}
.mobx-toggle label {
	display: block;
	position: relative;
	z-index: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
	-webkit-transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.mobx-toggle label:after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	height: 20px;
	width: 30px;
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
	pointer-events: none;
	-webkit-transition: -webkit-transform 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: transform 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mobx-toggle input:checked + label:after {
	-webkit-transform: translateX(28px);
	transform: translateX(28px);
}

/* ============================================================
   11. Sorter
/* ============================================================ */

.mobx-sort-list {
	position: relative;
	margin: 0 0 10px 0;
	padding: 2px;
	background-color: #f5f8fb;
	border: 2px solid #ffffff;
	border-radius: 3px;
}
.mobx-sort-list li {
	position: relative;
	float: left;
	height: 40px;
	width: 40px;
	margin: 2px;
	padding: 0;
	list-style: none;
	background-color: #ffffff;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.mobx-sort-list:before {
	content: attr(data-msg);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	padding: 0 6px;
	color: #32373c;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	box-sizing: border-box;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 200ms ease-out;
	transition: opacity 200ms ease-out;
}
td .mobx-sort-list:first-of-type {
	border: 2px solid #e15b7b;
}
.mobx-sort-list.mobx-hide-msg:before {
	opacity: 0;
}
.mobx-sort-list.mobx-controls {
	margin: 0 0 30px 0;
}
.mobx-sort-list.mobx-controls:last-child {
	margin: 0;
}
.mobx-sort-list.mobx-controls {
	height: 52px;
	width: 272px;	
}
.mobx-sort-list.mobx-controls:after,
.mobx-sort-list.mobx-shareButtons:after {
	content: "";
	position: absolute;
	display: block;
	height: 16px;
	width: 16px;
	background-image: url(../icons/sprite.svg);
	background-position: -544px 0;
	background-repeat: no-repeat;
}
.mobx-sort-list + .mobx-sort-list:after {
	content: none;
}
.mobx-sort-list.mobx-controls:after {
	bottom: -25px;
	left: 50%;
	margin: 0 0 0 -8px;
	transform: rotate(90deg);
}
.mobx-sort-list.mobx-shareButtons:after {
	right: -25px;
	top: 50%;
	margin: -8px 0 0 0;
}
.mobx-sort-list.mobx-shareButtons {
	float: left;
	height: 184px;
	width: 140px;
	margin: 0 30px 0 0;
}
.mobx-sort-list.mobx-shareButtons + .mobx-sort-list{
	margin: 0;
}
.mobx-sort-list li svg {
	height: 100%;
	width: 100%;
    padding: 12px 0;
	fill: #283646;
}

/* ============================================================
   12. Modal
/* ============================================================ */

.mobx-modal-holder {
    position: fixed;
    z-index: 9999;
    bottom: 30px;
    right: 30px;
	min-width: 280px;
    max-width: 420px;
	opacity: 0;
	visibility: hidden;
    background-color: #283646;
	-webkit-transform-origin: 50% 100% 0;
    transform-origin: 50% 100% 0;
	-webkit-transform: perspective(250px) rotateX(45deg);
    transform: perspective(250px) rotateX(45deg);
	-webkit-transition: all 150ms ease-out 1.5s;
	transition: all 150ms ease-out 1.5s;
}
body.rtl .mobx-modal-holder {
	left: 30px;
	right: auto;
}
.mobx-modal-show {
	opacity: 1;
	visibility: visible;
	-webkit-transform: perspective(250px) rotateX(0deg);
    transform: perspective(250px) rotateX(0deg);
	-webkit-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
}
.mobx-modal-icon {
    position: absolute;
    width: 31px;
    height: 31px;
    top: 50%;
    left: 16px;
    margin: -18px 0;
}
.mobx-modal-success .mobx-modal-icon:after {
	content: "";
    position: absolute;
	left: 10px;
    top: 0;
    height: 24px;
    width: 14px;
    border: solid #4ad68c;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mobx-modal-error .mobx-modal-icon:before,
.mobx-modal-error .mobx-modal-icon:after {
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    height: 36px;
    width: 3px;
    background-color: #e15b7b;
}
.mobx-modal-error .mobx-modal-icon:before {
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mobx-modal-error .mobx-modal-icon:after {
	-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.mobx-modal-show .mobx-modal-icon {
    outline: 1px solid transparent;
    border-radius: 50%;
    border-width: 3px;
    border-right-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: rgba(255,255,255,.2);
    border-left: 3px solid #fff;
    -webkit-animation: mobx-modal-load 1.1s infinite linear;
    animation: mobx-modal-load 1.1s infinite linear;
}
.mobx-modal-msg {
    position: relative;
    display: inline-block;
    padding: 24px 24px 24px 66px;
    line-height: 20px;
    font-size: 14px;
	font-weight: 400;
    color: #ffffff;
}
.mobx-popup-holder {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background: rgba(40, 54, 70, 0.7);
	text-align: center;
	-webkit-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
}
.mobx-hide-popup.mobx-popup-holder {
	opacity: 0;
	visibility: hidden;
}
.mobx-popup-msg {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 50%;
	height: auto;
	width: 260px;
	margin: 0 auto;
	padding: 40px;
	color: #283646;
	background: #fff;
	border-radius: 3px;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.mobx-popup-confirm {
	position: relative;
	display: block;
	margin: 28px 0 0;
	padding: 8px 16px;
	background-color: #1ab6ff;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
}
.mobx-popup-close {
	position: absolute;
	display: block;
	right: -15px;
	top: -15px;
	height: 30px;
	width: 30px;
	padding: 0;
	background-color: rgb(225, 91, 123);
	color: #ffffff;
	border-radius: 30px;
	cursor: pointer;
}
.mobx-popup-confirm:hover {
	opacity: 0.9;
}
.mobx-popup-close:after {
	content: "\2715";
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
	line-height: 30px;
	font-size: 14px;
}

@-webkit-keyframes mobx-modal-load {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}
@keyframes mobx-modal-load {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  50% {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

/* ============================================================
   13. Sizes field table
/* ============================================================ */

#mobx-settings .mobx-table-sizes input[type="number"] {
	background-color: #ffffff;
}
#mobx-settings .form-table td .mobx-table-sizes {
	margin: 6px 0 0;
    padding: 10px 16px 6px 16px;
    background-color: #f5f8fb;
    border-radius: 3px;
    border-collapse: separate;
}
#mobx-settings .form-table td .mobx-table-sizes td {
    display: table-cell;
    width: 88px;
    color: #939AAA;
    font-size: 12px;
    text-transform: uppercase;
}
#mobx-settings .form-table td .mobx-table-sizes tr:first-child td {
    color: #555;
	font-weight: 600;
}
#mobx-settings .form-table td .mobx-table-sizes tr:first-child td:last-child {
	text-align: center;
    text-transform: none;
}
#mobx-settings .form-table td .mobx-table-sizes tr td:first-child {
    width: 60px;
}
#mobx-settings .form-table td .mobx-table-sizes tr td:last-child {
	width: 30px;
}
#mobx-settings .form-table td .mobx-table-sizes td label {
	font-weight: 600;
}
.mobx-add-size span,
.mobx-delete-size span {
	position: relative;
	display: inline-block;
	height: 30px;
	width: 30px;
	background-color: #1ab6ff;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
	-webkit-transition: opacity 150ms ease-out;
	transition: opacity 150ms ease-out;
}
.mobx-delete-size span {
	background: #DE496D;
}
.mobx-add-size span:hover,
.mobx-delete-size span:hover {
	opacity: 0.9;
}
#mobx-settings .form-table td .mobx-table-sizes tr:nth-child(2) .mobx-delete-size {
	display: none;
}
.mobx-add-size span:after,
.mobx-delete-size span:after {
	content: "\2715";
	position: absolute;
	display: block;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
	line-height: 30px;
	font-size: 12px;
	font-weight: 900;
}
.mobx-add-size span:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#modulobox .spinner {
	vertical-align: middle;
	float: none;
	margin: 42px 10px 20px 0;
	padding: 0;
}

/* ============================================================
   14. Typography fields
/* ============================================================ */

.mobx-typography-tabs {
	height: 35px;
	margin: 0;
}
.mobx-typography-tabs li {
	display: inline-block;
    margin: 0;
    padding: 10px 15px;
    color: #939AAA;
    font-size: 12px;
	font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}
.mobx-typography-tabs li.mobx-tab-active {
    background: #f5f8fb;
    color: #555;  
}
.mobx-typography-fields {
	display: none;
	z-index: 2;
	margin: 0 0 12px 0 !important;
	padding: 16px 6px 16px 16px;	
	background-color: #f5f8fb;
	border-radius: 0 3px 3px;
}
.mobx-typography-fields.mobx-fields-active {
	display: block;
	-webkit-animation: mobx-tab .7s;
    animation: mobx-tab .7s;
}
.mobx-typography-fields input,
.mobx-typography-fields select,
.mobx-typography-fields input + label,
#mobx-settings .mobx-typography-fields input[type="checkbox"]:hover + label,
.mobx-typography-fields .mobx-ui-slider,
#mobx-settings .mobx-typography-fields .wp-color-result:after,
#mobx-settings .mobx-typography-fields .wp-color-result .wp-color-result-text,
#mobx-settings .mobx-typography-fields .wp-picker-container .button.button-small {
	background-color: #ffffff !important;
}
#mobx-settings .wp-color-result:hover .wp-color-result-text,
#mobx-settings .wp-picker-container .button.button-small:hover {
	border-color: #e0e5ea !important;
	background: #e0e5ea !important;
}
.mobx-typography-fields .wp-color-result {
	border-color: #ffffff !important;
}
#mobx-settings select.mobx-font-families {
    width: 196px;
    margin: 0 14px 0 0;
}
#mobx-settings select.mobx-font-subsets,
#mobx-settings select.mobx-font-variants {
	width: 130px;
	margin: 0 10px 0 0;
}
.form-table td fieldset.mobx-typography-fields > label {
    position: relative;
    width: 82px;
    color: #939AAA;
    font-size: 13px;
	line-height: 13px;
}
.form-table td fieldset.mobx-typography-fields > label:first-of-type {
	margin: 0 !important;
}
.mobx-typography-fields .wp-picker-container {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	margin: 10px 14px 0 0;	
}
.mobx-typography-fields .wp-picker-container.wp-picker-active {
	display: block;	
}
.mobx-typography-fields .wp-picker-input-wrap label {
	margin: 0 !important;
}
.mobx-typography-fields .wp-color-result:after { 
    overflow: hidden;
	max-width: 65px;
	text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-binding: url(ellipsis.xml#ellipsis); 
}
.mobx-typography-fields .wp-picker-input-wrap {
	margin: 0 6px;
}
#mobx-settings .mobx-typography-fields .wp-picker-container .mobx-color-picker {
	margin: 0 6px 0 0;
}
.mobx-typography-fields .mobx-ui-slider-value {
	margin: 10px 10px 0 !important;
}
.mobx-typography-button {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 30px;
	width: 30px;
    margin: 10px 2px 0 2px;
}
.form-table td fieldset .mobx-typography-button input,
.form-table td fieldset .mobx-typography-button label {
    position: absolute;
    left: 0;
    top: 0;
	height: 30px;
    width: 30px;
    margin: 0 !important;
    background: #f5f8fb;
	border: none;
    border-radius: 3px;
	color: #4c5866;
	line-height: 30px;
	-webkit-transition: none !important;
    transition: none !important;
}
.mobx-typography-button input {
	display: block !important;
	z-index: 2;
	opacity: 0 !important;
}
.mobx-typography-button label:before {
	position: absolute;
	left: 0;
    top: 0;
	font-size: 18px;
    font-weight: 100;
    line-height: 32px;
    text-align: center;
    padding: 0;
    width: 30px;
    height: 30px;
	border-radius: 3px;
	-webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.form-table td fieldset .mobx-typography-button input:checked + label:before {
	background: #283646;
	color: #ffffff;
}

/* ============================================================
   15. Code field
/* ============================================================ */

.mobx-code-error {
	position: relative;
    display: block;
    margin: -16px 0 10px 0;
    color: #F77669;
	font-weight: 600;
}

/* ============================================================
   16. Media Queries
/* ============================================================ */

@media only screen and (max-width: 990px) {
	.mobx-info-bar input[type="submit"] {
		float: left !important;
	}
	body.rtl .mobx-info-bar input[type="submit"] {
		float: right !important;
		margin: 0 0 10px 10px !important;
	}
}
@media only screen and (max-width: 870px) {
	.mobx-logo {
		height: 60px;
		width: 50px;
		background-position: 10px 18px;
		background-size: 30px 30px;
	}
	.mobx-name {
		padding: 0 0 0 20px;
	}
	.mobx-tabs {
		width: 50px;
	}
	.mobx-tabs li,
	.mobx-tabs li:hover,
	body.rtl .mobx-tabs li,
	body.rtl .mobx-tabs li:hover {
		padding: 16px 17px;
	}
	.mobx-tabs li:before,
	.mobx-tabs li:hover:before {
	    position: relative;
    	display: inline-block;
    	vertical-align: middle;
		left: 0;
		top: 0;
    	margin: -4px 14px 0 0;
	}
	body.rtl .mobx-tabs li:before,
	body.rtl .mobx-tabs li:hover:before {
		right: auto;
		margin: -4px 0 0 0;
	}
	.mobx-tabs li span {
		display: none;
	}
	#modulobox {
		margin: 0 0 0 50px;
		padding: 30px 20px;
	}
	body.rtl #modulobox {
		margin: 0 50px 0 0;
	}
	#modulobox .form-table th {
		width: 200px;
	}
	#mobx-settings .form-table td .mobx-table-sizes tr td:first-child {
		display: none;
	}
	.mobx-info-desc {
		display: none;
	}
}
@media only screen and (max-width: 667px) {
	.mobx-wrap {
		margin: 16px 10px 20px 0;
	}
	.mobx-version {
		display: none;
	}
	#modulobox .form-table th {
		width: 100%;
	}
	#mobx-settings input[type="text"] {
		max-width: 260px !important
	}
}