/*------------------------------------------------------------------------
# "Sparky Framework" - Joomla Template Framework
# Copyright (C) 2016 HotThemes. All Rights Reserved.
# License: http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
# Author: HotThemes
# Website: http://www.hotjoomlatemplates.com
-------------------------------------------------------------------------*/

input#jform_template {
	width: 100%;
}

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: Arial, sans-serif !important;
}

.ui-widget-header {
	background: #ccc !important;
	border: none !important;
}

.form-inline-header {
	display: none;
}

fieldset.options-form {
	background:transparent;
	border:0;
}

fieldset.options-form > legend {
	display: none;
}

.toolBox li.ui-state-default {
	border:none;
	width:810px;
}

#layout_addRow {
	background:#fc6e51;
	width:114px;
	padding:0;
	color: #fff;
	margin:30px 5px 0 50px !important;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
}

#layout_addRow:hover {
	background:#e9573f;
}

#layout_addRow span.caption {
	line-height:25px;
	display:block;
}

#jform_params_mnucfg-lbl {
	display:none;
}

.layout_settings .control-label label {
	display: block !important;
    min-width: 200px !important;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 0 !important;
    font-size: 14px;
}

.hotspacer {
	color:#a4a9ae;
	margin:10px 0 5px 0;
}

.hotspacer label, td.hotspacer {
	margin:0;
	text-align: left !important;
	font-weight: bold;
	font-size: 16px;
}

.layout_settings .hotspacer {
	text-align: center;
}

.layout_settings .hotspacer label {
	min-width: 0 !important;
	text-align: center !important;
}

td.hotspacer {
	padding: 30px 0;
	text-align: right !important;
}

.field-spacer .control-label {
	width: 100%;
}

.spacer label {
	width: 100%;
	margin:0;
	text-align: left  !important;
}

a[target=_blank]:before {
	margin-right: 5px;
}

#tadmin_menu {
	list-style:none;
	padding-left:190px;
	padding-top:0px;
	padding-right:0px;
	background:#fc6e51 !important;
	border: 1px solid #e9573f !important;
	border-bottom: 3px solid #e9573f !important;
	border-radius: 3px;
}

#tadmin_menu li {
	float:left;
}

#tadmin_menu li a {
	font-size: 14px;
	outline: none;
}

.tadmin_surface {
	margin:0;
	padding:0;
}

.tadmin_container {
	margin:0;
	padding:0;
}

.panelform .adminformlist {
	float:left;
}

.edit_row > ul > li {
	float:left;
}

.toolBox .edit_row table {
	display:none;
}

.toolBox > li {
	float:left;
	padding:3px!important;
}

fieldset#fieldset-layoutdesign > div {
	-webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

fieldset#fieldset-layoutdesign > div div.control-group:first-child {
	display: none;
}

div.LayoutModel {
	margin: 2px 0 0 48px;
}

.LayoutModel .edit_row {
	padding: 5px 0;
	margin-bottom: 5px;
}

.LayoutModel .caption, .LayoutModel .ui-icon-plusthick {
	display:none;
}

.LayoutModel .edit_row .ui-button-text {
	padding: 5px 16px 5px 5px;
}

.layout_row {
	width: 790px;
	height: 50px;
	background:url("../../images/cells12.png");
}

.layoutDesigner {
	width:1030px;
	border-radius: 6px;
	display: block;
	padding: 15px 0;
	background: #fff;
}

.layoutDesigner > tr  > td{
	border:1px Solid Silver;
}

.layoutDesigner > .toolBox > *{
	float:left;
}

.layoutDesigner li, .layoutDesigner ul {
	list-style:none!important;
}

.edit_row span {
	margin:0;
}

.unassignedPositions {
	width:810px;
}

.unassignedPositions li {
	float:left;
	margin:1px!important;
	width:80px;
}

.mpos_draggable {
	height:50px!important;
	border-left: 1px solid #fff;
	background: #a4aeb9;
	text-align:center;
	cursor:move;
}

.mpos_draggable span {
	color: #fff;
	white-space: nowrap;
}

.unassignedPositions  .mpos_draggable {
	width:70px!important;
	height:28px!important;
}

.layout_row li {
	float:left;
}

.LayoutModel .initialRow {
	text-align:center;
	padding:50px;
}

.LayoutModel .mpos_draggable {
	font-size:11px;
}

.LayoutModel ul#sortable {
	margin:0;
}

.emptycell {
	background:#EEEEEE;
	color:black;
}

.emptycell.disposed {
	display:none!important;
}

.layout_row_container {
	margin:0 0 0 10px;
	padding:0;
	min-width: 800px;
	overflow:hidden;
	font-size: 11px;
}

.unassignedPositions .mpos_draggable a {
	display:none;
}

a.off_left, a.off_right {
	float:left;
	background-color:transparent!important;
	position:relative!important; 
	left:+2px;
	border: 0;
	margin-top: 10px;
}

.off_left .ui-button-text, .off_right .ui-button-text {
	padding: 4 !important;
	margin: 0 !important;
}

.off_left {
	background:url(../../images/arrow_left.png) !important;
	opacity: .7;
}

.off_right {
	background:url(../../images/arrow_right.png) !important;
	opacity: .7;
}

a.off_left:hover, a.off_right:hover {
	opacity: 1;
}

.width_value {
	position:relative !important;
	top:0 !important;
	left:0 !important;
	margin:1px 4px !important;
	padding:0 !important;

}

.width_value span {
	margin:3px;
	padding:0 3px;
}

.width_value div {
	padding:0 !important;
	margin:0 !important;
	height:10px !important;
	overflow: visible !important;
	width:300px !important;
	top:0 !important;
	background: #f0f4fb;
}

div.hortabscontainer {
    margin:0px 0px;
	min-width:641px;
}

div.hortabscontainer div.hortabs {
    list-style:none;
    width:190px;
    cursor:pointer;
    float:left;
    z-index:2;
	position:absolute;
}

div.hortabscontainer div.curvedContainer {
	margin-left:169px;
	min-height:400px;
}

div.hortabscontainer div.curvedContainer .tabcontent {
	display:none;
	padding:20px;
}

div.hortabs div.tab {
    display: block;
    height: 40px;
    border-top: none;
    position: relative;
   	color: #fff;
}

div.hortabs div.hortabslink {
	padding-left:20px;
    font-size:12px;
	line-height:40px;
}

div.hortabs div.tab.selected {
    color: #ffffff;
    border-right-color:#aeaeaa;
}

div.hortabs div.tab.selected {
    background: #393f48;
}

div.hortabs div.tab.first {
}

div.hortabs div.tab.last {
}

div.hortabs div.tab div.hortabsarrow {
    position: absolute;
    height:30px;
    width:17px;
    left:100%;
    top:0px;
    display: none;
}

div.hortabs div.tab.selected div.hortabsarrow {
    display: block;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled, .ui-resizable-disabled {
	cursor:  move !important;
	font-size: 11px;
	padding: 5px;
}

.ui-state-disabled:hover {
	opacity:1 !important;
}

.control-group {
	clear:both;
}

joomla-tab .hortabs {
	position:absolute;
	margin-left: -1.4em;
	border-radius: 3px;
	background: #434a54;
}

.adminformlist td.ui-state-default, .adminformlist li.ui-state-default {
	background: #111 !important;
}

.adminformlist td.ui-state-default {
	border-radius: 5px;
}

.ui-state-default {
	background-image: none !important;
}

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
	padding: 0 !important;
}

h4.menusSettingsTab {
	background:#a4a9ae url(../../images/arrow_down.png) 810px 15px no-repeat;
	padding:15px !important;
	margin: 2px 0 !important;
	cursor: pointer;
	width: 850px;
	color: #fff;
	font-weight: normal;
	border-radius: 3px;
}

h4.menusSettingsTab:hover {
	background:#434a54 url(../../images/arrow_down.png) 810px 15px no-repeat;
}

h4.menusSettingsTab.opentab {
	background:#434a54 url(../../images/arrow_up.png) 810px 15px no-repeat;
}

.menusSettingsContainer {
	background: #fff;
	padding: 30px 0;
	max-width: 850px;
}

.menusSettingsContainer select {
	display: block !important;
}

div.menusSettingsField {
	margin: 0 45px;
}

div.controls select.MenuTypeSelect {
	width: 300px;
	margin:0 40px 40px 45px;
}

ul.adminformlist span.spacer label {
	font-weight: normal;
	max-width: 450px;
	padding-bottom: 10px;
}

.accordion-inner {
	padding: 0 !important;
	border-top:none !important;
}

.controls div#layoutdesignerjform_params_layoutdesign {
	position: relative;
	width: 1030px;
}

#attrib-customcode .control-group:not(.field-spacer) .control-label,
#jform_params_layoutdesign-lbl,
#fieldset-layoutdesign .form-grid .control-group:nth-of-type(2) .control-label {
	display: none;
}

.control-group .control-label {
	padding: 15px 10px 0 0;
}

.clr {
	clear: both;
}

joomla-tab#options {
	display:block!important;
}

/* added since Joomla 3.1 */

ul.nav.nav-tabs {
	display: none;
}

div.controls input {
	width: 260px;
	padding: 6px 10px;
	border-radius: 5px;
	border: 2px solid #e3e4e8;
	color: #768082;
	box-shadow: none;
}

div.controls input.minicolors-input {
	width: 150px;
	height: 40px;
	font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
}

.control-group .minicolors-theme-bootstrap .minicolors-swatch {
    top: 8px;
    left: 6px;
    width: 22px;
    height: 22px;
}

.layout_settings .control-group .minicolors-theme-bootstrap .minicolors-swatch {
	top: 6px;
}

div.controls #jform_params_palette1,
div.controls #jform_params_palette2,
div.controls #jform_params_palette3,
div.controls #jform_params_palette4,
div.controls #jform_params_palette5,
div.controls #jform_params_palette6,
div.controls #jform_params_palette7,
div.controls #jform_params_palette8 {
	width: 490px;
	font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
}

div.controls input.input-xxlarge {
	width: auto;
}

div.controls input[type="number"] {
	width: 130px;
}

div.controls textarea {
	padding: 5px 10px;
	border-radius: 5px;
	border: 2px solid #e3e4e8;
}

div.controls input:focus, div.controls textarea:focus {
	outline: none;
	border: 2px solid #fc6e51;
	box-shadow: none;
}

div.controls select {
	width: 224px;
	border-radius: 3px;
	border: 2px solid #e3e4e8;
	color: #768082;
	box-shadow: none;
}

div.controls input.layoutrow_name,
div.controls input.layoutrow_class {
	padding: 0 3px;
	border-radius: 0;
	box-shadow: none;
	margin:3px 0 3px 7px;
	width: 111px;
}

#jform_params_logoImageFile, #jform_params_fontResizeMinusImage, #jform_params_fontResizeResetImage, #jform_params_fontResizePlusImage, #jform_params_scrollToTopImageFile, #jform_params_menuIconImage, #jform_params_bodyBgImageFile  {
	border: 1px solid #ccc;
	padding: 4px 6px;
}

.nav-tabs {
	border-bottom: none !important;
}

.layoutDesigner ul {
	margin: 0;
	padding: 0;
}

.layout_row_container li.logo {
	max-width: 9999px;
	max-height: 50px;
}

.form-horizontal .controls {
	margin-left: 210px !important;
}

.ui-tooltip {
	max-width:300px;
}

.flipyesno {
	position:relative;
	z-index:9;
	list-style:none;
	width:54px;
	height:24px;
	margin:2px 0;
	padding:0;
	overflow:hidden;
}

.flipyesno li:hover {
	cursor: pointer;
}

.sparky_legend {
	padding: 0 17px 15px 0;
	text-align: right;
}

.sparky_legend span {
	width: 20px;
	display: inline-block;
	height: 5px;
	margin: 0 0 2px 10px;
}

.cpos {
	background: #ed5565;
}

.sparky_legend .modulepositions {
	background: #a4aeb9;
}

.layout_row_container .logo, .unassignedPositions .logo, .layout_row_container .fontresize, .unassignedPositions .fontresize, .layout_row_container .copyright, .unassignedPositions .copyright, .sparky_legend .sparkyfeatures {
	background: #4fc1e9;
}

.sparky_menu {
	background: #48cfad;
}

/* joomla 3.4 */

.menusSettingsContainer > select.MenuTypeSelect {
	display: block !important;
}

.menusSettingsContainer > select.MenuTypeSelect {
	width: 150px;
}

.menusSettingsContainer label {
	display: block;
	float: left;
	clear: left;
}

.menusSettingsContainer div.controls input:not(.minicolors-input) {
	padding: 8px 10px 7px;
}

.menusSettingsContainer div.controls input[type="number"] {
	float: left;
	margin-right: 10px;
	padding: 9px 10px 8px;
}

.menusSettingsContainer h3 {
	padding: 15px 0;
}

.menusSettingsContainer ul.flipyesno {
	margin: 10px 0 0 !important;
}

/* JQUERY UI CSS */

/* Layout helpers */
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
	content: "Sparky Framework";
    display: table;
    position: absolute;
    color: #fff;
    margin-left: -172px;
    margin-top: 13px;
    font-size: 18px;
}
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction states */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { font-weight: normal; color: #768082; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #fff; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #e9573f; font-weight: normal; color: #ffffff; }
.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #e9573f; font-weight: normal; color: #fff; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #ffde2e; background: #ffeb80; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #9e0505; background: #cd0a0a; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { background-image: none; }

.ui-widget { font-family: Verdana, Arial, sans-serif; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea {  }
.ui-widget button, .settings_box button.btn { background: #fc6e51; border: 0; color:#fff; border-radius: 3px; margin: 0 10px; }
.ui-widget button:hover, .ui-widget button:focus, .settings_box button.btn:hover { background: #e9573f; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #a3a3a3; background: #333333; color: #eeeeee; font-weight: bold; }
.ui-widget-header a { color: #eeeeee; }
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.ui-icon { width: 16px; height: 16px; }

.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; background: #fc6e51; border-radius: 3px; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .7em; background: #fff; border-radius: 4px; border:0; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; outline: none; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; } 
button.ui-button-icons-only { width: 3.7em; } 
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -13px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */

.ui-tabs { position: relative; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; margin: 0; border-bottom: 0 !important; padding: 5px; white-space: nowrap; border-right: 1px solid #e9573f; }
.ui-tabs .ui-tabs-nav li:first-child { border-left: 1px solid #e9573f; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

/*REDUCE SHAKE of ui sortable*/
/*#layoutdesignerjform_params_layoutdesign *{
	overflow-y: hidden;
	overflow-x: hidden;
}*/
#layoutdesignerjform_params_layoutdesign td {
	vertical-align: top;
}
.unassignedPositions{
	overflow-y: visible!important;
	overflow-x: visible!important;
}
div.tooltip-inner {
	min-width: 300px!important;
    max-width: 350px!important;
}

/* HOT FONT style */

.custom_label span{
	font-size: 26px!important;
}

#sbox-content div.tooltip-inner {
	min-width: 200px!important;
    max-width: 350px!important;
}

.unselected, .unselected a, .selected a {
	color: #444;	
}

.selected {
	color: #000000;
}

.googleFontPreview {
	max-height: 350px;
    overflow-y: scroll;
}

.googleFontPreview .well {
	margin-bottom: 15px;
	padding: 15px;
}

.googleFontPreview input[type="checkbox"] {
	margin-right: 15px;
}

.googleFontPreview .well.selected,
#sbox-content .googleFontPreview .well.selected {
	border: 2px solid #fc6e51 !important;
}

#sbox-content .googleFontPreview .well {
	border: 1px solid #ccc !important;
}

div.controls div.font a.modal.btn,
div.menusSettingsField a.modal.btn {
	display: inline;
    position: relative;
    background: #a4a9ae;
    color: #fff;
    padding: 11px 10px 10px;
}

div.controls div.font a.modal.btn:hover,
div.menusSettingsField a.modal.btn:hover {
	background: #434a54;
}

#sbox-content  div.system_fonts select {
	width: 300px;
}

.custom_label.not_loaded p,.custom_label.not_loaded span{
    display: none;
    transition: opacity 3s ease-out;
    opacity: 0;
}

.custom_label p,.custom_label span{
	opacity: 1;
    display: block;
}

.not_loaded{
	height: 50px;
	background-image: url(../../images/spinner.gif);
	background-repeat: no-repeat;
    background-position: center;
	background-size: contain;
}

#sbox-content {
	background-color: #F0F2F5!important;
}

#sbox-content hr {
	border-bottom: 1px solid #e3e3e3;
}

#sbox-content .fonts {
	margin: 20px;
}

#sbox-content .well {
	margin: 0px 10px 10px 10px;
	padding: 15px;
    border: 0 !important;
}

#sbox-content .well:hover {
	cursor: pointer;
}

#sbox-content .well.selected,
#sbox-content .well.selected:hover {
	border: 1px solid #666;
	cursor: auto;
}

#sbox-content .weightAndStyle {
	margin: 20px;
}

#sbox-content .fonts label,
#sbox-content .weightAndStyle label {
	color: #768082;
	width: 20%;
	margin-bottom: 20px;
	text-align: left;
	display: inline-block;
	margin-right: 10px;
}

.textPreview {
	line-height: 28px;
}

.categorysubset .btn-group,
.categorysubset .btn {
	width: 100%;
}

.categorysubset span {
	float: left;
}

.categorysubset b {
	float: right;
}

.categorysubset p {
	margin-bottom: 2px;
}

.googleFontPreview .well .custom_label span {
	line-height: 28px;
}

.googleFontPreview .panel-collapse {
	margin: -5px 15px 20px 15px;
}

.panel-collapse .checkbox p {
	margin: 10px 0px 2px 0px;
}

#sbox-content .search_field {
	margin-bottom: 0px;
}

.input_trigger {
	background-image: url('../../images/search_icon.png');
	width: 22px;
    height: 22px;
    display: inline-block;
    background-repeat: no-repeat;
    margin-bottom: -7px;
    cursor: pointer;
    opacity: 0.7;
}

.input_trigger:hover {
	opacity: 1;
}

.fontsButtonContainer {
	padding: 25px;
}

.fontsButtonContainer .btn {
	background: #fc6e51;
	color: #fff;
}

.fontsButtonContainer .btn:hover {
	background: #e9573f;
}

#attrib-features .curvedContainer .tabcontent:nth-of-type(5) .control-label {
	width: 30px;
}

#attrib-features .curvedContainer .tabcontent:nth-of-type(5) .controls {
	max-width: 820px;
}

.googleFontFilter {
	display: flex;
}

.googleFontFilter > div {
	width: 30%;
	margin-right: 3%
}

.googleFontFilter .search_field {
	display: inline-block;
	width: 210px;
}

/* END HOT FONT style */

/* GRID SYSTEM */
#dispjform_params_gridSystem {
	margin-left: 12px;
}
/* END GRID SYSTEM */

/* LAYOUT SETTINGS */
#sbox-content .layout_settings .control-group div {
	display: table-cell;
    vertical-align: middle;
}

#sbox-content .layout_settings .control-group div.control-label {
	padding: 10px 0;
}

#sbox-content .layout_settings .hotspacer label {
	padding-bottom: 10px;
	font-size: 1rem;
}

body.layout-edit .colorpicker {
	position: absolute;
	z-index: 77777;
	top: 50%;
}

.settings_box {
	position: absolute;
	z-index: 10;
    text-align: left;
    bottom: 0px;
    padding: 10px;
    width: calc(100% - 20px);
    margin-bottom: 10px;
    background-color: #F0F2F5;
}

#sbox-window .layout_settings {
	margin-top: 20px;	
}

.nice_button {
	background-color: #e0e4e9 !important;
    width: 116px;
    font-size: 14px;
    padding: 0;
    color: #768082 !important;
	margin: 3px 0;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
}

.nice_button:hover {
	background-color: #d5dae0 !important;
}

a.nice_button.modal {
	position: relative;
	display: block;
}

.layoutDesigner .input-prepend.input-append * {
	overflow-x: initial!important;
	overflow-y: initial!important;
}

.tooltip {
	z-index: 65559!important;
}

#sbox-content iframe:not(:first-child) {
	display: none!important;
}

ul.minicolors-swatches {
	margin-left: 0;
	margin-top: -4px;
    height: 30px;
}

ul.minicolors-swatches > li {
	position: relative !important;
	margin-right: 5px;
}

input.predefinedcolor ~ .minicolors-panel {
	height: 182px;
	top: -80px !important;
    left: 140px !important;
}

.menusSettingsContainer input.predefinedcolor ~ .minicolors-panel {
	width: 184px !important;
	height: 192px;
	left: 120px !important;
}

.googleFontPreview {
	margin-top: 20px;
}

#features .googleFontPreview {
	display: block;
}

#features input[type='checkbox'] {
	width: auto!important;
}

.selected_fonts {
	padding-bottom: 20px;
}

.selected_fonts input {
	width: 50px!important;
}

.selected_fonts .note {
	padding-top: 30px;
	font-size: 18px;
    font-weight: bold;
}

label#jform_params_fontHot-lbl {
	display: none;
}

.above_fonts {
	font-size: 18px;
    font-weight: bold;
}

#system-message-container {
	position: fixed;
    bottom: 60px;
    right: 30px;
    z-index: 1;
    animation-name: fadeInOut;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-delay: 2s;
}

.sparkymessagebox {
	float: right;
}

.sparkymessagebox button {
	border:0;
	background: transparent;
	cursor: initial;
}

.sparkymessagebox img {
	height: 18px;
	width: 18px;
}

/* Bootstrap Multiselect */

.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}

/* Animations */

@keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}

@keyframes fadeOut {
	from { opacity:1; }
	to { opacity:0; }
}

@keyframes fadeInOut {
	0% { opacity:0; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity:0; }
}

/* Sparky Layout Builder remove */

.remove_block {
	position: absolute;
    top: -3px;
    right: 3px;
    font-size: 18px;
    font-weight: bold;
    color: #CDD4DA!important;
    cursor: pointer;
}

.remove_block:hover,
.remove_block:active,
.remove_block:visited {
	color: #CDD4DA!important;
	text-decoration: none;
}

/* Fast tab change fix */

.ui-tabs .ui-tabs-panel{
	opacity: 1!important;
}

/* Multiple code mirrors on screen fix */

.controls .CodeMirror.cm-s-default {
	display: none;
}

.controls .CodeMirror.cm-s-default:nth-of-type(1) {
	display: block;
	border: 1px solid #ddd;
}

/* Remove left padding on Custom tab */

#attrib-customcode .spacer label {
	padding-left: 15px;
}

.form-horizontal #attrib-customcode .controls {
	margin-left: 0 !important;
}

#attrib-customcode .control-label label {
	min-width: 0 !important;
}

/* Dimension */

div.controls input.sparky_dimension {
	width: 120px;
	float: left;
	margin-right: 5px;
}

div.controls select.sparky_dimension_select {
	width: 120px;
	height: 40px;
    line-height: 1;
}

div.controls select.menu_unit {
	width: 120px;
	height: 45px;
	margin-left: 10px !important;
}

/* menus graphics */

span.menus_graphics {
	display: block;
	position: absolute;
    width: 200px;
    height: 200px;
    margin-left: -200px;
}

span.menus_graphics_acc {
	background-image: url(../../images/admin/menus_graphics_acc.png);
	background-size: contain;
}

span.menus_graphics_navh {
	background-image: url(../../images/admin/menus_graphics_navh.png);
	background-size: contain;
}

span.menus_graphics_navv {
	background-image: url(../../images/admin/menus_graphics_navv.png);
	background-size: contain;
}

span.menus_graphics_offcanvas {
	background-image: url(../../images/admin/menus_graphics_offcanvas.png);
	background-size: contain;
}

span.menus_graphics_mega {
	background-image: url(../../images/admin/menus_graphics_mega.png);
	background-size: contain;
}

#sbox-content .layout_settings .control-group .minicolors-theme-bootstrap.minicolors-position-bottom div.minicolors-panel {
	display: none;
}

/* premium tab */

#attrib-premiumtab .control-group > .controls {
	margin-left: 0 !important;
}

#attrib-premiumtab .control-group > .control-label {
	width: 0;
}

#attrib-premiumtab iframe {
	border:0;
	border-radius: 6px;
	width: 1030px;
	height: 1200px;
}

a[href="#attrib-premiumtab"] {
	font-weight: bold;
}

/* Joomla 3.7.0 */

#features #google li.search-field {
	height: 30px;
    line-height: 30px;
}

.well {
	border:1px solid #ccc !important;
}

/* Joomla 3.8.0 */

.form-horizontal .tabcontent .control-label, {
	width: auto;
}

/* Joomla 4.0.0 */

.main-card #options div[role="tablist"] {
	background: #fc6e51;
	padding-left: 200px;
}

joomla-tab>div[role=tablist] button[role=tab] {
	background-color: transparent;
	margin: 0;
	color: #fff;
	border-right: 1px solid #e9573f;
}

joomla-tab>div[role=tablist] button[role=tab]:hover {
	border-right: 1px solid #e9573f;
}

joomla-tab>div[role=tablist] button[role=tab][aria-expanded=true] {
    font-weight: 400;
    background: #e9573f;
    border-right: 1px solid #e9573f;
}

joomla-tab>div[role=tablist] button[role=tab]:focus:after, joomla-tab>div[role=tablist] button[role=tab]:hover:after, joomla-tab>div[role=tablist] button[role=tab][aria-expanded=true]:after {
	display: none;
}

label[id*="jform_params_subtabstart"] {
	font-size: 24px;
	font-weight: bold;
}

#fieldset-features div.control-group,
#fieldset-fontsettings div.control-group {
	display: none;
}

#fieldset-features div.control-group.field-spacer,
#fieldset-fontsettings div.control-group.field-spacer {
	display: block;
	border-top: 1px solid #ddd;
    margin-bottom: 0;
}

#fieldset-features div.control-group.field-spacer label,
#fieldset-fontsettings div.control-group.field-spacer label {
	cursor: pointer;
	background: url(../../images/arrow_down.png) no-repeat right;
}

#fieldset-features div.control-group.field-spacer.active label,
#fieldset-fontsettings div.control-group.field-spacer.active label {
	color: #fc6e51;
	background: url(../../images/arrow_up.png) no-repeat right;
}