:root {
	--wizard-side-menu-top-offset: 50px;
	--wizard-side-menu-width: 329px;
	--wizard-top-menu-height: 50px;
	--wizard-top-menu-bg: #242b2f;
	--wizard-side-menu-height: calc(100vh - var(--wizard-side-menu-top-offset));
	/**
	 * In some places we needed to add more spacing from the top because the
	 * close button to the homepage tab was placed above some elements
	 * so we fixed it with this variable.
	 *
	 * Note: In the future when we build static header that will contain
	 * the close, back, and more buttons that need to be always
	 * fixed to the top we remove this fix
	 */
	--homepage-tab-close-btn-height: 20px;
}
/**
 * IOS Device Fix- We don't have scroll on some IFrames
 * so we fix it only for IOS Tablet and IPhone.
 */
html[data-ios-device] #moduleWindow .modal-body,
html[data-ios-device] #AddModuleWin .modal-body {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    max-height: calc(100vh - 200px);
}

.navbar {
    display: none;
}
.footer {
	display: none;
}
.navbar-fixed-top + .main-container {
    padding:0;
}

/** 
 * Disable Text Select 
 * Source: https://stackoverflow.com/a/4407335/469161;
 */
#wizardTopToolbar,
.wizardSideTabs,
#readyTextLayoutsTabs,
.t-h-e-header,
.panel-heading {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

/**
 * Centering Percentage Width/Height Elements
 * Source: https://css-tricks.com/centering-percentage-widthheight-elements/
 * 
 * We use bottom & right instead of top & left because an IE scrollbar issue:
 * http://stackoverflow.com/questions/27000492/css3-transform-property-working-differently-in-internet-explorer 
 */
#main-container {
 	background-color: #f1f4f5 !important;
}
body.modal-open.blurBackground #main-container {
	filter:blur(3px);
}
.transform-centering {
    position: absolute;	
	bottom: 50%;
    right: 50%;
    transform: translate(50%,50%);
    -webkit-transform: translate(50%,50%);
}
html[dir=rtl] .transform-centering {
	top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

@media only screen and (min-width: 992px) {
  .navbar-container {
      padding-left: 0px;
      padding-right: 0px;
  }
}

.page-header {
	margin-top:10px;
}

/* Wizard Loader
----------------------------------*/
#wizardLoader {
    transition: 0.5s; /* if you change also update the setTimeout on Wizard.loader class */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 70px;
    background-color: #f1f4f5 !important;
    color: #141A1B;
    opacity: 1;
}
#wizardLoader .w-l-text {
	font-size: 0.3em;
	margin-top: 20px;
}
#wizardLoader.hide-loader {
	opacity: 0;
}

/* Homepage Layouts Box
----------------------------------*/
#allHomepageLayout .moduleButton .modulehHader {
    background-color: #272C33;
    color:white;
    width: 100%;
    padding: 0px 5px;
    line-height: 35px;
    border-radius: initial;
}
#allHomepageLayout .moduleButton {
	height:210px;
    border: 1px solid #ECECEC;
    border-radius: 5px;
    padding:0;
	cursor: pointer;
	margin:0 0 3px 0;
}
#allHomepageLayout .moduleButton {
	height:257px;
}
#allHomepageLayout .moduleButton .image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 220px;
}

/* Add Module (page)
----------------------------------*/
#allModules {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#addModuleFilterForm #addModuleFilter {
	border: 1px solid #EBECEE;
	border-radius: 4px 0 0 4px !important;
	border-right-width: 0;
	padding: 16px;
	height: 100%
}
html[dir="rtl"] #addModuleFilterForm #addModuleFilter {
	border-radius: 0 4px 4px 0 !important;
	border-right-width: 1px;
	border-left-width: 0;
}
#addModuleFilterForm span {
	border: 1px solid #EBECEE;
	border-radius: 0 4px 4px 0 !important;
	border-left-width: 0;
	background-color: #FFFFFF;
	padding: 16px;
}
html[dir="rtl"] #addModuleFilterForm span {
	border-radius: 4px 0 0 4px !important;
	border-right-width: 0;
	border-left-width: 1px;
}
@media (min-width: 767px) {
	.s123-add-module-sidebar {
		position: fixed !important;
	}
}
/* Categories */
.moduleCat {
	cursor: pointer;
}
@media (max-height: 700px) {
	#moduleTagsList .moduleCat {
		padding: 6px 15px;
		font-size: 13px;
	}
}
/* Modules Column */
.add-page-module-column {
	padding-left: 4px;
	padding-right: 4px;
}
@media (min-width: 680px) { 
	.add-page-module-column {
		padding-left: 12px;
		padding-right: 12px;
	}
}
/* Modules Box */
.add-page-module-box {
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
	background-color: #F2F7FC;
	border-radius: 4px;
}
.add-page-module-box:hover {
	border-color: #337ab7;
}
.add-page-module-box {
	cursor: pointer;
}
/* Title */
.add-page-module-title {
	padding: 4px;
	margin: 0;
    background-color: var(--default_color);
    color: #FFFFFF;
    text-align: center;
	font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (min-width: 767px) { 
	.add-page-module-title {
		padding: 15px 20px;
		font-size: 16px;
		line-height: 19px;
	}
}
/* Image */
.add-page-module-image {
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #FFFFFF;
	border: 1px solid #EBECEE;
	border-top-width: 0;
	box-sizing: border-box;
	border-radius: 0px 0px 4px 4px;
	min-height: 158px;
}
.cat-app-market .add-page-module-image {
    padding-bottom: 50px;
}
.add-page-module-image img {
	width: 100%;	/* IE11 Fix */
	max-width: 100%;
	max-height: 100%;
}
.add-page-module-buttons {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	text-align: center;
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    cursor: auto;
}
.add-page-module-buttons > a {
	margin: 0 2px;
}






/* Add System Plugin
----------------------------------*/
@media (min-width: 767px) {
	.s123-add-plugin-sidebar {
		position: fixed;
	}
}
#pluginsCategoriesList > li {
	cursor: pointer;
}
#pluginsList .filtered-item {
	display: none;
}
#pluginsList .plugin-container {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
}
@media (min-width: 767px) {
	#pluginsList .plugin-container {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 992px) {
	#pluginsList .plugin-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Wizard
----------------------------------*/
.disableModule {
	background-color: lightgrey;
	opacity: 0.6;
	pointer-events: none;
	display: inline-block;	/* EDGE ISSUE - https://stackoverflow.com/a/43656172/469161 */
}
.disableModule[data-rel="tooltip"] {
	pointer-events: all;
	cursor: not-allowed;
	background: transparent;
}
.disable-language-website-settings {
    background-color: rgba(211, 211, 211, 0.14) !important;
    color: black !important;
}
.premiumFeature {
	position: relative;
}
.premiumFeatureDesign {
    background: rgba(255, 82, 58, 0.64);
	z-index: 20;
	width: 100%;
	height: 100%;
	cursor:pointer;
}
.premiumFeatureDesign .lockMessage {
	position: absolute;
    right: 5px;
    top: 5px;
}
html[dir=rtl] .premiumFeatureDesign .lockMessage {
    right: auto;
    left: 5px;
}
.premiumFeatureDesign.p-f-transparent-bg {
	cursor: pointer;
	background: none; 
	outline: none;
}
.premiumFeatureDesign.p-f-transparent-bg.p-f-hide-btn .btn {
	display: none;
}
.p-f-crown-icon {
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: #2e383e !important;
    border: 1px solid transparent;
    height: 100%;
    border-radius: 0;
}
.p-f-crown-icon:hover,
.p-f-crown-icon:active, 
.p-f-crown-icon:focus:active,
.p-f-crown-icon:focus:hover {
	background: #2e383e !important;
}

.more-fonts-upgrade-box > a.btn {
	white-space: normal;
	display: flex; 
	align-content: center; 
	align-items: center;
	justify-content: center;
}
.more-fonts-upgrade-box > a.btn:active:hover,
.more-fonts-upgrade-box > a.btn:active:focus {
	border-color: #0597F2;	
}
.upgrade-crown {
	margin-left: 9px;
}
.upgrade-crown .fa-crown-accordion {
	right: auto;
}
html[dir="rtl"] .upgrade-crown {
	margin-left: 0;
	margin-right: 9px;
}
.fa-crown-accordion {
    position: absolute;
    top: calc(50% - 12px);
    right: 10px;
}
.manage-language-container {
	display: flex;
}
.manage-language-container .fa-crown-accordion {
	top: 18px;
}

.colorBox {
	width:20px;
	height:20px;
	cursor: pointer;
	float: left;
}
.themeColors {
	float: left;
	margin: 2px;
	border: 1px solid #ccc;
}
.themeColors:hover {
	border:1px solid #333;
}
.themeColors.active {
	border: 1px solid #337ab7;
}

#wizardBox {
	position: absolute;
	left: 0px;
	top: var(--wizard-top-menu-height);
	width: var(--wizard-side-menu-width);
	height: 100%;
	/**
	 * Bug Fix - The close button of the tab was covering the wizard top
	 * menu drop down so we give z-index to the wizard box here
	 */
	z-index: 0;
}

#wizardBox hr {
	border-top-color: #636363;
}

html[dir="rtl"] #wizardBox {
	left: auto;
	right: 0px;
}
.tabbable.tabs-left,.tabbable.tabs-right {
	position: relative;
}
#previewBox .wizardSideTabs {
    position: relative;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    align-items: center;
    justify-content: center;
	/* Added to prevent white spaces between the LI tags in IE */
	font-size: 0;
}
#previewBox .wizardSideTabs > li {
	font-size: 0;
	height: 100%;
	display: flex;
	align-items: center;
}
#previewBox .wizardSideTabs li a {
	outline: 0;
}
html[dir=rtl] .wizardSideTabs {
	float: right;
}
#previewBox .wizardSideTabs li > a,
#previewBox .wizardSideTabs > li > button {
  	padding: 0px 15px;
    margin: 0;
	display: block;
	font-size: 14px;
	text-transform: capitalize;
	letter-spacing: .08em;
	color: rgba(255,255,255,.7);
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: background-color .2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#previewBox .wizardSideTabs > li > a > span {
	margin: 0 auto;
	display: block !important;
	padding: 0;
}
#previewBox .wizardSideTabs > li {
	text-align: center;
}
#previewBox .wizardSideTabs > li > a:hover {
	color:white;
	text-decoration: none;
}
#previewBox .wizardSideTabs > li.active > a,
#previewBox .wizardSideTabs > li > a[aria-describedby^="popover"] {
	color: white;
}
#previewBox .wizardSideTabs > li > a > i,
#previewBox .wizardSideTabs > li > div > a > i,
#previewBox .wizardSideTabs > li > div > button > i {
	font-size: 120% !important;
	padding: 3px 0 5px 0;
	display: none;
}
#previewBox .wizardSideTabs > li > a > svg,
#previewBox .wizardSideTabs > li > div > a > svg,
#previewBox .wizardSideTabs > li > div > button > svg {
	margin: 3px 0;
}
#previewBox .wizardSideTabs > li.wizard-homepage-tab {
	display: none;
}
#wizardBox .tab-content {
	background-color:#2E383E !important;
	color:white;
	border:0;
	display: none;
	border-right: 1px solid #2E383E;
	overflow-x: hidden;
	padding: 4px 12px 0;
    border: 1px solid transparent;
	transition: border-color ease-in-out 0.5s;
}
#wizardBox .tab-content.flicker {
	border: 1px solid #FF9B05;
}
#wizardBox .tab-content .close-wizard-tab-btn {
	font-size: 19px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    position: absolute;
    right: 7px;
    top: 3px;
    z-index: 251;
}
html[dir=rtl] #wizardBox .tab-content .close-wizard-tab-btn {
    right: auto;
    left: 7px;
}
#wizardBox .tab-content[data-active-tab="pagesTab"] .close-wizard-tab-btn {
	position: fixed;
    right: unset;
    left: 290px;
    top: 55px;
}
html[dir=rtl] #wizardBox .tab-content[data-active-tab="pagesTab"] .close-wizard-tab-btn {
	right: unset;
	left: unset;
}
#wizardBox .tab-content .close-wizard-tab-btn:hover {
	color: #eee;
}
#wizardBox .tab-content[data-active-tab="homepageTab"] {
	overflow: hidden;
}
#wizardBox .tab-content .panel-group {
	margin-bottom: 0;
}
#wizardBox .tab-content .tab-pane.mobile-accordion-btn-style .accordion-title {
	display: none;
}
#wizardBox .tab-content .tab-pane:not(.mobile-accordion-btn-style) .accordion-title {
	font-weight: 500;
	font-size: 20px;
	color: #F2F7FC;
	padding: 20px 0 22px;
}
#homepageTab {
	padding-bottom: 0px !important;
}
#homepageFilterDesign .filter-button {
	position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#homepageFilterDesign .filter-button > i {
	visibility: hidden;
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 10;
	color: #87b87f;
	font-size: 30px;
}
html[dir="rtl"] #homepageFilterDesign .filter-button > i {
	right: auto;
	left: 5px;
}
#homepageFilterDesign .filter-button > i:after{
	content: '';
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
#homepageFilterDesign .filter-button.active > i {
	visibility: visible;
}
.s123-collapse-settings #filterHomepageOptions {
	position: relative;
}
#homepageFilterDesign .filterEffectClass {
	position: relative;
}


html[dir=rtl] #wizardBox .tab-content {
	border-left: 1px solid #272C33;
	border-right: 0;
}
#wizardBox .one-page-no-popups-box {
	margin-left: 0;
	margin-top: 12px;
}
html[dir=rtl] #wizardBox .one-page-no-popups-box {
	margin-left: 0;
	margin-right: 30px;
}

/* Wizard Accordion
----------------------------------*/
/* switch arrows on extended accordion */
.wizard-accordion .panel-heading .accordion-toggle:after {
	font-family: 'Glyphicons Halflings';
	content: "\e259";
	float: left;
	padding-right: 7px;
}
.wizard-accordion .panel-heading .accordion-toggle.collapsed:after {
	content: "\e258";
}
html[dir=rtl] .wizard-accordion .panel-heading .accordion-toggle:after {
	float: right;
	padding-right: 0;	
	padding-left: 7px;	
}
html[dir=rtl] .wizard-accordion .panel-heading .accordion-toggle.collapsed:after {
	content: "\e257";
}
.wizard-accordion.accordion-style1.panel-group .panel,
.wizard-accordion.accordion-style1.panel-group .panel .collapse {
	background-color:#2E383E;
}
.wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle,
.wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle.collapsed {
    color: #F2F7FC;
    font-weight: 500;
    background-color: transparent;
    text-transform: capitalize;
    font-size: 14px;
    border-bottom: 1px solid #3B4555;
    padding: 20px 0 18px;
    margin: auto 10px;
}
.wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle:after,
.wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle.collapsed:after {
	font: normal normal normal 14px/1 FontAwesome;
	content: '\f105' !important;
    float: right;
    padding-right: 0;
}
html[dir=rtl] .wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle:after,
html[dir=rtl] .wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle.collapsed:after {
	content: '\f104' !important;
    float: left;
    padding-left: 0;
}
.wizard-accordion.accordion-style1.panel-group .panel-heading .accordion-toggle:hover {
    color: rgba(255,255,255,0.85);
    background-color: transparent;
    text-decoration: none;
}
.wizard-accordion.accordion-style1.panel-group .panel {
	border-color: #636363;
}
.wizard-accordion.accordion-style1.panel-group .panel.p-m-b-wizard-accordion-flash {
	border-color: #f0ad4e;
}

/**
 * Orange border - Add orange border using box shadow because some 
 * elements may have design we don't want to change.
 *
 * Solution: https://stackoverflow.com/a/14804041
 */
#wizardBox .highlight-element {
	box-shadow: 0 0 0 1px #f0ad4e;
}

/**
 * Background >> Upload File >> Bug-fix - The background upload file drop-down 
 * is higher then others and created a vertical scroll when opened so we fix it.
 */
#backgroundOptionsTab > .panel-body {
	min-height: calc( 100vh - 20px );
}

/**
 * Chosen Select >> Bug-fix - The chosen select drop-down is higher and created
 *  a vertical scroll when opened so we fix it at the related tabs.
 */
#moreLanguages > .panel-body,
#countryLocale > .panel-body {
	min-height: 400px;
}

.wizard-accordion.accordion-style1.panel-group .panel-body,
.wizard-accordion.accordion-style1.panel-group .collapse.in > .panel-body {
	border:0;
}

.panel-default > .panel-heading {
	background-color: transparent;
}
#previewBox .wizardSideTabs .active [data-toggle=mytabs] {
	/*border-right-color: #c5d0dc !important;*/
}
#previewBox .wizardSideTabs {
	border-bottom: 0;
}
/* Website Language Icon Size - Unlike all icons this icon is a font type so in order
to set the size we fix the font size property
------------------*/
#previewBox .wizardSideTabs .wizard-settings-tab a[data-open-accordion="moreLanguages"] i {
    font-size: 1.2em;
}
#CloseWizardButton {
	position: fixed;
	margin-left: 323px;
	z-index:10;
	margin-top: -20px;
	display: none;
}
html[dir=rtl] #CloseWizardButton {
    margin-left: 0;
    margin-right: 323px;
}
#maskAllScreen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.54);
	z-index: 9999;
	display: none;
}
#maskAllScreen .text {
	color: white;
	font-size: 40px;
}
#wizardScreenWidth {
	width: 100%;
	position: relative;
}

/* Preview iFrame
----------------------------------*/
#previewBox {
	padding:0;
	position: absolute;
	left: 0;
	top: var(--wizard-top-menu-height);
	width: 800px;
	border: 0;
	margin: 0;
	display: none;
	z-index: 100;
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari and Chrome */
	-o-transition: all 1s; /* Opera */
	transition-property: width, left, right;
}
#websitePreviewIframe {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
}
#websitePreviewIframe[data-device-type="mobile"] {
	box-shadow: 0px 4px 3px 2px #c5c5c5; 
}
#previewLoadingMessage {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: #000;
	opacity: 0.6;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
#previewLoadingMessage.structuresHandler {
	opacity: 1;
}
#previewButtonsLI li > a {
	cursor: pointer;
}
#preview-devices-buttons {
	margin-top: 35px;
}
#preview-devices-buttons .p-d-btn {
	cursor: pointer;
}

/* Layouts
----------------------------------*/
.websiteLayout {
	padding: 5px 10px;
	cursor:pointer;
}
.websiteLayout .list-group-item {
    width: auto;
	padding: 0px;
	margin: 10px;
	display: inline-block;
    text-align: center;
	background: transparent;
	border-color: transparent;
	border-radius: 4px !important;
}
.websiteLayout img {
	width: 85px;
	height: auto;
	padding: 0;
}
.websiteLayout a.list-group-item:hover,
.websiteLayout a.list-group-item:focus {
	background: #636e81;
	border-color: transparent;
}
.websiteLayout .list-group-item.active,
.websiteLayout .list-group-item.active:hover,
.websiteLayout .list-group-item.active:focus {
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
	box-shadow: 0 0px 2px 6px #428bca;
}

/* Modules
----------------------------------*/
.moduleBoxRemove {
	position: absolute;
	bottom: 3px;
	right: 3px;
	cursor:pointer;
}

.moduleSortList {
	position: relative;
}
.moduleSortList .boxClick {
	position: absolute;
	cursor: move;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	z-index: 1;
}
.moduleSortList .input-group {
	z-index: 2;
}
.moduleSortList .cards_buttons {
    background-color: transparent;
    border: 0;
    color: #6f6f6f;
    cursor:pointer;
    display: flex;
    font-size: 12px;
}
.moduleSortList .disable {
	color:#fff;
}
.moduleSortList .smallModuleName {
    position: absolute;
    left: 10px;
    bottom: 6px;
}
.moduleSortList .smallModuleName a {
    color:#444;
}
html[dir=rtl] .moduleSortList .smallModuleName {
    left: auto;
    right:10px;
}

/* Support up to 5rem width for forgeign languages */
.pages_buttonsBox .manageWin#homepageAlternativeName_edit,
.pages_buttonsBox .manageWin.modulesEditButton {
	width: max-content;
	max-width: 5rem;
}

/* Support up to 5rem width for forgeign languages */
#pagesTab.resize-font-sm .pages_buttonsBox .manageWin#homepageAlternativeName_edit span,
#pagesTab.resize-font-sm .pages_buttonsBox .manageWin.modulesEditButton span {
	font-size: 9px;
}

#pagesTab.resize-button-font-md #addNewPageModule span {
	font-size: 13px;
}



/* Ensure the button itself doesn’t block shrinking */
.wizard:not([data-lang="de"]) .pages_buttonsBox .manageWin#homepageAlternativeName_edit div,
.wizard:not([data-lang="de"]) .pages_buttonsBox .manageWin.modulesEditButton div {
	overflow: hidden;
	text-overflow: ellipsis;
}

html:not([data-device="mobile"]) .wizard:not(.site-editor-b) #card_homepage #homepageAlternativeName_edit,
html:not([data-device="mobile"]) .moduleSortList .modulesEditButton[data-moduletypenum="1000"] {
	display: none;
}

.manageWin {
    text-transform: uppercase;
    background-color: rgba(111, 110, 110, 0.5) !important;
    border: 1px solid #5D5D5D;
    border-radius: 0;
    font-size: 10px;
    max-width: 65px;
}
.manageWin:hover {
    background-color: rgba(111, 110, 110, 0.5) !important;
    border: 1px solid #5D5D5D !important;
}
.manageWin span {
	line-height: 1;
}
[data-lang="de"] .manageWin span {
	font-size: 9px;
}



/*
.designModuleButton.manageWin, .module-settings-button-container.manageWin {
	opacity: 0;
	transition: opacity 0.6s;
}
li.moduleSortList.list-group-item:hover .designModuleButton.manageWin, li.moduleSortList.list-group-item:hover .module-settings-button-container.manageWin {
	opacity: 1;
}
*/



.smallModuleName {
	position: absolute;
	bottom: 3px;
	right: 3px;
	cursor:pointer;
	font-size: 8px;
}


.homeTextColor {
margin: 2px;
border: 2px solid #ccc;
display: inline-block;
float: left;
}
.homeTextColor.active {
border: 2px solid #337ab7;
}



.disableSaveButtons {
	background-color: lightgrey;
	opacity: 0.6;
	pointer-events: none;
}
.SubmitButtonsArea .dropdown-menu .eit-btn {
	display: inline-flex !important;
	background-color: transparent;
	padding: 10px 13px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	width: 100%;
    align-items: center;
    gap: 5px;
	white-space: nowrap;
	transition: color .2s ease,background-color .2s ease;
}
.SubmitButtonsArea .dropdown-menu .eit-btn:hover {
    color: #0583F2;
    background-color: #f5f5f5;
}
.SubmitButtonsArea .eit-btn:focus, 
.SubmitButtonsArea .eit-btn:active:focus, 
.SubmitButtonsArea .eit-btn.active:focus,
.SubmitButtonsArea .eit-btn.focus, 
.SubmitButtonsArea .eit-btn:active.focus, 
.SubmitButtonsArea .eit-btn.active.focus {
	outline: none;
}
.SubmitButtonsArea .eit-buttons-box.saving-loading {
	opacity: 0.6;
	pointer-events: none;
}
.SubmitButtonsArea .eit-loading {
	width: 100px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}
html[dir=rtl] .SubmitButtonsArea .eit-loading {
    right: 40px;
    left: auto;
}
.SubmitButtonsArea .eit-loading i {
	position: absolute;
	top: calc(50% - 21px);
}
.SubmitButtonsArea .eit-separator {
	display: inline-block;
	margin-right: 20px; 
}

/* Mobile Edit Items Toolbar */
@media (max-width: 767px) {
	.SubmitButtonsArea.form-actions {
		/* set same padding as `html[data-device="mobile"] .modules-screen .container` */
		padding: 12px;
	}
	.SubmitButtonsArea.form-actions .eit-buttons-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.SubmitButtonsArea .eit-buttons-container {
	position: relative;
}


/* Remove next and prev from the colorbox modal */
#cboxPrevious, #cboxNext {
	display:none !important;
}

/* Fix datetimepicker bug */
.bootstrap-datetimepicker-widget .col-md-6 {
	width:50%;
	display: table-cell;
	vertical-align: top;
}

a[data-rel=tooltip] {
	color: #010B40;
}
a[data-rel=tooltip]:focus {
	outline: none;
}

/* Remove CSS transition from an object */
.no-transition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/* Module Items List
----------------------------------*/
div.modules-items-nav-bottons {
	width: 100%;
	margin-bottom: 10px;
	display: block;
	clear: both;
	text-align: center;
	text-transform: capitalize;
}


/* Pages Tab
----------------------------------*/
#card_homepage {
    margin: 15px 4px;
    font-size: 16px;
    text-transform: uppercase;
    color:#fff;
    border-bottom: 1px solid #525252;
    border-radius: 5px !important;
    background-color: #141a1b;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    margin: 7px 4px;
    border: 0;
    border-bottom: 3px solid #000000;
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 15px 0;
    margin-top: 18px;
    cursor: pointer;
    position: relative;
}

.wizard #pagesTab[data-singe-page="false"][data-landing-page="false"][data-pages-n-i-m-o-h-tab="showOthersTab"]:not([data-rich-page-mode="true"]) #card_homepage,
.wizard #pagesTab[data-singe-page="false"][data-landing-page="false"][data-pages-n-i-m-o-h-tab="showPagesTab"]:not([data-rich-page-mode="true"]) #card_homepage {
	margin-top: 72px;
}
#card_homepage:hover {
	background-color: #505866;
}
#card_homepage .pages_dragButton {
	cursor: pointer !important;
}
#card_homepage .pages_dragButton svg {
    color: #c5c5c5;
    text-align: center;
}
#pagesTab {
	padding-top: 50px;
}
.wizard #pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="true"][data-pages-n-i-m-o-h-tab="showPagesTab"]:not([data-rich-page-mode="true"],.pages-recycle-active,.inline-module-active) {
	padding-top: 105px;
}
#pagesTab.pages-recycle-active,
#pagesTab.inline-module-active {
	padding-top: 0px;
}
#pagesTab[data-rich-page-mode="true"].inline-module-active > .t-h-e-header.t-h-e-manual-static,
#pagesTab[data-rich-page-mode="true"].pages-recycle-active > .t-h-e-header.t-h-e-manual-static {
	display: none;
}
#addNewPageModule {
    width: auto;	/* We set dynamic width user JS */
    padding: 11px 0;
    top: var(--wizard-top-menu-height);
    left: 90px;
    z-index: 250;
	position: fixed;
    background: #2E383E;
    text-align: center;
    margin-top: 1px;
}
@media (min-width: 479px) {
	#addNewPageModule {
		padding: 16px 0;
	}
}
#addNewPageModule .dropdown-menu {
	max-width: calc( var(--wizard-side-menu-width) - 50px);
}
#addNewPageModule .dropdown-menu li > a {
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pages-recycle-btn {
	background-color: transparent !important;
	color:#fff !important;
	border-width: 1px !important;
	border-style: solid;
	border-color: transparent;
    padding: 7px 9px;
    margin-left: 5px;
    font-size: 16px;
}
html[dir=rtl] .pages-recycle-btn {
    margin-left: auto;
    margin-right: 5px;
}
.pages-recycle-btn.highlight-btn,
.pages-recycle-btn.highlight-btn i {
	animation: highlight-btn 1.0s 1 ease 0.0s;   
}
/* highlight button */
@keyframes highlight-btn {
	0% { border-color: #fff; color: #fff; } 
	50% { border-color: #f0ad4e; color: #f0ad4e; }
	100% { border-color: #fff; color: #fff; }
}

.pages_PageBox {
	display:flex;
	align-items: center;
	text-align: center;
	width: 100%;
}
.pages_dragButton {
	width: 25px;
	text-align: center;
	z-index: 2;
	cursor: move;
}
.pages_dragButton a {
	color: #c5c5c5;
	text-align: center;
}
.pages_buttonsBox {
	flex:1 1 auto;
}
.pages_RemoveButtons {
	width: auto;
    display: flex;
    align-items: center;
    z-index: 2;
    justify-content: flex-end;
}
.pages_RemoveButtons a,
.pages_RemoveButtons div {
	color: #c5c5c5 !important;
	margin: 0 5px !important;
	text-decoration: none;
}
li.moduleSortList.list-group-item {
    border-radius: 3px !important;
    background-color: #141a1b;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    margin: 7px 4px;
    border: 0;
    border-bottom: 3px solid #000000;
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 15px 0;
}
li.moduleSortList.list-group-item:hover {
	background-color: #505866;
}
li.moduleSortList.list-group-item[data-moduletypenum="78"] > ul > li.moduleSortList.list-group-item {
    background-color: #1d3235;
}
li.moduleSortList.list-group-item[data-moduletypenum="78"] > ul > li.moduleSortList.list-group-item:hover {
    background-color: #505866;
}
li.moduleSortList.list-group-item > ul {
	width: 97%;
	margin: 0;
}
#card_homepage.p-active,
li.moduleSortList.list-group-item.p-active {
	background-color: #505866;
}
#card_homepage.p-active {
	position: relative;
    z-index: 1;
}
#card_homepage.p-active:before,
li.moduleSortList.list-group-item.p-active:before {
	content: " ";
	height: 100%;
	width: 7px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	border-left: 1px solid #f0ad4e;
	border-radius: 3px;
}
html[dir=rtl] #card_homepage.p-active:before,
html[dir=rtl] li.moduleSortList.list-group-item.p-active:before {
	left: auto;
	right: 0;
	border-left: 0;
	border-right: 1px solid #f0ad4e;
}

/* Hide module */
li.moduleSortList.list-group-item[data-module-hide-front-module="1"] {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
	background-image: url('/files/images/not_active2.png');
}

/** 
 * Page Modules Icons
 */
li.moduleSortList .pages-labels-icons-box {
	color:#ccc;
	position: absolute;
    top: -2px;
    left: 3px;
}
html[dir=rtl] li.moduleSortList .pages-labels-icons-box {
	right: 3px;
    left: auto;
}
li.moduleSortList .pages-labels-icons-box > span {
	margin-right: 5px;
}
html[dir=rtl] li.moduleSortList .pages-labels-icons-box > span {
	margin-right: 0;
	margin-left: 5px;
}
li.moduleSortList.list-group-item .pages-side-icons-box {
	display: flex;
	flex-direction: column;
	row-gap: 14px;
	justify-content: flex-start;
	position: absolute;
	top: 4px;
	right: 0;
}
li.moduleSortList.list-group-item .pages-side-icons-box {
    cursor: move;
}
li.moduleSortList.list-group-item .pages-side-icons-box .cards_buttons.delete {
	visibility: hidden;
}
li.moduleSortList.list-group-item .pages-side-icons-box .cards_buttons.delete.del-btn-clicked,
li.moduleSortList.list-group-item:hover > .pages_PageBox .pages-side-icons-box .cards_buttons.delete {
	visibility: visible !important;
}
li.moduleSortList.list-group-item .pages-side-icons-box .cards_buttons.delete.del-btn-clicked,
li.moduleSortList.list-group-item .pages-side-icons-box .cards_buttons.delete:hover {
	color: var(--danger_color) !important;
}
html[dir="rtl"] li.moduleSortList.list-group-item .pages-side-icons-box {
	right: unset;
	left: 0;
}
li.moduleSortList.list-group-item .pages-labels-icons-box .pages-hide-page-icon {
	position: relative;
	display: none;
}
li.moduleSortList.list-group-item .pages-side-icons-box .pages-on-homepage-only-icon {
	visibility: hidden;
}
li.moduleSortList.list-group-item[data-module-hide-front-module="1"]  .pages-labels-icons-box .pages-hide-page-icon {
	display: inline-block;
}
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="158"] > .pages_PageBox .pages-side-icons-box .pages-on-homepage-only-icon,
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="157"] > .pages_PageBox .pages-side-icons-box .pages-on-homepage-only-icon,
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-module-mp-show-in-home="1"][data-module-show-in-footer="0"][data-module-mp-show-in-menu="0"] > .pages_PageBox .pages-side-icons-box .pages-on-homepage-only-icon {
	visibility: visible;
}
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="158"],
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="157"],
#pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-module-mp-show-in-home="1"][data-module-show-in-footer="0"][data-module-mp-show-in-menu="0"] {
	border-right: 2px solid var(--warning_color);
}
html[dir="rtl"] #pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="158"],
html[dir="rtl"] #pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-moduletypenum="157"],
html[dir="rtl"] #pagesTab[data-singe-page="false"][data-landing-page="false"][data-multi-page-v2="false"] #sortable li.moduleSortList.list-group-item[data-module-mp-show-in-home="1"][data-module-show-in-footer="0"][data-module-mp-show-in-menu="0"] {
	border-right: 0;
	border-left: 2px solid var(--warning_color);
}
#pagesTab #sortable,
#pagesTab #sortable li.moduleSortList.list-group-item[data-moduletypenum="78"] ul[data-sortable-id^="p-s-l-"] {
	padding-bottom: 10px;
	padding-inline-start: 0;
}
#pagesTab #sortable li.moduleSortList.list-group-item[data-moduletypenum="78"] ul[data-sortable-id^="p-s-l-"] {
	margin-top: 8px;
}
#pagesTab #sortable[data-sortable-id^="p-s-l-"] li.sortable-drag {
	opacity: 0.5;
	cursor: move !important;
}
html[data-device="mobile"] li.sortable-drag[data-moduletypenum="128"] > ul,
#pagesTab #sortable ul[data-sortable-id^="p-s-l-"] li.sort-not-allowed ul,
#pagesTab #sortable[data-sortable-id^="p-s-l-"] > li.sort-not-allowed ul {
	display: none;
}
#pagesTab #sortable ul[data-sortable-id^="p-s-l-"] li.sort-not-allowed::after,
#pagesTab #sortable[data-sortable-id^="p-s-l-"] > li.sort-not-allowed::after {
	content: attr(data-not-allowed-msg);
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    position: absolute;
    background-color: #f2dede !important;
	border-color: #ebccd1 !important;
	color: #a94442 !important;
	z-index: 2;
	font-weight: bold;
	font-size: 14px;
	border-radius: 0;
	padding: 15px;
}
#pagesTab #sortable[data-sortable-id^="p-s-l-"] li.sortable-ghost,
#pagesTab #sortable li[data-moduletypenum="128"] ul[data-sortable-id^="p-s-l-"] li.sortable-ghost {
	border: 0px;
}
#pagesTab #sortable[data-sortable-id^="p-s-l-"] li.sortable-ghost:not(.sort-not-allowed)::after,
#pagesTab #sortable li[data-moduletypenum="128"] ul[data-sortable-id^="p-s-l-"] li.sortable-ghost:not(.sort-not-allowed)::after {
	content: "";
	background-color: #3d464a !important;
	border: 2px dashed #141a1b !important;
	width: 100%;
	height: 100%;
	top: 0px;
    left: 0px;
    position: absolute;
	z-index: 1000;
}
#pagesTab #sortable li[data-moduletypenum="128"] .ui-sortable .pages-on-homepage-only-icon,
#pagesTab[data-pages-n-i-m-o-h-tab="showOthersTab"] li.moduleSortList.list-group-item[data-module-mp-show-in-home="0"] > .pages_PageBox .pages-side-icons-box .pages-on-homepage-only-icon {
	visibility: hidden;
}
/* rich page sections do not shows at homepage - we hide that icon */
#pagesTab[data-rich-page-mode="true"] .pages-side-icons-box .pages-on-homepage-only-icon {
	visibility: hidden;
}
li.moduleSortList.list-group-item[data-module-mp-show-in-home="0"] > .pages-side-icons-box .pages-on-homepage-only-icon:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 6px;
    left: 6px;
    border-top: 1px solid #fff;
    transform: rotate( 304deg);
}
/* homepage card */
#card_homepage[data-show-in-menu="0"] .pages-hide-page-icon {
	display: inline-block;
}
li.moduleSortList.list-group-item[data-moduletypenum="78"] {
	background-color: #141a1b;
}
li.moduleSortList.list-group-item[data-moduletypenum="78"]:hover {
	background-color: #141a1b;
}
/* Fix a bug - It's hard to position element as first under category */
li.moduleSortList.list-group-item[data-moduletypenum="78"] > .form-group {
	padding-bottom: 10px;
}
/* External link module message about that this page is not displayed on the preview */
li.moduleSortList.list-group-item .external-link-module-msg {
    padding: 0 5px;
    width: 100%;
	display: none;
	color: rgba(255,255,255,.5);
}
li.moduleSortList.list-group-item.p-active:not([data-moduletypenum="78"]) .external-link-module-msg {
	display: block;
}
/* External link module in category not displayed on the module settings button */
li[data-moduletypenum="78"].moduleSortList.list-group-item li[data-moduletypenum="108"] .module-settings-button-container {
	display: none;
}

/* Inputs */
li.moduleSortList.list-group-item .module_name, li.moduleSortList.list-group-item .promoModuleInput, #homepageAlternativeName {
	width: 110px;
	padding: 3px;
	background-color: #141a1b;
	color: #fff;
	border: 1px solid #5D5D5D;
    letter-spacing: 0.5px;
}
@media (max-width: 375px) {
	li.moduleSortList.list-group-item .module_name, li.moduleSortList.list-group-item .promoModuleInput, #homepageAlternativeName {
		width: 150px;
		font-size: 13px;
	}
}
@media (max-width: 340px) {
	li.moduleSortList.list-group-item .module_name, li.moduleSortList.list-group-item .promoModuleInput, #homepageAlternativeName {
		width: 130px;
		font-size: 12px;
	}
}
input[readonly].promoModuleInput {
    background-color: #141a1b !important;
    color: #5f5f5f !important;
}

/* Helper */
li.ui-sortable-helper {
    -ms-transform: rotate(6deg); /* IE 9 */
    -webkit-transform: rotate(6deg); /* Chrome, Safari, Opera */
    transform: rotate(6deg);
}
/* Placeholder */
li.moduleSortList.ui-sortable-placeholder .alert {
	margin: 0;
	font-weight: bold;
	display: none;
}
/* Show an error when a module can not be placed (we show this type of errors only for category children) */
#sortable > li > ul > li > ul > li.moduleSortList.ui-sortable-placeholder[data-ns-is-allowed="false"],
#sortable > li > ul > li.moduleSortList.ui-sortable-placeholder[data-ns-is-allowed="false"] {
	padding: 0;
	border: none;
	visibility: visible !important;
}
#sortable > li > ul > li > ul > li.moduleSortList.ui-sortable-placeholder[data-ns-is-allowed="false"] .alert,
#sortable > li > ul > li.moduleSortList.ui-sortable-placeholder[data-ns-is-allowed="false"] .alert {
	display: block;
}


#closeWizardSmallIcon {
    position: absolute;
    right: -2px;
    top: 48%;
    background-color: #272C33;
    width: 10px;
    height: 33px;
    border-radius: 4px 0 0 4px;
    cursor:pointer;
}
html[dir=rtl] #closeWizardSmallIcon {
	right: auto;
	left: -2px;
    border-radius: 0 4px 4px 0;
}

/**
 * Pages Recycle
 */
#pagesTab fieldset.inline-module,
#pagesTab fieldset.pages-recycle {
	display: none;
}
#pagesTab fieldset.pages-recycle li.moduleSortList.list-group-item {
	padding: 10px;
	min-height: 0;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-title-container {
	display: flex;
    flex-direction: column;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-title {
	color: #fff;
	text-align: left;
	display: flex;
    flex-wrap: wrap;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-title > span {
	width: 100%;
    overflow-wrap: anywhere;
}
html[dir=rtl] #pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-title {
	text-align: right;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-restore-btn {
	padding: 4px 9px;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-restore-btn .p-r-txt-c {
	overflow: hidden;
	text-overflow: ellipsis;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-delete-date {
	color: rgba(255,255,255,.5);
	font-size: 12px;
	text-align: left;
}
html[dir=rtl] #pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-delete-date {
    text-align: right;
}
#pagesTab fieldset.pages-recycle .pages_buttonsBox .restore-page-btn {
	border-width: 0px;
	font-weight: 700;
	color: #FFF !important;
}
#pagesTab fieldset.pages-recycle .empty-restore-msg {
	padding: 10px;
}
#pagesTab fieldset.inline-module .inline-module-back-btn,
#pagesTab fieldset.pages-recycle .pages-recycle-back-btn {
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: #F26A1B;
	background-color: transparent;
	cursor: pointer;
	text-decoration: none !important;
}
#pagesTab fieldset.inline-module .inline-module-back-btn::before,
#pagesTab fieldset.pages-recycle .pages-recycle-back-btn::before {
	font-weight: 500;
	font: normal normal normal 14px/1 FontAwesome;
	content: '\f104';
}
html[dir="rtl"] #pagesTab fieldset.inline-module .inline-module-back-btn::before,
html[dir="rtl"] #pagesTab fieldset.pages-recycle .pages-recycle-back-btn::before {
	content: '\f105';
}
#pagesTab fieldset.inline-module .inline-module-back-btn .t-e-h-back-title,
#pagesTab fieldset.pages-recycle .pages-recycle-back-btn .t-e-h-back-title {
	margin-left: 8px;
}
html[dir="rtl"] #pagesTab fieldset.inline-module .t-e-h-back-title,
html[dir="rtl"] #pagesTab fieldset.pages-recycle .t-e-h-back-title {
	margin-left: 0;
	margin-right: 8px;
}

#pagesTab fieldset.inline-module .inline-wizard-iframe.hide-pages-link {
	margin-top: -21px !important;
}

/* Recycle Category Modules Design - Here we show the category modules
------------------------*/
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] .pages_buttonsBox {
	position: relative;
}
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] .sub-modules-separator {
	margin: 5px 0px;
}
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] ul {
	list-style: disc;
	text-align: start;
}
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] li,
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] li:hover {
	color: #fff;
}
#pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] .p-r-page-restore-btn {
	position: absolute;
	right: 0;
	top: 7px;
}
html[dir="rtl"] #pagesTab fieldset.pages-recycle .moduleSortList.list-group-item[data-is-category="true"] .p-r-page-restore-btn {
	left: 0;
	right: auto;
}
/**
 * Pages not in menu and not in homepage
*/
.wizard #pagesTab[data-pages-n-i-m-o-h-tab=""] .pages-not-in-menu-or-homepage,
.wizard #pagesTab[data-landing-page="true"] .pages-not-in-menu-or-homepage,
.wizard #pagesTab[data-singe-page="true"] .pages-not-in-menu-or-homepage {
	display: none;
}
.wizard #pagesTab[data-singe-page="false"][data-landing-page="false"]:not([data-pages-n-i-m-o-h-tab=""]) .pages-not-in-menu-or-homepage {
	margin-top: 15px;
}
#wizardBox .pages-not-in-menu-or-homepage.i-t-handler .i-t-header {
	margin-bottom: 0px;
}
#wizardBox .pages-not-in-menu-or-homepage .alert.alert-warning {
	display: none;
}
.wizard #pagesTab[data-singe-page="false"][data-landing-page="false"][data-pages-n-i-m-o-h-tab="showOthersTab"] .pages-not-in-menu-or-homepage .alert.alert-warning {
	display: block;
}
#wizardBox .pages-not-in-menu-or-homepage .alert.alert-warning {
	margin-top: 15px;
	margin-bottom: 0px;
}
/**
 * Upload Files
 */
.fileUploadBox {
	position: relative;	
}
/* Bootstrap added z-index and we like to remove it for those buttons */
.fileUploadBox .input-group-btn > .btn:hover, 
.fileUploadBox .input-group-btn > .btn:focus, 
.fileUploadBox .input-group-btn > .btn:active {
	z-index: auto;
}
/**
 * Upload file drop down
 */
.fileUploadBox .dropdown-menu {
	min-width: 0;
}
.fileUploadBox .dropdown-menu.opened {
	display: block;
}
.fileUploadBox .dropdown-menu {
	z-index: 2147483636;
}
.fileUploadBox .dropdown-menu > li > a {
	width: 100%;
	padding: 8px 20px 8px 12px;
	margin: 0;
	display: block;
	cursor: pointer;
}
html[dir=rtl]  .fileUploadBox .dropdown-menu > li > a {
	padding: 8px 12px 8px 20px;
}
.fileUploadBox .dropdown-menu > li > a > i {
	width: 1em;
	margin-right: 4px; 
}
html[dir=rtl] .fileUploadBox .dropdown-menu > li > a > i {
	margin-right: 0; 
	margin-left: 4px; 
}
.fileUploadBox .drop-file-handler {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

/* Hide multi upload on fake button */
.fileUploadBox .fake-button {
	display: none;
}
/* Multi upload on file drag design */
.fileUploadBox .multi-upload-drop-file-handler {
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 999;
    background-color: #222 !important;
    border: none;
}
/* Multi upload with drop down on file drag design */
.fileUploadBox .multi-upload-drop-file-handler.custom-design {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

/* Progress Bar */
.fileUploadBox .progress {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left: -1px;
	bottom: 0;
	margin-bottom: 0px;
	z-index: 10;
	border: 1px solid #ccc;
}
.fileUploadBox .progress[data-percent]:after {
	line-height: 33px;
}
.fileUploadBox .progress-cancel {
	width: 100px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 10px;
	color: red;
	z-index: 9999999999999;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
html[dir=rtl] .fileUploadBox .progress-cancel {
	left: auto;
	right: 10px;
}
/* custom order of the options in the drop down */
.fileUploadBox .dropdown-menu.drop-down-order.opened {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}
.fileUploadBox .dropdown-menu.drop-down-order li {
	width: 100%;
}


/* Upload File - Image in the center style
-----------------------*/
.fileUploadBox.image-center .main-wrapper {
	background: transparent !important;
}
.fileUploadBox.image-center .input-group > div {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.fileUploadBox.image-center .input-group > div > a {
	padding: 0px;
    border: 0px;
    margin: 5px 0 5px 0 !important;
    pointer-events: none;
}
.fileUploadBox.image-center .input-group > div > a.image-preview-center {
	height: auto;
	padding: 0;
	margin: 0 0 5px 0 !important;
	width: 100%;
}
.fileUploadBox.image-center .input-group > div > a img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	max-width: 100%;
}
.fileUploadBox.image-center .input-group > div > .file-options-container {
	display: flex;
    width: auto;
}
/* ace rtl creating space between the buttons when text is short and we don't need it*/
.rtl .fileUploadBox.image-center .file-options-container > button,
.rtl .fileUploadBox.image-center .file-options-container > a {
	margin: 0;
}
.fileUploadBox.image-center .progress {
	right: -1px;
	width: auto;
}
.fileUploadBox .progress .progress-cancel {
	width: auto;
}
/* image center style
---------------*/
.fileUploadBox.image-center.has-image .input-group > div {
    background-color: #f2f7fc;
}
/* when there is no image we make sure progress bar is on full width */
.fileUploadBox.image-center:not(.has-image) .input-group > div {
	max-width: none !important;
	display: block;
}
/* make sure that the upload file tooltip will be in 1 line */
.fileUploadBox .tooltip-container {
	display: inline-block;
}
/* inline edit tool icon preview */
.fileUploadBox.image-center a[id$="_previewIcon"] {
	width: 100%;
}

/* Upload File Grouped Options Handler - Here we make
sure that the drop down will start from the correct position because we
calculate via js the width of the drop down, for more info search for `click.fix_drop_down_position`
------------------------*/
.fileUploadBox .group-edit-tools {
	position: static;
}
.fileUploadBox .group-edit-tools .dropdown-menu {
	margin-left: -1px;
	left: 0 !important;
	right: auto !important;
}
html[dir=rtl] .fileUploadBox .group-edit-tools .dropdown-menu {
	margin-left: 0;
	margin-right: -1px;
	left: auto !important;
	right: 0 !important;
}

/* Multiple Upload Images
----------------------------------*/
ul.multiple-images-preview-container {
	margin: 10px 0;
}
ul.multiple-images-preview-container li {
	margin: 3px;
	border: 1px solid #abbac3;
}
ul.multiple-images-preview-container li.multiple-images-placeholder {
	border: 1px dashed #d9d9d9 !important;
    background-color: #f7f7f7 !important;
}
ul.multiple-images-preview-container li > a {
	cursor: move;
}
ul.multiple-images-preview-container img {
	object-fit: cover;
}
ul.multiple-images-preview-container li > a .image-video-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 30px;
	background-color: rgba(0,0,0,0.3);
}
/* bottom tools design*/
ul.multiple-images-preview-container .tools-bottom {
	display: flex;
	justify-content: space-around;
}

/* Modal title container
-----------------------------*/
.modal .modal-title .title-container {
	display: flex;
	gap: 5px;
	align-items: center;
}

/* Module Settings Button
----------------------------------*/
.popover.homepage-settings,
.popover.modules-setting {
    border-color: transparent;
	border-radius: 4px;
	max-width: 420px;
}
.popover.modules-setting.layout-customizer {
	max-width: 270px;
}

/* Typography Settings Popover
----------------------------------*/
.typography-custom-settings-button {
	position: absolute;
	bottom: 5px;
	right: 4px;
	top: 9px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	color: #ffffff;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	z-index: 10;
}
.typography-arrow {
	top: 20% !important;
}
.typography-custom-settings-button:hover {
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
html[dir="rtl"] .typography-custom-settings-button {
	right: unset;
	left: 3px;
}
.font-hot-label {
	position: absolute;
	top: 5px;
	right: auto;
	left: 5px;
	z-index: 10;
	background: none !important;
	border: none !important;
}
html[dir="rtl"] .font-hot-label {
	left: auto;
	right: 5px;
}
.font-custom-label {
	position: absolute;
	top: 7px;
	right: 30px;
	left: auto;
	z-index: 10;
}
html[dir="rtl"] .font-custom-label {
	left: 30px;
	right: auto;
}
.font-more-label {
	position: absolute;
	top: 32px;
	right: 11px;
	color: #fff;
	font-size: 13px;
	opacity: 1;
	cursor: pointer;
}
[data-id="theme-current"] .font-more-label {
	display: none;
}
.font-more-label:hover {
	text-decoration: underline;
}
html[dir="rtl"] .font-more-label {
	right: auto;
	left: 11px;
}

/* Font Favorite Toggle (star button)
----------------------------------*/
.font-popularity-toggle {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	z-index: 10;
	transition: transform 0.15s ease, color 0.15s ease, opacity 0.2s ease;
	opacity: 0;
	pointer-events: none;
}
.wizard-card[data-type="fontThemes"]:hover .font-popularity-toggle {
	opacity: 1;
	pointer-events: auto;
}
.font-popularity-toggle:hover {
	transform: scale(1.2);
	color: #f0ad4e;
}
.font-popularity-toggle.is-favorite {
	opacity: 1;
	pointer-events: auto;
	color: #f0ad4e;
}
.font-popularity-toggle.is-favorite:hover {
	color: #ec971f;
}
.font-popularity-toggle.loading {
	opacity: 0.5;
	pointer-events: none;
}
.font-popularity-toggle.loading i {
	animation: spin 0.8s linear infinite;
}
.font-popularity-toggle.success {
	animation: pulse-star 0.4s ease;
}
@keyframes pulse-star {
	0% { transform: scale(1); }
	50% { transform: scale(1.5); }
	100% { transform: scale(1); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
html[dir="rtl"] .font-popularity-toggle {
	right: auto;
	left: 5px;
}

/* Font Weights Panel
----------------------------------*/
.font-weights-panel {
	background: #000;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 12px;
	max-width: 290px;
	overflow: hidden;
}
.font-weights-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: left;
}
html[dir="rtl"] .font-weights-options {
	justify-content: right;
}
.font-weight-option {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 6px;
	padding: 8px 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 80px;
	text-align: center;
}
.font-weight-option:hover {
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.3);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.font-weight-option img {
	height: 25px;
	display: block;
	margin: 0 auto;
	filter: brightness(1.1);
	max-width: 240px;
}
.allColors {
	position: relative;
}
.popover.typography-settings-popover {
	max-width: 400px;
	min-width: 300px;
}

/* Typography Settings Popover Close Button
--------------------*/
.popover.typography-settings-popover .close-typography-settings-btn {
    position: absolute;
    top: 19px;
    right: 11px;
    font-size: 18px;
    color: #9E9E9E;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    z-index: 10;
}
html[dir="rtl"] .popover.typography-settings-popover .close-typography-settings-btn {
    right: auto;
    left: 20px;
}
.popover.typography-settings-popover .close-typography-settings-btn:hover {
    color: #333;
}

/* Typography Popover - Spacing Sliders Container */
.popover.typography-settings-popover .typography-spacing-sliders-container {
    position: relative;
}
.popover.typography-settings-popover .typography-spacing-sliders-container.custom-fonts-disabled {
    min-height: 120px;
}

/* Typography Popover - Disabled Overlay (when custom fonts are used) */
.popover.typography-settings-popover .typography-disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 245, 245, 0.95);
    border-radius: 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
}
.popover.typography-settings-popover .typography-disabled-overlay .overlay-content {
    text-align: center;
    padding: 15px;
    color: #666;
}
.popover.typography-settings-popover .typography-disabled-overlay .overlay-content i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
    color: #999;
}
.popover.typography-settings-popover .typography-disabled-overlay .overlay-content span {
    font-size: 13px;
    line-height: 1.4;
    display: block;
}

/* Typography Popover - Disabled Slider State (when custom fonts are used) */
.popover.typography-settings-popover .sliderInput.slider-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.popover.typography-settings-popover .sliderInput.slider-disabled .s123-slider {
    background-color: #e0e0e0;
}
.popover.typography-settings-popover .sliderInput.slider-disabled input {
    background-color: #f5f5f5;
    color: #999;
}


/* Font Filter Popover
----------------------------------*/
.popover.font-filter-popover {
	max-width: 380px;
	min-width: 320px;
	top: 240px !important;
    left: 58px !important;
}
html[dir="rtl"] .popover.font-filter-popover {
    left: auto !important;
    right: 58px !important;
}
@media (max-width: 480px) {
    html[dir="rtl"] .popover.font-filter-popover {
        left: auto !important;
        right: 0px !important;
    }
}
.popover.font-filter-popover .close-font-filter-btn {
	position: absolute;
	top: 12px;
	right: 11px;
	font-size: 18px;
	color: #9E9E9E;
	text-decoration: none;
	padding: 0;
	line-height: 1;
	z-index: 10;
}
html[dir="rtl"] .popover.font-filter-popover .close-font-filter-btn {
	right: auto;
	left: 11px;
}
.popover.font-filter-popover .close-font-filter-btn:hover {
	color: #333;
}
.popover.font-filter-popover .popover-content {
	padding: 0;
	background: #fff;
}
.font-filter-popover-content {
	padding: 15px;
}
.font-filter-popover-content .filter-section {
	margin-bottom: 0;
}
.font-filter-popover-content .filter-section-title {
	font-size: 13px;
	font-weight: 600;
	color: #272C33;
	margin: 0 0 10px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.font-filter-popover-content .filter-divider {
	margin: 15px -15px;
	border-top: 1px solid #e5e5e5;
	border-bottom: 0;
}
/* Compact filter row - inline label with toggle buttons */
.font-filter-popover-content .filter-row-compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.font-filter-popover-content .filter-row-compact:last-of-type {
	margin-bottom: 0;
}
.font-filter-popover-content .filter-row-label {
	font-size: 12px;
	font-weight: 500;
	color: #555;
	white-space: nowrap;
}
.font-filter-popover-content .filter-toggle-group {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}
.font-filter-popover-content .filter-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	font-size: 11px;
	color: #666;
	background: #fff;
	cursor: pointer;
	margin: 0;
	border-right: 1px solid #ddd;
	transition: all 0.15s ease;
}
.font-filter-popover-content .filter-toggle-btn:last-child {
	border-right: none;
}
.font-filter-popover-content .filter-toggle-btn input {
	display: none;
}
.font-filter-popover-content .filter-toggle-btn:hover {
	background: #f5f5f5;
}
.font-filter-popover-content .filter-toggle-btn.active {
	background: #3498db;
	color: #fff;
	border-color: #3498db;
}
.font-filter-popover-content .filter-toggle-btn.active + .filter-toggle-btn {
	border-left-color: #3498db;
}
html[dir="rtl"] .font-filter-popover-content .filter-row-compact {
	flex-direction: row-reverse;
}
html[dir="rtl"] .font-filter-popover-content .filter-toggle-btn {
	border-right: none;
	border-left: 1px solid #ddd;
}
html[dir="rtl"] .font-filter-popover-content .filter-toggle-btn:last-child {
	border-left: none;
}
html[dir="rtl"] .font-filter-popover-content .filter-toggle-btn.active + .filter-toggle-btn {
	border-left-color: #ddd;
	border-right-color: #3498db;
}
.font-filter-popover-content .filter-options-inline {
	display: flex;
	gap: 20px;
}
.font-filter-popover-content .filter-checkbox-inline {
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}
.font-filter-popover-content .filter-checkbox-block {
	display: block;
	margin: 0 0 6px 0;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 4px;
	transition: background-color 0.2s;
}
.font-filter-popover-content .filter-checkbox-block:hover {
	background-color: #f5f5f5;
}
.font-filter-popover-content .filter-scroll-box {
	max-height: 150px;
	overflow-y: auto;
	padding-right: 5px;
}
html[dir="rtl"] .font-filter-popover-content .filter-scroll-box {
	padding-right: 0;
	padding-left: 5px;
}
.font-filter-popover-content .filter-scroll-box::-webkit-scrollbar {
	width: 6px;
}
.font-filter-popover-content .filter-scroll-box::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}
.font-filter-popover-content .filter-scroll-box::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
}
.font-filter-popover-content .filter-scroll-box::-webkit-scrollbar-thumb:hover {
	background: #555;
}
/* Font Filter Popover - Scrollable sections with fixed buttons */
.font-filter-popover-content .filter-sections-wrapper {
	max-height: calc(100vh - 250px);
	overflow-y: auto;
	max-width: 100%;
	overflow-x: hidden;
}
html[dir="rtl"] .font-filter-popover-content .filter-sections-wrapper {
	direction: ltr;
}
.font-filter-popover-content .filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	background: #fff;
	margin: 0 -15px -15px -15px;
	padding: 15px;
}
html[dir="rtl"] .font-filter-popover-content .filter-actions {
	justify-content: flex-start;
}
.font-filter-popover-content .filter-actions .btn {
	min-width: 90px;
}

/* Font Filter Popover - Responsive height adjustments */
@media (max-height: 700px) {
	.font-filter-popover-content .filter-sections-wrapper {
		max-height: calc(100vh - 200px);
	}
	.font-filter-popover-content .filter-scroll-box {
		max-height: 100px;
	}
	.font-filter-popover-content .filter-divider {
		margin: 10px -15px;
	}
	.font-filter-popover-content .filter-section-title {
		margin: 0 0 6px 0;
	}
}
@media (max-height: 550px) {
	.font-filter-popover-content {
		padding: 10px;
	}
	.font-filter-popover-content .filter-sections-wrapper {
		max-height: calc(100vh - 180px);
	}
	.font-filter-popover-content .filter-scroll-box {
		max-height: 70px;
	}
	.font-filter-popover-content .filter-divider {
		margin: 8px -10px;
	}
	.font-filter-popover-content .filter-actions {
		margin: 0 -10px -10px -10px;
		padding: 10px;
	}
	.popover.font-filter-popover .popover-title {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* Font Categories Filter Styles */
.font-filter-popover-content .filter-section-collapsible {
	margin-bottom: 0;
}
.font-filter-popover-content .filter-section-toggle {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	transition: color 0.2s ease;
}
.font-filter-popover-content .filter-section-toggle:hover {
	color: #3498db;
}
.font-filter-popover-content .filter-toggle-icon {
	font-size: 10px;
	transition: transform 0.2s ease;
}
.font-filter-popover-content .filter-category-options {
	display: none;
	padding: 8px 0;
}
.font-filter-popover-content .filter-category-options.show {
	display: block;
}
.font-filter-popover-content .filter-category-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.font-filter-popover-content .filter-category-option {
	display: inline-block;
	padding: 5px 10px;
	font-size: 11px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #333;
}
.font-filter-popover-content .filter-category-option:hover {
	background: #e8e8e8;
	border-color: #ccc;
}
.font-filter-popover-content .filter-category-option.selected {
	background: #3498db;
	border-color: #3498db;
	color: #fff;
}

/* Font-styled filter category options (Google Fonts style) */
.font-filter-popover-content .filter-category-grid-fonts {
	gap: 8px;
}
.font-filter-popover-content .filter-category-option-font {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 400;
	min-width: 70px;
	text-align: center;
	border: 1px solid #3a4047;
	border-radius: 6px;
	color: #2a2f36;
	transition: all 0.2s ease, font-family 0s;
	line-height: 1.3;
	letter-spacing: 0;
}
.font-filter-popover-content .filter-category-option-font:hover {
	background: #3a4047;
	border-color: #4a5057;
	color: #fff;
	transform: translateY(-1px);
}
.font-filter-popover-content .filter-category-option-font.selected {
	background: #3498db;
	border-color: #3498db;
	color: #fff;
	box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
/* Specific font adjustments for better display */
.font-filter-popover-content .filter-category-option-font[data-value="artistic"] {
	font-size: 18px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.font-filter-popover-content .filter-category-option-font[data-value="bold"] {
	font-weight: 700;
	letter-spacing: 1px;
}
.font-filter-popover-content .filter-category-option-font[data-value="elegant"] {
	font-size: 15px;
	font-style: italic;
}
.font-filter-popover-content .filter-category-option-font[data-value="playful"] {
	font-size: 13px;
}
.font-filter-popover-content .filter-category-option-font[data-value="futuristic"] {
	letter-spacing: 2px;
	font-size: 12px;
}
.font-filter-popover-content .filter-category-option-font[data-value="vintage"] {
	font-size: 16px;
}
.font-filter-popover-content .filter-category-option-font[data-value="display"] {
	font-size: 16px;
	letter-spacing: 2px;
}
.font-filter-popover-content .filter-category-option-font[data-value="handwriting"] {
	font-size: 16px;
}
.font-filter-popover-content .filter-category-option-font[data-value="monospace"] {
	font-size: 12px;
	letter-spacing: 0;
}
html[dir="rtl"] .font-filter-popover-content .filter-section-toggle {
	flex-direction: row-reverse;
}

.popover.homepage-settings .popover-title,
.popover.modules-setting .popover-title {
	background-color: #272C33;
	color: #fff;
}
.popover.homepage-settings .popover-content,
.popover.modules-setting .popover-content {
	padding: 20px;
	color: #5F6373;
}
.popover.homepage-settings .popover-content .checkbox,
.popover.modules-setting .popover-content .checkbox {
	margin-top: 0;
	margin-bottom: 16px;
}
.modal .modal-title .title-container a[data-rel=tooltip],
.popover.homepage-settings .popover-content  a[data-rel=tooltip],
.popover.modules-setting .popover-content  a[data-rel=tooltip] {
	color: #000000;
}
.modal .modal-title .title-container a[data-rel=tooltip],
.popover.homepage-settings .popover-content  a[data-rel=tooltip] i,
.popover.modules-setting .popover-content  a[data-rel=tooltip] i {
	width: 16px !important;
    height: 16px !important;
    background-color: #EBECEE;
    border-radius: 50px;
    text-align: center;
}
.modal .modal-title .title-container a[data-rel=tooltip],
.popover.homepage-settings .popover-content  a[data-rel=tooltip] i:before,
.popover.modules-setting .popover-content  a[data-rel=tooltip] i:before {
	font-size: 80%;
}
.popover.homepage-settings .popover-content .checkbox > label,
.popover.modules-setting .popover-content .checkbox > label {
	padding-left: 0;
    padding-right: 0;
}
.popover.homepage-settings .popover-content .checkbox input,
.popover.modules-setting .popover-content .checkbox input {
	margin-left: -15px;
	border-radius: 2px;
}
html[dir=rtl] .popover.homepage-settings .popover-content .checkbox input,
html[dir=rtl] .popover.modules-setting .popover-content .checkbox input {
	margin-left: 0;
	margin-right: -15px;
}
.popover.homepage-settings .p-m-s-container .checkbox span.lbl,
.popover.modules-setting .p-m-s-container .checkbox span.lbl {
    margin-left: 0;
    margin-right: 8px;
}
html[dir=rtl] .popover.homepage-settings .p-m-s-container .checkbox span.lbl,
html[dir=rtl] .popover.modules-setting .p-m-s-container .checkbox span.lbl {
    margin-right: 0;
    margin-left: 8px;
}
.popover.homepage-settings .popover-content .checkbox .lbl::before,
.popover.modules-setting .popover-content .checkbox .lbl::before {
	margin-right: 12px;
	background-color: #FFF;
}
html[dir=rtl] .popover.homepage-settings .popover-content .checkbox .lbl::before,
html[dir=rtl] .popover.modules-setting .popover-content .checkbox .lbl::before {
	margin-left: 12px;
	margin-right: auto;
}
html[dir=rtl] .popover.homepage-settings .popover-content .checkbox .lbl,
html[dir=rtl] .popover.modules-setting .popover-content .checkbox .lbl {
	margin-left: 0;
	margin-right: 12px;
}
.popover.homepage-settings .popover-content .btn-link,
.popover.modules-setting .popover-content .btn-link {
	color: #5F6373 !important;
}
.popover.homepage-settings hr.p-m-s-separator,
.popover.modules-setting hr.p-m-s-separator {
	margin: 12px 0 11px 10px;
    border: 0;
    height: 1px;
    background-color: #e2e2e2;
}
.popover.homepage-settings hr.p-m-s-separator,
.popover.modules-setting hr.p-m-s-separator {
	margin: 16px 0;
}
html[dir=rtl] .popover.homepage-settings hr.p-m-s-separator,
html[dir=rtl] .popover.modules-setting hr.p-m-s-separator {
	margin: 12px 10px 12px 0;
}
.popover.homepage-settings .p-m-s-mobile-back-btn,
.popover.modules-setting  .p-m-s-mobile-back-btn {
	display: none;
}
/* We fix the space that was between the Slogan / SEO to their tooltips */
.popover.modules-setting .popover-content .btn-link#page_seo,
.popover.modules-setting .popover-content .btn-link#duplicate_page,
.popover.homepage-settings .popover-content .btn-link#home_seo,
.popover.modules-setting .popover-content .btn-link#deletePage,
.popover.modules-setting .popover-content .btn-link#convertToRichPage,
.popover.modules-setting .popover-content .btn-link#page_slogan{
	padding: 0px !important;
	text-decoration: none;
}
/* remove unnecessary bottom spacing */
.popover.modules-setting .popover-content .btn-link#page_seo label.block,
.popover.modules-setting .popover-content .btn-link#duplicate_page label.block,
.popover.homepage-settings .popover-content .btn-link#home_seo label.block,
.popover.modules-setting .popover-content .btn-link#deletePage label.block,
.popover.modules-setting .popover-content .btn-link#convertToRichPage label.block,
.popover.modules-setting .popover-content .btn-link#page_slogan label.block{
	margin-bottom: 0px;
	margin-right: 8px
}
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_seo label.block,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#duplicate_page label.block,
html[dir=rtl] .popover.homepage-settings .popover-content .btn-link#home_seo label.block,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#deletePage label.block,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#convertToRichPage label.block,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_slogan label.block{
	margin-bottom: 0px;
	margin-right: 0;
	margin-left: 8px;
}
.popover.modules-setting .popover-content .btn-link#page_seo label.block i,
.popover.modules-setting .popover-content .btn-link#duplicate_page label.block i,
.popover.homepage-settings .popover-content .btn-link#home_seo label.block i,
.popover.modules-setting .popover-content .btn-link#deletePage label.block i,
.popover.modules-setting .popover-content .btn-link#convertToRichPage label.block i,
.popover.modules-setting .popover-content .btn-link#page_slogan label.block i {
	margin-right: 12px;
}
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_seo label.block i,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#duplicate_page label.block i,
html[dir=rtl] .popover.homepage-settings .popover-content .btn-link#home_seo label.block i,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#deletePage label.block i,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#convertToRichPage label.block i,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_slogan label.block i {
	margin-right: 0;
	margin-left: 12px;
}
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_seo,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#duplicate_page,
html[dir=rtl] .popover.homepage-settings .popover-content .btn-link#home_seo,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#deletePage,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#convertToRichPage,
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#page_slogan{
	padding-left: 3px !important;
}
/* We show cursor type pointer on the page settings Slogan and SEO */
.popover.modules-setting .popover-content .btn-link .block,
.popover.homepage-settings .popover-content .btn-link .block{
	cursor: pointer;
}
/* disabled module setting design*/
.popover.modules-setting .checkbox.disabled {
	opacity: 0.5;
}
@media (max-width: 480px) {
	.popover.homepage-settings,
	.popover.modules-setting {
		width: calc(100vw - 30px);
		max-width: none;
		height: calc(100% - 30px);
		top: 0 !important;
		left: 0 !important;
		margin: 15px;
	}
	.popover.homepage-settings .p-m-s-container,
	.popover.modules-setting  .p-m-s-container {
		margin: 30px 10px 0;
	}
	.popover.homepage-settings .arrow,
	.popover.modules-setting  .arrow {
		display: none;
	}
	.popover.homepage-settings .p-m-s-mobile-back-btn,
	.popover.modules-setting  .p-m-s-mobile-back-btn {
		display: block;
		position: absolute;
		top: 7px;
		left: 10px;
		font-size: 20px;
	}
	html[dir=rtl] .popover.homepage-settings .p-m-s-mobile-back-btn,
	html[dir=rtl] .popover.modules-setting  .p-m-s-mobile-back-btn {
		left: auto;
		right: 10px;
		transform: scale(-1, 1);
	}
}

/* Module Design Button
----------------------------------*/
.popover.modules-design {
	max-width: 100%;
	background-color: #2E383E !important;
	border:1px solid #2E383E;
    -webkit-box-shadow: 0 0 5px 6px rgba(0, 0, 0, 0.59);
    box-shadow: 0 0 5px 6px rgba(0, 0, 0, 0.59);
}
.popover.modules-design.bottom > .arrow:after {
	border-bottom-color: #2E383E;
}
.popover.modules-design.right > .arrow:after {
	border-right-color: #2E383E;
}
html[dir="rtl"] .popover.modules-design.left > .arrow:after {
	border-left-color: #2E383E;
}
.popover.modules-design .popover-content {
	width: 300px;
	height: 410px;				/* Used also for the `popover.placement` on `modules.js` */
	overflow-x: auto;
	box-sizing: content-box;	/* We like to increase the width in case there is a scrollbar*/
	padding: 5px 0;
}
@media (min-width: 767px) {
	.popover.modules-design .popover-content {
		width: 360px;
		height: 410px;			/* Used also for the `popover.placement` on `modules.js` */
	}
}

/* Homepage Shape Divider
----------------------------------*/
#homepageShapeDividers #shape_options {
    display: flex;
    flex-flow: column;
}
#homepageShapeDividers #shape_options > div {
	flex-shrink: 0;
}
#homepageShapeDividerList {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    height: 170px;
    overflow-y: auto;
    align-content: flex-start;
    flex-shrink: 1 !important;
    margin-bottom: 16px;
}
/* when the user have only color we want to show him the shape divider
on full size of the tab */
#homepageShapeDividers.full-size #shape_options {
    height: calc( var(--wizard-side-menu-height) - 150px);
}
#homepageShapeDividers.full-size #shape_options #homepageShapeDividerList {
    height: 100%;
}

.chooseSingleTextLayout,
.chooseTextLayout {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-content: flex-start;
    justify-content: center;
}
.chooseSingleTextLayout .text-design-styles,
.chooseTextLayout .text-design-styles {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.chooseSingleTextLayout .text-design-styles .text-design-button-container,
.chooseTextLayout .text-design-styles .text-design-button-container {
    width: 280px;
    height: 158px;
    padding: 2px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #3f4b52;
    margin-bottom: 5px;
}
.chooseTextLayout .text-design-styles .text-design-button-container.active,
.chooseSingleTextLayout .text-design-styles .text-design-button-container.active,
.chooseTextLayout .text-design-styles .text-design-button-container:hover,
.chooseSingleTextLayout .text-design-styles .text-design-button-container:hover {
    background-color: #3f4b52;
}
.chooseSingleTextLayout .text-design-styles .text-design-button-container .t-d-s-scaled-preview,
.chooseTextLayout .text-design-styles .text-design-button-container .t-d-s-scaled-preview {
    width: 1140px;
    height: 642px;
    transform: scale(0.228070);
    transform-origin: top left;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
html[dir="rtl"] .chooseSingleTextLayout .text-design-styles .text-design-button-container .t-d-s-scaled-preview,
html[dir="rtl"] .chooseTextLayout .text-design-styles .text-design-button-container .t-d-s-scaled-preview {
	transform-origin: top right;
}
.chooseSingleTextLayout .text-design-styles .text-design-button-container .text-design-button-image,
.chooseTextLayout .text-design-styles .text-design-button-container .text-design-button-image {
    width: 100%;
    height: auto;
    border: 1px solid #555;
    cursor: pointer;
}

/**
 * Text Position 
 */
#textAnimationsContainer,
#textPositionsContainer {
	display: grid;
	grid-template-columns: 85px 85px 85px;
    grid-template-rows: 50px 50px 50px;
    column-gap: 15px;
    row-gap: 15px;
	padding-bottom: 30px;
}
#textAnimationsContainer {
    max-height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
}
#textAnimationsContainer .text-animations-box,
#textPositionsContainer .text-positions-box {
    width: 85px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #3f4b52;
    display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	font-size: 11px;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
}
#textAnimationsContainer .text-animations-box.active,
#textAnimationsContainer .text-animations-box:hover,
#textPositionsContainer .text-positions-box.active,
#textPositionsContainer .text-positions-box:hover {
    background-color: #3f4b52;
}
#textPositionsContainer .text-positions-box > span {
	padding: 10px;
	font-size: 14px;
	text-transform: uppercase;
}
/* mirror flip of the elements on rtl because gird doesn't do that 
solution: https://stackoverflow.com/a/11457128 */
html[dir="rtl"] #textPositionsContainer .text-positions-box > span {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

.chooseUniqueStyle {
	min-height: 200px;
	max-height: calc( var(--wizard-side-menu-height) - (75px + var(--homepage-tab-close-btn-height)) );
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
.unique-styles-container {
	width: 100%;
}
/*mobile height fix*/
html[data-device="mobile"] .chooseUniqueStyle {
	height: calc( var(--window-height) - 255px );
}
.chooseUniqueStyle .unique-styles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container {
	position: absolute;
	visibility: hidden;
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
    border:1px solid transparent;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container .pro-feature-label {
	position: absolute;
    top: 10px;
    right: 10px;
}
html[dir="rtl"] .chooseUniqueStyle .unique-styles .unique-styles-button-container .pro-feature-label {
	right: auto;
	left: 10px;
}
#BackgroundTabHomepage .boxTitle {
    border-bottom: 1px solid #fff;
    padding: 5px 0;
    margin-bottom: 8px;
}
#BackgroundTabHomepage .lastImages {
	display: none;
}
html[dir="rtl"] #BackgroundTabHomepage .lastImages {
    left: auto;
    right: 0;
}
#BackgroundTabHomepage .lastImages img {
    cursor: pointer;
    width: 65px;
    height: 65px;
    border: 1px solid #636363;
    border-radius: 0;
    object-fit: cover;
}
#BackgroundTabHomepage .lastImages img:hover {
 	opacity: 0.95;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container .existingText {
	display: none;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 0;
    padding: 5px;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container:hover {
    border:1px solid #fff;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container.active {
    border:1px solid #fff;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container .unique-styles-button-image {
    width: 100%;
    height: auto;
    border: 1px solid #555;
    cursor: pointer;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container .unique-styles-button-image.website_package_1[data-package="2"] {
    opacity: 0.6 !important;
}

/* active ready templates loading icon */
.chooseUniqueStyle .unique-styles .unique-styles-button-container .loading-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chooseUniqueStyle .unique-styles .unique-styles-button-container .loading-container .custom-cover {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 0.5;
}

.chooseUniqueStyle .load-more-container {
	width: 100%;
}

/*
Google map skeleton loader - Show skeleton before the google map is loaded
source: https://web-crunch.com/how-to-create-skeleton-screen-loading-effect/
--------------------*/
@keyframes skeletonLoader {
    100% {
        transform: translateX(100%);
    }
}
.chooseUniqueStyle .unique-styles-button-container.skeleton {
	position: relative;
	visibility: visible;
	overflow: hidden;
	width: 100%;
	height: 167px;
	order: 999; /* set the skeletons to be the last items */
}
.skeleton > .skeleton-item {
	width: 100%;
	height: 100%;
	background-color: #000;
}
.skeleton > .skeleton-item:before {
	position: absolute;
	z-index: 1;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
	animation: skeletonLoader 1.5s infinite;
}


.styles-click-options-box {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	padding: 10px;
	color: #FFF;
	background-color: rgba(0,0,0,0.7);
	opacity: 1;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.styles-click-options-box .styles-click-options-btn-box {
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.chooseWebsiteTheme {
	height: calc( (var(--wizard-side-menu-height) - var(--homepage-tab-close-btn-height)) - 110px );
    overflow-x: auto;
}
.homepage-popular-goals .popular-goal-button-container,
.chooseWebsiteTheme .homepage-design-button-container {
	text-align: center;
    background-position: center center;
    background-size: cover;
    height: 164px;
    width: 287px;
    max-width: 300px;
    margin-bottom: 10px;
    padding: 0;
   	background-color: rgba(204, 204, 204, 0.05);
}
.homepage-popular-goals .popular-goal-button-container {
	background-size: contain;
}
.homepage-popular-goals {
    margin: 16px 0px;
    height: 100%;
    overflow: hidden;
    margin-bottom: 0;
}
.homepage-popular-goals .popular-goals-container {
	height: 100%;
	flex-direction: column;
    display: flex;
}
.homepage-popular-goals .popular-goals {
	height: 100%;
	overflow-y: auto;
}
.homepage-popular-goals .popular-goal-button-container {
	cursor: pointer;
}
.chooseWebsiteTheme .modules-design-styles {
	align-items: center;
}
#textAnimationsContainer .text-animations-box .animation-active
.homepage-popular-goals .popular-goal-button,
.chooseWebsiteTheme .homepage-design-button {
	width: 100%;
	max-width: 100%;
    padding: 0;
    display: inline-block;
    border: 0;
    cursor: pointer;
    margin: 0;
    position: relative;
    height: 100%;
    background: transparent;
}


#textAnimationsContainer .text-animations-box .animation-active > i,
.chooseWebsiteTheme .homepage-design-button > i {
	display: flex;
	visibility: hidden;
	position: absolute;
	z-index: 10;
	color: #87b87f;
	font-size: 25px;
}
#textAnimationsContainer .text-animations-box .animation-active > i {
	top: 5px;
	right: 5px;
}
.chooseWebsiteTheme .homepage-design-button > i {
	top: 10px;
	right: 10px;
}
html[dir="rtl"] #textAnimationsContainer .text-animations-box .animation-active > i {
	right: auto;
	left: 5px;
}
html[dir="rtl"] .chooseWebsiteTheme .homepage-design-button > i {
	right: auto;
	left: 10px;
}
#textAnimationsContainer .text-animations-box .animation-active > i:after,
.chooseWebsiteTheme .homepage-design-button > i:after{
	content: '';
	width: 100%;
	height: 95%;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
#textAnimationsContainer .text-animations-box.active .animation-active > i,
.chooseWebsiteTheme .homepage-design-button.active > i {
	visibility: visible;
}
/* Module Style Selector Container */
#changeStyleContainer {
	max-width: 100%;
}
.modules-design-button-container {
	margin-bottom: 20px;
}
#changeStyleModal hr {
	width: 100%;
}
#changeStyleModal .modules-design-selected {
	min-height: 155px;
}
.modules-design-button.active:hover,
.modules-design-button.active {
	border: 8px solid #87b87f !important;
}
#changeStyleModal .modules-design-list .modules-design-button:hover {
    border: 1px solid #636363;
}
#changeStyleModal .modules-design-styles .modules-design-selected {
	margin-bottom: -20px;
}
#changeStyleModal .ui-slide-tab-selector-container .ui-slide-tab-selector-button {
	font-size: 12px;
}
.modules-design-button {
    padding: 0;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #fff;
    position: relative;
}
.modules-design-button > i {
	visibility: hidden;
	position: absolute;
	top: 3px;
	right: 5px;
	z-index: 10;
	color: #87b87f;
	font-size: 30px;
}
html[dir="rtl"] .modules-design-button > i {
	right: auto;
	left: 3px;
}
.modules-design-button > .modules-custom-design-button i:after{
	content: '';
    width: 30px;
    height: 30px;
    bottom: -14px;
    right: -9px;
    position: absolute;
    background: #393939;
    z-index: -1;
    border: 1px solid #656565;
    border-radius: 3px;
    cursor: pointer;
    color: #cccccc;
    margin: 0 0 5px;
}
.modules-design-button > .modules-custom-design-button i {
	visibility: hidden;
	position: absolute;
	bottom: 11px;
	right: 12px;
	z-index: 10;
	font-size: 12px;
	color: #cccccc;
}
html[dir="rtl"] .modules-design-button > .modules-custom-design-button i {
	right: auto;
	left: 12px;
}
.modules-design-button .modules-second-side-container {
	position: absolute;
    bottom: 7px;
    left: 4px;
}
html[dir="rtl"] .modules-design-button .modules-second-side-container {
	left: unset;
	right: 4px;
}
.modules-design-button .modules-second-side-container span {
	background: #393939;
	border: 1px solid #656565;
	border-radius: 3px;
	color: #cccccc;
	cursor: pointer;
	padding: 3px 6px;
	font-size: 12px;
}
.modules-design-button .modules-second-side-container span.active {
	background: var(--primary_color);
	border-color: var(--primary_color);
}
.modules-design-button .modules-second-side-container span + span {
	margin-left: 5px;
}
html[dir="rtl"] .modules-design-button .modules-second-side-container span + span {
	margin-right: 5px;
	margin-left: unset;
}

/* Module Style Selector Modal Container */
#changeStyleModalAllBox {
	display:flex;
	flex-direction: column;
}
/* Tab buttons for switching between main and content layouts */
#changeStyleModalAllBox .buttonsTabs {
	display:flex;
	margin-top: 10px;
	width: 100%;
	justify-content: space-around;
}
#changeStyleModalAllBox .buttonsTabs .tab {
	text-align: center;
	margin: 3px;
	cursor: pointer;
	padding: 5px 12px;
	border-radius: 3px;
	width: 100%;
}
#changeStyleModalAllBox .buttonsTabs .tab-button.active {
	font-weight: normal;
}
/* Layout list container with scroll */
#changeStyleModalAllBox .modules-design-list {
	min-height: 200px;
	max-height: calc(100vh - 62px);
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	padding-top: 10px;
}
/* Adjust max-height when tabs are present */
#changeStyleModalAllBox.has-styles-contents .modules-design-list,
#changeStyleModalAllBox:has(#layoutCategoryTabs) .modules-design-list {
	max-height: calc(100vh - 130px);
}
.modules-design-button > i:after{
	content: '';
	width: 20px;
	height: 20px;
	top: 3px;
	left: 3px;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
.modules-design-button.active > .modules-custom-design-button i,
.modules-design-button.active > i {
	visibility: visible;
}
.modules-design-button:hover > img,
.modules-design-button.active > img {
	opacity: 0.9;
}
.modules-design-button .modules-design-button-header {
    background-color: #272C33;
    color: white;
    width: 100%;
    padding: 0px 5px;
    line-height: 35px;
}
.modules-design-button .modules-design-button-image {
	width: 100%;	/* IE11 Fix */
	max-width: 100%;
	max-height: 100%;
}
.designBackdropManaul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
	background-color: #000;
    opacity: 0;
}

/* Module Fast Promo Window
----------------------------------*/
.popover.modules-fast-promo {
	z-index: 1049;
	max-width: 100%;
	background-color: #2E383E !important;
	border:1px solid #2E383E;
    -webkit-box-shadow: 0 0 5px 6px rgba(0, 0, 0, 0.59);
    box-shadow: 0 0 5px 6px rgba(0, 0, 0, 0.59);
}
.popover.modules-fast-promo.bottom > .arrow:after {
	border-bottom-color: #2E383E;
}
.popover.modules-fast-promo.right > .arrow:after {
	border-right-color: #2E383E;
}
html[dir="rtl"] .popover.modules-fast-promo.left > .arrow:after {
	border-left-color: #2E383E;
}
.popover.modules-fast-promo .popover-content {
	width: 300px;
	height: 410px;				/* Used also for the `popover.placement` on `modules.js` */
	overflow-x: auto;
	box-sizing: content-box;	/* We like to increase the width in case there is a scrollbar*/
	padding: 5px 0;
	padding-top: 0;
}
.popover.modules-fast-promo .popover-content .container-fluid {
	padding: 0;
}
@media (min-width: 767px) {
	.popover.modules-fast-promo .popover-content {
		width: 360px;
		height: 410px;			/* Used also for the `popover.placement` on `modules.js` */
	}
}
.promoBackdropManaul,
.settings-boxes-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
	background-color: #000;
    opacity: 0;
}

/* Tour
----------------------------------*/
.popover.tour {
	max-width: 350px;
}
.popover.tour .popover-content {
	font-size: 16px;
}
.popover.tour .popover-content .media {
	padding: 7px 0;
	cursor: pointer;
	text-align: center;
}
.popover.tour .popover-content .media img {
	width: 200px;
	height: 102px;
	border:1px solid #ccc;
}
.tour-step-background {
    background-color: black;
    color: white;
    border-radius: 0;
    border: 1px solid #eff3f8;
}
.popover.tour .btn-success.disabled {
	display: none;
}
.popover.tour.tour3 .popover-navigation {
	display: flex;
	justify-content: space-between;
}
.tour-backdrop {
	opacity: 0.7;
}
.popover.tour.tour3 .close {
	padding: 5px;
}



#congratulationModal .imgVideo {
	cursor: pointer;
}
#congratulationModal .imgVideo img {
	width: 350px;
	height: 180px;
	border: 2px solid #ccc;
}
/* congradulations modal size limit */
#congratulationModal.system-modal .modal-dialog {
	max-width: 800px;
}

/* Scale up the welcome modal to small for this resolutions
-----------------*/
@media (min-width: 1280px) { 
	#videoTypeModal .modal-dialog,
	#congratulationModal .modal-dialog:not(.no-video) {
		width: 750px;
	}
}
@media (min-width: 1440px) {
	#videoTypeModal .modal-dialog,
	#congratulationModal .modal-dialog:not(.no-video) {
		width: 1000px;
	}
}
@media (min-width: 1600px) {
	#videoTypeModal .modal-dialog,
	#congratulationModal .modal-dialog:not(.no-video) {
		width: 1100px;
	}
}




/* live library window */
.imageLibraryLive {
	width: 404px;
    padding: 0 !important; 	/* Sometimes BS add padding using JS so we remove it */
    overflow-y: hidden !important;
}
.imageLibraryLive .modal-dialog,
.imageLibraryLive.system-modal .modal-dialog {
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
}
.imageLibraryLive .modal-content {
	height: 100%;
	border-radius: 0;
}
.modal-backdrop-without-opacity {
	opacity: 0 !important;
}
html[data-device="mobile"] .imageLibraryLive {
	width:100%;
}



html[data-device="mobile"] .wizard-accordion .panel-body {
	padding: 0;
}


.wizardMainButton {
    max-width: 52px;
    min-width: 50px;
    padding: 2px 0;
}
#publishWebsiteButton.wizardMainButton {
    max-width: 100%;
    min-width: 100%;
    padding: 2px 0;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-size: 12px;
}

/* Undo / Redo design*/
.wizard-u-r-container {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 5px 0px;
	height: 100%;
}
/* on rtl change the directions of the arrows */
html[dir="rtl"] .wizard-u-r-container {
	flex-direction: row-reverse;
}
.wizard-u-r-container #wizardUndo,
.wizard-u-r-container #wizardRedo {
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	padding: 0px 0px;
    margin: 3px;
	width: 50%;
}
.wizard-u-r-container #wizardUndo.disabled,
.wizard-u-r-container #wizardRedo.disabled {
	opacity: 0.5;
}

.backdropManaul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
	background-color: #000;
    opacity: 0.5;
}
#homepageGoal .hide-available-goals-tools {
	display: none !important;
}
.homepageGoalSelectButton {
	cursor: pointer !important;
}

#homepageGoalSelectButtonButton,
.btnSettings {
	color: #fff;
	z-index: 999;
}
#homepageGoalSelectButtonButton:hover,.btnSettings:hover,
#homepageGoalSelectButtonButton:active,.btnSettings:active,
#homepageGoalSelectButtonButton:focus,.btnSettings:focus {
	text-decoration: none;
	color:white;
}

.btnSettings > i.fa-chevron-up {
	display: none;
}
.buttonSettingBox {
	position: absolute;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    color: black;
    z-index: 999;
    padding: 10px;
    display:none;
    top: 60px;
	border: 0;
    border-bottom: 5px solid #0597F2;
    box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(255, 255, 255, 0.22);
   	border-radius: 1px;
}
/* in add items pages we move the settings box forward so the
submit buttons strip will not cover it */
#addModuleItemForm .buttonSettingBox {
	z-index: 1001;
}
.buttonSettingBox .label-info {
    background-color: #2297f2;
}
.buttonSettingBox.s-b-extra-padding {
	padding-top: 30px;
}
.buttonSettingBox .form-group:not(.s123-slider) {
	margin-bottom: 0;
}
.buttonSettingBox #wizardBox hr {
    border-top-color: #e0e0e0;
}
.buttonSettingBox .popupVideoInputBox .form-group {
	margin-bottom: 10px;
}
/* setting box containers need to have a relative position so the absolute of the
settings box will be calculated correctly when it is opened */
.s-b-container {
	position: relative;
}
/* Settings box + fonts select demo element
-------------------*/
.font-family-demo-container {
	display: flex;
}
.font-family-demo-container .ff-demo[readonly] {
	cursor: pointer !important;
	background-color: #fff !important;
	color: #000 !important;
	padding: 6px 12px !important;
	border-right: solid 0px rgb(213, 213, 213);
}
html[dir="rtl"] .font-family-demo-container .ff-demo[readonly] {
	border-right: solid 1px rgb(213, 213, 213);
	border-left: solid 0px rgb(213, 213, 213);
}
.font-family-demo-container i {
	background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    border: solid 1px rgb(213, 213, 213);
    border-left: solid 0px rgb(213, 213, 213);
    padding: 0px 5px;
    cursor: pointer;
}
html[dir="rtl"] .font-family-demo-container i {
	border-left: solid 1px rgb(213, 213, 213);
	border-right: solid 0px rgb(213, 213, 213);
}

/* promo module is also using the settings box and we didn't change
there the settings box structure because we wanted to change it only on wizard beta 
so we need to keep the old design */
#addModuleItemForm .buttonSettingBox {
	width: calc( 100% - 24px );
}

.buttonSettingBox > div {
	padding: 5px 10px;
}

/* Full Size Setting Box - On some setting boxes we are stretching it on full size of `tabbable` element
and because of that we need to disable to some parents the relative position css property
---------------------------*/
.s-b-container.s-b-full-size,
.tab-content.s-b-full-size {
	position: static;
}
.buttonSettingBox.s-b-full-size {
	top: 15px;
	left: 15px;
	bottom: 15px;
	right: 15px;
	width: auto;
}
.buttonSettingBox.s-b-full-size > div {
	max-height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
}

/* settings box close button design */
.buttonSettingBox .s-b-c {
	position: absolute;
	top: 0;
	right: 0;
}
.buttonSettingBox .s-b-c > button:focus {
	outline: none;
}
html[dir="rtl"] .buttonSettingBox .s-b-c {
	right: auto;	
	left: 0;	
}
.buttonSettingBox .s-b-c .close {
	color: #000;
	opacity: 1;
	float: unset;
	font-size: 26px;
}
/**/
.buttonSettingBox .chosen-drop {
	display: block;
	position: unset !important;
}
/* setting box cover */
.s-b-cover {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
}

/* Module Categories List (menu, gallery, etc)
----------------------------------*/
@media (min-width: 768px) { 
	.module-categories-list-container .sticky-top {
		position: sticky;
		top: 0;
	}
}
.module-categories-list-container #categoriesList {
	margin-bottom: 15px;
	overflow: auto;
	max-height: calc(100vh - 200px);
}
html[data-device="mobile"] .module-categories-list-container #categoriesList {
	max-height: 100%;
}
.module-categories-list-container #categoriesList li {
	background-color: #FFFFFF;
	border: 1px solid #EBECEE;
	padding: 16px;
}
.module-categories-list-container #categoriesList li:hover,
.module-categories-list-container #categoriesList li.selected {
	background-color: var(--veryLightGray);
}
.module-categories-list-container #categoriesList li + li {
	border-top-width: 0;
}
.module-categories-list-container #categoriesList li:first-child {
	border-radius: 2px 0 0 2px;
}
.module-categories-list-container #categoriesList li:last-child {
	border-radius: 0 2px 2px 0;
}
.module-categories-list-container #categoriesList li:only-child {
	border-radius: 2px;
}
.module-categories-list-container #categoriesList li .edit-category-btn {
	color: #5F6373;
}
.module-categories-list-container #categoriesList li .delete-category-btn {
	color: #B4B8C2;
}
.module-categories-list-container #categoriesList li .category-name-box .category-name {
	color: #010B40;
	font-weight: 500;
}
.module-categories-list-container #categoriesList li .category-name-box i.moveicon {
	color: #5F6373;
}
#pluginsList .pluginCard .plugin-name{
	min-height: 4.5em;
}

#pluginsList .pluginCard .plugin-category{
	min-height: 3em;
}

.pluginCard {
	max-width: 300px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 0;
    background-color: #fff;
    text-align: center;
	height: 100%;
}
.pluginCard div {
    padding: 5px;
}
.pluginCard .logo {
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.pluginCard .logo img {
	max-width: 100%;
    max-height: 100%;
}
.plugin-table .plugin-logo {
    max-height:130px;
}
.plugin-table .plugin-logo img {
    max-height:120px;
    text-align: center;
    margin: auto;
}






.layoutBox {
    position: relative;
    padding: 11px 3px;
    text-align: center;
    max-height: 94px;
}
.layoutBox.active {
    outline: 2px solid #428bca;
    border-radius: 3px;
}
.layoutBox a {
    display: block;
}
.layoutBox a.layoutMainLink {
    display: block;
}
.layoutBox .moreLayoutsDropdown {
    display: none;
    position: absolute;
    bottom:0;
    left:0;
}
.layoutBox.active .moreLayoutsDropdown {
    display: block;
}

#moduleWindow .modal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    font-size: 18px;
}
#moduleWindow .modal-title a {
	color:white;
}
#moduleWindow .modal-title a:hover {
	color:#e6e6e6;
}
#moduleWindow .modal-content {
	width: 100% !important;
	height: initial;
	max-width: 100%;
	border:0;
	box-shadow: 15px 0px 20px 0px rgba(20, 26, 27, 0.31);
	background-color: #f2f4f8;
}
/* Module Window Width */
@media (min-width: 768px) {
	#moduleWindow .modal-dialog {
		margin: 15px 30px;
	}
	#moduleWindow:is(.small,.system-modal.size-s1) .modal-dialog {
		margin: 15px auto;
	}
	#moduleWindow:is(.medium,.system-modal.size-m1) .modal-dialog {
		margin: 15px auto;
	}
}
@media (min-width: 1441px) {
	#moduleWindow .modal-dialog {
		margin: 15px 60px;
	}
	#moduleWindow:is(.small,.system-modal.size-s1) .modal-dialog {
		margin: 30px auto;
	}
	#moduleWindow:is(.medium,.system-modal.size-m1) .modal-dialog {
		margin: 15px auto;
	}
}

.modal-header .close {
    font-size: 32px;
}

#moduleWindow .modal-header .expand,#moduleWindow .modal-header .compress {
    margin-top: -2px;
}
#moduleWindow button.expand,#moduleWindow button.compress {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
#moduleWindow .expand,#moduleWindow .compress {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}
#moduleWindow .expand i,#moduleWindow .compress i {
	padding: 6px 18px;
}

/* Bootstrap-Tags for multiple emails collector
-----------------------------------------------*/
.multiple-blog-tags > .tags,
.multiple-article-tags > .tags,
.multiple-emails > .tags {
	width: 100%;
}

.disableInput {
	background-color: #ccc !important;
    cursor: no-drop;
  	color: rgba(0, 0, 0, 0.28);
}

.activeTag {
}

.autoTranslateWarning {
	opacity: 0.5;
}


.disableBox {
    pointer-events: none;
    opacity: 0.4;
}

.homepageGoalSelectButtonButtonBox {
    background-color: #abbac3;
    padding: 6px;
    border: 0px solid #909090;
    display: inline-block;
}



/* Edit box in addNew module window */
.editBox {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 20px 10px 10px 10px;
    margin: 10px 0 20px 0;
    border: 1px solid #e1e6ef;
}
.editBox > h4 {
    position: absolute;
    top: -15px;
    font-size: 12px;
    padding: 5px 11px;
    margin: 0;
    background-color: #f9f9fa;
    border: 1px solid #e1e6ef;
    color: black;
    font-weight: normal;
}
.widget-box {
	background-color: #fff;
    border: 1px solid #e1e6ef;
    margin-bottom: 1.5rem;
}




/* Homepage images options */
.homepageImageExampleBox {
    max-width: 100%;
    height: 79px;
    border: 3px solid #141a1b;
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
}
.homepageImageExampleBox .homepageImageExamplePreview {
    position: absolute;
    top:0;
    left:0;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.homepageImageExampleBox .text {
    color:white;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
}
.homepageImageExampleBox .opacity7 {
    opacity: 0.7;
}
.homepageImageExampleBox .opacity5 {
    opacity: 0.5;
}
.homepageImageExampleBox .opacity3 {
    opacity: 0.3;
}
.homepageImageExampleBox .opacity2 {
    opacity: 0.2;
}
.homepageImageExampleBox > i {
	visibility: hidden;
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 10;
	color: #87b87f;
	font-size: 20px;
}
html[dir="rtl"] .homepageImageExampleBox > i {
	right: auto;
	left: 3px;
}
.homepageImageExampleBox > i:after{
	content: '';
	width: 12px;
	height: 12px;
	top: 3px;
	left: 3px;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
.homepageImageExampleBox.active > i {
	visibility: visible;
}

.orangeFlash {
	background-color: #4e3300 !important;
}

/* Quick dashboard Tab
----------------------------------*/
#quickDashboard .qd-card-link:hover {
	text-decoration: none;
}
#quickDashboard .qd-mini-card {
	height: 120px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 20px;
    color: #ffffff;
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
   	background-color: #ffffff !important;
   	outline: none !important;
}
/* Mobile */
@media (max-width: 767px) {
	#quickDashboard .qd-mini-card {
		height: 170px;
	}
}
#quickDashboard .qd-mini-card .qd-mini-card-icon {
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    display: inline-block;
    float: left;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    text-align: center;
    width: 60px;
    background-color: #2b9ac9 !important;
}
/* Mobile */
@media (max-width: 767px) {
	#quickDashboard .qd-mini-card .qd-mini-card-icon {
		display: flex;
    	align-content: center;
    	align-items: center;
    	justify-content: center;
    	float: none;
    	margin: auto;
	}
}
#quickDashboard .qd-mini-card .qd-mini-card-info {
	padding-top: 2px;
    color: #797979;
}
/* Mobile */
@media (max-width: 767px) {
	#quickDashboard .qd-mini-card .qd-mini-card-info {
		text-align: center !important;
	}
}
#quickDashboard .qd-mini-card .qd-mini-card-info span {
	color: #797979;
    display: block;
    font-size: 24px;
    font-weight: 600;
}
#quickDashboard .qd-site-preview {
    height: 120px;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
    background-color: #000;
}
#quickDashboard .qd-site-preview-back-image {
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
}
#quickDashboard .qd-site-name {
	position: absolute;
	padding: 8px;
	color:white;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgb(0, 0, 0);
}
#quickDashboard .qd-logout-continer {
	position: fixed;
	width: 364px;
	bottom: 0;
	background: #2E383E;
	padding: 11px 0;
	z-index: 100;
}



.highOpacity {
	opacity: 0.2;
}

.activeWhite {
	background-color: #fff !important;
    color: black !important;
}

.pluginModalTitle {
	color:white;
}

/**
 * Intercom Chat
 */
.intercom-messenger-frame,
.intercom-app iframe[name="intercom-note-frame"],
.intercom-app iframe[name="intercom-launcher-badge-frame"] {
	z-index: 1000 !important; /* prevent from the chat to be on top on our popup modals */
}
.helpBOX {
	z-index: 1000 !important;
}
html[dir="rtl"] .intercom-app iframe[name="intercom-note-frame"] {
	left: 20px !important;
	right: auto !important;
}


.modules-design-styles {
	display: flex;
	flex-direction: column;
}
.structures-styles {
	display: flex;
	flex-direction: column;
	align-items: center;
}


select::-ms-expand {
	display: none;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.oldLayout {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #b31919;
    padding: 4px 5px;
    border-radius: 0;
    color: white;
}
html[dir=rtl] .oldLayout {
    left: auto;
    right: 15px;
}
.newLayout {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #5fa948;
    padding: 4px 5px;
    border-radius: 0;
    color: white;
}
html[dir=rtl] .newLayout {
    left: auto;
    right: 15px;
}

.domainBox {
    background-color: #141a1b;
    padding: 0;
    margin: 24px 0 12px;
    min-height: 69px;
    background: #FFFFFF;
	border-radius: 4px;
}
.domainBox .title {
    padding: 16px 20px 0;
    color: #010B40;
    font-weight: 500;
    line-height: 140%;
}
.domainBox .content {
    padding: 8px 20px 20px;
}
.domainBox .content {
    color: #010B40;
}
.domainBox .content #domainTab_subDomain,
.domainBox .content .PublishChanges_subDomain {
	color: #0583F2 !important;
    font-weight: 500;
    line-height: 140% !important;
    padding: 0 !important;
}
.domainBox h3 {
	margin:0;
	margin-bottom: 10px;
}

#existingDomain .content div {
	font-weight: 500;
	line-height: 140%;
	color: #02B22B;
	margin-bottom: 8px;
}
#existingDomain .content span {
	color: #5F6373;
	display: block;
}
#existingDomain .content a {
	border-radius: 4px;
	margin-top: 16px;
}
#alreadyHaveDomain {
	margin-top: 8px;
	font-weight: 500;
	line-height: 140%;
}
#alreadyHaveDomain a {
	color: #FF523A;
	cursor: pointer;
	text-decoration: none;
}
#alreadyHaveDomain a.new:before {
	font-weight: 500;
	font: normal normal normal 14px/1 FontAwesome;
	content: '\f104';
	margin-right: 8px;	
}
html[dir=rtl] #alreadyHaveDomain a.new:before {
	content: '\f105';
	margin-right: 0;	
	margin-left: 8px;	
}



#upgradeTab .upgradeBox {
	border-radius: 0px !important;
    background-color: #141a1b;
    box-shadow: none;
    padding: 12px 12px;
    margin: 7px 4px;
    min-height: 69px;
    border: 0;
    border-bottom: 3px solid #000000;
}
#upgradeTab .upgradeBox h3 {
	margin:0;
	margin-bottom: 10px;
}
#upgradeTab .why {
    color:white;
    margin-top:10px;
}
#upgradeTab .why .unique {
    font-weight: bold;
}
#upgradeTab .why .fa-star {
    color:#fee188;
}


.previewDevices .popover-content {
	padding: 0;
}
#previewButtons {
    background: transparent;
    background-color: transparent !important;
    color: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(255,255,255,.5);
    border:0;
}
#previewButtons:hover {
    background: transparent;
	color:white !important;
	border-color:white !important;
	box-shadow: unset !important;
}
#previewButtons:focus,
#previewButtons:active:focus {
	outline: none;
}
.devicesPreviewContent {
	margin:0;
	background: inherit;
}
#previewScaleDevices li {
	padding-left: 0;
	margin-bottom: 0;
	border: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 0;
}
#previewScaleDevices a {
	background: none !important;
}
html[dir=rtl] #previewScaleDevices li {
	padding-left: 15px;
	padding-right: 0;
}
#previewScaleDevices li:last-child {
	border: 0;
}
#previewScaleDevices a {
	width: 100%;
	height: 100%;
	font-size: 18px;
	display: flex;
	align-content: center;
	align-items: center;
	color: rgba(255,255,255,.5);
	text-decoration: none;
	margin: 0;
	white-space: nowrap;
}
#previewScaleDevices .device-type-text {
	font-size: 0.8em;
}
#previewScaleDevices i.fa-tablet,
#previewScaleDevices i.fa-mobile {
	font-size: 1.3em;
}

.currency-symbol,
.weight-unit,
.length-unit {
	cursor: pointer;
}

#savedStatus {
	padding: 10px 0;
	font-size: 10px;
	color: rgba(255,255,255,.7);
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: none;
}
@media (max-width: 1200px) {
	.wizard.site-editor-b #savedStatus {
		display: none !important;
	}
	#wizardTopToolbar #upgradeButtonButton .upgrade-icon {
		display: none;
	}
}
.edit-item-btn {
	cursor: pointer;
}
.mis-btn-drag {
	cursor: move;
}

/**
 * Chosen Select
 */
 .chosen-container .chosen-drop {
 	z-index: 2147483646;
 }
 
 /**
  * Modal breadcrumbs design
  */
  /* hide the before element */
 .breadcrumb-custom > li + li:before {
  font-size : 18px;
  color: white;
 }
/* change ace css design */
 .breadcrumb-custom {
 	font-size : 18px;
    margin :0px 0px !important;
    color: white;
 }
/* change ace css color to white */
.breadcrumb-custom > li {
 	color: white !important;
}


/* Design >> Templates (accordion design)
----------------------*/
.templates-container {
    height: 450px;
    overflow-x: auto;
}
.template {
	padding-bottom: 44px;
}
/* PC version design */
.template .previewImage {
    border: 1px solid #ccc;
	text-align: center;
    background-position: center center;
    background-size: cover;
    height: 164px;
    width: 90%;
    max-width: 300px;
    margin-bottom: 10px;
    padding: 0;
    cursor: pointer;
   
}
/* Mobile version design */
.template .themeMobilePreview {
	width: 100px;
	height: 165px;
	position: absolute;
	top: 20%;
	left: 70%;
	border: 1px solid #ccc;
	z-index: 1;
	cursor: pointer;
}

/**
 * Homepage / Promo Images Filter
 */
.s123-collapse-settings #filterHomepageOptions {
	padding: 0;
}
#filterHomepageOptions, #homepageGradientsColorsList {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
    align-content: flex-start;
}
#homepageGradientsColorsList .colors-list,
#homepageGradientsColorsList .gradients-list {
	display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
    align-content: flex-start;
    overflow-y: auto;
    height: 145px;
    margin-bottom: 20px;
}
#homepageGradientsColorsList.s123-collapse-settings .content {
	padding: 16px 0px;
}
#homepageGradientsColorsList .gradients-colors-tabs-continer .gradients-colors-tabs {
	display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
#homepageGradientsColorsList .gradients-colors-tabs-continer .gradients-colors-tabs .gradients-colors-tab {
    width: 50%;
    text-align: center;
    cursor: pointer;
}
#homepageGradientsColorsList .gradients-colors-tabs-continer .gradients-colors-tabs .gradients-colors-tab.active {
    color: orange;
    font-weight: bold;
}
#filterHomepageOptions .filterEffectClass, #homepageGradientsColorsList .homepageReadyGradientsBoxClass {
	width: 50px;
    height: 50px;
    cursor: pointer;
}
#filterHomepageOptions .filterEffectClass, #homepageGradientsColorsList .gradientsList {
    width: calc(100% / 7);
	height: 35px;
    border-radius: 100%;
    margin: 2px;
    cursor: pointer;
}
#filterHomepageOptions .filterEffectClass, #homepageGradientsColorsList .gradientsList[data-type="gradients"] {
    width: calc(100% / 7);
	height: 35px;
    border-radius: 100%;
    margin: 2px;
}
.s123-collapse-settings #filterHomepageOptions .filterEffectClass {
	width: 23%;
    height: auto;
    cursor: pointer;
    padding:1px;
}
#homepageGradientsColorsList .gradientsList {
	margin: 0px 4px 4px 0px !important;
    border: 1px solid #e6e6e8 !important;
    border-radius: 4px !important;
    height: 45px !important;
    width: 45px !important;
}
html[dir=rtl] #homepageGradientsColorsList .gradientsList {
	margin: 0px 0px 4px 4px !important;
}
#boxContentGradientsColorsList #homepageGradientsColorsList {
	display: block !important;
	padding: 16px 20px;
}
.s123-collapse-settings #homepageGradientsColorsList .gradientsList {
    width: 25%;
    height: 70px;
    cursor: pointer;
    border: 3px solid #141a1b;
}
#homepageFilterDesign .homepageReadyDesignClass, #homepageGradientsColorsBOX .homepageReadyDesignClass {
	width: 100%;
	height: 100%;
	max-height: 50px;
    background-color: #000;
    cursor: pointer;
    border: 1px solid #444;
    object-position: center center;
    object-fit: cover;
}
.hideExtraFilters {
	display: none;
}
#homepageFiltersButtons {
	text-align: center;
	border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
	border:0;
}
.filterHomepageLayouts {
	color: white;
    padding: 8px;
    font-size: 12px;
    cursor: pointer;
}
.filterHomepageLayouts.active {
	color: #FF9800;
}
.checkboxSingleSetting {
	position: relative;
	background: #FFFFFF;
	border-radius: 4px;
    box-shadow: none;
    padding: 16px 20px;
    margin: 16px 0px;
    border: 0;
    color: #010B40;
}
.checkboxSingleSetting span {
	font-weight: 500;
}
.checkboxSingleSetting:not(.m-b-c):not([data-type="widget"]) button.btn-primary,
.checkboxSingleSetting:not([data-type="widget"]) a.btn-primary:not([id^="home_"],[id*="Widget"]) {
	margin-top: 16px;
	background-color: #FFFFFF !important;
	border: 1px solid #B4B8C2;
	box-sizing: border-box;
	color: #010B40 !important;
	font-weight: 500;
}
.checkboxSingleSetting .input-group-btn button.btn-primary {
	margin-top: 0;
}
.checkboxSingleSetting:not([data-type="widget"]) .input-group-btn button.btn-primary:hover {
	background-color: #FFFFFF !important;
	border: 1px solid #B4B8C2;
	color: #010B40 !important;
}
.checkboxSingleSetting:not(.m-b-c):not([data-type="widget"]) button.btn-primary:hover,
.checkboxSingleSetting:not([data-type="widget"]) a.btn-primary:hover:not([id^="home_"],[id*="Widget"]) {
	background-color: #010B40 !important;
	box-shadow: none !important;
	color: #FFFFFF  !important;
	border-color: #010B40;
}
.checkboxSingleSetting .pull-right {
	height: 10px;
}
.checkboxSingleSetting .extraSetting {
	padding-top: 5px;
    border-top: 1px solid #ffffff26;
}
.checkboxSingleSetting .active-options-container .option-details {
	color: #fff;
}
.checkboxSingleSetting:not([data-type="widget"]) .input-group-btn button.btn-danger:not([id^="home_"],[id*="Widget"]) {
	border-color: #FF523A;
}
.checkboxSingleSetting .website-type-video.hideVideoType {
	display: none;
}
.disableToggleContainer .checkboxSingleSetting.disableToggle {
    opacity: 0.6;
    pointer-events: none;
}

/* Hight light animation for settings box
----------------*/
@keyframes checkboxSingleSetting-highlight {
	0% {
		background-color: #fff;
	}
	25% {
		background-color: #fad39c;
	}
	50% {
		background-color: #f0ad4e;
	}
	75% {
		background-color: #fad39c;
	}
	100% {
		background-color: #fff;
	}
}
.checkboxSingleSetting.highlight-box {
	animation: checkboxSingleSetting-highlight 1.0s 1 ease 0.0s;   
}
.checkboxSingleSetting.highlight-box a[data-rel="tooltip"] {
	color: inherit;
}
/*
 * modules like E-commerce that can be shown in the website only once
 * has this class to change the opacity
 */
.module-limited-to-one {
	opacity: 0.45;
}
/* Modules like highlights are requiring a parent
module so we need to disable them when parent
module is missing
----------------------------------------*/
.required-module-missing {
	opacity: 0.45;
}
/* items.php page, hide the `message no items` */
.modules-items-empty {
	display : none;
}

.formatOptionsHelpLink {
	cursor: pointer;
}

/**
 * .hide-from-print - every element that has this
 *  class won't be printed.
 *
 * .print-content - every element that has this
 *  class will be printed.
 */
@media print {
    .hide-from-print {
        display: none;
    }
    .print-content {
    	display: block;
    }
}

#publishQRcode {
	position: relative;
}
#publishQRcode .qr img {
	width:100px;
	height:100px;
}
#publishQRcode .close {
    position: absolute;
    right: -20px;
    top: -20px;
    color: white;
    opacity: 1;
}
html[dir=rtl] #publishQRcode .close {
	right: auto;
	left: -20px;
}


/**
 * Item more option dropdown menu - fix the position of the dropdown menu on RTL
 */
 html[dir=rtl] [id^="home_slider_image"] ul.dropdown-menu.dropdown-menu-left,
 html[dir=rtl] ul.item-more-option-menu.dropdown-menu.dropdown-menu-left {
 	right: auto;
    left: 0;
 }

/**
 * When multi images tool has `data-first-image-big="true"` we show
 * the first image bigger then the rest so the client will understand it's
 * the main image of the item.
 */
ul.multiple-images-preview-container[data-first-image-big="true"] li:first-child {
	width: 160px !important;
	height: 160px !important;
}
ul.multiple-images-preview-container[data-first-image-big="true"] img,
ul.multiple-images-preview-container[data-first-image-big="true"] li.ui-sortable-helper,
ul.multiple-images-preview-container[data-first-image-big="true"] li.multiple-images-placeholder {
	width: 75px !important;
	height: 75px !important;
}

ul.multiple-images-preview-container[data-first-image-big="true"] li:first-child a,
ul.multiple-images-preview-container[data-first-image-big="true"] li:first-child img {
	width: 100% !important;
	height: 100% !important;
	object-position: center;
}
ul.multiple-images-preview-container[data-first-image-big="true"] li:first-child .image-video-icon {
	font-size: 35px;
}
ul.multiple-images-preview-container[data-first-image-big="true"] li.ui-sortable-helper .product-sale-banner {
	display: none;
}
ul.multiple-images-preview-container[data-first-image-big="true"] li > a .image-video-icon {
	bottom: 28px;
	font-size: 20px;
}

/**
 * Overwrite the ace switch default text from On/Off with Show/Hide
 * only if the label has the class `show-hide-text`
 */
input[type=checkbox].ace.ace-switch + .lbl.show-hide-text::before {
	content: "Show\a0\a0\a0\a0\Hide" !important;
	width: 47px;
}
input[type="checkbox"].ace.ace-switch:checked + .lbl.show-hide-text::after {
	left: 34px;
}


/**
 * We had an issue for small height devices, when the user was
 * turn on the homepage image parallax it was move all the page
 * design out from the screen, in case the user has scroll-y. 
 * we fix it by adding position relative to the label. 
 * Example: https://i.gyazo.com/72f851ad9fea976e6bd30b495ef9be97.mp4
 */
.fix-ace-switch-scroll-issue {
	position: relative;
}

/**
 * Jquery Gritter Ignore images - In the css files `files\products-WB0B30DGR\assets\css\jquery.gritter.css`
 * but we don't need the images because the design of the gritter message is different then the one we want
 * so we choose to ignore them.
 */
.gritter-item-wrapper,
.gritter-top,
.gritter-bottom,
.gritter-item,
.gritter-close {
	background:url('');
}

.mih-dropdown-popover {
	border-radius: 4px;
}
.mih-dropdown-popover .popover-content {
	padding: 0;
}
.mih-dropdown-popover ul.item-more-option-menu {
	display: block;
	position: static;
	margin: 0;
	border: none;
	border-radius: 4px !important;
}
.mih-dropdown-popover ul.item-more-option-menu li.divider {
	background-color: #EBECEE;
}
.mih-dropdown-popover .item-more-option-menu > li > a {
	margin: 0;
	cursor: pointer;
	line-height: 140%;
	color: #5F6373;
    padding-left: 20px;
    padding-right: 20px;
}
.mih-dropdown-popover .item-more-option-menu > li:not(:last-child) > a {
	padding-bottom: 12px;
}
.mih-dropdown-popover .item-more-option-menu > li:hover > a {
	background-color: #EBECEE;
}
.mih-dropdown-popover .item-more-option-menu > li > a > i {
	width: 20px;
	display: inline-block;
}
.mih-buttons-delete-bootbox .bootbox-close-button {
	opacity: 0.8;
	color: #ff5652;
	font-size: 28px;
}
.mih-buttons-delete-bootbox .modal-footer {
	text-align: center;
}
.mih-buttons-delete-bootbox .modal-footer button:first-child {
	margin-right: 10px;
}
html[dir=rtl] .mih-buttons-delete-bootbox .modal-footer button:first-child {
	margin-right: 0;
	margin-left: 10px;
}

/* Disabled Dropdown Button - Sometimes we want to disable the dropdown button
------------------- */
.mih-dropdown-popover .mih-disabled-btn {
	opacity: 0.6;
}

/* Mobile Items Table Handler - Display responsive table in mobile */
.mobile-items-table td .mobile-items-details {
	display: none;
}
@media (max-width: 767px) {
	.mobile-items-table th:not(:nth-child(2)):not(:last-child),
	.mobile-items-table td:not(:nth-child(2)):not(:last-child) {
		display: none;
	}
	.mobile-items-table th:nth-child(2),
	.mobile-items-table td:nth-child(2) {
		width: 65%;
	}
	.mobile-items-table th:last-child,
	.mobile-items-table td:last-child {
		width: 35%;
	}
	.mobile-items-table td .mobile-items-title,
	.mobile-items-table td .mobile-items-details {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile-items-table td .mobile-items-title {
		font-weight: bold;
	}
	.mobile-items-table td .mobile-items-details {
		font-size: 90%;
	}
	.mobile-items-table td img.img-thumbnail {
		width: 35px !important;
		height: 35px !important;
		margin-right: 10px !important;
	}
	html[dir=rtl] .mobile-items-table td img.img-thumbnail {	
		margin-right: 0 !important;
		margin-left: 10px !important;
	}
	.mobile-items-table .mobile-items-container {
		max-width: 150px;
    	overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile-items-table #modulesItemsSortableHeader {
		display: none !important;
	}
}
.mobile-items-table .edit-item-container {
	display: flex;
}
.mobile-items-table .edit-item-container.ei-align-items-center {
	align-items: center;
}

/**
 * Unsaved Changes Alert
 */
.s123-unsaved-changes-alert {
	/* set the dialog to display at the center of the screen: https://stackoverflow.com/a/43940890/469161 */
	display: flex !important;
    align-items: center;
    justify-content: center;
}
/* Bootbox Backdrop Handler - We fix the backdrop z-index to display on top of all the modals */
.s123-unsaved-changes-alert {
	z-index: 1060;
}
.s123-unsaved-changes-alert + .modal-backdrop {
	z-index: 1050;	
}

/* Items Title Labels (visible/invisible) */
.s123-items-title-label {
	display: inline-block;
    margin-left: 10px;
}
html[dir=rtl] .s123-items-title-label {
	margin-left: 0;
	margin-right: 10px;
}



.singleVideoExplain {
	z-index: 99999999999;
}

/** 
 * PWA Explanation Video - Limit the video size up to 580px
 * because the mobile videos are larger and will create scrolling
 */
.singleVideoExplain.pwa video {
	width: 100%;
	max-height: 580px;
}

/* Explanation video tabs design
--------------------*/
.singleVideoExplain.tutorial .modal-body {
	padding: 0px;
}
.singleVideoExplain .s-v-e {
	display: flex;
	padding: 10px;	
	min-height: 500px;
}
.singleVideoExplain ul.side-tabs {
	min-width: 150px;
	list-style: none;
	margin: 0;
	cursor: pointer;
}
.singleVideoExplain ul.side-tabs li {
	display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px;
    height: 43px;
}
.singleVideoExplain ul.side-tabs li.active {
	border-bottom: 0px solid #dddddd;
}
.singleVideoExplain ul.side-tabs .active {
	color: #fff;
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}
.singleVideoExplain ul.side-tabs span {
	margin: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.singleVideoExplain .message {
	padding-left: 10px;
	width: 100%;
}
html[dir=rtl] .singleVideoExplain .message {
	padding-left: 0px;
	padding-right: 10px;
}





.domainTab_subDomain {
    white-space: unset;
    word-wrap: break-word;
    width: 100%;
}


/* user is trying to add category without any name*/
.wizard-add-new-category .error {
	color: #d16e6c;
}
.wizard-add-new-category #addNewCategory.error {
	border-color: #f2a696;
	color: #d68273;
}



.changePelleteColorsWithTitle {
	padding-top: 26px;
}
.changePelleteColorsWithTitle .boxTitle {
    position: absolute;
    top: -10px;
    background-color: #ececec;
    color: black;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 2px;
}

/* PC - default style of RecommendedImagesContainer */
#homepageGradientsColorsList {
	width: 100%;
	max-width: 100%;
	overflow-y: auto;
	margin-top: 5px;
	height: 95%;
}
#ActiveHomepageColor {
	background-color: transparent;
	border: 0px solid #272727;
}
#ActiveHomepageColor .customColorBOX .content {
	display: grid;
    grid-template-columns: 50% 50%;
}
.RecommendedImagesContainer {
	width:100%;
	max-width: 100%;
	overflow-x: auto;	
	height: calc( 100% - 50px );
	margin-top: 5px;
	display: none;
}
/* All Mobile Devices - we have preview and publish buttons so we need to change the height */
html[data-device="mobile"] .RecommendedImagesContainer:not([data-type="patterns"]) {
	padding-bottom: 55px;
}
.RecommendedImages {
    width: 100%;
    position: relative;
}
/*
Recommended images saved label
----------------------*/
.r-i-modal .RecommendedImages .recommendedImagesItem .saved-label-container {
	display: none;
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 30px;
}
.r-i-modal .RecommendedImages .recommendedImagesItem .saved-label-container .saved-label {
	display: flex;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 2;
	color: #fff;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	top: 0;
}
.r-i-modal .RecommendedImages .recommendedImagesItem.active .saved-label-container .saved-label-cover {
	display: block;
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	width: 100%;
	opacity: 4;
	background-color: green;
	opacity: 0.2;
}
.r-i-modal #saveAndClose {
	display: flex;
	display: none;
	position: absolute;
	bottom: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	left: 0;
	right: 0;
	z-index: 6;
}
.r-i-modal #saveAndClose > a {
	width: 100%;
	cursor: pointer;
}


/* Recommended Images Pattern Type Design
----------------*/
.RecommendedImagesContainer[data-type="patterns"] {
	height: calc( 100% - 10px );
}
.RecommendedImagesContainer[data-type="patterns"] img {
	background-color: #fff;
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages {
	display: flex;
	flex-wrap: wrap;
	height: auto !important; 
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages .recommendedImagesItem-sizer {
	display: none !important; 
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages .recommendedImagesItem {
	width: calc(100% * (1/3) - 4px); 
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages .recommendedImagesItem .r-i-image-wrapper {
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages .recommendedImagesItem img {
	width: 100%;
	height: 100%;
	top: 0;
    left: 0;
    object-fit: cover;
	position: absolute !important;
	visibility: visible;
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages > .recommendedImagesItem .styles {
	width: 95% !important;
}
.RecommendedImagesContainer[data-type="patterns"] .RecommendedImages .recommendedImagesItem .saved-label-container {
	bottom: 0px;
}


/*
Homepage Images Library Skeleton loader
--------------------*/
.RecommendedImagesContainer .r-i-fake > .r-i-fake-item {
	visibility: visible;
	width:100%;
	background-color: #c4c9cc;
	position: relative;
	overflow: hidden;
}
.RecommendedImagesContainer .r-i-fake:not([data-type="patterns"]) > .r-i-fake-item {
	height: 112px;
}
.RecommendedImagesContainer .r-i-fake > .r-i-fake-item:before {
	position: absolute;
	z-index: 1;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
	animation: skeletonLoader 1.5s infinite;
}


/* clear fix */
.RecommendedImages:after {
	content: '';
	display: block;
	clear: both;
}
.RecommendedImages > .recommendedImagesItem-sizer,
.RecommendedImages > .recommendedImagesItem {
  width: 50%;
}
.RecommendedImages > .recommendedImagesItem {
	float: left;
    text-align: center;
    padding: 2px;
    cursor: pointer;
    position: relative;
    margin-bottom: 4px;
}
.RecommendedImages > .recommendedImagesItem .mediaKind_play {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.RecommendedImages > .recommendedImagesItem.customWidth {
	width:100%;
}
.RecommendedImages > .recommendedImagesItem:hover {
	opacity: 0.9;
}
.RecommendedImages > .recommendedImagesItem > img {
	width:100%;
	height:auto;
	max-width: 100%;
	border: 1px solid #cacaca;
	cursor: pointer;
	display: block;
	/* we show the images after they loaded to prevent design issues */
	visibility: hidden;	
}
.RecommendedImages > .recommendedImagesItem .credits {
	display: none;
	position: absolute;
	left:3px;
	bottom: 3px;
	padding:2px;
	background-color: rgba(255, 255, 255, 1);
	width: 162.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.RecommendedImages > .recommendedImagesItem:hover .credits {
	display: inline;
}
.RecommendedImages > .recommendedImagesItem .credits a {
	color:#000;
	font-size: 11px;
}

/* need note */
.r-i-modal {
    position: absolute;
    width: calc( var(--wizard-side-menu-width) - 15px);
    margin: 0;
    overflow-y: hidden !important;
    margin-left: 5px;
}
html[dir=rtl] .r-i-modal {
    margin-left: 0;
    margin-right: 5px;
}
.r-i-back-drop {
	width: var(--wizard-side-menu-width);
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
	background-color: #000;
	z-index: 5;
}
.r-i-modal .modal-body {
	padding: 15px !important;
	overflow-y: hidden;
	height: calc(100vh - 80px);
}
html[data-device="mobile"] .r-i-modal {
	width: 95%;
	margin: 0 2.5%;
}
html[data-device="mobile"] .r-i-back-drop {
	width: 100%;
}
html[data-device="mobile"] .r-i-modal .modal-body {
	height: calc(100vh - 145px);
}
html[data-device="mobile"][data-ios-device="iPhone"] .r-i-modal .modal-body {
	height: calc(100vh - 190px);
}
.r-i-modal .modal-dialog {
	margin: 10px auto;
	width: 100%;
}
.r-i-modal .RecommendedImages > .recommendedImagesItem .credits,
.r-i-modal .RecommendedImagesContainer:not([data-type="patterns"]) .RecommendedImages > .recommendedImagesItem .styles {
	width: 97% !important;
}
.r-i-modal .search {
	padding-left: 35px;
	padding-right: 35px;
}
.r-i-modal .rcContainer .boxContent {
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	margin-top: 5px;
}
.r-i-modal .rcContainer .boxContent .cat,
.r-i-modal .rcContainer .boxContent #libraryHomepageGradientsCat {
	width: calc(100% / 2);
	margin-bottom: 5px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
}
.r-i-modal .rcContainer .boxContent .cat .images {
    width:100%;
    font-size: 12px;
    color:white;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #000;
}
.r-i-modal .rcContainer .boxContent .cat img {
    width: 100%;
    padding: 0;
    object-fit: cover;
    opacity: 0.75;
    height: 80px;
}
.modal.r-i-modal .rcContainer .boxContent .cat img {
    height: 72px;
}
.r-i-modal .rcContainer .boxContent .cat:hover img {
    opacity: 0.7;
}
.r-i-modal .rcContainer .boxContent .cat .catName {
	padding: 2px;
    font-size: 12px;
    font-weight: 400;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 1px -1px 0px #000;
    letter-spacing: 1px;
    width: 100%;
    height: 22px;
    position: absolute;
    bottom: 0;
    border: 0;
    right: 0;
    left: 0;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.r-i-modal .RecommendedImages > .recommendedImagesItem > img {
	border: 1px solid #4c4c4c;
}
/**/
#boxContentGradientsColorsList .gradientsList,
.r-i-modal .gradientsList {
	position: relative;
}
#boxContentGradientsColorsList .gradientsList > i,
.r-i-modal .gradientsList > i,
.r-i-modal .recommendedImagesItem > i,
.images-library #thumbsContainer .img-container > .active-icon,
.video-library #thumbsContainer .video-container > .active-icon {
	visibility: hidden;
	position: absolute;
	top: 5px;
	left: 32px;
	z-index: 10;
	color: #87b87f;
	font-size: 25px;
	z-index: 4;
}
html[dir="rtl"] #boxContentGradientsColorsList .gradientsList > i,
html[dir="rtl"] .r-i-modal .gradientsList > i,
html[dir="rtl"] .r-i-modal .recommendedImagesItem > i,
html[dir="rtl"] .images-library #thumbsContainer .img-container > .active-icon,
html[dir="rtl"] .video-library #thumbsContainer .video-container > .active-icon {
	left: auto;
	right: 32px;
}
.video-library #thumbsContainer .video-container > .active-icon {
	left: 5px;
}
html[dir="rtl"] .video-library #thumbsContainer .video-container > .active-icon {
	left: auto;
	right: 5px;
}
#boxContentGradientsColorsList .gradientsList > i:after,
.r-i-modal .gradientsList > i:after,
.r-i-modal .recommendedImagesItem > i:after,
.images-library #thumbsContainer .img-container > .active-icon:after,
.video-library #thumbsContainer .video-container > .active-icon:after {
	content: '';
	width: 1em;
	height: 1em;
	top: 0;
	left: 0;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
#boxContentGradientsColorsList .gradientsList.active > i,
.r-i-modal .gradientsList.active > i,
.r-i-modal .recommendedImagesItem.active > i,
.images-library #thumbsContainer .img-container.active > .active-icon,
.video-library #thumbsContainer .video-container.active > .active-icon {
	visibility: visible;
}
/*patterns are smaller so the active icon need also to be smaller*/
.r-i-modal .recommendedImagesItem[data-type="patterns"] > i {
	font-size: 15px;
}

#homepageSimilarColorsList {
	display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-content: flex-start;
}
#homepageSimilarColorsList > .item {
	width:16.66666%;
    text-align: center;
    padding: 1px 3px;
    cursor: pointer;
    position: relative;
    height: 40px;
}
#homepageSimilarColorsList > .item.itemHidden {
	display: none;
}
#homepageSimilarColorsList > .item:hover {
	opacity: 0.9;
}
#homepageSimilarColorsList > .item > .colorCircle {
    width: 37px;
    height: 37px;
    border-radius: 100%;
    margin: auto;
    border: 2px solid #3a3a3a;
    position: absolute;
    left:0;
    top:0;
    cursor: pointer;
}
#homepageSimilarColorsList > .item.active > .colorCircle {
  	box-shadow: inset 0 0 0 4px #FF9B05;
}





.RecommendedImages .recommendedImagesItem .styles {
    max-width: 100%;
    align-content: flex-start;
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 162.5px;
    background-color: rgba(255, 255, 255, 1);
    padding: 5px 0;
	display: none;
	z-index: 5;
}
.RecommendedImages .recommendedImagesItem .styles > .item {
	width:16.66666%;
    text-align: center;
    padding: 1px 3px;
    cursor: pointer;
    position: relative;
    height: 20px;
    display: flex;
    justify-content: center
}
.RecommendedImages .recommendedImagesItem .styles > .item.itemHidden {
	display: none;
}
.RecommendedImages .recommendedImagesItem .styles > .item:hover {
	opacity: 0.9;
}
.RecommendedImages .recommendedImagesItem .styles > .item > .colorCircle {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    margin: auto;
    border: 1px solid #909090;
    background-color: #fff;
}
.RecommendedImages .recommendedImagesItem .styles > .item.active > .colorCircle {
  	box-shadow: inset 0 0 0 2px #FF9B05;
}
.RecommendedImages .RecommendedImagesLoading {
	position: absolute;
	bottom: 0;
}
.RecommendedImages .recommendedImagesItem .libraryChooseLoading, .lastImages .recommendedImagesItem .libraryChooseLoading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.RecommendedImages .recommendedImagesItem .libraryChooseLoading > i, .lastImages .recommendedImagesItem .libraryChooseLoading > i {
	color: #FF9B05 !important;
}












/*
#name,
#home_siteSlogan,
#home_siteSlogan_2,
#home_SecondSiteSlogan {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 3px;
    background-color: #141a1b;
    color: white;
    border: 1px solid #5D5D5D;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
}
*/

.all_tabs[data-tab="text"] .buttonSettingBox, #websiteLogoAndName .buttonSettingBox {
	top: 29px;
}
.fieldHeaders {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fieldHeaders label {
	font-size: 13px;
	margin-bottom: 0;
}

/**
 * 
 */
.input-text-edit-buttons {
    z-index: 1;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
}
.input-text-edit-buttons:not(.i-t-e-b-static) {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s linear;
}
.i-t-e-b-handler:hover .input-text-edit-buttons,
.i-t-e-b-focused .input-text-edit-buttons {
	visibility: visible;
	opacity: 1;
}
.input-group.input-text-edit-buttons .input-group-addon {
	width: auto;
    background-color: transparent !important;
    border: 0 !important;
    padding: 5px;
    color: #8c8c8c;
}
.input-text-edit-buttons > a:focus {
	outline: none;
}

#homepageTitle1, #homepageTitle2, #homepageTitle3 {
	position: relative;
}


#searchStyles {
	padding-left: 35px;
}
html[dir="rtl"] #searchStyles {
	padding-right: 35px;
	padding-left: 0;
}

/* Search icon */
.searchStylesIconDemo {
	color: #484848;
	font-size: 20px;
	padding: 9px 10px;
	top: 0;
	left: 0;
}
html[dir="rtl"] .searchStylesIconDemo {
	left: auto;
	right: 0px;
}

/* Home icon */
.searchStylesIconRemove {
	position: absolute;
	display: none;
	font-size: 20px;
	padding: 9px 10px;
	top: 0;
	right: 0;
	cursor: pointer;
	color: rgb(5, 151, 242);
	z-index: 2;
}
html[dir="rtl"] .searchStylesIconRemove {
	right: auto;
	left: 0;
}

.shapes-design-styles {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
.shapes-design-styles .homepage-shapes-button-container {
    width: calc( 100% / 3);
    height: auto;
    position: relative;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 5px;
    opacity: 0.7;
}
.shapes-design-styles .homepage-shapes-button-container:hover {
    opacity: 1;
}
.shapes-design-styles .homepage-shapes-button-image {
	width: 100%;
	height: 100px;
}

.shapes-design-styles .homepage-shapes-button-container .shapes-design-button-image {
    width: 100%;
    height: 70px;
    border: 1px solid #555;
    cursor: pointer;
}
.shapes-design-button.active > i {
    visibility: visible;
}
.shapes-design-button > i {
    visibility: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    color: #87b87f;
    font-size: 25px;
}

#homepageShapeDesign {
    fill: #ffffff;
}

.ActiveBoxSetting {
	margin: 10px 0;
}
.ActiveBoxSetting.active {
    background-color: #000;
    border: 1px solid #272727;
    padding: 20px;
}

/* Lazy-Load Fix - Prevents img without src to appear */
img.wizard-shapes-lazy-load:not([src]),
img.wizard-styles-lazy-load:not([src]) {
	visibility: hidden;
}

/* S123 Fonts Plugin
-------------------------------*/
.s123-fonts {
	height: 325px;
	overflow-y: hidden;
	padding-bottom: 5px;
}
/* search area design*/
.s123-fonts .search-fonts-container {
	display: flex;
	height: 40px;
	width: 100%;
	margin-bottom: 5px;
}
.s123-fonts .search-fonts-container .search-query {
	height: 100%;
	width: 100%;
}
.s123-fonts .search-fonts-container .search-fonts-icon {
	display: flex;
	height: 100%;
	width: 20px;
	align-items: center;
}
.s123-fonts .search-fonts-container #searchFontsIconRemove {
	height: 100%;
	display: none;
	cursor: pointer;
}
.s123-fonts .search-container {
	display: flex;
	height: 30px;
	width: 100%;
}
/* font group design */
.s123-fonts .font-group {
	margin-bottom: 5px;
	text-align: left;
}
.s123-fonts .font-group-text {
	font-weight: bold;
}
.s123-fonts .fonts-list {
	height: 90%;
	padding: 5px 0px;
	overflow-y: auto;
}
.s123-fonts .fonts-item {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	padding: 5px 0 5px 10px;
}
html[dir=rtl] .s123-fonts .fonts-item {
	padding: 5px 10px 5px 0;
}
.s123-fonts .fonts-item:hover {
	cursor: pointer;
	opacity: 0.7;
}
.s123-fonts .fonts-item-preview-image {
	width: calc(100% - 30px);
	height: 22px;
	background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 18px; 
}
.s123-fonts .fonts-item-selected {
	width: 30px;
	height: 22px;
	font-size: 18px;
	display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.s123-fonts .fonts-item.active .fonts-item-selected {
	display: flex;
}
.s123-fonts .no-result {
	display: none;
}
.selected-font-text {
	font-weight: bold;
	white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
	max-width: 50%;
}
.selected-font-label {
	overflow: hidden;
}

/**
 * Textarea Auto Increase Height Initialize
 */
.textarea-auto-increase-height {
	transition: max-height 0.2s ease 0s;
}

/**
 * Homepage Font Weight Handler - On active class we need to set white color.
 */
.h-f-w-handler.active {
	color: #fff !important;
}

/**
 * Homepage Font Italic Handler - On active class we need to set white color and on disable
 * we need to show in opacity
 */
.h-f-i-handler.active {
	color: #fff !important;
}
.h-f-i-handler.disabled,
#changingImagesAdd.disabled {
	opacity: 0.5;
}

/* bug-fix - the tips popover was on top of the pop-ups (add new page, edit page) so when
 the user add a new page and then edit it before the tip shown see it on top of the modal*/
.popover.user-tips-popover {
	z-index: 900;
}
/* Advanced SEO Plugin
----------------------------------*/
#s123AdvancedSEO #advancedSEOBOX #openModalSEO {
	cursor: pointer;
}
#s123AdvancedSEO .seo-description-input {
	position: relative;
}
#s123AdvancedSEO .seo-description-input .description-char-limit {
	padding: 5px 0px;
	float: right;
	opacity: 0.5;
}
html[dir=rtl] #s123AdvancedSEO .seo-description-input .description-char-limit {
	float: left;
}
#s123AdvancedSEO .seo-description-input .description-char-limit span:first-child {
	margin-right: 5px;
}
html[dir=rtl] #s123AdvancedSEO .seo-description-input .description-char-limit span:first-child {
	margin-right: 0px;
	margin-left: 5px;
}
#s123AdvancedSEO .seo-title-input {
	position: relative;
}
#s123AdvancedSEO .seo-title-input input{
	padding-right: 3rem;
}
html[dir=rtl] #s123AdvancedSEO .seo-title-input input{
	padding: 5px 9px;
}
#s123AdvancedSEO .seo-title-input #seoTitleCharLimit {
	padding: 8px;
	border: 1px solid transparent;
	border-left: 1px solid #ccc;
	top: 0;
	right: 0;
	position: absolute;
	display: block;
	color: #000;
	opacity: 0.5;
	text-align: center;
}
html[dir=rtl] #s123AdvancedSEO .seo-title-input #seoTitleCharLimit {
	right: auto;
	left: 0;
	border-left: none;
	border-right: 1px solid #ccc;
}
#s123AdvancedSEO .seo-preview-tabs {
	padding: 20px;
	background-color: #ffffff;
	border: solid 1px rgba(0,0,0,0.121);
}
#s123AdvancedSEO .seo-preview-container .seo-preview-buttons {
	margin-top: 15px;
}
#s123AdvancedSEO .seo-preview-container .seo-preview-buttons a {
	padding-top: 6px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 3px;
	text-decoration: none;
	color: #9E9E9E !important;
}
#s123AdvancedSEO .seo-preview-container .seo-preview-buttons a.active {
	color: #FFF !important;
	border-radius: 3px 3px 0 0;
	background-color: #9E9E9E;
}
/* Google Preview */
#s123AdvancedSEO .seo-g-preview .seo-g-container {
	display: inline-block;
	background-color: #ffffff;
	padding: 20px;
	border: solid 1px rgba(0,0,0,0.121);
	width: 100%;
	word-wrap: break-word;
}
#s123AdvancedSEO .seo-g-preview .seo-g-container .seo-g-title {
	color: #1a0dab;
	font-size: 15px;
	line-height: 1.33;
	overflow: hidden;
	width: 100%;
	height: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
[dir="rtl"] #s123AdvancedSEO .seo-g-preview .seo-g-container .seo-g-url {
    direction: ltr;
}
#s123AdvancedSEO .seo-g-preview .seo-g-container .seo-g-url {
	color: #006621;
	font-size: 14px;
	line-height: 1.54;
	padding: 2px 0 1px 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#s123AdvancedSEO .seo-g-preview .seo-g-container .seo-g-url .caret {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	border-top: 4px dashed;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	margin: -3px 0 0 6px;
}
#s123AdvancedSEO .seo-g-preview .seo-g-container .seo-g-description {
	color: #545454;
	font-size: 13px;
	line-height: 1.54;
}
/* Facebook Preview */
#s123AdvancedSEO .seo-f-preview {
	display: none;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container {
	max-width: 500px;
	height: 261px;
	position: relative;
	display: block;
	background-color: #ffffff;
	margin: 0px auto;
	overflow: hidden;
	font-size: 14px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-image {
	border: 1px solid #dadde1;
	height: 180px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-content {
	border: 1px solid #dadde1;
	border-top: 0px;
	padding: 10px 12px;
	color: #1d2129;
	border-bottom: 1px solid #dadde1;
	background: #f2f3f5;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-content .seo-f-url {
	border-collapse: separate;
	color: #606770;
	direction: ltr;
	display: inline;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	height: 11px;
	line-height: 11px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-align: left;
	text-overflow: ellipsis;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
	width: 501px;
	word-wrap: break-word;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	-webkit-font-smoothing: antialiased;
}
#s123AdvancedSEO .seo-url-domain-addon {
	border-radius: 0;
	border-left: 1px solid var(--inputs_border_color);
	border-right: 0;
}
#s123AdvancedSEO .seo-ai-generate-btn-top {
	padding: 0 !important;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-content .seo-f-text {
	border-collapse: separate;
	color: #4b4f56;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	height: 46px;
	line-height: 14.4px;
	max-height: 46px;
	overflow-x: hidden;
	overflow-y: hidden;
	user-select: none;
	word-wrap: break-word;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	-webkit-font-smoothing: antialiased;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-content .seo-f-text .seo-f-title {
	margin-top: 5px;
	border-collapse: separate;
	color: #1d2129;
	direction: ltr;
	display: inline;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	letter-spacing: normal;
	line-height: 18px;
	text-align: left;
	text-decoration-color: #1d2129;
	text-decoration-line: none;
	text-decoration-style: solid;
	transition-delay: 0s;
	transition-duration: 0.1s;
	transition-property: color;
	transition-timing-function: ease-in-out;
	user-select: none;
	white-space: normal;
	width: auto;
	word-wrap: break-word;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	-webkit-font-smoothing: antialiased;
}
#s123AdvancedSEO .seo-f-preview .seo-f-container .seo-f-content .seo-f-text .seo-f-description {
	border-collapse: separate;
	color: #606770;
	display: -webkit-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	height: 18px;
	line-height: 20px;
	margin-top: 3px;
	max-height: 80px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;
	user-select: none;
	white-space: normal;
	word-wrap: break-word;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	-webkit-box-orient: vertical;
	-webkit-font-smoothing: antialiased;
	-webkit-line-clamp: 1;
}
#s123AdvancedSEO #advancedSEOModal .modal-body {
	padding-top: 20px;
}
#s123AdvancedSEO #advancedSEOModal .modal-dialog {
	width: 90%;
}
#s123AdvancedSEO #advancedSEOModal .modal-dialog .container {
	padding: 0 24px 24px;
}
@media (max-width: 767px) {
	#s123AdvancedSEO #advancedSEOModal .modal-body {
		overflow-y: auto;
	    height: calc(100vh - 160px);
	}
	#s123AdvancedSEO #advancedSEOModal .modal-dialog {
		width: auto;
	}
}
#s123AdvancedSEO #advancedSEOModal .seo-modal-footer {
	border-top: 1px solid #E5E5E5;
    background-color: #f5f5f5;
    padding: 10px 20px;
}
#s123AdvancedSEO #advancedSEOModal .s123-advanced-seo,
#s123AdvancedSEO #advancedSEOModal #advancedSEOPreview .seo-preview-container {
	padding: 10px;
    background-color: #ffffff;
    border: solid 1px rgba(0,0,0,0.121);
}
@media (max-width: 767px) {
	#s123AdvancedSEO #advancedSEOModal .s123-advanced-seo .seo-domain {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 33vw;
	}
}

/**
 * Menu Action Button Icon Design Bug Fix - bootstrap is adding margin to the classes `.form-horizontal .form-group`
 * but in our case we don't need it so we removed the margin so the upload file will fit.
 */
#topAction_buttonText_1_icon_uploadFileContaner,
#topAction_buttonText_2_icon_uploadFileContaner {
	margin: 0;
}

/**
 * s123 Slider inputs design
 *
 * Note: We Remove the paddings from the slider inputs containers because after we converted
 * the text to input we now need full width so the text will be visible.
 */
.s123-slider .label.label-info {
	padding-right: 0px;
	padding-left: 0px;
	width: 100%;
}

.s123-slider .slider-input-value {
	width: 100%;
	height: 100%;
	padding: 0; /* remove ace padding, fix undisplayed text at MAC Safari */
	background: transparent !important;
	border-width: 0px !important;
	color: inherit !important;
	font-size: inherit !important;
	text-align: inherit !important;
}
.s123-slider .slider-input-value:focus {
	box-shadow: none !important;
}

/**
 * Orders 
 */
.order-info-table tr > td:first-child {
	/* Show the text for maximum of 100px width and if the text is longer, show the ... */
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Homepage Changing Images
----------------------------------*/
#homepage_style_option_3 .fileUploadBox .sortable-icon {
	color: #8c8c8c !important;
	display: none;
    padding-top: 8px;
    padding-right: 3px;
    cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
html[dir=rtl] #homepage_style_option_3 .fileUploadBox .sortable-icon {
	padding-right: 0px;
	padding-left: 3px;
}
#homepage_style_option_3 .fileUploadBox:hover .sortable-icon {
	display: block;
}
html[dir=rtl] #homepage_style_option_3 .fileUploadBox:hover .sortable-icon {
	right: auto;
	left: 0;
}

/* Add new image button */
#homepage_style_option_3 .fileUploadBox #changingImagesAdd {
	display: none;
	color: #8c8c8c !important;
	padding: 0 10px;
	cursor: pointer;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-decoration: none;
	outline: 0;
}
#homepage_style_option_3 .fileUploadBox:hover #changingImagesAdd {
	display: inline-flex;
}
/* after we removed the `customize` button from homepage background we don't
need the min-height so the black box will fit the changing images */
#homepage_style_option_3 .wizard-card .content {
	min-height: auto;
}


/* Ready Template Warning Message
----------------------------------*/
.popover.r-t .alert.alert-warning {
	margin: 0;
}
.popover.r-t .popover-footer {
	text-align: center;
	margin: 0;
	padding: 8px 14px;
	background-color: #eff3f8;
}
.popover.r-t .popover-footer .btn-group > .btn:first-child {
	margin-right: 5px;
}
html[dir=rtl] .popover.r-t .popover-footer .btn-group > .btn:first-child {
	margin-right: 0px;
	margin-left: 5px;
}

/**
 * AB Testing - For some websites we have changed the preview tool to be on the top of the
 * preview instead on the side menu and the preview box t0 16-9
 */
#previewBox {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	background: #f0f4f7;
}
#previewBox.add-preview-spacing #websitePreviewIframe {
	border-radius: 6px 6px 0 0;
	border: solid 1px #c5c5c5 !important;
	box-shadow: 0 0.25em 0.9em -0.1em rgb(0 0 0 / 30%);
}
#previewScaleDevices {
	position: relative;
    width: auto;
    height: 100%;
    margin: 0;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Safari browser shrink it on small screens (width < 1600) */
    background: var(--wizard-top-menu-bg);
}
#previewScaleDevices .current-device {
	margin-right: 3px;
}
html[dir="rtl"] #previewScaleDevices .current-device {
	margin-right: auto;
	margin-left: 3px;
}
#previewScaleDevices ul > li {
	padding: 0;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
.tooltip.preview-scale-devices-tooltip .tooltip-inner {	
	font-size: 11px;
	padding: 2px 6px;
}
#websitePreviewIframe {
	flex-shrink: 0;
}

/**
 * Wizard Top Toolbar
 */
#wizardTopToolbar {
	width: 100%;
    height: var(--wizard-top-menu-height);
    position: relative;
    background: var(--wizard-top-menu-bg);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex: 1 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}
html[data-device="mobile"] #wizardTopToolbar {
	display: none;
}
#wizardTopToolbar > div {
	height: 100%;
	display: flex;
	align-items: center;
    align-content: center;
    justify-content: center;
}
#wizardTopToolbar .w-t-t-box-1 {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#wizardTopToolbar .w-t-t-box-1 #wizardTab0button {
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 10px;
}
html[dir="rtl"] #wizardTopToolbar .w-t-t-box-1 #wizardTab0button {
    margin-left: auto;
    margin-right: 10px;
}
#wizardTopToolbar .w-t-t-box-2 {
	margin: 0 auto;
	flex-grow: 1;
}
#wizardTopToolbar .w-t-t-box-3 .dynamic-wizard-toolbar-elements {
    min-width: 84px;
    display: flex;
    align-items: center;
}
html[dir="rtl"] #wizardTopToolbar .w-t-t-box-3 .dynamic-wizard-toolbar-elements {
	margin-right: 0;
}
#wizardTopToolbar .w-t-t-box-3 {
	padding: 10px 20px;
	gap: 10px;
}
#wizardTopToolbar .w-t-t-box-3  #savedStatus {
	margin-left: 10px;
}
#wizardTopToolbar .w-t-t-box-3 .wizard-u-r-container {
	margin-left: 3px;
}
html[dir="rtl"] #wizardTopToolbar .w-t-t-box-3 .wizard-u-r-container {
	margin-left: auto;
	margin-right: 3px;
}

#wizardTopToolbar .w-t-t-box-3 .upgrade-and-discount-button-box {
	display: none;
    align-content: center;
    align-items: center;
    justify-content: center;
}
#wizardTopToolbar .w-t-t-box-3 #discountButton .d-b-sale-expiry,
#main-interface-header .header-upgrade-btn[data-coupon-added="true"] .btn-upgrade .d-b-sale-expiry {
    padding: 0 5px;
    font-size: 0.8em;
    border-radius: 4px;
    background: #2e383e;
    color:white;
	position: absolute;
	left: 50%;
    bottom: -8px;
    transform: translate(-50%, 0%);
}
#wizardTopToolbar .w-t-t-box-3 .publish-container {
	display: flex;
	position: relative;
}
#wizardTopToolbar .w-t-t-box-3 .publish-container .dropdown-menu {
	margin: 3px -13px;
}
html[dir=rtl] #wizardTopToolbar .w-t-t-box-3 .publish-container .dropdown-menu {
	margin: 3px -30px;
}
#wizardTopToolbar .w-t-t-box-3 .wl-editor-logo-container {
	margin: 0 5px 0 15px
}
html[dir="rtl"] #wizardTopToolbar .w-t-t-box-3 .wl-editor-logo-container {
	margin: 0 15px 0 5px
}
#wizardTopToolbar .w-t-t-box-3 .wl-editor-logo-container .wl-editor-logo {
	cursor: pointer;
}
/**
 * Wizard Top Toolbar Device Choose Center Handler - We like the device choose to be always at
 * the center related to the wizard preview, because we have another spaces at the toolbar elements
 * e.g. margin/padding related to tools at w-t-t-box-1 and w-t-t-box-3 we do the next trick.  
 */
#wizardTopToolbar {
	justify-content: space-between; /* pushing `w-t-t-box-1` and `w-t-t-box-3` to both sides (left/right) */
}
@media (min-width: 1024px) {
	#wizardTopToolbar .w-t-t-box-2 { /* center `w-t-t-box-2` */
		position: absolute;
		left: calc(50% - 28px);	/* 28px = (width / 2) */
	}
}

/* Small PC Screens Wizard (also used on ipad Air)
------------------*/
#wizardTopToolbar #upgradeButtonButton .upgrade-icon {
	display: none;
}
@media (max-width: 992px) {
	#wizardTopToolbar .w-t-t-box-3 .dynamic-wizard-toolbar-elements {
		min-width: auto;
	}
	#wizardTopToolbar #upgradeButtonButton .upgrade-icon {
		display: block;
	}
	#wizardTopToolbar #upgradeButtonButton .upgrade-txt,
	#wizardTopToolbar #upgradeButtonButton .d-b-sale-amount,
	#wizardTopToolbar #upgradeButtonButton .d-b-sale-seperator,
	#wizardTopToolbar #upgradeButtonButton .d-b-sale-expiry {
		display: none;
	}
}

/**
 * Bootstrap Confirmation
 * Documentation : https://ethaizone.github.io/Bootstrap-Confirmation/
 */
.popover.confirmation .spacing-confirmation-btn:not(:last-child) {
	margin-right: 10px;
}
html[dir=rtl] .popover.confirmation .spacing-confirmation-btn:not(:last-child) {
	margin-right: 0;
	margin-left: 10px;
}

#showSearchDomainIframe {
    min-height: 300px;
}

/* Images Library Credits Popover Design
-----------------*/
.r-i-popover-credits .popover-close {
	cursor: pointer;
	color: #000;
}
.r-i-popover-credits .popover-custom-title {
	text-align: right;
	margin-bottom: 5px;
}
.RecommendedImages > .recommendedImagesItem .credits.active {
 	display: inline;
}
html[dir="rtl"] .r-i-popover-credits .popover-custom-title {
	text-align: left;
}
/* mobile credits design */
html[data-device="mobile"] .RecommendedImages > .recommendedImagesItem .credits {
	display: inline-block;
	background-color: transparent;
	width: auto !important;
	right: 3px;
	bottom: 0;
	left: auto;
	visibility: hidden;
}
html[dir="rtl"][data-device="mobile"] .RecommendedImages > .recommendedImagesItem .credits {
	text-align: left;
}
html[data-device="mobile"] .RecommendedImages > .recommendedImagesItem .credits a {
	color: #fff;
	font-size: 15px;
}

/**
 * Trial Website Handler CSS
 */
#trialWebsiteAlert {
	width: 75px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
#trialWebsiteAlert.extended-design {
	width: 100%;
}
#trialWebsiteAlert button.close {
	margin: 5px 5px 0 0;
}
html[dir=rtl] #trialWebsiteAlert button.close {
	margin: 5px 0 0 5px;	
}
#trialWebsiteAlert button.close {
	display: none;
}
#trialWebsiteAlert.extended-design button.close {
	display: block;
}
#trialWebsiteAlert .t-w-message {
	height: 53px;
	display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#trialWebsiteAlert .t-w-message .extended-message {
	display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#trialWebsiteAlert .t-w-message .extended-text {
	display: inline-block;
	margin-right: 10px;
}
html[dir=rtl] #trialWebsiteAlert .t-w-message .extended-text {
	margin-right: 0;
	margin-left: 10px;
}
#trialWebsiteAlert .t-w-message a.btn:hover,
#trialWebsiteAlert .t-w-message a.btn:focus {
	outline: none
}
#trialWebsiteAlert .t-w-message .extended-message,
#trialWebsiteAlert .t-w-message .collapsed-message {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#trialWebsiteAlert.extended-design .t-w-message .collapsed-message {
	display: none;
}
#trialWebsiteAlert.extended-design .t-w-message .extended-message {
	display: flex;
}
/* mobile & tablet responsive */
html[data-device="mobile"] #trialWebsiteAlert {
	width: 100%;
}
html[data-device="mobile"] #trialWebsiteAlert button.close {
	display: block;
}
html[data-device="mobile"] #trialWebsiteAlert .t-w-message .collapsed-message {
	display: none;
}
html[data-device="mobile"] #trialWebsiteAlert .t-w-message .extended-message {
	display: block;
}

/* Disabled Footer Setting - Because we want to use the system class
but still allow pointer events we added specific fix here
----------------------------*/
#collapseFooterLayout [data-is-footer-setting="true"].disableModule {
	pointer-events: auto;
	display: block;
}

/* Footer Options Tabs Handler
----------------------------*/
#footerOptionsTabsHandler {
	margin-bottom: 15px;
}
#collapseFooterLayout .footer-tab-content {
	display: none;
}
#collapseFooterLayout .footer-tab-content.active {
	display: block;
}

/* Footer Layouts Grid
----------------------------*/
.footer-layouts-container {
	padding: 10px 0;
}
.footer-layouts-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-layout-item {
	cursor: pointer;
	position: relative;
	border: 2px solid #3f4b52;
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.2s ease;
	background: #272c33;
	display: flex;
	flex-direction: column;
}
.footer-layout-item:hover {
	border-color: #636363;
}
.footer-layout-item.active {
	border-color: #87b87f;
}
.footer-layout-item .layout-preview {
	width: 100%;
	height: 80px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.footer-layout-item .layout-preview-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.footer-layout-item .layout-preview-image.no-footer-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9ecef;
	color: #6c757d;
	font-size: 20px;
}
.footer-layout-item .layout-name {
	padding: 10px 15px;
	font-size: 12px;
	text-align: center;
	color: #ccc;
}
.footer-layout-item > i {
	visibility: hidden;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 10;
	color: #87b87f;
	font-size: 20px;
}
html[dir="rtl"] .footer-layout-item > i {
	right: auto;
	left: 5px;
}
.footer-layout-item > i:after {
	content: '';
	width: 14px;
	height: 14px;
	top: 3px;
	left: 3px;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
.footer-layout-item.active > i {
	visibility: visible;
}

/* Header Menu Options Check Boxes Design
---------------*/
#collapseHeaderOptionsEnterPhoneNumber .checkbox.multi-phone {
	margin-top: 0;
	margin-bottom: 5px;
}

/* Wizard Tab Effect Handler Design
---------------*/
#wizardBox .t-e-h.tab-pane .panel {
	border-color: transparent;
	margin: 0;
    border-top: 0;
    border-bottom: 0;
}
#wizardBox .t-e-h .accordion-toggle:after {
	content: "";
}
#wizardBox #backgroundColorOptionsTab .back-btn {
	padding-top: 5px;
}
#wizardBox #backgroundColorOptionsTab .back-btn,
#wizardBox .t-e-h .t-h-e-header .back-btn {
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: #F26A1B;
	background-color: transparent;
	cursor: pointer;
	text-decoration: none !important;
}
#wizardBox #backgroundColorOptionsTab .back-btn::before,
#wizardBox .t-e-h .t-h-e-header .back-btn::before {
	font-weight: 500;
	font: normal normal normal 14px/1 FontAwesome;
	content: '\f104';
}
html[dir="rtl"] #wizardBox #backgroundColorOptionsTab .back-btn:before,
html[dir="rtl"] #wizardBox .t-e-h .t-h-e-header .back-btn:before {
	content: '\f105';
}
html[dir="rtl"] #wizardBox #backgroundColorOptionsTab .back-btn i,
html[dir="rtl"] #wizardBox .t-e-h .t-h-e-header .back-btn i {
	transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
}
#wizardBox #backgroundColorOptionsTab .back-btn .t-e-h-back-title,
#wizardBox .t-e-h .t-h-e-header .back-btn .t-e-h-back-title {
	margin-left: 8px;
}
html[dir="rtl"] #wizardBox #backgroundColorOptionsTab .back-btn .t-e-h-back-title,
html[dir="rtl"] #wizardBox .t-e-h .t-h-e-header .back-btn .t-e-h-back-title {
	margin-left: 0;
	margin-right: 8px;
}
#wizardBox #backgroundColorOptionsTab .back-btn:hover .t-e-h-back-title,
#wizardBox .t-e-h .t-h-e-header .back-btn:hover .t-e-h-back-title {
	opacity: 1;
}
#wizardBox .t-e-h .t-h-e-header {	
	display: flex;
	flex-wrap: wrap;
	padding-top: 5px;
	width: 100%;
	transition: transform 0.15s ease, visibility 0.15s ease;
}
#wizardBox .t-e-h .t-h-e-header[data-visible="true"],
#wizardBox .t-e-h .t-h-e-header.static {
	margin-bottom: 15px;
}
#wizardBox .t-e-h .t-h-e-link {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}
#wizardBox .t-e-h fieldset {
	position: relative;
}
#wizardBox .t-e-h .t-h-e-hm-container {
	transition: transform 0.15s ease, visibility 0.15s ease;	
}
#wizardBox .t-e-h .t-h-e-hm-container .t-h-e-hm-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
#wizardBox .t-e-h .t-h-e-hm-container .t-h-e-hm-image .t-h-e-img {
	width: 100%;
	position: relative;
	padding-bottom: 56.25% !important; /*ration 16-9*/
}
#wizardBox .t-e-h .t-h-e-hm-container .t-h-e-hm-image .open-homepage {
	position: absolute;
    border-radius: 100px;
}
#wizardBox .t-e-h .panel-body {
	padding: 0;
}

/**
 * Text Layouts Handler - The text layouts need to have
 * a dynamic height because a website can have 1-3 titles.
 */
.homepage-titles-container {
	display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
}
#homepageTitle1,
#homepageTitle2,
#homepageTitle3 {
	flex-shrink: 0;
	flex-grow: 0;
}
#readyTextLayoutsTabs {
	height: 100%;
	margin-top: 10px;
	overflow: hidden;
}
#textHeaderTab,
#textLayoutTab,
#textPositionsTab,
#textAnimationTab,
#textPositionSettingsTab {
	height: calc(var(--wizard-side-menu-height) - 70px);
	overflow-y: auto;
	overflow-x: hidden;
}

#homepageImageOptionsTab > .panel-body {
    height: calc(var(--wizard-side-menu-height) - (20px + var(--homepage-tab-close-btn-height)));
    overflow-y: auto;
	display: flex;
    flex-direction: column;
}
html[data-device="mobile"] #homepageImageOptionsTab > .panel-body {
	height: calc(100vh - 140px);
	padding-bottom: 50px;
}
#homepageImageOptionsTab > .panel-body > div {
	flex-grow: 0;
}
/* homepage goal image illustration inline gallery */
#homepageImageOptionsTab .panel-body #illustrationStylesBox {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}
/* Slide Effect
----------------*/
#wizardBox .t-e-h[data-t-e-h-animation="slide"] {
	overflow-x: hidden;
	width: 100%;
	/* source: https://stackoverflow.com/a/17191375/469161 */
	animation: wizardTabsAnimation 0.3s linear;
}
@keyframes wizardTabsAnimation {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-link {
	transition: transform 0.15s ease, visibility 0.15s ease;
	width: 100%;
}
#wizardBox .t-e-h .boxTitle {
	padding-top: 0;
}
#wizardBox .t-e-h .ActiveBoxSetting {
	margin-top: 0;
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-tab:not([data-static="true"]) {
	width: 100%;
	z-index: 5;
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-tab {
	transition: transform 0.15s ease, visibility 0.15s ease;
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-tab[data-visible="false"] {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-tab:not([data-static="true"]) {
	transform: translateX(105%);
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-header:not(.t-h-e-manual-static) {
	transform: translateX(105%);
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"] [data-visible="false"].t-h-e-header:not(.t-h-e-manual-static) {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] [data-visible="true"] {
	transform: translateX(0%);
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-link,
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-hm-container,
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-tab[data-static="true"] {
	transform: translateX(-105%);
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-link {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
/* rtl support */
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-tab:not([data-static="true"]) {
	transform: translateX(-105%);
}
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"] .t-h-e-header:not(.t-h-e-manual-static) {
	transform: translateX(-105%);
}
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] [data-visible="true"] {
	transform: translateX(0%);
}
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-link,
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-hm-container,
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-tab[data-static="true"] {
	transform: translateX(105%);
}

/* Show Hide Effect
----------------*/
#wizardBox .t-e-h[data-t-e-h-animation="showHide"] .t-h-e-tab[data-visible="false"] {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
#wizardBox .t-e-h[data-t-e-h-animation="showHide"] [data-visible="false"].t-h-e-header {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
#wizardBox .t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] [data-visible="true"] {
	visibility: visible;
	height: auto;
}
#wizardBox .t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] .t-h-e-link,
#wizardBox .t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] .t-h-e-hm-container,
#wizardBox .t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] .t-h-e-tab[data-static="true"] {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
#wizardBox .t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] .t-h-e-link {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}
/* tab headers */
#wizardBox .t-e-h .t-h-e-tab-title {
	font-size: 18px;
}

/* Design Tab Handler (Themes)
-----------------------------------*/
#wizardBox #designTab .t-h-e-header.t-h-e-manual-static {
	display: flex;
    width: 95%;
    margin: 0 auto 15px auto;
}
#wizardBox #designTab.t-e-h {
	height: auto;	
}
html:not([data-device="mobile"]) #wizardBox #designTab.t-e-h {
	padding-bottom: 0;
}
#wizardBox #designTab.t-e-h #accordion_design {
	margin-top: 10px;
}
html[data-device="mobile"] .wizard.site-editor-b #designSubTabs {
	display: none;
}
.wizard.site-editor-b #designSubTabs {
    color: #fff;
	appearance: none;
	margin-top: 15px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 8px;
	background-color: #252b2f;
    background-position: calc(100% - 10px) 14px;
}
html[dir="rtl"] .wizard.site-editor-b #designSubTabs {
	background-position: 10px 14px;
}
html:not([data-device="mobile"]) .wizard.new-colors-tab #wizardBox #colorThemes {
	height: calc(100% - 10px);
}

/* New Colors Tab Inline Colors Tools
------------------*/
.wizard.new-colors-tab #wizardBox #colorThemes .change-main-color-box {
	width: 100%;
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist {
	position: relative;
	display: grid;
    gap: 5px;
    grid-template-columns: repeat(8, 1fr);
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist > .item {
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 0;
	cursor: pointer;
	position: relative;
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist > .item.itemHidden {
	display: none;
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist > .item:hover {
	opacity: 0.9;
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist > .item > .colorCircle {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    margin: auto;
    border: 1px solid #3a3a3a;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist > .item.active > .colorCircle {
  	box-shadow: inset 0 0 0 2px #FF9B05;
}
/* loading icon  */
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist .loading-container {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary_color);
	grid-column: 1/9;
}

/* Extra colors
---------------*/
.wizard.new-colors-tab #wizardBox #colorThemes .inline-colorlist:not(.show-extra-colors) .item[data-is-extra-color="true"] {
	display: none;
}
.wizard.new-colors-tab #wizardBox #colorThemes .extra-colors-controller {
	left: 50%;
    color: #000;
    transform: translateX(50%);
    position: relative;
}

/* Color Contrast Warning - Inline Hazard Icons
---------------*/
#wizardBox .color-palette-item {
	position: relative;
}
#wizardBox .color-palette-item.has-contrast-issue .color-circle {
	box-shadow: inset 0 0 0 1px #ff9800, inset 0 0 5px rgba(255, 152, 0, 0.55);
}
#wizardBox .color-palette-item .contrast-hazard-icon {
	position: absolute;
	top: 5px;
	right: 20px;
	width: 16px;
	height: 16px;
	font-size: 10px;
	color: #fff;
	background-color: #ff9800;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	animation: contrastPulse 2s ease-in-out infinite;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#wizardBox .color-palette-item .contrast-hazard-icon:hover {
	transform: scale(1.1);
	animation: none;
}
@keyframes contrastPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.05); }
}

/* Color Contrast Warning Alert in Custom Colors Tab */
#colorContrastWarningAlert {
	display: none;
	margin: 10px 0;
}

/* Color Contrast Tooltip Styles */
.contrast-tooltip-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
}
.contrast-tooltip-colors {
	display: flex;
	align-items: flex-end;
	gap: 0.6em;
}
.contrast-tooltip-color-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
}
.contrast-tooltip-label {
	font-size: 0.85em;
	font-weight: 500;
	color: #000;
	text-align: center;
	max-width: 6em;
	line-height: 1.2;
}
.contrast-tooltip-swatch {
	width: 3.5em;
	height: 0.875em;
	border-radius: 0.25em;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.contrast-tooltip-arrow {
	color: #000;
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0.3em;
}
.contrast-tooltip-ratio {
	font-size: 0.9em;
	font-weight: 600;
	color: #000;
	padding-top: 0.4em;
	width: 100%;
	text-align: center;
}

.palette-by-colors-btn,
.palette-by-image-btn,
.palette-favorites-btn {
	background: #fff;
	border: 1px solid #ddd;
	color: #555;
	padding: 12px 12px;
	border-radius: 1px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.palette-by-colors-btn:hover,
.palette-by-image-btn:hover,
.palette-favorites-btn:hover {
	background: #f5f5f5;
	border-color: #ccc;
	color: #333;
}
.palette-by-colors-btn.active,
.palette-by-image-btn.active,
.palette-favorites-btn.active {
	background: var(--primary_color);
	border-color: var(--primary_color);
	color: #fff;
}
.palette-by-colors-btn:focus,
.palette-by-image-btn:focus,
.palette-favorites-btn:focus {
	outline: none;
}

/* Palette color input container */
.palette-color-input-container {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.palette-color-input-container .color-input-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
/* Spectrum color picker wrapper in palette input */
.palette-color-input-container .sp-replacer {
	padding: 4px;
	border-radius: 4px;
	height: 38px;
	border: 1px solid #ddd;
}
.palette-color-input-container .sp-preview {
	width: 30px;
	height: 100%;
	border-radius: 3px;
	margin-right: 0px;
}
.palette-color-input-container .sp-dd {
	display: none;
}
.palette-custom-color-picker {
	display: none; /* Hidden - spectrum creates its own UI */
}
.palette-custom-color-text {
	flex: 1;
	font-family: 'Monaco', 'Consolas', monospace;
	text-transform: uppercase;
}
.palette-generate-btn {
	white-space: nowrap;
	padding: 6px 3px;
}
/* Inline error message for invalid color */
.palette-color-error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
	border-radius: 6px;
	color: #dc3545;
	font-size: 13px;
}
.palette-color-error i {
	font-size: 14px;
}
/* Empty state for byColor/byImage categories */
.palette-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
	color: var(--gray-600);
}
.palette-empty-icon {
	margin-bottom: 15px;
	opacity: 0.6;
}
.palette-empty-text {
	font-size: 14px;
	line-height: 1.5;
	max-width: 250px;
}
/* Image container for By Image palette generation */
.palette-image-container {
	position: relative;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 10px 0px;
	margin-bottom: 5px;
}

/* Dual image selector - choose between header image and logo */
.palette-image-dual-selector {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}
.palette-image-dual-selector .image-source-card {
	flex: 1;
	cursor: pointer;
	border-radius: 8px;
	border: 3px solid transparent;
	transition: all 0.2s ease;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.03);
	position: relative;
}
.palette-image-dual-selector .image-source-card:hover {
	border-color: rgba(5, 131, 242, 0.4);
}
.palette-image-dual-selector .image-source-card.active,
.palette-image-dual-selector .image-source-card:has(input:checked) {
	border-color: var(--primary_color, #0583F2);
}
.palette-image-dual-selector .image-source-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.palette-image-dual-selector .image-source-card-preview {
	width: 100%;
	height: 100px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.02);
}
.palette-image-dual-selector .image-source-card-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.palette-image-dual-selector .image-source-card-label {
	display: block;
	text-align: center;
	padding: 8px 5px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: var(--primary_color, #0583F2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.palette-image-dual-selector .image-source-card:not(.active):not(:has(input:checked)) .image-source-card-label {
	background: rgba(0, 0, 0, 0.4);
}

/* Single image preview */
.palette-image-single-preview {
	margin-bottom: 12px;
}
.palette-image-preview {
	position: relative;
	width: 100%;
	max-height: 175px;
	overflow: hidden;
	border-radius: 6px;
}
.palette-image-preview-img {
	width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* Image loading state - overlay on top of image preview */
.palette-image-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 8px;
	color: var(--primary_color);
	background: rgba(255, 255, 255, 0.9);
	z-index: 10;
}
.palette-image-loading span {
	font-size: 13px;
	font-weight: 500;
}
/* Image uploading skeleton */
.palette-image-uploading-skeleton {
	margin-bottom: 12px;
}
.palette-image-uploading-skeleton .palette-image-preview {
	min-height: 120px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s infinite;
}
.palette-image-skeleton-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 120px;
	padding: 20px;
}
.palette-image-skeleton-text {
	font-size: 0.8125rem;
	color: #888;
	text-align: center;
}
@keyframes skeleton-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
.palette-generate-from-image-btn {
	width: 100%;
}
.palette-image-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	text-align: center;
	color: var(--gray-600);
	background: rgba(0, 0, 0, 0.02);
	border-radius: 6px;
	margin-bottom: 12px;
	margin-bottom: 10px;
}
.palette-image-empty i {
	font-size: 32px;
	margin-bottom: 10px;
	opacity: 0.5;
}
.palette-image-empty span {
	font-size: 13px;
	line-height: 1.4;
}

#wizardBox #designTab.t-e-h #accordion_design.back-btn-h {
	margin-top: 0;
	padding-top: 0;
}
#wizardBox .t-e-h .themes-container {
	width: 100%;
	overflow: hidden;
	overflow-y: auto;
	padding-right: 15px;
}
html:not([data-device="mobile"]) .wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .t-e-h .themes-container {
	padding-right: 8px;
	margin-bottom: 30px;
}
html[dir="rtl"]:not([data-device="mobile"]) .wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .t-e-h .themes-container {
	padding-right: 0px;
	padding-left:  8px;
}
html[data-device="mobile"] .wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .t-e-h .themes-container {
	margin-bottom: 80px;
}
/* font themes user explanation */
#wizardBox .t-e-h #fontThemes .font-theme-msg {
	margin: 0px 29px 0px 7px;
}
html[dir="rtl"] #wizardBox .t-e-h #fontThemes .font-theme-msg {
	margin-right: 7px;
	margin-left: 29px;
}
/* hide some tools in editor b only */
.wizard.site-editor-b .font-theme-msg,
.wizard.site-editor-b #showAdvancedStructure {
	display: none !important;
}
/* mobile height fix */
html[dir="rtl"] #wizardBox .t-e-h .themes-container {
	padding-right: 0px;
	padding-left:  0px;
}
html[dir="rtl"]:not([data-device="mobile"]) .wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .t-e-h .themes-container {
	padding-right: 0px;
	padding-left:  0px;
}
/* custom options controller design */
#wizardBox .t-e-h .tabContent .custom-option-controller {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(46,56,62,0.9);
}
.wizard #wizardBox .t-e-h .tabContent #showFonts {
	position: absolute;
	bottom: 7px;
	right: 15px;
}
@media (max-width: 767px) {
	.wizard #wizardBox .t-e-h .tabContent #showFonts {
		right: 30px;
	}
	html[dir="rtl"] .wizard #wizardBox .t-e-h .tabContent #showFonts {
		right: 7px;
	}
}
#wizardBox .t-e-h .theme-items-container {
	display: block;
	width: 100%;
}
#wizardBox .t-e-h .theme-items-container .design-themes[data-id="theme-current"] {
	border: 1px solid #fff !important;
}
#wizardBox .t-e-h .theme-items-container .design-themes[data-id="theme-current"]:hover {
	transform: none;
}
#wizardBox .t-e-h .theme-items-container .design-themes {
	cursor: pointer;
}
#wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container {
	align-items: center;
	display: grid;
    gap: 5px;
    grid-template-columns: repeat(1, 1fr);
}
#wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container {
	align-items: center;
    display: grid;
    column-gap: 37px;
    row-gap: 15px;
    grid-template-columns: repeat(3, 1fr);
}
html:not([data-device="mobile"]) .wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container {
	justify-content: space-between;
}
/* 2 in row design for color themes and font themes */
#wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container .wizard-card.wizard-theme,
#wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container .wizard-card.wizard-theme {
	display: inline-block;
	width: auto;
	margin: 0;
	border: 1px solid transparent;
	cursor: pointer;
}
@media (max-width: 768px) {
    #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container .wizard-card.wizard-theme {
		margin: 0 auto 17px auto;
    }
}
#wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container .wizard-card.wizard-theme[data-id="theme-current"] {
	position: sticky;
    top: 0;
    z-index: 10;
    grid-column: 1 / -1;
	border: 0px !important;
	max-width: 100%;
}
/* Font theme active checkmark indicator */
#wizardBox .t-e-h [data-type="fontThemes"] .wizard-card.wizard-theme.font-theme-active:before {
	content: '';
	width: 15px;
	height: 15px;
	top: 9px;
	right: 32px;
	position: absolute;
	background: #ffffff;
	border-radius: 50%;
}
html[dir="rtl"] #wizardBox .t-e-h [data-type="fontThemes"] .wizard-card.wizard-theme.font-theme-active:before {
	right: auto;
	left: 32px;
}
#wizardBox .t-e-h [data-type="fontThemes"] .wizard-card.wizard-theme.font-theme-active:after {
	font-family: 'FontAwesome';
	content: '\f058';
	font-size: 22px;
	top: 0;
	right: 27px;
	position: absolute;
	color: #87b87f;
}
html[dir="rtl"] #wizardBox .t-e-h [data-type="fontThemes"] .wizard-card.wizard-theme.font-theme-active:after {
	right: auto;
	left: 27px;
}
/**/
#wizardBox .themes-main-container .i-t-handler {
	display: flex;
    flex-flow: column;
    height: calc( var(--window-height) - 115px );
    overflow: hidden;
}
.wizard:is(.site-editor-b,.new-colors-tab) #wizardBox .themes-main-container .i-t-handler {
    height: calc( var(--window-height) - 70px );
}
#wizardBox .themes-main-container .i-t-handler > div {
	flex-shrink: 0;
    flex-grow: 0;
}
/* 2 in row design for color themes and font themes */
html[dir="rtl"] #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container .wizard-card.wizard-theme,
html[dir="rtl"] #wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container .wizard-card.wizard-theme {
	margin: 0;
}
@media (max-width: 767px) {
    html[dir="rtl"] #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container .wizard-card.wizard-theme {
		margin: 0 auto 17px auto;
    }
}
/* Font themes nested tabs display styles */
#wizardBox .themes-main-container #fontThemes.active {
	display: block !important;
}
#wizardBox .themes-main-container #fontThemes .font-themes-nested-tabs {
	display: flex !important;
	flex-flow: column;
	height: 100%;
}
#wizardBox .themes-main-container #fontThemes .font-themes-nested-tabs .i-t-body {
	flex: 1 1 auto;
	overflow: hidden;
}
#wizardBox .themes-main-container #fontThemes .font-themes-nested-tabs .tabContent {
	display: none;
}
#wizardBox .themes-main-container #fontThemes .font-themes-nested-tabs .tabContent.active {
	display: flex !important;
	flex-flow: column;
	height: 100%;
}
/* tablets handler */
@media ( min-width: 500px )  {
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="readyThemes"] .theme-items-container,
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container,
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container {
		display: flex;
	    flex-flow: wrap;
	    justify-content: center;
	}
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="readyThemes"] .theme-items-container .wizard-card.wizard-theme,
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container .wizard-card.wizard-theme,
	html[data-device="mobile"] #wizardBox .t-e-h [data-type="fontThemes"] .theme-items-container .wizard-card.wizard-theme {
		display: inline-block;
		width: auto;
		margin: 0;
		cursor: pointer;
	}
}

#wizardBox .t-e-h [data-type="fontThemes"] .main-font {
	font-size: 16px;
}
#wizardBox .t-e-h [data-type="fontThemes"] .secondary-font {
	font-size: 10px;
}
#wizardBox .t-e-h #fontThemes .themes-container .no-result {
	text-align: center;
}
/* defualt font theme */
#wizardBox .t-e-h #fontThemes .theme-defult-item-container {
	position: relative;
	padding-right: 8px;
}
html[dir="rtl"] #wizardBox .t-e-h #fontThemes .theme-defult-item-container {
	padding-right: 0;
	padding-left: 0px;
}
#wizardBox .t-e-h #fontThemes .theme-defult-item-container div[data-id="theme-current"] {
	margin: 0;
    width: 100%;
}
/* search input design */
#wizardBox .t-e-h #fontThemes .searchInput_design_container {
	position: relative;
    margin: 16px 29px 24px 7px;
}
html[dir="rtl"] #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	margin-right: 7px;
	margin-left: 29px;
}
html:not([data-device="mobile"]) .wizard.site-editor-b #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	margin: 12px 8px 12px 0;
}
html[dir="rtl"]:not([data-device="mobile"]) .wizard.site-editor-b #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	margin: 12px 0 12px 0px;
}
html[data-device="mobile"] #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	width: 99%;
	margin: 16px auto 14px 0px;
}
html[dir="rtl"][data-device="mobile"] #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	margin-right: 2px;
	margin-left: auto;
}
html[data-device="tablet"] #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	width: 82%;
	margin: 16px auto 24px 55px;
}
html[dir="rtl"][data-device="tablet"] #wizardBox .t-e-h #fontThemes .searchInput_design_container {
	padding-right: 55px;
	padding-left: auto;
}
#wizardBox .t-e-h #fontThemes .search {
	border: 1px solid #EBECEE;
	box-sizing: border-box;
	border-radius: 4px !important;
	padding: 16px;
    height: 100%;
    color: #B4B8C2 !important;
}
#wizardBox .t-e-h #fontThemes .clearInput_designIcon {
	display: none;
	position: absolute;
}

#wizardBox .t-e-h #fontThemes .searchInput_designIcon {
	top: 19px;
    right: 10px;
    color: #B4B8C2;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    position: absolute;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .searchInput_designIcon {
	left: 10px;
	right: auto;
}
#wizardBox .t-e-h #fontThemes .clearInput_designIcon{
	top: 29px;
    right: -6px;
    color: #B4B8C2 !important;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    position: absolute;
}
html[dir="rtl"] #wizardBox .t-e-h #fontThemes .clearInput_designIcon {
	left: 0px;
	right: auto;
}
#wizardBox .t-e-h #fontThemes .searchInput_designIcon:hover {
	color: #0583F2;
}

/* Fonts search container with buttons */
#wizardBox .t-e-h #fontThemes .fonts-search-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

#wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

#wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .fonts-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #B4B8C2;
	font-size: 14px;
	pointer-events: none;
	z-index: 2;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .fonts-search-icon {
	left: auto;
	right: 12px;
}

#wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .search {
	width: 100%;
	padding-left: 38px;
	padding-right: 35px;
	border-radius: 10px !important;
	height: 45px;
	padding-top: 0;
	padding-bottom: 0;
}

#wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .search:disabled,
#wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .search.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .search {
	padding-left: 35px;
	padding-right: 38px;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .fonts-search-input-wrapper .clearInput_designIcon {
	right: auto;
	left: -6px;
}

#wizardBox .t-e-h #fontThemes .fonts-action-buttons {
	display: flex;
	flex-shrink: 0;
}

#wizardBox .t-e-h #fontThemes .fonts-filter-btn,
#wizardBox .t-e-h #fontThemes .fonts-favorites-btn {
	background: transparent;
	border: 1px solid #EBECEE;
	color: #B4B8C2;
	padding: 0 14px;
	border-radius: 0;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 45px;
}

/* First button - rounded left corners */
#wizardBox .t-e-h #fontThemes .fonts-filter-btn {
	border-radius: 10px 0 0 10px;
	border-right: none;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .fonts-filter-btn {
	border-radius: 0 10px 10px 0;
	border-right: 1px solid #EBECEE;
	border-left: none;
}

/* Last button - rounded right corners */
#wizardBox .t-e-h #fontThemes .fonts-favorites-btn {
	border-radius: 0 10px 10px 0;
}

html[dir="rtl"] #wizardBox .t-e-h #fontThemes .fonts-favorites-btn {
	border-radius: 10px 0 0 10px;
}

#wizardBox .t-e-h #fontThemes .fonts-filter-btn:hover,
#wizardBox .t-e-h #fontThemes .fonts-favorites-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

#wizardBox .t-e-h #fontThemes .fonts-filter-btn.active,
#wizardBox .t-e-h #fontThemes .fonts-favorites-btn.active {
	background: var(--editorTabsBgColor, #0583F2);
	border-color: #fff;
	color: #fff;
}

#wizardBox .t-e-h #fontThemes .fonts-filter-btn:focus,
#wizardBox .t-e-h #fontThemes .fonts-favorites-btn:focus {
	outline: none;
}

#wizardBox .t-e-h #fontThemes .fonts-filter-btn:disabled,
#wizardBox .t-e-h #fontThemes .fonts-filter-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Fonts favorites flat container - matches theme-items-container styling */
#wizardBox .t-e-h #fontThemes .fonts-favorites-flat-container {
	align-items: center;
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(1, 1fr);
	width: 100%;
}

#wizardBox .t-e-h #fontThemes .fonts-favorites-flat-container .wizard-card {
	display: inline-block;
	width: auto;
	margin: 0;
	border: 1px solid transparent;
	cursor: pointer;
}

/* Always show star in favorites view */
#wizardBox .t-e-h #fontThemes .fonts-favorites-flat-container .font-popularity-toggle {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile styling for fonts favorites - matches main list mobile behavior */
@media ( min-width: 500px ) {
	html[data-device="mobile"] #wizardBox .t-e-h #fontThemes .fonts-favorites-flat-container {
		display: flex;
		flex-flow: wrap;
		justify-content: center;
	}
	html[data-device="mobile"] #wizardBox .t-e-h #fontThemes .fonts-favorites-flat-container .wizard-card.wizard-theme {
		display: inline-block;
		width: auto;
		margin: 0;
		cursor: pointer;
	}
}

/* Fonts favorites empty state */
#wizardBox .t-e-h #fontThemes .fonts-favorites-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
	color: #888;
	width: 100%;
}

#wizardBox .t-e-h #fontThemes .fonts-favorites-empty-state i {
	font-size: 36px;
	margin-bottom: 16px;
	color: #ccc;
}

#wizardBox .t-e-h #fontThemes .fonts-favorites-empty-state p {
	margin: 0 0 8px 0;
	font-size: 14px;
}

#wizardBox .t-e-h #fontThemes .fonts-favorites-empty-state .favorites-empty-hint {
	font-size: 12px;
	color: #aaa;
}

#wizardBox .themes-main-container {
	margin-top: 10px;
	padding-right: 8px;
}
html[dir="rtl"] #wizardBox .themes-main-container {
	padding-right: 0;
	padding-left: 8px;
}
#s123LogoMaker #logoFonts .themes-fonts-preview-image-all {
	background-size: contain;
    background-repeat: no-repeat;
    margin: 15px;
}
.themes-fonts-preview-image-all {
    max-width: 100%;
    height: auto;
    max-height: 30px;
	display: block;
}
.themes-fonts-preview-image-all {
	max-width: 240px;
}
.themes-fonts-preview-image-all.themes-fonts-default {
	font-size: 1.5rem;
}
/* Custom font preview - display font name as text instead of image */
.themes-fonts-preview-image-all.custom-font-preview,
.themes-fonts-preview-image-menu.custom-font-preview {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
	margin: 0;
	padding: 5px 0 !important;
}
.themes-fonts-preview-image-all.custom-font-preview {
	font-size: 16px;
}
.themes-fonts-preview-image-menu.custom-font-preview {
	font-size: 12px;
	opacity: 1;
}
.wizard-card.wizard-theme .mainDesign .mainFonts {
	width: 100%;
	padding: 5px;
}
.wizard-card.wizard-theme .mainDesign .mainFonts .allColors {
	display:none;
}
.wizard-card.wizard-theme .mainDesign .mainFonts.same-fonts {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.theme-defult-item-container .wizard-card.wizard-theme .mainDesign .mainFonts{
	max-width: 215px !important;
}
html[dir="rtl"] .theme-defult-item-container .wizard-card.wizard-theme .mainDesign .mainFonts{
	max-width: 223px !important;
}

html[dir="rtl"] .wizard-card.wizard-theme .mainDesign .mainFonts.same-fonts {
	justify-content: flex-start;
}
html[dir="rtl"] #fontThemes .wizard-card.wizard-theme .mainDesign .mainFonts:not(.same-fonts) {
	display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
}
.wizard-card.wizard-theme .mainDesign .mainFonts.same-fonts .themes-fonts-preview-image-menu {
	display: none;
}
.themes-fonts-preview-image-menu {
    max-width: 100%;
    height: auto;
    max-height: 30px;
	display: block;
	margin-top: 12px;
}

.themes-fonts-preview-image-menu {
	max-width: 240px;
}

#wizardBox .t-e-h .design-themes .theme-body {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
}
#wizardBox .t-e-h .design-themes .theme-body .fonts-top {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#wizardBox .t-e-h .design-themes .theme-body .fonts-top h2 {
	font-size: 18px;
	margin: 5px 0;
	font-weight: bold;
}
#wizardBox .t-e-h .design-themes .theme-body .fonts-bottom {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#wizardBox .t-e-h .design-themes .theme-body .fonts-bottom h4 {
	font-size: 14px;
	margin: 5px 0;
	opacity: 0.8;
}
#wizardBox #designTab.t-e-h .themes-main-container {
	overflow-x: hidden;
	position: absolute;
	width: 95%;
}
#wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"] .themes-main-container {
	transition: transform 0.15s ease, visibility 0.15s ease;
}
/*mobile width fix*/
html[data-device="mobile"] .wizard:not(.site-editor-b,.new-colors-tab) #wizardBox #designTab.t-e-h .themes-main-container {
	width: 100%;
}
/* html[dir="ltr"]:not([data-device="computer"]) #wizardBox #designTab.t-e-h .i-t-handler .i-t-header {
	padding-right: 24px;
} */
html[dir="rtl"][data-device="mobile"] #wizardBox #designTab.t-e-h .i-t-handler .i-t-header {
	padding-right: auto;
	padding-left: 0px;
}

#wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"] fieldset {
	transition: transform 0.15s ease, visibility 0.15s ease;
}
#wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-header {
	transform: translateX(0%);
}
#wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="false"] fieldset {
	transform: translateX(105%);
}
#wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] fieldset {
	transform: translateX(0%);
}
#wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .themes-main-container {
	transform: translateX(-105%);
}
/*rtl support*/
html[dir="rtl"] #wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .t-h-e-header {
	transform: translateX(0%);
}
html[dir="rtl"] #wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="false"] fieldset {
	transform: translateX(-105%);
}
html[dir="rtl"] #wizardBox #designTab.t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] fieldset {
	transform: translateX(0%);
}
html[dir="rtl"] #wizardBox .t-e-h[data-t-e-h-animation="slide"][data-open-content="true"] .themes-container {
	transform: translateX(105%);
}
/* design tab show hide animation extension */
#wizardBox #designTab.t-e-h[data-t-e-h-animation="showHide"] .t-h-e-link,
#wizardBox #designTab.t-e-h[data-t-e-h-animation="showHide"][data-open-content="true"] .themes-main-container {
	display: none;
}

/* Inner tabs Design
---------------------------*/
#wizardBox .i-t-handler .i-t-header {
	width: 100%;
	padding: 0;
	margin: 0 auto 10px;
	display: flex;
	justify-content: space-around;
	display: flex;
    justify-content: center;
}
#wizardBox #readyTextLayoutsTabs.i-t-handler .i-t-header {
	justify-content: flex-start;
}
#wizardBox .i-t-handler .i-t-header > div {
    text-align: center;
    margin: 3px;
    cursor: pointer;
	background-color: #252b2f;
    padding: 5px 12px;
    border-radius: 3px;
    width: 100%;
}
#wizardBox #readyTextLayoutsTabs.i-t-handler .i-t-header {
    justify-content: space-around;
}
#wizardBox #readyTextLayoutsTabs.i-t-handler .i-t-header [data-tab="textCustomTab"] {
	width: auto;
}
#wizardBox .i-t-handler .i-t-header > div.active {
   	color: orange;
   	font-weight: normal;
}
#wizardBox .i-t-handler .i-t-header > div.prevent-new-line { 
	white-space: nowrap;
}
#wizardBox .i-t-handler .i-t-header .textPositionSettings {
	position: absolute;
	right: 0px;
}
html[dir="rtl"] #wizardBox .i-t-handler .i-t-header .textPositionSettings {
	left: 0px;
	right: auto;
}
#wizardBox .i-t-handler .tabContent {
	display: none;
}
#wizardBox .i-t-handler .tabContent.active {
    display: block;
}
#wizardBox .themes-main-container .i-t-handler .tabContent.active {
	display: flex;
    flex-flow: column;
    height: 100%;
}
#wizardBox .themes-main-container .i-t-handler .tabContent.active > div:not(.themes-container) {
	flex-shrink: 0;
    flex-grow: 0;
}
/* more options tab */
#wizardBox .i-t-handler [data-tab="more"] {
	position: relative;
}
#wizardBox .i-t-handler [data-tab="more"] a[data-toggle="dropdown"] {
	text-decoration: none;
}
#wizardBox .i-t-handler [data-tab="more"] .dropdown-menu {
	right: 5px;
	left: auto;
}
html[dir="rtl"] #wizardBox .i-t-handler [data-tab="more"] .dropdown-menu {
	right: auto;
	left: 5px;
}
#wizardBox .i-t-handler [data-tab="more"] > a[data-toggle="dropdown"] {
	padding: 7px;
	color: inherit;
}

/* Inline Homepage Library
---------------*/
.r-i-modal[data-type="inline"] {
    width: 100%;
    margin: 0;
}
.r-i-modal[data-type="inline"] .RecommendedImagesContainer .r-i-fake > .r-i-fake-item {
	background-color: #000;
}
.r-i-modal[data-type="inline"] {
	position: static;
}
.r-i-modal[data-type="inline"] .RecommendedImagesContainer {
	height: calc( var(--wizard-side-menu-height) - 170px );
}
.r-i-modal[data-type="inline"] .search-query {
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: #4c4c4c;
	color: #fff;
}
/* Search icon */
.r-i-modal[data-type="inline"] .searchStylesIconDemo {
	color: #fff;
}
/* Home icon */
.r-i-modal[data-type="inline"] .searchStylesIconRemove {
	color: #fff;
}


html[data-device="mobile"] .r-i-modal[data-type="inline"] .RecommendedImagesContainer {
	height: calc( 100vh - 315px );
}

html[data-device="mobile"] #wizardBox #backgroundOptionsTab .t-h-e-tab-title {
	display: none;
}
html[data-device="mobile"] #wizardBox #backgroundOptionsTab .i-t-handler {
	margin-top: 10px;
}
#wizardBox #backgroundOptionsTab .panel-body[data-is-visible="false"] {
	visibility: hidden;
	min-height: 0px;
	height: 0px;
	overflow: hidden;
	margin: 0;
}
/**/
#wizardBox #backgroundOptionsTab #wizardImageTabColorsRecommended[data-is-visible="false"],
#wizardBox #backgroundOptionsTab #hmBgSettings[data-is-visible="false"] {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
	margin: 0;
}

/* invisible accordions height fix- when the user is accessing the tabs
accordions that are not i used still have height and width and we couldn't
use full height on homepage inline gallery for example */
.tab-pane[data-open-content="true"] #homepageAccordion .panel-default {
	margin: 0;
	border-width: 0px;
}

/* Homepage >> Background >> Search Field */
#backgroundOptionsTab .search-container {
	padding-left: 5px;
    padding-right: 5px;
}
#backgroundOptionsTab .search-container input.search {
	width: 100%;
    border: 1px solid #EBECEE;
    box-sizing: border-box;
    border-radius: 4px !important;
    padding: 16px;
    padding-left: 35px;
    padding-right: 40px;
    color: #B4B8C2 !important;
}
html[dir="rtl"] #backgroundOptionsTab .search-container input.search {
	padding-left: 40px;
    padding-right: 35px;
}
html[dir="rtl"] #backgroundOptionsTab .search-container input.search {
	padding-left: 16px;
	padding-right: 35px;
}
#backgroundOptionsTab .search-container span.searchIconFavorite,
#backgroundOptionsTab .search-container span.searchStylesIconDemo,
#backgroundOptionsTab .search-container span.searchStylesIconRemove {
	top: 8px;
    color: #B4B8C2;
}
#backgroundOptionsTab .search-container span.searchIconFavorite,
#backgroundOptionsTab .search-container span.searchStylesIconRemove {
	right: 6px;
}
html[dir="rtl"] #backgroundOptionsTab .search-container span.searchIconFavorite,
html[dir="rtl"] #backgroundOptionsTab .search-container span.searchStylesIconRemove {
	right: auto;
	left: 6px;
}
#backgroundOptionsTab .search-container span.searchStylesIconDemo {
    font-size: 14px;
    left: 6px;
}
html[dir="rtl"] #backgroundOptionsTab .search-container span.searchStylesIconDemo {
	right: 6px;
	left: auto;	
}
#backgroundOptionsTab .search-container span.searchIconFavorite.active,
#backgroundOptionsTab .search-container .multi-filters span.searchIconFavorite {
	right: 45px;
}
html[dir="rtl"] #backgroundOptionsTab .search-container span.searchIconFavorite.active,
html[dir="rtl"] #backgroundOptionsTab .search-container .multi-filters span.searchIconFavorite {
	right: auto;
	left: 45px;
}
/* Bootstrap chosen disabled option fix - on some cases the bootstrap is overwriting
the chosen css so we copied it here
------------------*/
.chosen-container .chosen-results li.disabled-result {
	display: list-item !important;
	color: #ccc !important;
	cursor: default !important;
}

/**
 * multi form handler - for mobile 
*/
.multi-phones .mp-hide-label-desktop {
	display: none;
}

.multi-phones .mp-phone-grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 103px;
	gap: 10px;
	align-items: start; /* prevent vertical shifts when errors appear */
}

@media (max-width: 660px)  {
	.multi-phones .mp-phone-container {
		margin-bottom: 30px;
		padding-bottom: 10px;
		border-bottom: 1px solid #e1e6ef;
	}
	.multi-phones .mp-phone-grid-container {
		grid-template-columns: 1fr 1fr;
	}
	.multi-phones .mp-phone-btn {
		grid-column: span 2;
		justify-self: end;
	}
	.multi-phones .mp-hide-label-desktop {
		display: inline-grid;
	}
	.multi-phones .mp-hide-label-mobile {
		display: none;
	}
}

/**
 * Multi phones & Email In line design
 */
#collapseHeaderOptionsEnterPhoneNumber,
#collapseHeaderOptionsEnterEmail {
	display: flex;
	flex-flow: column;
    align-items: flex-start;
}
#collapseHeaderOptionsEnterPhoneNumber #editMultiPhones,
#collapseHeaderOptionsEnterEmail #editEmails { 
	order: 1;
}

/**
 * Temporary disable phone + emails menu style
 */
#headerPhoneNumber_style_modalSelect,
#headerEmail_style_modalSelect {
	display: none !important;
}

/**
 * Show Order Info Modal
 */
.show-order-info-bootbox-container .modal-body .close {
	font-size: 32px;
	color: #ff5652;
	opacity: 0.7;
}
.show-order-info-bootbox-container .modal-body .close:hover {
	opacity: 1;	
}
.show-order-info-bootbox-container .modal-footer {
	position: relative;
	z-index: 1000;
}
.show-order-info-bootbox-container .modal-footer button[data-bb-handler="noclose"] {
	float: left;
}
.show-order-info-bootbox-container .modal-footer button[data-bb-handler="ok"] {
	float: right;
}
html[dir=rtl] .show-order-info-bootbox-container .modal-footer button[data-bb-handler="noclose"] {
	float: right;
}
html[dir=rtl] .show-order-info-bootbox-container .modal-footer button[data-bb-handler="ok"] {
	float: left;
}
@media (max-width: 767px) {
	.show-order-info-bootbox-container .modal-dialog {
		margin: 0;
	}
	.show-order-info-bootbox-container .modal-content {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.show-order-info-bootbox-container .modal-body,
	.show-order-info-bootbox-container .bootbox-body,
	.show-order-info-bootbox-container .bootbox-body iframe {
		height: 100%;
	}
}

/* External Link Bug Fix */
.bootbox.externalAlert .bootbox-body {
	word-wrap: break-word;
}

/* because we use mask to show the icon we need to do some custom changes 
by adding margin by subtracting it from the image size */
img[data-img-type="svg"],
.fileUploadBox a[data-type="svg"] img {
	width: 29px !important;
	height: 29px !important;
	margin: 2px;
	background-color: #000;
}
/* edge 18 browser bug fix */
@supports (-ms-ime-align: auto) {
	i[data-img-type="svg"],
	img[data-img-type="svg"],
	.fileUploadBox a[data-type="svg"] img {
		mask-repeat: space !important;
		mask-position: center !important;
		mask-size: contain !important;
	}
}
/* all browsers */
@supports not (-ms-ime-align: auto) {
	i[data-img-type="svg"],
	img[data-img-type="svg"],
	.fileUploadBox a[data-type="svg"] img {
		-webkit-mask-position-x: center !important;
		-webkit-mask-position-y: center !important;
		-webkit-mask-size: contain !important;
		-webkit-mask-repeat: no-repeat !important;
		-webkit-mask-origin: initial !important;
		-webkit-mask-clip: initial !important;
	}
}
/**
 * Settings Tab Design Fix - On the new design we don't need the padding and margin
 * so we will have more place to add the logo maker, otherwise we will have double scrolling
 */
#settingsTab.t-e-h {
	padding-bottom: 0px !important;
}
#settingsTab.t-e-h #accordion_settings {
	padding-top: 10px; 
	margin-bottom: 0px !important;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type .website-type-short-exp {
	margin-left: 18px;
	font-weight: normal;
	display: block;
}
html[dir="rtl"] #settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type .website-type-short-exp {
	margin-left: 0;
	margin-right: 18px;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label {
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label span.lbl {
	margin-right: 10px;
}
html[dir="rtl"] #settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label span.lbl {
	margin-left: 10px;
	margin-right: -10px;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label > .website-type-floating-info {
	position: absolute;
    top: -20px;
    right: -10px;
}
html[dir="rtl"] #settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label > .website-type-floating-info {
	right: auto;
	left: -10px;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label > .website-type-floating-info > span {
	margin-right: 5px;
}
#settingsTab #accordion_settings .checkboxSingleSetting .radio.website-type label > .website-type-floating-info > a {
	color: #000;
}
#homepageTab:not(.mobile-accordion-btn-style) .wizard-accordion {
	padding-top: var(--homepage-tab-close-btn-height); 
}
#settingsTab #accordion_settings .checkboxSingleSetting.multi-pages-v2 {
	margin-top: 48px;
}
#settingsTab #accordion_settings .checkboxSingleSetting.multi-pages-v2 .label.label-beta {
	margin: 0 18px;
}
#settingsTab #accordion_settings .checkboxSingleSetting.multi-pages-v2 .radio.website-type {
	margin-top: 5px;
}

/* Website Name And Logo Design
---------------*/
#homepageCollapse1 .panel-body {
	display: flex;
	flex-flow: column;
}
#homepageCollapse1 .panel-body #nameAndLogoBox {
	flex-grow: 0;
	flex-shrink: 0;
}
#homepageCollapse1 .panel-body #nameAndLogoBox .input-group.input-text-edit-buttons .input-group-addon {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
#homepageCollapse1 .panel-body #nameAndLogoBox .h-f-w-handler.active {
    color: #000!important;
}
.wizard.site-editor-b #logoMakerPromoteBox,
#accordion_settings #logoMakerPromoteBox {
	width: 100%;
    background: #fff;
    color: #000;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
    font-size: 1.1em;
    border: 1px solid transparent;
    overflow-wrap: break-word;
    padding: 10px;
    border-radius: 4px;
}
/* S123 Logo Maker Tool */
@media (min-width: 769px) {
	#s123LogoMaker .modal-dialog {
		width: 1200px;
	}
}
#s123LogoMaker #s123LogoMakerContent {
	display: grid;
	grid-template-columns: 100px 400px 1fr;
	overflow-y: auto;
}
@media (max-width: 768px) {
	#s123LogoMaker #s123LogoMakerContent {
		grid-template-columns: auto;
		grid-template-rows: 50px 320px 1fr; 
	}
}
#s123LogoMakerContent #logoStylesBox {
	height: 100%;
	overflow: hidden;
	display: flex;
    flex-direction: column;
}
#s123LogoMaker .modal-dialog .SubmitButtonsArea {
	margin: 0;
	display: flex;
    align-items: center;
    justify-content: flex-end;
}
#s123LogoMakerContent #logoMakerPreview {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#s123LogoMakerContent #logoMakerPreview .l-m-preview {
	width: 100%;
	pointer-events: none;
}
@media (max-width: 768px) {
	#s123LogoMakerContent #logoMakerPreview .l-m-preview {
		font-size: 
	}
}
#s123LogoMakerContent #logoMakerPreview .l-m-preview .l-s-box a {
	display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
	#s123LogoMakerContent #logoMakerPreview .l-m-preview .l-s-box a {
		font-size: 0.6em; 
	}
}
#s123LogoMakerContent #logoStylesBox .logo-option-tab {
	height: 100%;
	background: #fff;
	padding: 10px;
}
#s123LogoMakerContent #logoStylesBox .logo-option-tab#logoText {
	padding: 20px;
}
/* website logo inline tabs */
#s123LogoMakerContent #logoStylesBox .tab-item-hidden {
	display: none;
}
#s123LogoMakerContent #logoStyleTabs {
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media (max-width: 768px) {
	#s123LogoMakerContent #logoStyleTabs {
		flex-direction: row;
	}
}
#s123LogoMakerContent #logoStyleTabs .logo-tab {
	display: flex;
	width: 100%;
	height: 100%;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
#s123LogoMakerContent #logoStyleTabs .logo-tab.active {
	color: orange;
    font-weight: bold;
    background: #fff;
    border-left: 4px solid orange;
}
html[dir=rtl] #s123LogoMakerContent #logoStyleTabs .logo-tab.active {
    border-right: 4px solid orange;
    border-left: 0;
}
@media (max-width: 768px) {
	#s123LogoMakerContent #logoStyleTabs .logo-tab.active {
	    border-top: 4px solid orange;
	    border-left: 0;
	    border-right: 0;
	}
	html[dir=rtl] #s123LogoMakerContent #logoStyleTabs .logo-tab.active {
    	border-right: 0;
    	border-left: 0;
	}
}
#s123LogoMakerContent #logoStylesBox #logoIcons {
	overflow: hidden;
}
@media (max-width: 768px) {
	#s123LogoMakerContent #logoStylesBox #logoIcons {
		overflow: auto;
	}
}
/* Logo Maker Icon Categories Container - layout only, uses ui-icon-grid for styling */
#s123LogoMakerContent #logoStylesBox #logoIcons .s123-logo-maker-icon-categories {
	overflow-y: auto;
	height: calc(100% - 70px);
}
/* website logo inline icon library */
#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoFilter {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	text-align: center;
	column-gap: 5px;
	margin-bottom: 10px;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoFilter div {
	padding: 5px;
    margin: 0 5px;
    background: #ccc;
    cursor: pointer;
}
/* bug fix - the translated text was translated with upper case so we fixed it here manually
solution: https://stackoverflow.com/a/10256138*/
#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoFilter div {
	text-transform: lowercase;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoFilter div:first-letter {
	text-transform: uppercase;
}

#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoFilter div.active {
	background: #0597F2;
    color: #fff;
}
/* search input design */
#s123LogoMakerContent #logoStylesBox #logoIcons #logoIconSearch,
#s123LogoMakerContent #logoStylesBox #logoFonts #logoFontSearch {
	position: relative;
    margin: 10px 2px;
}
#s123LogoMakerContent #logoStylesBox #logoIcons #logoIconSearch_input,
#s123LogoMakerContent #logoStylesBox #logoFonts #logoFontSearch_input {
	border: 1px solid #EBECEE;
	box-sizing: border-box;
	border-radius: 4px !important;
	padding: 16px;
    height: 100%;
    color: #B4B8C2 !important;
}
#s123LogoMakerContent #logoStylesBox #logoIcons #logoIconSearch_input {
	padding: 16px 16px 16px 35px;
}
html[dir="rtl"] #s123LogoMakerContent #logoStylesBox #logoIcons #logoIconSearch_input {
	padding: 16px 35px 16px 16px;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .logoIconSearch_icon,
#s123LogoMakerContent #logoStylesBox #logoFonts .logoFontSearch_icon {
	top: 17px;
    right: 10px;
    color: #B4B8C2;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .logoIconSearch_icon {
	right: 0;
    left: 5px;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .searchStylesIconRemove {
	top: 5px;
    right: 10px;
    width: 35px;
    height: 35px;
}
html[dir="rtl"] #s123LogoMakerContent #logoStylesBox #logoFonts .logoFontSearch_icon {
	left: 10px;
	right: auto;
}
html[dir="rtl"] #s123LogoMakerContent #logoStylesBox #logoIcons .logoIconSearch_icon {
	right: 0;
}
html[dir="rtl"] #s123LogoMakerContent #logoStylesBox #logoIcons .searchStylesIconRemove {
	right: auto;
	left: 10px;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .logoLogoInlineLibrary {
	overflow-y: auto;
	height: 80%;
}
/* Icon results container - layout only, uses ui-icon-grid for styling */
#s123LogoMakerContent #logoStylesBox #logoIcons .l-i-items {
	height: 100%;
}
#s123LogoMakerContent #logoStylesBox #logoIcons .hide-container {
	display: none;
}
/* website logo inline logo fonts */
#s123LogoMakerContent #logoStylesBox #logoFonts {
	overflow: hidden;
}
#s123LogoMakerContent #logoStylesBox #logoFonts .logoFontInlineLibrary {
	overflow-y: auto;
	height: calc(100% - 80px);
}
#s123LogoMakerContent #logoStylesBox #logoFonts .l-f-items {
	height: 100%;
}
html[dir="rtl"] #s123LogoMakerContent .modal-body #logoStylesBox #logoFonts .logoFontInlineLibrary {
	direction: rtl;
}
html[dir="rtl"] #s123LogoMakerContent .modal-body #logoStylesBox #logoFonts .l-f-items {
	text-align: right;
	direction: rtl;
}
#s123LogoMaker .modal-body #logoStylesBox #logoFonts .l-f-items:hover {
	cursor: pointer;
}
#s123LogoMakerContent #logoStylesBox #logoFonts .l-f-items .l-f-box {
	border: 1px solid #EBECEE;
	background: #fff;
	box-shadow: none;
	border-radius: 8px;
	margin: 10px;
	max-width: 100%
}
html[dir="rtl"] #s123LogoMakerContent .modal-body #logoStylesBox #logoFonts .l-f-items .l-f-box {
	text-align: right;
}
html[dir="rtl"] #s123LogoMakerContent #logoFonts .themes-fonts-preview-image-all {
	background-position: right center;
}
#s123LogoMakerContent .modal-body #logoStylesBox #logoFonts .l-f-items .l-f-box:hover {
	border-color: #0597F2 !important;
    transform: translateY(-2px);
}
#s123LogoMakerContent #logoStylesBox #logoFonts .logoFontInlineLibrary-preview {
	border: 1px solid #EBECEE;
    border-radius: 8px;
    margin: 10px;
    display: flex;
    border-color: #0597F2;
    align-items: center;
    font-size: 1.5rem;
    padding: 10px;
}
html[dir="rtl"] #s123LogoMakerContent .modal-body #logoStylesBox #logoFonts .logoFontInlineLibrary-preview {
	justify-content: flex-end;
	text-align: right;
}
#s123LogoMakerContent .modal-body #logoStylesBox #logoText .fieldHeaders {
	margin-bottom: 5px;
}
#s123LogoMakerContent #logoStylesBox #logoText .fieldHeaders label {
	font-size: 15px;
}
#s123LogoMakerContent #logoStylesBox #logoText .fieldHeaders .btnSettings {
	background: transparent;
	color: #8c8c8c;
	border: 0;
	outline: 0;
}
#s123LogoMakerContent #logoStylesBox #logoText .fieldHeaders .btnSettings.active {
	color: #000;
}
/** 
 * Fix Dropzone Bug - In RTL that add a scroll in the wizard in the wrong place on RTL 
 */
html[dir=rtl] .dz-hidden-input {
    left: auto !important;
    right: 0 !important;
}
/**
 * Fix Bootstrap Tab Bug - In all places in the wizard where we loading the custom form builder JS file it's also
 * loading new version (v4.5.0) of Bootstrap and it's using `show` class instead of `in` class
 * and it's destroy the tab functionality so we fixing it's manually.
 */
.tab-pane.fade.show:not(.in) {
	display: none!important;
}
/* SITE123 Slider */
.s123-slider span[id$="_slider"] {
	background: #EBECEE;
	border-width: 0;
	height: 8px;
}
.s123-slider span[id$="_slider"] .ui-widget-header {
	background: #0583F2;
}
.s123-slider span[id$="_slider"] .ui-slider-handle {
	height: 16px;
	width: 16px;
	border-width: 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.24);
	border-radius: 50%;
}
.buttonSettingBox .s123-slider span[id$="_slider"] .ui-slider-handle,
.s123-collapse-settings .s123-slider span[id$="_slider"] .ui-slider-handle {
	background: #2E383E;
}
.s123-slider div[id$="_view"] {
	background: #5F6373;
	border-radius: 4px;
	color: #FFFFFF;
	height: 25px;
}
.s123-slider div[id$="_view"] input {
	font-weight: 500 !important;
}


/* External video uploader popup
------------------------*/
.s123-modal.external-video-uploader .bootbox-body {
	padding: 10px;
}
.s123-modal.external-video-uploader .bootbox-body #video_path {
	direction: ltr;
}

/* Rich Page - Add New Section Btn
----------------*/
#pagesTab[data-rich-page-mode="true"] {
	padding-top: 0;
}
#pagesTab[data-rich-page-mode="true"] #addNewPageModule {
	display: none !important;
}
#pagesTab[data-rich-page-mode="true"] .add-section-container {
	text-align: center;
	position: absolute;
	bottom: -15px; /* add some space between the pages and the button*/
	left: 0;
	right: 0;
}
#pagesTab[data-rich-page-mode="true"] .add-section-container #addSection {
	padding: 8px 14px;
}
#pagesTab[data-rich-page-mode="true"] > .pages {
	position: relative;
	margin-bottom: 20px;
}
/* rich page mode - hide homepage card */
#pagesTab[data-rich-page-mode="true"] #card_homepage {
	display: none !important;
}
/* rich page mode - hide pages that wasn't selected */
#pagesTab[data-rich-page-mode="true"] #sortable > li:not(.r-p-active),
#pagesTab[data-rich-page-mode="true"] #sortable > li[data-moduletypenum="78"] > ul > li:not(.r-p-active) {
	display: none;
}
/* pages mode - hide all rich page children*/
#pagesTab[data-rich-page-mode="false"] li[data-moduletypenum="128"] ul {
	display: none;
}
/* rich page mode - hide the rich page module design so it will looks like block */
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"] {
	background-color: transparent;
	margin: 0;
	border-bottom: 0;
	background-image: none;
	padding-top: 0;
}
/* rich page mode - remove from the rich page module the border */
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"]:before {
	border: 0;
}
/* rich page mode - hide the rich page module options */
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"] > .pages_PageBox,
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"] > .boxClick {
	display: none;
}

/* no sections message design */
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"] .rc-empty-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #fff;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-settings-btn,
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-add-btn {
    border: 1px #5D5D5D solid;
    padding: 6px;
    cursor: pointer;
	border-left-width: 0;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-add-btn {
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
html[dir="rtl"] #pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-settings-btn,
html[dir="rtl"] #pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-add-btn {
    border-left-width: 1px;
    border-right-width: 0;
}
html[dir="rtl"] #pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title-continer .rich-page-title-add-btn {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
	border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
/* rich page title */
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title {
	font-size: 1.1em; /* because it's a title we want it to be a little bigger */
    width: calc(100% - 36px);
    text-align: center;
    padding: 5px;
    min-height: 33px;
    background-color: #141a1b;
    margin: 0 0 0 5px;
    border-radius: 4px;
    cursor: text;
    border: 1px solid #5D5D5D;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
html[dir="rtl"] #pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title {
	border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
	border-bottom-left-radius: 0;
    border-top-left-radius: 0;
	margin: 0 5px 0 0;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title #changeRichpageTitle {
	display: block;
	width: 100%;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title #changeRichpageTitle:focus-visible {
	outline: unset;
}
#pagesTab[data-rich-page-mode="true"] .t-h-e-header .rich-page-title #changeRichpageTitle:focus {
	width: 100%;
	display: inline-block;
}

/**
 * Rich Page Categories Handler Design
 */
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"] > .boxClick,
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"] > .pages_PageBox {
	display: none;
}
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"]:before {
	border: 0;
}
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"] {
	background-color: transparent;
	margin: 0;
	border-bottom: 0;
    padding: 0;
}
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"] > ul {
	width: 100%;
}

/* Rich Page
 ------------------------*/
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="78"] > ul,
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"] > ul {
	padding-inline-start: 0;
}
#pagesTab[data-rich-page-mode="true"] li[data-moduletypenum="128"].r-p-active ul li {
	margin-left: 0;
	margin-right: 0;
}
/* add to the `convert to rich page` text space between the tooltips */
.popover.modules-setting .popover-content .btn-link#convertToRichPage {
	padding-right: 3px !important;
	padding-bottom: 0px !important;
    padding-top: 0px !important;
}
/* remove unnecessary bottom spacing */
.popover.modules-setting .popover-content .btn-link#convertToRichPage label.block {
	margin-bottom: 0px;
}
html[dir=rtl] .popover.modules-setting .popover-content .btn-link#convertToRichPage {
	padding-left: 3px !important;
}

/**
 * Single/Landing Page Website - Hide the rich pages from the user
 */
#pagesTab[data-landing-page="true"] .rich-page-option,
#pagesTab[data-singe-page="true"] .rich-page-option {
	display: none;
}
#pagesTab[data-landing-page="true"] li[data-moduletypenum="128"],
#pagesTab[data-singe-page="true"] li[data-moduletypenum="128"] {
	display: none !important;
}

/**
 * Landing Page Website - Hide the external link pages from the user
 */
#pagesTab[data-landing-page="true"] .Add-External-Link,
#pagesTab[data-landing-page="true"] li[data-moduletypenum="108"] {
	display: none !important;
}

/* Promo error message - the ll the user it can't be first module */
#pagesTab[data-rich-page-mode="true"] li .promo-module-msg {
    margin-left: 4px;
    font-size: 12px;
    color: #ff5652;
    text-align: left;
}
html[dir=rtl] #pagesTab[data-rich-page-mode="true"] li .promo-module-msg {
    margin-left: 0;
    margin-right: 4px;
    text-align: right;
}
/* sortable error message design fix */
#pagesTab[data-rich-page-mode="true"] li.ui-sortable-placeholder[data-ns-is-allowed="false"] {
	background-color: transparent;
}
#pagesTab[data-rich-page-mode="true"] li.ui-sortable-placeholder[data-ns-is-allowed="false"] > .alert-danger {
	width: 100%;
}
#pagesTab[data-rich-page-mode="true"] li.ui-sortable-placeholder[data-ns-is-allowed="false"]:before {
	border: 0;
}
/* hide the error message when the place holder is reverted back to it's original place*/
#pagesTab[data-rich-page-mode="true"] li.ui-sortable-placeholder[data-ns-is-allowed="false"]:not(.mjs-nestedSortable-error) {
	visibility: hidden !important;
}
/* Pages not in menu or homepage */ 
.wizard #pagesTab[data-pages-n-i-m-o-h-tab="showPagesTab"][data-singe-page="false"][data-landing-page="false"] li[data-module-show-in-footer="0"][data-module-mp-show-in-home="0"][data-module-mp-show-in-menu="0"][data-parent-id=""],
.wizard #pagesTab[data-pages-n-i-m-o-h-tab="showOthersTab"][data-singe-page="false"][data-landing-page="false"] li[data-parent-id=""]:not([data-module-show-in-footer="0"][data-module-mp-show-in-home="0"][data-module-mp-show-in-menu="0"]),
.wizard #pagesTab[data-pages-n-i-m-o-h-tab="showOthersTab"][data-singe-page="false"][data-landing-page="false"] #card_homepage {
	display: none !important;
}
.wizard #pagesTab[data-pages-n-i-m-o-h-tab="showOthersTab"][data-singe-page="false"][data-landing-page="false"][data-rich-page-mode="false"] #sortable {
	margin-top: var(--othersTabMarginTop);
}
/* some modules are unAddable to the rich page so we disable them */
#allModules .r-p-unsupported-module {
	opacity: 0.45;
}

/* Custom Labels */
.custom-labels-container .custom-label-container {
	display: flex;
}
.custom-labels-container .custom-label-text {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

/* Website Background Design
-----------------------*/
#wizardBox #designTab #websiteBackground[data-visible="true"] {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100px);
}
#wizardBox #designTab #websiteBackground[data-visible="true"] .patterns {
	height: 100%;
	overflow: hidden;
}
#wizardBox #designTab #websiteBackground[data-visible="true"] .patterns iframe {
	display: none;
	border: 0;
	width: 100%;
	height: 100%;
}
#wizardBox #designTab.t-e-h #fontThemes .theme-defult-item-container .allColors{
	min-width: 130px;
}

html[dir="rtl"] #wizardBox #designTab.t-e-h #fontThemes .theme-defult-item-container .allColors {
	min-width: 170px;
}
/* we have some whitespace between the `bootbox-body` and the Iframe so we fix it */
#imageFilterBootbox .bootbox-body {
	font-size: 0;
}

/* Auto Complete Bug Fix - The pages list wasn't limited and always stretched
according to the longest page name
------------*/
.ui-autocomplete .ui-menu-item {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* S123CustomCodeEditor RTL Handle - Make sure that the
text is always aligned to the left
--------------------*/
html[dir="rtl"] .CodeMirror-wrap {
	text-align: left;
}

/* Inline Module Without Header (Back Button)
------------------*/
.inline-module.no-header > .t-h-e-header {
	display: none !important;
}
.inline-module.no-header .inline-module-container {
	margin-top: 50px
}
.rotate45 {  
	-webkit-transform:rotate(45deg);  
	-moz-transform: rotate(45deg);  
	-ms-transform: rotate(45deg);  
	-o-transform: rotate(45deg);  
	transform: rotate(45deg);
}

/**
 * Doka Image Editor
 */
.PinturaModal {
	width: 90% !important;
	height: 90% !important;
	top: 5% !important;
	left: 5% !important;
}
.pinturaModalBackdropManaul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
	background-color: #000;
    opacity: 0.8;
}

/**
 * illustrations inline gallery tool
 */
 #illustrationStylesBox .media-packs-back,
 .illustrationInlineBox .media-packs-back
  {
 	display: flex;
 	border: 0;
    border-bottom: 1px solid #ccc;
    border-width: 1px !important;
 }
.illustrations-packs-container  {
	margin-bottom: 5px;
}
.illustrations-packs {
	display: grid;
	width: 100%;
	padding-bottom: 5px;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 5px;
	border-bottom: 1px solid #ccc;

}
.illustrations-packs .media-packs {
	width: 100%;
	height: 140px;
	position: relative;
	border: 1px solid #d5d5d5;
	padding: 5px;
	background: #fff;
	transition: transform .2s ease-in-out;
	cursor: pointer;
}
.illustrations-packs .media-packs:hover {
	border-color: #0597F2;
}
.media-packs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
    object-position: center;
}
.media-packs .pack-title {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 14px;
    color: #fff;
    width: 100%;
    padding: 5px 5px;
    background-color: #2f383e;
    text-align: center;
}
.inline-illustration-images {
	height: 100%;
	overflow-y: auto;
}
.illustrations-items {
	display: grid;
    width: 100%;
    grid-template-columns: repeat(2,1fr);
    grid-auto-rows: 100px;
    grid-gap: 2px;
}
.illustrations-items .illustration-item-box {
	width: 100%;
	position: relative;
	border: 1px solid transparent;
}
.illustrations-items .illustration-item-box img {
	width: 100%;
    height: 100%;
	object-fit: contain;
    object-position: center;
}
.illustrations-items .illustration-item-box .ace-icon {
	position: absolute;
    left: 5px;
    top: 5px;
    color: #87b87f;
    font-size: 25px;
    z-index: 4;
}
.illustrations-items .illustration-item-box:hover {
	border-color: #000;
    cursor: pointer;
}
.illustrations-items .illustration-item-box[data-media-type="video"] img {
	width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.illustrations-items .illustration-item-box[data-media-type="video"]::before{
	font-family: 'FontAwesome';
	content: "\f01d";
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
}
.illustrations-items .illustration-item-box i {
	display: none;
}
.illustrations-items .illustration-item-box.active i {
	display: block;
}
.illustrations-items > .illustration-item-box .illustrations-credits {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 2px;
	margin: 0;
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #000;
    text-align: center;
}
.illustrations-items > .illustration-item-box:hover .illustrations-credits {
	display: inline-block;
}
.illustrations-items > .illustration-item-box .illustrations-credits a {
	color: #000;
	font-size: 11px;
}

/* Homepage Goal - We hide the option because the user is now controlling it from the preview
and converting it to hidden input is complicated because it is a dynamically build select box
with dynamic options in it
--------------------------*/
.second-goal-seperator {
	display: none;
}
#homepage_goal_placeBOX,
#homepage_second_goal_placeBOX {
	display: none !important;
}

/* S123 Drop Down With Fade Animation
------------------------------*/
[data-rel="s123DropDown"] [data-s123-drop-down-role="dropdown"] {
	position: absolute;
	top: 100%;
	transition: opacity 0.3s, visibility 0.3s, margin 0.3s linear;
	list-style: none;
	padding: 0;
	margin: 0;
	/* animation */
	margin-top: -4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0px 2px 7px 0px #242b2f;
}
/* show drop down */
[data-rel="s123DropDown"]:not([data-s123-drop-down-toggle="click"]):hover [data-s123-drop-down-role="dropdown"],
[data-rel="s123DropDown"].show-drop-down [data-s123-drop-down-role="dropdown"] {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	margin-top: 0;
}
/* sometimes we need to close the drop down event when the user
is still in the drop down */
[data-rel="s123DropDown"].close-drop-down [data-s123-drop-down-role="dropdown"] {
	margin-top: -4px !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Wizard Top Tool Drop Down Bar Design
----------------*/
#wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul {
	text-align: left;
	background: var(--wizard-top-menu-bg);
}
html[dir="rtl"] #wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul {
	text-align: right;
}
#wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul .upgrade-crown {
	top: 60%;
	right: 6px;
}
html[dir="rtl"] #wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul .upgrade-crown {
	right: unset;
	left: 6px;
}
#wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul a[data-open-accordion="moreLanguages"]:has(.upgrade-crown) .text-container {
	padding-right: 20px;
}
html[dir="rtl"] #wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] ul a[data-open-accordion="moreLanguages"]:has(.upgrade-crown) .text-container {
	padding-right: 0;
	padding-left: 20px;
}
#wizardTopToolbar .wizardSideTabs [data-rel="s123DropDown"] li {
	position: relative;
}
#wizardTopToolbar [data-rel="s123DropDown"] ul a {
	white-space: nowrap;
	width: 100%;
	height: 100%;
	padding: 7px 11px;
	display: flex;
	align-content: center;
	align-items: center;
	color: rgba(255,255,255,.6);
	text-decoration: none;
	margin: 0;
}
#wizardTopToolbar [data-rel="s123DropDown"] a:hover,
#wizardTopToolbar [data-rel="s123DropDown"] .active a, 
#wizardTopToolbar [data-rel="s123DropDown"] .active:hover a, 
#wizardTopToolbar [data-rel="s123DropDown"] .active:focus a {
	color: #fff;
}
#wizardTopToolbar [data-rel="s123DropDown"] .icon-container {
	width: 1.2em;
	height: 1.2em;
	margin-right: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
html[dir=rtl] #wizardTopToolbar [data-rel="s123DropDown"] .icon-container {
	margin-right: 0;
	margin-left: 5px;
}
/**/
#wizardTopToolbar .upgrade-crown {
	width: 20px;
}

/* Design Menu
---------------------------*/
#wizardTopToolbar .wizardSideTabs .wizard-design-tab ul a {
	display: flex !important;
	align-items: center;
	text-decoration: none;
}

/**
 * Custom Fonts Handler
 */
#customFontsContainer .c-f-fonts-list-box {
	margin-bottom: 20px;
}
#customFontsContainer .c-f-font {
	padding: 10px;
	display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
#customFontsContainer .c-f-font-delete-btn {
	color: #ff523a;
	cursor: pointer;
}
#customFontsContainer .c-f-font-delete-btn:hover {
	color: #ff5652;
}

/* Gradients palette - gpickr 
------------------------------*/
.gradients-palette-container {
	display: none;
	background-color: #ECECEC;
	position: absolute;
	top: 59px;
	left: 12px;
	width: 280px;
	z-index: 1;
	border: solid 1px #F0C49B;
}
html[dir=rtl] .gradients-palette-container {
	left: auto;
	right: 12px;
}
.gradients-palette-container .gpickr {
	padding: 10px 18px 10px 20px;
	max-width: 100%;
	box-shadow: unset;
}
html[dir=rtl] .gradients-palette-container .gpickr {
	padding: 10px 20px 10px 18px;
}
html[dir=rtl] .gradients-palette-container .gpickr .gpcr-interaction {
	margin-left: 0;
	margin-right: 0.5em;
}
html[dir=rtl] .gradients-palette-container .gpickr .gpcr-interaction .gpcr-mode {
	left: auto;
	right: 0.15em;
}
html[dir=rtl] .gradients-palette-container .gpickr .gpcr-interaction .gpcr-result .gpcr-angle>div {
	transform-origin: right;
	left: auto;
	right: 50%;
}
.gradients-palette-container .gradients-palette-buttons .gradients-palette-btn-choose {
	background-color: #eeeeee;
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    border-radius: 3px;
    color: #333;
    font-size: 14px;
    line-height: 1;
    padding: 5px 4px;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    vertical-align: middle;
}
.gradients-palette-container .gradients-palette-buttons .gradients-palette-btn-choose:hover {
	background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.gradients-palette-container .gradients-palette-buttons .gradients-palette-btn-cancel {
	font-size: 11px;
    color: #d93f3f !important;
    margin: 0;
    padding: 2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration: none;
}
.gradients-palette-container .gradients-palette-buttons .gradients-palette-btn-cancel:hover {
	color: #d93f3f !important;
    text-decoration: underline;
}
html[dir=rtl] .gradients-palette-container .gradients-palette-buttons .gradients-palette-btn-cancel {
	margin-right: 0px;
	margin-left: 5px;
}
.gradients-palette-container .gradients-palette-buttons {
	float: right;
	padding: 10px 20px 10px 18px;
}
html[dir=rtl] .gradients-palette-container .gradients-palette-buttons {
	float: left;
}
#wizardBox #siteFavicon_uploadFileContaner.pro-feature,
#wizardBox #siteFavicon_uploadFileContaner.pro-feature .pro-feature-label {
	cursor: pointer;
}
#wizardBox #siteFavicon_uploadFileContaner.pro-feature button {
	pointer-events: none;
}

/**
 * Homepage Upload Files >> Prevent First Margin - We don't like to add margin
 * button if the user has only one image so we use this trick.
 * Source: https://stackoverflow.com/a/2717515/469161
 */
#changinImagesContiner > div[id^="home_slider_image_u-f-"]:nth-of-type(1) {
	margin-bottom: 0;
}
#changinImagesContiner > div[id^="home_slider_image_u-f-"]:nth-of-type(2) {
	margin-top: 16px; 
}

/* Wizard Domain Boxes Height Limit
--------------------------*/
.domain-boxes-container {
	max-height: calc(var(--wizard-side-menu-height) - 170px);
	overflow: auto;
}
/* Wizard homepage goal type form style tab design */
#homepage_goal_type_form {
	overflow: hidden;
}
#homepage_goal_type_form #homepage_form_designs {
	overflow: hidden;
    height: 100%;
    margin: 16px 0px;
}
#homepage_goal_type_form #homepage_form_designs #homepage_goal_type_form_style_vertical, 
#homepage_goal_type_form #homepage_form_designs #homepage_goal_type_form_style_horizontal {
    overflow: auto;
    height: 100%;
}
/*
 * Wizard Homepage Goal type form we split the form settings and form design to two different buttons
 * edit for the settings and a style buttons for the form styles
 * we hide the styles when edit is clicked and show the styles when the style button clicked
 */
#homepage_goal_type_form.showOnlySettigns #homepage_form_settings,
#homepage_goal_type_form.showOnlyDesign #homepage_form_designs {
	display: block !important;
}
/* Wizard light theme design
-----------------------------*/
.wizard-theme-light .wizard {
	--wizard-top-menu-bg: #ffffff;
}
.wizard-theme-light .wizard #previewBox .wizardSideTabs li > a,
.wizard-theme-light .wizard #previewBox .wizardSideTabs > li > button {
	color: rgba(0,0,0,0.7);
}
.wizard-theme-light .wizard #previewBox .wizardSideTabs > li > a:hover {
	color: black;
}
.wizard-theme-light .wizard #previewBox .wizardSideTabs > li.active > a {
	color: black;
}
.wizard-theme-light .wizard .wizard-u-r-container #wizardUndo,
.wizard-theme-light .wizard .wizard-u-r-container #wizardRedo {
	color: #000;
}
.wizard-theme-light .wizard #savedStatus {
	color: rgba(0,0,0,0.7);
}
.wizard-theme-light .wizard #previewScaleDevices a {
	color: rgba(0,0,0,0.7);
}
.wizard-theme-light .wizard #wizardTopToolbar [data-rel="s123DropDown"] ul a {
	color: rgba(0,0,0,0.7);
}
.wizard-theme-light .wizard #wizardTopToolbar [data-rel="s123DropDown"] a:hover,
.wizard-theme-light .wizard #wizardTopToolbar [data-rel="s123DropDown"] .active a, 
.wizard-theme-light .wizard #wizardTopToolbar [data-rel="s123DropDown"] .active:hover a, 
.wizard-theme-light .wizard #wizardTopToolbar [data-rel="s123DropDown"] .active:focus a {
	color: #000;
}
.wizard-theme-light .wizard #wizardBox .tab-content {
	background-color: #ececec !important;
	border-color: #2E383E;
}
.wizard-theme-light .wizard #wizardBox .tab-content .close-wizard-tab-btn {
	color: #000;
}
.wizard-theme-light .wizard #addNewPageModule {
	background: #ececec;
}
.wizard-theme-light .wizard .pages-recycle-btn {
	color: #000 !important;
}
.wizard-theme-light .wizard #card_homepage,
.wizard-theme-light .wizard li.moduleSortList.list-group-item {
	border-color: #d6d4d4;
	background-color: #FFF;
}
.wizard-theme-light .wizard #card_homepage:hover,
.wizard-theme-light .wizard li.moduleSortList.list-group-item:hover {
	background-color: #f1efef;
} 
.wizard-theme-light .wizard #card_homepage.p-active, 
.wizard-theme-light .wizard li.moduleSortList.list-group-item.p-active {
	background-color: #f1efef;
}
.wizard-theme-light .wizard li.moduleSortList.list-group-item .module_name, 
.wizard-theme-light .wizard li.moduleSortList.list-group-item .promoModuleInput, 
.wizard-theme-light .wizard #homepageAlternativeName {
	background-color: #FFF !important;
    color: #010B40;
	border-color: #b5b5b5;
}
.wizard-theme-light .wizard #pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-title {
	color: #000;
}
.wizard-theme-light .wizard #pagesTab fieldset.pages-recycle .pages_buttonsBox .p-r-page-delete-date {
	color: rgba(0,0,0,0.5);
}
.wizard-theme-light .wizard .manageWin {
	color: rgba(1,1,1,0.7) !important;
	background-color: rgba(111, 110, 110, 0.3) !important;
	border-color: #b5b5b5;
}
.wizard-theme-light .wizard .pages_dragButton a {
	color: rgba(1,1,1,0.5);
}
.wizard-theme-light .wizard .pages_RemoveButtons a,
.wizard-theme-light .wizard .pages_RemoveButtons div {
	color: rgba(1,1,1,0.5) !important;
}
.wizard-theme-light .wizard li.moduleSortList.list-group-item[data-moduletypenum="78"] {
	background-color: rgb(29,50,53,0.1);
}
.wizard-theme-light li.moduleSortList.list-group-item .external-link-module-msg {
	color: rgba(1,1,1,0.7);
}
.wizard-theme-light .wizard #wizardBox .tab-content {
	color: #010B40;
	background-color: #ececec !important;
}
.wizard-theme-light .wizard .add-section-container #addSection {
	color: #010B40 !important;
	border-color: #010B40 !important;
}
.wizard-theme-light .wizard .add-section-container #addSection:hover {
	background-color: #9e9e9e38 !important;
}
.wizard-theme-light .wizard .wizard-accordion.accordion-style1.panel-group .panel,
.wizard-theme-light .wizard .wizard-accordion.accordion-style1.panel-group .panel .collapse {
	background: #ececec;
}
.wizard-theme-light .wizard #wizardBox .t-e-h #fontThemes .search,
.wizard-theme-light .wizard #wizardBox .t-e-h #singleFontThemes .search {
	color: #010B40 !important;
	border-color: #010B40;
}
.wizard-theme-light .wizard #wizardBox .t-e-h #fontThemes .searchInput_designIcon,
.wizard-theme-light .wizard #wizardBox .t-e-h #singleFontThemes .searchInput_designIcon {
	color: #010B40;
}
.wizard-theme-light .wizard #activePluginList .wizard-card {
	background-color: #d0dbe6 !important;
}
.wizard-theme-light .wizard #activePluginList .wizard-card .right {
	color: #010B40 !important;
	background-color: #d0dbe6 !important;
}
.wizard-theme-light .wizard #activePluginList .wizard-card .content {
	color: #010B40 !important;
}
.wizard-theme-light .wizard #activePluginList .manageActivePluginButtons {
	color: #010B40 !important;
	border-color: #010B40 !important;
}
.wizard-theme-light .wizard #activePluginList .manageActivePluginButtons:hover {
	background-color: #9e9e9e38 !important;
}
.wizard-theme-light .wizard #wizardBox .i-t-handler .i-t-header > div {
	background-color: #d0dbe6;
}
.wizard-theme-light .wizard #wizardBox .i-t-handler .i-t-header > div.active {
	color: #ff523a;
}
.wizard-theme-light .wizard #wizardBox .t-e-h .tabContent .custom-option-controller {
	background-color: rgb(208,219,230,0.9);
}
.wizard-theme-light .wizard #wizardBox .t-e-h .tabContent .custom-option-controller a {
	color: #010B40 !important;
	border-color: #010B40 !important;
}
.wizard-theme-light .wizard #wizardBox .t-e-h .tabContent .custom-option-controller a:hover {
	background-color: #9e9e9e38 !important;
}
.wizard-theme-light .wizard #wizardBox #backgroundColorOptionsTab .back-btn,
.wizard-theme-light .wizard #wizardBox .t-e-h .t-h-e-header .back-btn {
	color: #FF523A;
}
.wizard-theme-light .wizard #BackgroundTabHomepage .wizard-card {
	background-color: #d0dbe6 !important;
}
.wizard-theme-light .wizard #backgroundOptionsTab .search-container input.search {
	color: #010B40 !important;
	border-color: #010B40 !important;
}
.wizard-theme-light .wizard #backgroundOptionsTab .search-container span.searchIconFavorite,
.wizard-theme-light .wizard #backgroundOptionsTab .search-container span.searchStylesIconDemo,
.wizard-theme-light .wizard #backgroundOptionsTab .search-container span.searchStylesIconRemove {
	color: #010B40 !important;
}
.wizard-theme-light #moduleSideMenu {
    color: #010B40;
    background: #d0dbe6;
}
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li > a,
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu,
.wizard-theme-light #moduleSideMenu .nav-list > li > a {
    background-color: #d0dbe6;
    color: rgba(0,0,0,0.7);
}
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li.active > a > .menu-icon,
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li > a:hover,
.wizard-theme-light #moduleSideMenu .nav-list > li > a:hover,
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li.active > a,
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li.active > a:hover,
.wizard-theme-light #moduleSideMenu .nav-list > li .submenu > li.active > a:focus,
.wizard-theme-light #moduleSideMenu .nav-list > li.active > a,
.wizard-theme-light #moduleSideMenu .nav-list > li.active > a:hover,
.wizard-theme-light #moduleSideMenu .nav-list > li.active > a:focus {
	color: #000;
}
.wizard-theme-light #moduleSideMenu ul > li a {
	border-color: #d0dbe6;
}
.wizard-theme-light #textAnimationsContainer .text-animations-box.active,
.wizard-theme-light #textAnimationsContainer .text-animations-box:hover,
.wizard-theme-light #textPositionsContainer .text-positions-box.active,
.wizard-theme-light #textPositionsContainer .text-positions-box:hover {
    background-color: #d0dbe6;
}
.wizard-theme-light #BackgroundTabHomepage #home_slider_chaning_speed_slider {
	background-color: #d0dbe6 !important;
}
#websiteStructureTabs #moduleHeaderStyles {
	overflow: hidden;
	height: 100%; 
}
#websiteStructureTabs #moduleHeaderStyles .page_header_styleBOX {
	height: calc( (var(--wizard-side-menu-height) - var(--homepage-tab-close-btn-height)) - 110px );
    overflow: hidden;
}
.wizard.site-editor-b #websiteStructureTabs {
	margin-top: 10px;
}
#websiteStructureTabs .i-t-header [data-tab="showWebsiteStructuresTab"],
#websiteStructureTabs .i-t-header [data-tab="WebsiteThemeAdvancedOptionsBOX"] {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
html[data-device="computer"] #collapseHeaderOptions #headerCallToActionsButtonsBox {
	margin-bottom: 100px;
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul {
	display: flex;
    flex-flow: column;
    gap: 5px;
    margin: 0;
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul li {
	background: rgb(242, 244, 248);
    border: 1px solid rgb(225, 230, 239);
    border-radius: 4px;
    padding: 15px 12px;
    width: 100%;
    margin-left: 0.1rem;
    display: flex;
    cursor: move;
}
html[dir="rtl"] #collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul li {
    margin-left: 0;
    margin-right: 0.1rem;
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul li:before {
	font-family: "Font Awesome 6 Pro";
    font-weight: 300;
	content: "\f047";
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul li.ui-sortable-placeholder {
	border: 2px dashed #D9D9D9 !important;
    background-color: #F7F7F7 !important;
    visibility: visible !important;
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons ul li.ui-sortable-placeholder:before {
	content: "";
}
#collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons .arrange-action-btn-icon {
	margin-right: 6px;
}
html[dir="rtl"] #collapseHeaderOptions #headerCallToActionsButtonsBox .headerCallToActionsButtons .arrange-action-btn-icon {
	margin-right: 0;
	margin-left: 6px;
}
#collapseHeaderOptions .header-menu-missing-value .alert-warning {
	margin-bottom: 0;
}

#formDesigns #promo_form_style_inlineSelect {
	margin: 0;
	width: 100%;
}

/* Language Manager Upgrade Button
-----------------*/
.checkboxSingleSetting .manage-language-container .pro-feature-label {
	margin-top: 16px;
}

/* Custom Colors Pro Label 
-----------------*/
#showColors {
	display: inline-flex;
	align-items: center;
}

@media (max-width: 767px) {
	#showColors {
		margin-bottom: 10px;
		display: inline-flex;
		align-items: center;
	}
}

/* E-commerce Separator Style - Make it look like
simple element
--------------------*/
.e-commerce-tab-seperator a:hover {
	cursor: default;
	color: rgba(255,255,255,.7) !important
}

/* Image AI Tool
-----------------*/
#imageAI {
	height: 520px;
	overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
}
#imageAI .image-ai-list {
	display: none;
	padding-bottom: 20px;
	justify-items: center;
	overflow: auto;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
#imageAI .image-ai-loading-container {
	width: 100%;
	height: 500px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
@media (max-width: 767px) {
	#imageAI .image-ai-loading-container {
		height: 300px;
	}
}
#imageAI .image-ai-prv-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 10px;
	border: 3px solid transparent;
	cursor: pointer;
	box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
@media (max-width: 767px) {
	#imageAI .image-ai-prv-container {
		margin: 5px;
	}
}
#imageAI .image-ai-prv-container .image-ai-priview-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 320px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#imageAI .image-ai-prv-container.image-ai-horizontal .image-ai-priview-image{
	width: 320px;
	height: 240px;
}
#imageAI .image-ai-prv-container.active {
	border: 3px solid var(--primary_color);
}
#imageAI .image-ai-prv-container .image-ai-priview-title {
	background-color: var(--editorEditBoxTitleColor);
    color: #fff;
    padding: 6px;
    width: 100%;
    text-align: center;
}

/* Image Version Selector - We use this tool to show the
user an image version he can select after he uploaded it
---------------------*/
.modal.image-versions-selector #imageAI {
	height: auto;
	overflow: hidden;
}
.modal.image-versions-selector #imageAI .image-ai-list {
	display: flex;
}
/* in this tool we want to show the full image */
.modal.image-versions-selector #imageAI .image-ai-prv-container .image-ai-priview-image {
	background-size: contain;
}
html:not([data-device="mobile"]) .wizard.site-editor-b #fontsTip .alert {
	margin-top: 20px;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container {
	display: flex;
	justify-content: space-between;
	margin: 0;
}
html[data-device="mobile"] .wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container {
	width: 91%;
	margin: 0;
}
html[dir=rtl] .wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container {
	margin: 0;
}
html[data-device="mobile"][dir=rtl] .wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container {
	margin: 0;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container .theme-current-box {
	width: 35px;
    position: absolute;
    right: 16px;
    top: 9px;
}
html[dir="rtl"] .wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container .theme-current-box {
  right: auto;
  left: 16px;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container .theme-current-box [data-id="theme-current"] {
	margin-bottom: 0;
	width: 100%;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .change-main-color-container .theme-current-box [data-id="theme-current"]:hover {
	transform: unset;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 {
  min-height: auto;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 {
  gap: 3px;
  width: 100%;
  justify-content: center;
  padding: 4px;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 > div {
  margin: 0;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 .menuColor {
    height: auto;
    width: 100%;
    aspect-ratio: 3;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 .mainColor {
    height: auto;
    width: 100%;
    aspect-ratio: 1.6;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 .otherColorsBox {
    gap: 2px;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 .otherColors {
    width: 100%;
    height: auto;
    aspect-ratio: 1.2;
    font-size: 0;
}
.wizard:is(.site-editor-b,.new-colors-tab) #colorThemes .wizard-card.wizard-theme[data-id="theme-current"] .mainDesignV1 .allColorsV1 .footerColor {
    width: 100%;
    height: auto;
    aspect-ratio: 3;
    font-size: 0;
}
.wizard.site-editor-b #structureTab .t-h-e-header {
	display: none;
}
/* S123 Layout Customizer Popover Tools
---------------------------------------*/
.popover.layout-customizer {
	font-family: Rubik, Roboto, arial, sans-serif;
	font-size: 14px;
	border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.popover.layout-customizer .popover-content {
	padding: 20px;
	color: #5F6373;
}
.popover.layout-customizer label {
	font-weight: normal;
	display: inline;
}
.popover.layout-customizer .p-m-s-mobile-back-btn {
	color: #337ab7 !important;
	display: none;
}
.popover.layout-customizer .p-m-s-container {
	min-width: 200px;
}
.popover.layout-customizer .popover-content a[data-rel=tooltip] i {
	width: 16px !important;
    height: 16px !important;
    color: #010B40 !important;
    border-radius: 50px;
    text-align: center;
}
.popover.layout-customizer .popover-content .form-group input,
.popover.layout-customizer .popover-content .form-group select {
		font-size: 14px;
}
.popover.layout-customizer .popover-content .form-group select {
    height: 34px;
    padding: 4px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
}
html[dir=rtl] .popover.layout-customizer .popover-content .form-group select {
    background-position: 0.5em 50%;
    padding-left: 1.5em;
}
.popover.layout-customizer .c-l-mobile-back-btn {
	display: none;
}
@media (max-width: 480px) {
	.popover.layout-customizer .c-l-mobile-back-btn {
		display: block;
		position: absolute;
		top: 7px;
		left: 10px;
		font-size: 20px;
		z-index: 1;
	}
}
.popover.layout-customizer .m-c-l-quick-colors {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.popover.layout-customizer .m-c-l-quick-color {
	position: relative;
	width: 30px;
	height: 30px;
	border: 1px solid #5F6373;
	cursor: pointer;
	border-radius: 6px;
}
.popover.layout-customizer .m-c-l-quick-color.bg-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}
.popover.layout-customizer .m-c-l-quick-color > i.fa-check-circle:before {
	content: "\f058";
}
.popover.layout-customizer .m-c-l-quick-color > i:after {
	content: '';
	width: 10px;
	height: 10px;
	top: 3px;
	left: 3px;
	position: absolute;
	background: #fff;
	z-index: -1;
	border-radius: 50%;
}
.popover.layout-customizer .m-c-l-quick-color > i {
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 10;
	color: #87b87f;
	font-size: 16px;
}
.popover.layout-customizer .m-c-l-quick-color.m-c-l-quick-color-default {
	display: flex;
}
.popover.layout-customizer .m-c-l-quick-color.m-c-l-quick-color-default:before {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid #5F6373;
	margin: auto;
	display: block;
	border-radius: 20px;
}
.popover.layout-customizer .m-c-l-quick-color.bg-primary-black {
    background-color: #000;
}
.popover.layout-customizer .m-c-l-quick-color.bg-primary-gray {
    background-color: #ebedf0;
}
.popover.layout-customizer .m-c-l-quick-color.bg-primary-white {
    background-color: #fff;
}
.popover.layout-customizer .m-c-l-quick-color.background-primary-color {
    background-color: var(--global_main_color);
}
.popover.layout-customizer .popover-header .close-layout-customizer-btn {
    float: right;
	background-color: transparent !important;
	border-color: transparent !important;
	color: #fff !important;
	right: 0px;
    top: 0;
    font-size: 1.7rem;
}
html[dir="rtl"] .popover.layout-customizer .popover-header .close-layout-customizer-btn {
    float: left;
	right: unset;
	left: 0px;
}
.popover.layout-customizer .popover-content .tab-content {
	border: 0;
	padding: 0;
}
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li.active > a,
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li.active > a:hover,
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li.active > a:focus {
	box-shadow: unset;
	cursor: default;
	border-radius: 4px 4px 0 0;
}
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li.active > a:hover {
	background-color: #fff;
}
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li:not(.active) > a,
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li:not(.active) > a:focus {
	background-color: unset;
    border: 0;
}
.popover.layout-customizer .p-m-s-container-tabs.nav-tabs > li:not(.active) > a:hover {
	border-color: #eee #eee #ddd;
	text-decoration: none;
    background-color: #eee;
	opacity: 0.9;
    outline: none;
	transition: opacity .35s;
	border-radius: 4px 4px 0 0 !important;
}
.popover.layout-customizer .p-m-s-container-tabs > li > a,
.popover.layout-customizer .p-m-s-container-tabs > li > a:hover,
.popover.layout-customizer .p-m-s-container-tabs > li > a:focus {
	padding: 10px 15px;
}
.popover.layout-customizer .popover-header .close-layout-customizer-btn:hover {
	box-shadow: unset !important;
}
@media (max-width: 767px) {
	html[data-device="mobile"] .popover.modules-setting  .p-m-s-container {
		margin-top: 15px;
	}
}
/* Editor B Library Off Canvas Modals
----------------*/
/* Style selector modal and library modals in offcanvas mode */
#changeStyleModal,
#videoLibrary.off-canvas-mode.modal.s123-modal,
#imageLibrary.modal.s123-modal.off-canvas-mode.library-editor-b {
	width: calc(var(--wizard-side-menu-width) + 30px);
	box-shadow: rgb(0 0 0 / 15%) 1.95px 0 2.6px;
}
/* RTL support for offcanvas modals */
html[dir="rtl"] #changeStyleModal,
html[dir="rtl"] #videoLibrary.off-canvas-mode.modal.s123-modal,
html[dir="rtl"] #imageLibrary.modal.s123-modal.off-canvas-mode.library-editor-b {
	box-shadow: rgb(0 0 0 / 15%) -1.95px 0 2.6px;
}
#videoLibrary.library-editor-b.off-canvas-mode.modal.s123-modal.in ~ .modal-backdrop,
#imageLibrary.library-editor-b.modal.off-canvas-mode.in ~ .modal-backdrop {
	opacity: 0.05;
}

/* Upload File Still Processing Notification
----------------*/
.upload-file-notification .bootbox-body {
	padding: 15px;
	background-color: #fff;
}


/* Business Hours Generator Error
----------------*/
.s123-modal.bsh-error .bootbox-body {
	padding: 15px;
	background-color: #fff;
}

/* Upload File Still Processing Notification
----------------*/
.library-media-not-saved-modal {
	 z-index: 2050;
}
.library-media-not-saved-modal .bootbox-body {
	padding: 15px;
	background-color: #fff;
}

/* Library Image Credits Modal
----------------*/
.library-media-details {
	z-index: 2051;
}
#libraryMediaDetailsBackdrop {
	z-index: 2050;
	opacity: 0.3 !important;
}
.library-media-details #libraryMediaDetailsContainer {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.library-media-details .bootbox-body {
	padding: 15px;
	background-color: #fff;
}
.library-media-details #photographerCredits {
	font-size: 15px;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	gap: 5px;
	grid-row: 1 /1;
	grid-column: 1 / 1;
}
html[dir="rtl"] .library-media-details #photographerCredits {
	grid-column: 2 / 2;
}
.library-media-details #photographerCredits .provider,
.library-media-details #photographerCredits .photographer-name {
	font-weight: 800;
}
.library-media-details #imagePart {
	position: relative;
	max-height: 260px; /* limit the image part because we have different ratios */
	width: 100%;
	text-align: end;
	grid-row: 1 /1;
	grid-column: 2 / 2;
}
html[dir="rtl"] .library-media-details #imagePart {
	text-align: start;
	grid-column: 1 / 1;
}
.library-media-details .bootbox-body #imagePart img {
	max-width: 100%;
	max-height: 100%;
}
.library-media-details #imagePart #imageLoader {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}
/* pages not in menu or homepage popover
----------------------------------------*/
.popover.modules-pages-n-i-m-o-h-tabs .popover-content .btn-container {
	display: flex;
    justify-content: flex-end;
}
.popover.modules-pages-n-i-m-o-h-tabs .ok-btn {
	margin-top: 10px;
}
@media (max-width: 480px) {
	.popover.modules-pages-n-i-m-o-h-tabs, .popover.modules-setting {
		width: calc(100vw - 30px);
		max-width: none;
		top: 0 !important;
		left: 0 !important;
		margin: 15px;
	}
}
@media (max-width: 480px) {
	.popover.modules-pages-n-i-m-o-h-tabs .arrow, .popover.modules-setting .arrow {
		display: none;
	}
}
/* tooltip */
@media (max-width: 480px) {
	.tooltip.landing-page-tooltip .tooltip-inner {
		max-width: 350px;
	}
}
/* landing page */
.not-in-use-in-landing-page {
    display: none !important;
}
#customerSendNewMessageModal .modal-body,
#customersShowMessageInfoModal .modal-body {
	overflow-y: auto;
}
#customersShowMessageInfoModal .modal-body .add-new-message-disabled {
	opacity: 0.65;
    cursor: not-allowed;
}
#customersSendNewMessageInfoModal #addNewMessage,
#customersShowMessageInfoModal #addNewMessage {
	resize: vertical;
}
#customersShowMessageInfoModal .modal-body .msg-date-time {
	float: right;
}
html[dir="rtl"] #customersShowMessageInfoModal .modal-body .msg-date-time {
	float: left;
}
#customerSendNewMessageModal.customOffcanvasHeight {
	background-color: rgb(0 0 0 / 50%);
}
@media print {
	#customersShowMessageInfoModal {
		width: 100%;
	}
	#customersShowMessageInfoModal .modal-body {
		height: auto;
		overflow: visible;
	}
	#customersShowMessageInfoModal .modal-footer,
	#customersShowMessageInfoModal .modal-header .close,
	#customersShowMessageInfoModal .hide-print {
		display: none;
	}
}
#customersShowMessageInfoModal .modal-body #add-files_progressBar {
	display: none;
}
#customersShowMessageInfoModal .modal-body .add-files-container {
	border: 2px dashed #e1e6ef;
	padding: 10px;
}
@media (min-width: 768px) {
	#customersShowMessageInfoModal .modal-body .add-files-container {
		width: 50%;
	}
}
#customersShowMessageInfoModal .modal-body .add-files-container {
	display: none;
}
#singleFontThemes .wizard-card.wizard-theme .mainDesign .mainFonts h2 {
    background-repeat: no-repeat;
	background-size: contain;
    margin: 12px;	
}
/* Header Module Font Settings
----------------------------------*/
.popover.header-font-settings .close-header-font-settings-btn {
	padding: 0.75rem 1.1rem;
	color: #9E9E9E !important;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
html[dir="rtl"] .popover.header-font-settings .close-header-font-settings-btn {
	right: unset;
	left: 0;
}
.popover.header-font-settings .form-group {
	width: 200px;
}
.popover.header-font-settings .popover-content {
	min-width: 250px;
}


#appQRcode {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}
.three-dots-options-popover .popover-content {
	padding: 0;
}
.three-dots-options-popover .three-dots-options-menu {
	display: block;
	position: static;
	margin: 0px;
	border-width: initial;
	border-style: none;
	border-color: initial;
	border-image: initial;
	border-radius: 4px !important;
}
.three-dots-options-popover .more-options-menu a {
	margin: 0;
	cursor: pointer;
	line-height: 140%;
	color: #5F6373;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
}

/* Disable Publish Button
Note: Dashboard also have style for this so please look for
{{publishPermissionCSS}} to find the styles
----------------*/
#wizardTopToolbar .publish-button-box.no-permission {
	position: relative;
	opacity: 0.5;
}
#wizardTopToolbar .publish-button-box.no-permission:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Color Palette Cards
----------------*/
.wizard-card.color-palette-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 2px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    display: block !important;
}

.wizard-card.color-palette-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    border-color: rgba(0,0,0,0.12);
}
/* Selected/Active color palette card - primary color border */
.wizard-card.color-palette-card.selected,
.wizard-card.color-palette-card.active {
    outline: 3px solid var(--primary_color);
}


.color-palette-container {
    width: 100%;
}

.color-palette-grid {
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
}
/* Force LTR direction for color circles in RTL layouts */
html[dir="rtl"] .color-palette-grid {
	direction: ltr;
}

/* Ensure consistent font sizes for color labels in RTL */
html[dir="rtl"] .color-label {
	font-size: 13px !important;
}

html[dir="rtl"] .color-indicator {
	font-size: 20px !important;
}

.color-palette-item {
    display: flex;
    flex-direction: column;
	/*
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	border-width: thin; */
    align-items: center;
    gap: 0;
    position: relative;
    min-height: 20px;
}

/* Clickable color items in the current theme box */
.theme-current-box [data-id="theme-current"] .color-palette-item[data-color-field] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.theme-current-box [data-id="theme-current"] .color-palette-item[data-color-field]:hover {
    transform: scale(1.05);
    z-index: 10;
}

.theme-current-box [data-id="theme-current"] .color-palette-item[data-color-field]:hover .color-circle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Hide the spectrum replacer for color palette item pickers - we show picker programmatically */
.color-palette-item .color-palette-item-picker + .sp-replacer {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    display: none !important;
}

html[dir="rtl"] .color-palette-item .color-palette-item-picker + .sp-replacer {
	top: 0;
	right: 0;
	left: auto;
	width: 100%;
	height: 100%;
    display: none !important;
}
/* Color palette spectrum container positioning - scoped to colorThemes only */
.sp-container.sp-color-palette-picker {
	top: 200px !important;
}
html[dir="rtl"] .sp-container.sp-color-palette-picker {
	right: 0 !important;
	top: 200px !important;
	left: auto !important;
}

/* Mobile support for color palette spectrum container */
@media (max-width: 768px) {
	.sp-container.sp-color-palette-picker {
		top: 250px !important;
		left: 40px !important;
	}
	html[dir="rtl"] .sp-container.sp-color-palette-picker {
		right: 40px !important;
		top: 250px !important;
		left: auto !important;
		max-width: calc(100vw - 20px) !important;
	}
}



.color-circle {
    width: 100%;
    height: 60px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    border: none;
}

/* First and last color circles get rounded corners */
.color-palette-item:first-child .color-circle {
    border-radius: 8px 0 0 8px;
}

.color-palette-item:last-child .color-circle {
    border-radius: 0 6px 6px 0;
}

.color-label {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    border-radius: 4px;
    padding: 3px 5px;
    min-height: 20px;
    z-index: 2;
}

.color-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    line-height: 1;
    flex-shrink: 0;
}

/* Adjust theme container for palette cards */
#wizardBox .t-e-h #colorThemes .themes-container {
	margin-bottom: 0 !important;
    padding: 15px 10px;
	padding-bottom: 50px;
}

#wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Current theme in defult container */
#wizardBox .t-e-h #colorThemes .theme-defult-item-container {
    position: relative;
    padding: 15px 10px 0px 10px;
    border-bottom: 1px solid #3a3a3a;
    margin-bottom: 0;
}

#wizardBox .t-e-h #colorThemes .theme-defult-item-container .theme-current-box {
    background: transparent;
    margin-bottom: 10px;
	justify-items: center;
}

#wizardBox .t-e-h #colorThemes .theme-defult-item-container .color-palette-card {
    max-width: 320px;
    margin: 0 auto;
    background: #ffffff;
}

#wizardBox .t-e-h #colorThemes .theme-defult-item-container #showColors {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    margin: 20px auto 0;
    display: block;
    width: fit-content;
}

/* Palette category selector */
.palette-category-selector {
    padding: 0;
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 30;
}
.palette-category-selector .form-group {
	margin-bottom: 0 !important;
	margin: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.palette-category-selector select {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #000;
    max-width: 140px;
}

/* Palette tab content system */
.palette-tab-contents {
    width: 100%;
}

.palette-tab-content {
    display: none;
}

.palette-tab-content.active {
    display: block;
}

/* By Color tab - always show color input */
.palette-bycolor-tab .palette-color-input-container {
    display: block !important;
    margin-bottom: 16px;
}

/* By Image tab - always show image container */
.palette-byimage-tab .palette-image-container {
    display: block !important;
    margin-bottom: 16px;
}

/* Results containers for generated palettes */
.palette-bycolor-results,
.palette-byimage-results {
    width: 100%;
}

/* Favorites container */
.palette-favorites-container {
    width: 100%;
    min-height: 100px;
}

.palette-favorites-container .favorites-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #888;
    width: 100%;
}

.palette-favorites-container .favorites-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #ccc;
}

.palette-favorites-container .favorites-empty-state p {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.palette-favorites-container .favorites-empty-state .favorites-empty-hint {
    font-size: 13px;
    color: #aaa;
}

/* Color palette cards container */
.color-palette-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Color Theme Skeleton Loading */
.wizard-card.color-palette-card.skeleton {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    order: 999; /* push skeletons to end */
}

.wizard-card.color-palette-card.skeleton .color-palette-grid .color-circle {
    background-color: #444 !important;
    animation: skeletonShimmer 1.5s infinite;
}

.wizard-card.color-palette-card.skeleton .color-label {
    color: transparent !important;
    background-color: rgba(85, 85, 85, 0.3) !important;
    animation: skeletonShimmer 1.5s infinite;
}

.wizard-card.color-palette-card.skeleton .color-indicator {
    color: rgba(85, 85, 85, 0.4) !important;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.6;
    }
}

/* Color Palette Family Containers
----------------*/
.color-palette-family {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Individual palette favorite heart button - appears on hover at top-right corner of each palette */
.color-palette-container {
    position: relative;
}

.palette-item-favorite-heart {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 15;
    padding: 0;
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
}

.color-palette-card:hover .palette-item-favorite-heart {
    opacity: 1;
    pointer-events: auto;
}

.palette-item-favorite-heart:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #ff6b6b;
    transform: scale(1.15);
}

.palette-item-favorite-heart:active {
    transform: scale(0.95);
}

/* When individual palette is favorited - always show with red heart */
.color-palette-card.is-palette-favorite .palette-item-favorite-heart {
    opacity: 1;
    pointer-events: auto;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}

.color-palette-card.is-palette-favorite .palette-item-favorite-heart:hover {
    background: rgba(255, 107, 107, 0.3);
}

/* RTL support - heart on left side */
html[dir="rtl"] .palette-item-favorite-heart {
    right: auto;
    left: 4px;
}

/* Favorites empty state */
.favorites-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    width: 100%;
}

.favorites-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.4);
}

.favorites-empty-state p {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.favorites-empty-state .favorites-empty-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* Flat favorites container - displays all favorited palettes without family grouping */
.favorites-flat-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.favorites-flat-container .color-palette-card {
    width: 100%;
    margin: 0 !important;
}

.favorites-flat-container .color-palette-card .color-palette-container {
    width: 100%;
}

/* Always show heart icon in favorites view */
.favorites-flat-container .palette-item-favorite-heart {
    opacity: 1;
    pointer-events: auto;
}

.color-palette-family-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
	padding-right: 30px;
}

html[dir="rtl"] .color-palette-family-header {
	padding-right: 0;
	padding-left: 30px;
}
.color-palette-family-header .wizard-card.color-palette-card {
    flex: 1;
    margin: 0 !important;
}

/* Expand button - positioned on the side */
.family-expand-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
    font-size: 12px;
}

.family-expand-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.family-expand-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.family-expand-btn i {
    transition: transform 0.2s ease;
}

/* RTL support - button on left side */
html[dir="rtl"] .family-expand-btn {
    right: auto;
    left: 0;
}

/* Family items container - hidden by default */
.color-palette-family-items {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    padding-left: 0px;
	padding-right: 40px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 0px;
}

html[dir="rtl"] .color-palette-family-items {
    border-left: none;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 0;
    border-right-width: 2px;
    margin-right: 0px;
	padding-right: 0px;
	padding-left: 40px;
}

/* When family is expanded */
.color-palette-family.expanded .color-palette-family-items {
    display: flex;
}

.color-palette-family.expanded .family-expand-btn i {
    transform: rotate(45deg);
}

/* Compact palette cards inside family items - 50% height */
.color-palette-family-items .wizard-card.color-palette-card {
    padding: 2px 2px !important;
    min-height: auto !important;
    border: none !important;
    box-shadow: none !important;
}

.color-palette-family-items .color-palette-container {
    padding: 0 !important;
    margin: 0 !important;
}

.color-palette-family-items .color-palette-grid {
    gap: 0 !important;
}

.color-palette-family-items .color-palette-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.color-palette-family-items .color-palette-item .color-circle {
    height: 30px !important;
    min-height: 20px !important;
}

.color-palette-family-items .color-palette-item .color-label {
    font-size: 9px !important;
    padding: 1px 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 14px !important;
	bottom: 0px !important;
}

/* Note: Family expansion is controlled only by the plus button click in JavaScript */

/* Mobile Optimization for Color Palettes */
@media (max-width: 768px) {
    /* Mobile theme items container optimization */
    html[data-device="mobile"] #wizardBox .t-e-h [data-type="colorThemes"] .theme-items-container {
        max-width: 100% !important;
        gap: 10px !important;
    }
    
    /* Mobile color palette cards */
    html[data-device="mobile"] .wizard-card.color-palette-card {
        padding: 10px !important;
        border-radius: 8px !important;
        margin: 0 !important;
		max-width: 100% !important;
    }
    
    /* Mobile - Add primary color border to color-palette-grid when container is selected */
    html[data-device="mobile"] .wizard-card.color-palette-card.selected .color-palette-grid,
    html[data-device="mobile"] .wizard-card.color-palette-card.active .color-palette-grid {
        border: 2px solid var(--primary_color);
        border-radius: 8px;
    }
    
    /* Mobile color palette grid */
    html[data-device="mobile"] .color-palette-grid {
        gap: 0 !important;
    }
    
    /* Mobile color circles - slightly smaller */
    html[data-device="mobile"] .color-circle {
        border-radius: 0 !important;
        height: 60px !important;
    }
    
    /* Mobile first and last color circles */
    html[data-device="mobile"] .color-palette-item:first-child .color-circle {
        border-radius: 6px 0 0 6px !important;
    }
    
    html[data-device="mobile"] .color-palette-item:last-child .color-circle {
        border-radius: 0 6px 6px 0 !important;
    }
    
    /* Mobile color labels - smaller text */
    html[data-device="mobile"] .color-label {
        font-size: 16px !important;
        bottom: 2px !important;
        left: 2px !important;
        right: 2px !important;
        padding: 1px 2px !important;
        min-height: 14px !important;
    }
    
   
    
    /* Mobile current theme container */
    html[data-device="mobile"] #wizardBox .t-e-h #colorThemes .theme-defult-item-container {
        padding: 12px 8px 8px !important;
    }
    
    html[data-device="mobile"] .palette-category-selector {
        padding: 4px 2px 12px 1px !important;
        margin-bottom: 0 !important;
    }
    
    html[data-device="mobile"] .palette-category-selector .form-group {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    html[data-device="mobile"] .palette-category-selector select {
        font-size: 15px !important;
        padding: 10px !important;
    }
    
    /* Mobile color palette cards container */
    html[data-device="mobile"] .color-palette-cards {
        padding: 0 !important;
        gap: 8px !important;
    }
    
    /* Mobile color palette family styles */
    html[data-device="mobile"] .color-palette-family-header {
        padding-right: 32px;
    }
    
    html[dir="rtl"][data-device="mobile"] .color-palette-family-header {
        padding-right: 0;
        padding-left: 32px;
    }
    
    html[data-device="mobile"] .family-expand-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    
    html[data-device="mobile"] .color-palette-family-items {
        padding-left: 16px;
        margin-left: 10px;
        gap: 6px;
        padding-top: 6px;
    }
    
    html[dir="rtl"][data-device="mobile"] .color-palette-family-items {
        padding-left: 0;
        padding-right: 16px;
        margin-left: 0;
        margin-right: 10px;
    }
    
    /* Mobile themes container */
    html[data-device="mobile"] #wizardBox .t-e-h #colorThemes .themes-container {
        padding: 0px 8px !important;
		margin-bottom: 20px !important;
    }
	html[data-device="mobile"] #wizardBox .t-e-h #colorThemes .custom-colors-button-container {
		margin-bottom: 60px !important;
	}

}

/* Tablet optimization (between mobile and desktop) */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Tablet color palette cards */
    .wizard-card.color-palette-card {
        padding: 11px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    
    /* Tablet color labels */
    .color-label {
        font-size: 12px !important;
    }
    
    /* Tablet palette category selector */
    .palette-category-selector {
        padding: 10px !important;
        margin-bottom: 0 !important;
    }
    
    .palette-category-selector .form-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .palette-category-selector select {
        height: 42px !important;
        font-size: 15px !important;
        padding: 10px !important;
    }
    
    /* Tablet color palette cards container */
    .color-palette-cards {
        padding: 0 8px 8px 8px !important;
        gap: 10px !important;
    }
    
    /* Tablet color palette family styles */
    .color-palette-family-header {
        padding-right: 34px;
    }
    
    html[dir="rtl"] .color-palette-family-header {
        padding-right: 0;
        padding-left: 34px;
    }
    
    .family-expand-btn {
        width: 28px;
        height: 28px;
    }
    
    .color-palette-family-items {
        padding-left: 18px;
        margin-left: 12px;
    }
    
    html[dir="rtl"] .color-palette-family-items {
        padding-left: 0;
        padding-right: 18px;
        margin-left: 0;
        margin-right: 12px;
    }
}

/* Current Theme Skeleton in theme-defult-item-container */
#wizardBox .t-e-h #colorThemes .theme-defult-item-container .theme-current-box .skeleton.current-theme-skeleton {
    background: rgba(255, 255, 255, 0.1) !important;
    animation: skeletonShimmer 1.5s infinite;
}

#wizardBox .t-e-h #colorThemes .theme-defult-item-container .theme-current-box .skeleton.current-theme-skeleton .color-palette-grid .color-circle {
    background-color: rgba(255, 255, 255, 0.15) !important;
    animation: skeletonShimmer 1.5s infinite;
}