/* COLOR SCHEME - here you can define your own color scheme */

@primaryColor: #1a1a1a;
@secondaryColor: #27AE60;
@mainTextColor: rgba(0,0,0, 0.8);
@mainBorderColor: rgba(0, 0, 0, 0.1);
@snapLineColor: #00b5ad;
@secondaryModuleColor: #ecf0f1;
@secondaryModuleTextColor: #7f8c8d;
@secondaryBtnColor: #E0E1E2;
@darkBtnColor: rgba(0,0,0, 0.6);
@tooltipBgColor : rgba(0, 0, 0, 0.85);
@errorBgColor: rgba(189, 8, 28, 0.05);
@errorBorderColor: rgba(189, 8, 28, 0.2);


/* Primary Color */
.fpd-container .fpd-primary-bg-color,
.fpd-actions-wrapper > .fpd-action-btn:hover,
.fpd-actions-wrapper > .fpd-action-btn.fpd-active,
.fpd-thumbnail-preview > .fpd-preview-price {
	background-color: @primaryColor;
}

.fpd-container .fpd-primary-text-color,
.fpd-navigation > div.fpd-active,
.fpd-bottom-nav > div.fpd-active {
	color: @primaryColor;
}

/* Secondary Color */
.fpd-container .fpd-secondary-bg-color,
.fpd-container .fpd-btn,
.fpd-modal-wrapper .fpd-modal-content .fpd-btn,
.fpd-switch-container.fpd-enabled .fpd-switch-toggle,
.fpd-switch-container.fpd-enabled .fpd-switch-bar,
.fpd-modal-product-designer.fpd-modal-overlay .fpd-done {
	background-color: @secondaryColor;
}

.fpd-container .fpd-btn:hover,
.fpd-modal-wrapper .fpd-modal-content .fpd-btn:hover {
	background: lighten(@secondaryColor, 3%);
}

.fpd-container .fpd-btn.fpd-secondary,
.fpd-modal-wrapper .fpd-modal-content .fpd-btn.fpd-secondary {
	background: @secondaryBtnColor;
}

.fpd-container .fpd-btn.fpd-secondary:hover,
.fpd-modal-wrapper .fpd-modal-content .fpd-btn.fpd-secondary:hover {
	background: lighten(@secondaryBtnColor, 3%);
}

.fpd-container .fpd-btn.fpd-dark {
	background: @darkBtnColor;
}

.fpd-container .fpd-btn.fpd-dark:hover {
	background: lighten(@darkBtnColor, 10%);
}

.fpd-toggle.fpd-enabled {
	color: @secondaryColor !important;
}

/* Main Text Color */
.fpd-container,
.fpd-container textarea,
.fpd-sub-tooltip-theme .tooltipster-content,
.fpd-modal-wrapper > .fpd-modal-close {
	color: @mainTextColor;
}

/* Main Border Color */
.fpd-actions-wrapper > .fpd-action-btn,
.fpd-list > .fpd-list-row,
.fpd-container.fpd-sidebar > .fpd-mainbar,
.fpd-container textarea,
.fpd-container.fpd-sidebar.fpd-sidebar-right > .fpd-mainbar,
.fpd-container.fpd-main-bar-container .fpd-mainbar,
.fpd-container .fpd-module input,
.fpd-thumbnail-preview,
.fpd-container .fpd-stage-off-canvas,
.fpd-manage-layers-panel .fpd-sortable-placeholder,
.fpd-container .fpd-close-off-canvas,
.fpd-topbar[class*="fpd-off-canvas-"] .fpd-mainbar .fpd-content,
.fpd-container input[type="text"],
.fpd-text-layers-panel .fpd-list > div  {
	border-color: @mainBorderColor !important;
}

.fpd-container textarea:focus,
.fpd-element-toolbar textarea:focus {
	border: 1px solid darken(@mainBorderColor, 20%);
}