:root {
	--optimand-text: #504e4f;
	--optimand-accent: #00a19b;
	--optimand-accent-hover: #016f6b;

	--optimand-lightgrey: #dcdcdc;
	--optimand-mediumgrey: #c4c1c1;

	--optimand-red: #c40505;
	--optimand-darkred: #960505;

	--optimand-border-radius:15px;

	--optimand-gradient: linear-gradient(135deg, var(--optimand-accent), var(--optimand-accent-hover));
	--optimand-gradientgrey: linear-gradient(135deg, var(--optimand-lightgrey), var(--optimand-mediumgrey));
	--optimand-gradientred: linear-gradient(135deg, var(--optimand-red), var(--optimand-darkred));
	--optimand-button-link-hover: linear-gradient(135deg, #FFFFFF00, var(--optimand-mediumgrey));

	--optimand-border-panel-selected: yellow;
	--optimand-border-panel-selected-1: magenta;
}

#adminmenu a[href="admin.php?page=optimand-upgrade"] {
	color: #00a32a !important;
	font-weight: bold !important;
}

.opt-component-drag {
	-webkit-user-select: none; /* Safari/Chrome vecchi */
	-moz-user-select: none;    /* Firefox vecchi */
	-ms-user-select: none;     /* IE10+ */
	user-select: none;         /* standard */
}

.optimand-h2 {
	font-size:1.5em;
	font-weight:600;
}

.optimand-ajax-loader {
	position:absolute;
	left:-15px;
	top:0;
	width:-webkit-fill-available;
	height:100%;
	z-index:999
}
.optimand-ajax-loader > div {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(240, 240, 241, 0.2);
}
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
	.optimand-ajax-loader > div {
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
}
.optimand-ajax-loader .spinner {
	float:none;
	visibility:visible;
	background-size:100%;
	width:40px;
	height:40px;
}

.optimad-wrap h1, .optimad-wrap h2, .optimad-wrap h3, .optimad-wrap h4, .optimad-wrap h5 {
	margin-top:0
}
.optimad-wrap {
	padding-top:15px;
}
.optimad-wrap, .optimad-wrap h1 {
	color:var(--optimand-text)
}
.optimand-admin-title > div {
	padding:0;
	line-height:1em;
	font-weight:700;
	font-size:2rem
}
.optimand-title-separator {
	font-size:2rem;
	height:30px;
}
.optimand-admin-title {
	display:flex;
	align-items:center;
	gap:2rem
}
.optimand-logo-admin {
	width:180px;
}

.optimand-layout {
	display:flex;
	gap:2rem;
}
.optimand-column {
	flex:1;
}
.optimand-20-column {
	width:20%
}
.optimand-30-column {
	width:30%
}
.optimand-40-column {
	width:40%
}
.optimand-50-column {
	width:50%
}
.optimand-60-column {
	width:60%
}
.optimand-70-column {
	width:70%
}
.optimand-80-column {
	width:80%
}
.optimand-90-column {
	width:90%
}

.optimand-button-remove {
	background:var(--optimand-red);
	border:solid 3px var(--optimand-darkred);
	border-radius:60px;
	padding: 5px 10px;
	cursor:pointer;
	color:#FFF
}
.optimand-button-remove:hover {
	background:var(--optimand-gradientred);
}

.optimand-button {
	background:var(--optimand-accent);
	border:solid 3px var(--optimand-accent-hover);
	border-radius:60px;
	padding: 5px 10px;
	cursor:pointer;
	color:#FFF;
	text-transform: uppercase;
}
.optimad-wrap p.submit #submit {
	background:var(--optimand-accent-hover);
	border:solid 3px var(--optimand-accent);
	font-size:1rem;
	border-radius:60px;
	padding: 0px 25px;
	font-weight:600;
}
.optimad-wrap p.submit #submit:hover, .optimand-button:hover {
	background:var(--optimand-gradient);
}

.optimand-button-link {
	background:transparent;
	border:solid 3px var(--optimand-mediumgrey);
	border-radius:60px;
	padding: 10px 10px 5px 10px;
	cursor:pointer;
	color:var(--optimand-text) !important;
	text-decoration:none !important;
	display:inline-flex;
	align-items:center;
	gap:10px;
	position: relative;
	text-align: center;
}

.optimand-button-link:hover {
	background:var(--optimand-button-link-hover);
}

.optimand-upgrade-badge {
	background: var(--optimand-gradient);
	font-size: 0.6em;
	padding: 5px 5px 3px;
	border-radius: 5px;
	color: #FFF;
	font-weight: 900;
	line-height: 1em;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}
.optimand-options-wrapper {
	padding:60px 0 0;
	min-height:600px;
}
.optimand-option-row {
	margin-bottom:30px;
}

/* --- OPTIONS --- */
.optimand-toggle {
	display: flex;
	align-items: center;
	gap: 3px;
}
.optimand-toggle-wrapper {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}
.optimand-toggle-wrapper input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
	min-height: 0;
	max-height: 0;
}
.optimand-toggle-switch {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cdcdcd;
	border-radius: 24px;
	cursor: pointer;
	transition: background-color 0.3s;
}
.optimand-toggle-switch::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 16px;
	height: 16px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.3s;
}
.optimand-toggle-wrapper input:checked + .optimand-toggle-switch {
	background-color: var(--optimand-accent);
}
.optimand-toggle-wrapper input:checked + .optimand-toggle-switch::before {
	transform: translateX(26px);
}
.optimand-toggle-label {
	font-weight: 500;
	color:var(--optimand-text);
}

.optimand-number > div,
.optimand-text > div,
.optimand-select > div,
.optimand-image > div,
.optimand-container {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.optimand-number label,
.optimand-text label,
.optimand-select label,
.optimand-image label,
.optimand-toggle label,
.optimand-container label {
	display:block;
	font-weight:500;
}
.optimand-number input,
.optimand-text input,
.optimand-select select {
	max-width:160px;
	width:140px;
}


/*--- INPUTS & FORMS ---*/
.optimand-admin-form {
	position:relative
}
.optimand-radio > div {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.optimand-radio label {
	font-weight:500;
}
.optimand-radio input {
	display:none;
}
.optimand-radio-label {
	display:inline-flex;
	transition: all 0.2s ease;
}
.optimand-radio input:checked + .optimand-radio-icon {
	background-color: var(--optimand-accent);
}

.optimand-input-composite-um {
	display:flex;
}

.optimand-input-composite-um input {
	border-right:0 !important;
	margin:0;
	max-width: 60px !important;
}
.optimand-input-composite-um select {
	border-left:0;
	margin:0;
	width:60px;
}

.optimand-field-inputs-panel {
	box-sizing: border-box;
	position: absolute;
	top:0;
	left: -40px;
	width: 340px;
	background: #f9f9f9;
	padding:0 30px 30px;
	border-radius: 0 var(--optimand-border-radius) var(--optimand-border-radius) 0;
	box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
	border:solid 3px var(--optimand-border-panel-selected);
	overflow-y: auto;
	max-height:100%;
	z-index:10;
}

.optimand-field-inputs-panel[data-component] {
	border:solid 3px var(--optimand-border-panel-selected-1);
}

.optimand-field-subitems {
	padding-left:15px;
}

.optimand-field-inputs-panel-title {
	font-weight:500;
	font-size:1.5em;
	padding-bottom:15px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	position: sticky;
	top: 0;
	background: #FFF;
	z-index: 10;
	padding-top:5px;
}
.optimand-panel-top-icons {
	display:flex;
	gap:1em;
}


.optimand-form-label {
	display:block;
	font-weight:600;
	margin-bottom:5px;
}
.optimand-form-input {
	display:block;
	width:100%;
	margin:0;
	border-radius:var(--optimand-border-radius) !important;
	padding:5px 15px;
}
.optimand-field-description {
	margin:5px 0 0
}

.optimand-tab-toggle-selected {
	position:relative;
	background:var(--optimand-gradient);
	border:solid 3px var(--optimand-accent-hover);
	color:#FFF
}
.optimand-tab-toggle-selected::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-top-color: var(--optimand-accent-hover);
}

.optimand-ghost-rename {
	color: inherit !important;
	background: transparent;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	width: 100%;
	display: block;
	outline: none !important;
	cursor: text;
	min-width: 250px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-shadow: none !important;
	height:30px;
}

/*--- TABS & NAVS ---*/
.optimand-tab-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap:5px;
}

.optimand-tab-nav li {
	padding: 8px 16px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: none;
	background: transparent;
	border-radius: 15px 15px 0 0;
	margin:0;
	margin-bottom: -1px !important;
}

.optimand-tab-nav li.active {
	background: #f9f9f9;
	border: 1px solid #ccc;
	border-bottom: none;
	font-weight: bold;
}

.optimand-tab-panel {
	display: none;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #ccc;
}

.optimand-tab-panel.active {
	display: block;
}
.optimand-item-tab-decription {
	font-size:0.9em;
	margin-top:10px;

}
.optimand-panel-row {
	margin-bottom:15px;
	border-bottom:solid 1px rgb(204 204 204 / 30%);
	padding-bottom:15px;
}

.optimand-panel-row.last {
	margin-bottom:15px;
	border-bottom:none !important;
}



/*--- BADGE ---*/
.optimand-preset-list-badges {
	display:flex;
	gap:10px;
	margin-bottom:15px
}
.optimand-badge {
	padding:0px 5px;
	font-size:0.7em;
	border:solid 1px;
	border-radius:15px;
	display: flex;
	align-items: center;
	gap: 2px;
}

.optimand-badge span{
	line-height: 1;
	vertical-align: middle;
	display: inline-block;
	font-size: 1.5em;
	margin-top: -2px;
}
.optimand-badge.enabled span {
	color:#45bb45;
}
.optimand-badge.disabled span {
	color:#d50b0b;
}

/*--- SORTABLES ---*/
.optimand-placeholder {
	background: rgba(0, 123, 255, 0.1);
	border: 2px dashed;
	min-height: 10px;
	transition: background 0.2s ease;
}

.optimand-placeholder-component {
	background: rgba(0, 123, 255, 0.1);
	border: 2px dashed;
	min-height: 10px;
	height:100px;
	transition: background 0.2s ease;
}

.optimand-dragging {
	background:inherit;
	opacity:0.8
}

.optimand-accordion {
	overflow: hidden;
}

.optimand-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	position: relative;
	font-weight: 500;
}

.optimand-accordion-arrow {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #333;
	transition: transform 0.3s ease;
}

.optimand-accordion.open .optimand-icon-chevron-down {
	transform: rotate(180deg);
}

.optimand-accordion-body {
	display: none;
	background: #fff;
	border-top: solid 1px #e2e2e2;
	margin-top: 10px;
}

/* -- INPUTS ADMIN -- */
.opt-tab-options {
	box-sizing:border-box;
}
.opt-tab-options .optimand-configurator-panel-row {
	width:600px;
	margin-left: 0;
}
.opt-tab-options .opt-container-editor-elements {
	width:560px;
	margin-left: 0;
}
.opt-tab-options .optimand-inline-panel-option-label {
	justify-content:space-between;
	width:100%;
	border-bottom: dotted 2px #CCC;
}
.opt-tab-options .opt-container-editor-elements {
	background:initial;
	padding-top:15px;
	margin-left:0;
	padding-left:40px;
}
.opt-tab-options .optimand-inline-panel-option-input input {
	min-width:80px;
}
.opt-tab-options .optimand-panel-row-section-container {
	padding-bottom: 15px;
	border-bottom:double 5px #e3e3e3;
}
.opt-tab-options  .optimand-inline-panel-option-input > select,
.opt-tab-options  .optimand-inline-panel-option-input > input {
	margin-bottom:-3px;
}
.optimand-panel-row-section-title {
	font-size:1.5em;
	font-weight:600;
	margin-bottom:15px;
	margin-top:15px;
	display: flex;
	align-items: center;
	gap: .5em;
}

.opt-input-label {
	font-weight:500;
	display:block;
	margin-bottom:15px;
}
.opt-input-option {
	max-width:100%;
}
.opt-input-option.opt-input-lg {
	width:450px;
}
.opt-editor-checkbox {
	background:initial;
}

.optimand-wrap-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.wrap.optimad-wrap {
	min-width: 900px;
}
.wrap.optimad-wrap li {
	margin-bottom: 0;
}

.optimand-css-editor-wrapper {
	height: calc(100% - 50px);
	display: flex;
	flex-direction: column;
}
.optimand-css-editor-wrapper .CodeMirror {
	flex: 1;
	height: 100%;
}