@import "variables.scss";
@import "builder-controls.scss";
@import "icon-controls.scss";
li#accordion-section-code4rest_customizer_custom_posts_placeholder {pointer-events: none;margin: 10px 0 0;}
li#accordion-section-code4rest_customizer_custom_posts_placeholder > h3.accordion-section-title {border: 0;background: transparent;text-transform: uppercase;font-size: 80%;}
li#accordion-section-code4rest_customizer_custom_posts_placeholder > h3.accordion-section-title:after {display: none;}
.code4rest-units .components-dropdown__content .components-popover__content>div {
	padding: 5px 0;
	.components-button.components-dropdown-menu__menu-item.has-icon {
		padding: 0;
		min-width: 32px;
	}
}
.components-custom-gradient-picker__gradient-bar:before {
    content: '';
    background-image: linear-gradient(45deg, #ddd 25%, transparent 0),linear-gradient(-45deg, #ddd 25%, transparent 0),linear-gradient(45deg, transparent 75%, #ddd 0),linear-gradient(-45deg, transparent 75%, #ddd 0);
    background-size: 10px 10px;
    background-position: 0 0,0 5px,5px -5px,-5px 0;
    left: 0;
    right: 0;
    height: 100%;
    position: absolute;
    z-index: -1;
    border-radius: 24px;
}
.components-custom-gradient-picker__gradient-bar {
    position: relative;
	//z-index: 20;
}
.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
    box-shadow: 0px 0px 0px 2px rgba(0,0,0,.8);
}
// Code4rest Range CSS
.code4rest-range-control-inner {
    box-sizing: border-box;
    align-items: flex-start;
    display: inline-flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 0px;
    position: relative;
    width: 100%;
}
.code4rest-range-control-inner .components-range-control.code4rest-range-control-range {
    flex-grow: 1;
    margin-bottom: 0;
}
.code4rest-range-control {
    width: 100%;
}
.code4rest-range-control-inner .components-base-control.kt-range-number-input{
margin-left: 16px;
margin-bottom: 0;
flex: 0 1 65px;
}
.code4rest-control-field button.components-button.code4rest-reset span.dashicon {
    height: auto;
    width: auto;
    font-size: 12px;
}
#customize-theme-controls .customize-pane-child.accordion-section-content {
	padding: 12px 24px;
	.customize-section-title {
		margin: -12px -24px 0 -24px;
	}
}
#customize-theme-controls .customize-pane-child.accordion-section-content.control-section-sidebar {
	padding: 12px;
}
.code4rest-units {
	max-width: 60px;
	.components-dropdown-menu {
		padding: 0;
		min-height: 0;
		border-color: #e2e4e7;
	}
	.components-button.components-dropdown-menu__toggle {
		min-height: 28px;
    	min-width: 30px;
		height: auto;
	}
	.components-popover__content {
		min-width: 50px;
		width: 50px;
		button.components-button {
			height: 36px;
			text-align: center;
			justify-content: center;
			box-shadow: none;
			svg {
				margin:0;
			}
		}
	}
}
.code4rest-range-control {
	.code4rest-responsive-controls-content {
		display: flex;
	}
	.components-range-control {
		flex-grow: 1;
	}
	input.components-range-control__number {
		max-width: 65px;
		margin-left: 18px;
		border: 1px solid #e2e4e7;
		border-radius: 0;
		margin-right: 1px;
	}
	.components-base-control__field {
		margin: 0;
	}
	button.components-button {
		height: 28px;
	}
}
.code4rest-control-field.radio-btn-width-50 .code4rest-radio-container-control {
    flex-wrap: wrap;
}
.code4rest-control-field.radio-btn-width-50 .code4rest-radio-container-control button.components-button.is-tertiary {
    min-width: 45%;
    margin: 4px;
}
.code4rest-responsive-control-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
	margin-bottom: 10px;
	.floating-controls {
		.components-button.is-tertiary:not( .active-device ) {
			color:$color-gray-500;
		}
		.components-button.is-tertiary:not( .active-device ):hover {
			color:$color-gray-600;
		}
		.components-button {
			height:18px;
			padding-top: 0;
			padding-bottom: 0;
			box-shadow: none;
			svg {
				height:16px;
				width:16px;
			}
			&:focus:not(:disabled) {
				color: $color-primary;
				box-shadow: none;
			}
		}
		.components-button-group {
			display: flex;
			border: 0;
		}
	}
}
.code4rest-control-field .components-button-group {
    border: 0;
}
.code4rest-control-field {
	position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
	.customize-control-title {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		letter-spacing: 0.1px;
		line-height: 18px;
	}
	button.components-button.code4rest-reset {
		height: 18px;
		padding: 0 5px;
		margin-right: 0;
		margin-left: -20px;
		opacity: 0.5;
		svg {
			width: 12px;
			height: 12px;
		}
		&:disabled {
			opacity: 0;
		}
		&:not(:disabled ):hover {
			opacity: 1;
			color: $color-primary;
			box-shadow:none !important;
		}
	}
}
.code4rest-radio-container-control {
    display: flex;
    padding: 10px;
	background: #f9f9f9;
	border:0;
	flex-wrap: wrap;
	button.components-button.is-tertiary {
		flex: 1 1 0;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		font-weight: 600;
		font-style: normal;
		text-transform: uppercase;
		height: 40px;
		line-height: normal;
		margin: 0;
		padding: 4px;
		border: 1px solid $color-gray-400;
		border-radius: 2px;
		background: transparent;
		color: $color-gray-700;
		white-space: normal;
		box-shadow: none;
		&:not(:first-child) {
			margin-left: 4px;
		}
		&:not(:disabled):not([aria-disabled=true]):hover {
			border-color: $color-gray-600;
			color: $color-gray-700;
		}
		&.active-radio {
			border-color: $color-primary;
			background: $color-primary;
			color: #fff;
			&:not(:disabled):not([aria-disabled=true]):hover {
				color: #fff;
				border-color: $color-primary;
			}
		}
		.code4rest-radio-icon {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	&.code4rest-radio-icon-container-control {
		margin-top: 10px;
		button.components-button.is-tertiary {
			padding: 5px;
			height: 50px;
			svg {
				width:100%;
				height:auto;
				max-height: 100%;
			}
		}
	}
	
}
.code4rest-popover-color .components-popover__content {
	min-width: 240px;
	.components-focal-point-picker-wrapper {
		box-sizing: border-box;
	}
	.components-focal-point-picker_position-display-container input[type=number].components-text-control__input {
		min-height: 16px;
		line-height: 16px;
		font-size: 12px;
		width:50px;
		font-weight: normal;
	}
	.components-focal-point-picker_position-display-container .components-base-control {
		flex: 1;
		margin-bottom: 0;
	}
	.components-focal-point-picker_position-display-container .components-base-control .components-base-control__label {
		margin-bottom: 0;
		margin-right: 0.2em;
	}	
	.components-focal-point-picker_position-display-container .components-base-control__field {
		display: flex;
		align-items: center;
		font-size: 8px;
		font-weight: 600;
		font-style: normal;
		text-transform: uppercase;
	}
	.components-focal-point-picker_position-display-container .components-base-control:last-child .components-base-control__field {
		justify-content: flex-end;
	}
	.actions {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
		.button {
			flex: 1;
			margin-top: 10px;
		}
	}
}
.code4rest-background-picker-wrap .code4rest-popover-color .components-popover__content {
	min-width: 300px;
    min-height: 340px;
	max-height: 60vh;
	> div {
		min-height: 320px;
	}
}
.components-popover.code4rest-popover-add-builder .components-popover__content {
    bottom: 0;
}
.components-button.code4rest-color-icon-indicate {
    height: auto;
    position: relative;
    transform: scale(1);
    transition: transform .1s ease;
    border-radius: 50%;
    padding: 0;
    background-image: linear-gradient(45deg, #ddd 25%, transparent 0), linear-gradient(-45deg, #ddd 25%, transparent 0), linear-gradient(45deg, transparent 75%, #ddd 0), linear-gradient(-45deg, transparent 75%, #ddd 0);
    background-size: 10px 10px;
    background-position: 0 0,0 5px,5px -5px,-5px 0;
	.component-color-indicator.code4rest-advanced-color-indicate {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		margin: 0;
	}
	&:hover {
		transform: scale(1.1);
	}
}
.components-button.code4rest-background-icon-indicate {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	position: relative;
    transform: scale(1);
    transition: transform .1s ease;
    border-radius: 50%;
    padding: 0;
	background-image: linear-gradient(45deg, #ddd 25%, transparent 0), linear-gradient(-45deg, #ddd 25%, transparent 0), linear-gradient(45deg, transparent 75%, #ddd 0), linear-gradient(-45deg, transparent 75%, #ddd 0);
	border: 1px solid #dadada;
    background-size: 10px 10px;
	background-position: 0 0,0 5px,5px -5px,-5px 0;
	.component-color-indicator.code4rest-advanced-color-indicate {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		margin: 0;
		display: block;
		position: absolute;
		border: 0;
		top:0;
	}
	> .dashicon {
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		color: white;
		background: rgba(0,0,0,.6);
		border-radius: 100%;
		width: 16px;
		height: 16px;
		border: 1px solid rgba(0,0,0,.1);
	}
	img.code4rest-background-image-preview {
		display: flex;
		object-fit: cover;
		min-width: 100%;
		min-height: 100%;
		position: absolute;
		top: 0;
	}
}
.components-button.code4rest-background-icon-indicate:hover {
	box-shadow: none !important;
}
.code4rest-control-field.code4rest-color-control {
    display: flex;
	.customize-control-title {
		flex-grow: 2;
	}
}
.components-popover.code4rest-popover-color .components-popover__content {
    padding: 10px 10px 0px;
    box-sizing: initial;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px;
	.sketch-picker {
		padding:0 0 5px  !important;
		box-shadow: none !important;
		border-radius: 0px  !important;
	}
	.attachment-media-view {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
// .code4rest-background-picker-wrap .code4rest-popover-color .components-popover__content{
// 	.code4rest-background-color-wrap {
// 		display: flex;
// 		flex-direction: row-reverse;
// 		justify-content: space-between;
// 	}
// 	.code4rest-swatches-wrap {
// 		flex-direction: column;
// 		padding: 0 10px 0 0 !important;
// 		border-top: 0 !important;
// 		border-right: 1px solid rgb(238, 238, 238);
// 	}
// 	.actions .button:last-child {
// 		margin-left: 10px;
// 	}
// }
.code4rest-swatches-wrap .code4rest-swatche-item-wrap:hover {
	transform: scale(1.2) !important;
}
.code4rest-swatches-wrap .code4rest-swatche-item-wrap .code4rest-swatch-item {
    background-image: linear-gradient(45deg, #ddd 25%, transparent 0),linear-gradient(-45deg, #ddd 25%, transparent 0),linear-gradient(45deg, transparent 75%, #ddd 0),linear-gradient(-45deg, transparent 75%, #ddd 0);
    background-size: 10px 10px;
	background-position: 0 0,0 5px,5px -5px,-5px 0;
	padding: 0;
    display: flex;
	justify-content: center;
	.dashicon {
		display: none;
	}
}
.code4rest-swatches-wrap .code4rest-swatche-item-wrap .code4rest-swatch-item.swatch-active {
	box-shadow: 0 0 0 8px inset !important;
	.dashicon {
		display: block;
		color: white;
		background: rgba(0,0,0,.6);
		width: 16px;
		height: 16px;
		border: 1px solid rgba(0,0,0,.1);
		border-radius: 100%;
	}
}
.components-button.code4rest-color-icon-indicate > .dashicon {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
	color: white;
    background: rgba(0,0,0,.6);
    border-radius: 100%;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0,0,0,.1);
}
.code4rest-color-picker-wrap {
    margin-left: 5px;
}
.customize-control-code4rest_measure_control input[type=number] {
    padding: 0 4px;
}
@media ( max-width: 1900px ) {
.code4rest-palette-colors .components-button.code4rest-color-icon-indicate .component-color-indicator.code4rest-advanced-color-indicate {
    width: 26px;
    height: 26px;
}
.code4rest-palette-colors .code4rest-color-picker-wrap {
    margin-left: 2px;
}
.code4rest-typography-control .typography-button-wrap>button.components-button.code4rest-typography-preview-indicate {
    padding: 0 2px;
}
.code4rest-typography-control .typography-button-wrap>button.components-button {
    padding: 0 4px;
}
.customize-control-code4rest_measure_control input[type=number] {
    padding: 0 2px;
}
}
@media ( max-width: 1900px ) {
	.code4rest-palette-colors .components-button.code4rest-color-icon-indicate .component-color-indicator.code4rest-advanced-color-indicate {
		width: 24px;
		height: 24px;
	}
}
@media ( max-width: 1400px ) {
	.code4rest-palette-colors .components-button.code4rest-color-icon-indicate .component-color-indicator.code4rest-advanced-color-indicate {
		width: 22px;
		height: 22px;
	}
	.customize-control-code4rest_measure_control input[type=number] {
		padding: 0px;
	}
}
.code4rest-palette-colors .code4rest-color-picker-wrap:first-child {
    margin-left: 0;
}
.code4rest-popover-tabs.code4rest-background-tabs .components-tab-panel__tabs {
    display: flex;
    border-bottom: 1px solid #dadada;
    margin-top: -5px;
    margin-bottom: 15px;
}
.code4rest-palette-import-wrap {
    float: left;
}

.code4rest-palette-popover-tabs {
	width: 350px;
	max-height: 420px;
}
.code4rest-palette-popover-tabs .components-tab-panel__tabs-item {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    height: 36px;
    text-transform: uppercase;
    border: 0;
    border-bottom: 4px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    opacity: 0.6;
}
.code4rest-palette-popover-tabs .components-tab-panel__tabs {
    display: flex;
    border-bottom: 1px solid #dadada;
    margin-top: -5px;
    margin-bottom: 15px;
}
.code4rest-palette-popover-copy-paste .components-popover__content {
    padding: 8px;
    box-sizing: initial;
    background: #fff;
    border-radius: 4px;
    box-shadow: rgba(0,0,0,0.15) 0px 8px 16px;
	width: 100%;
    box-sizing: border-box;
	.code4rest-palette-popover-tabs {
		width: 100%;
	}
}
.code4rest-palette-popover-tabs .components-tab-panel__tabs-item.active-tab {
    border-bottom-color: #007cba;
    opacity: 1;
    box-shadow: none;
}

.code4rest-palette-popover-tabs .components-button.code4rest-palette-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    margin-bottom: 5px;
    border:1px solid transparent;
    border-radius:4px;
}
.code4rest-palette-popover-tabs .components-button.code4rest-palette-item:hover {
    border-color:#777;
}
.code4rest-popover-tabs.code4rest-background-tabs .components-tab-panel__tabs .components-button {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
	font-style: normal;
	height:36px;
	text-transform: uppercase;
	border: 0;
    border-bottom: 4px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	opacity: 0.6;
	&:focus {
		outline: 0;
		box-shadow: none;
	}
	&:hover {
		box-shadow: none !important;
		opacity: 1;
		border-bottom: 4px solid #dadada;
	}
	&.active-tab {
		border-bottom-color: $color-primary;
		opacity: 1;
	}
}
.components-popover__content .code4rest-radio-container-control {
    padding: 10px 0;
    background: white;
}
.code4rest-control-field .code4rest-background-tabs .customize-control-title {
    padding-top: 10px;
    font-size: 12px;
    display: block;
}
.code4rest-control-field.code4rest-background-control .code4rest-responsive-control-bar .floating-controls {
    display: flex;
    align-items: center;
    margin-left: 0px;
}
.code4rest-control-field.code4rest-background-control .code4rest-responsive-control-bar .customize-control-title {
    flex-grow: 1;
}
.code4rest-control-field.code4rest-background-control .code4rest-responsive-controls-content {
    display: flex;
    justify-content: flex-end;
}
.code4rest-control-field.code4rest-palette-control.code4rest-color-control {
    display: block;
}
.code4rest-palette-header {
	display: flex;
	align-items: center;
}
.code4rest-palette-colors {
    display: flex;
    padding: 20px 0 0;
    justify-content: space-between;
}
.code4rest-palette-header .components-button-group .components-button.is-tertiary {
    color: #A0AEC0;
    border:1px solid #A0AEC0;
	height:30px;
	font-size: 12px;
	padding: 0 4px;
	box-shadow: none;
}
@media ( max-width: 1900px ) {
.code4rest-palette-header .components-button-group .components-button.is-tertiary {
font-size: 10px;
padding: 0 2px;
letter-spacing: -0.4px;
}
}
@media ( max-width: 1601px ) {
.code4rest-control-field .customize-control-title {
	font-size: 13px;
}
}
.code4rest-palette-header .components-button-group .components-button.is-tertiary.active-palette {
    color: #fff;
    border:1px solid #007cba;
	background: #007cba;
}
.code4rest-border-control {
	.code4rest-responsive-controls-content {
		display: flex;
		justify-content: flex-end;
		input.components-text-control__input {
			border: 1px solid #e2e4e7;
			width: 60px;
		}
		.code4rest-color-picker-wrap {
			margin-right: 5px;
			margin-left: 0;
			justify-content: flex-end;
			align-items: center;
			display: flex;
		}
		.color-button-wrap {
			display: inline-flex;
		}
	}
}
.code4rest-units .components-button {
    padding-top: 2px;
    padding-bottom: 2px;
}
.code4rest-typography-control {
	.code4rest-typography-controls {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 5px;
	}
	.color-button-wrap {
		display: flex;
	}
	.customize-control-title {
		flex-grow: 1;
	}
	.components-popover.code4rest-popover-typography > .components-popover__content {
		min-width: 340px;
		min-height: 339px;
		> div {
			min-height: 339px;
		}
	}
	.code4rest-typography-tabs .customize-control-title {
		padding-top: 0;
	}
	.code4rest-typography-tabs .code4rest-range-control {
		padding-top:10px
	}
	.code4rest-transform-controls {
		width: 50%;
		padding-right: 10px;
		padding-bottom: 5px;
	}
	.code4rest-transform-controls .components-button-group {
		padding: 0 0 10px 0;
		button.components-button.is-tertiary {
			height: 30px;
		}
	}
	.code4rest-font-family-list-wrapper {
		padding-top: 35px;
	}
	.components-button-group.code4rest-font-family-list {
		display: flex;
		max-height: 259px;
		overflow: scroll;
		flex-direction: column;
		.code4rest-font-family-choice {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-evenly;
			border-radius: 0;
			margin: 0;
			width: 340px;
			height: 36px;
			min-height: 36px;
			border-bottom: 1px solid #e2e4e7;
			white-space: nowrap;
			box-shadow: none;
			color: $color-gray-800;
			.preview-text {
				font-size: 16px;
				white-space: nowrap;
				color: $color-gray-800;
				line-height: 30px;
			}
			&.active-radio, &.active-radio:hover, &.active-radio:focus {
				background: $color-primary !important;
				color: white !important;
				outline: 0 !important;
				box-shadow: none !important;
				.preview-text {
					color: white;
				}
			}
		}
	}
	.components-button-group.code4rest-font-variant-list {
		max-height: 294px;
		display: flex;
		flex-direction: column;
		overflow: scroll;
		.code4rest-font-variant-choice {
			display: flex;
			box-shadow: none;
			border-radius: 0;
			margin: 0;
			min-height: 36px;
			border-bottom: 1px solid #e2e4e7;
			white-space: nowrap;
			color: $color-gray-800;
			&.active-radio, &.active-radio:hover, &.active-radio:focus {
				background: $color-primary !important;
				color: white !important;
				outline: 0 !important;
				box-shadow: none !important;
			}
		}
	}
	.code4rest-font-family-search {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		right: 0;
		background: white;
		.components-base-control {
			display: flex;
			flex-grow: 1;
			.components-base-control__field {
				display: flex;
				margin-bottom: 5px;
				flex-grow: 1;
				input {
					padding-right:40px;
				}
			}
		}
		.code4rest-clear-search {
			position: absolute;
			right: 0;
			z-index:100;
			height: 30px;
			border: 0 !important;
			background: transparent !important;
			box-shadow: none !important;
		}
	}
	.code4rest-typography-tabs .components-tab-panel__tab-content {
		position: relative;
	}
	button.components-button.code4rest-typography-family-indicate {
		max-width: 100px;
		white-space: nowrap;
		overflow: hidden;
	}
	.typography-button-wrap > button.components-button {
		border: 1px solid #e2e4e7;
		margin-left: 2px;
		background-color: #fff;
	}
	.code4rest-popover-typography-single-item {
		position: relative;
		.components-button-group.code4rest-font-family-list {
			max-height: 304px;
		}
	}
}
.customize-control-code4rest_typography_control .code4rest-control-field button.components-button.code4rest-reset {
    height: 36px;
    top: 0;
}
.code4rest-preview-font {
    padding: 10px;
	background: linear-gradient(45deg, #ddd 25%, transparent 0),linear-gradient(-45deg, #ddd 25%, transparent 0),linear-gradient(45deg, transparent 75%, #ddd 0),linear-gradient(-45deg, transparent 75%, #ddd 0);
    background-size: 10px 10px;
    background-position: 0 0,0 5px,5px -5px,-5px 0;
	margin-top: 10px;
	line-height: 1.2;
}
.code4rest-select-units select.components-select-control__input {
    width: 100%;
    margin: 0 0 2px 0;
    border: 1px solid #e2e4e7;
}
.code4rest-control-field.code4rest-title-control {
    background: #f9f9f9;
    margin-bottom: -13px;
    margin-top: -17px;
    margin-left:-24px;
    margin-right:-24px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 12px 20px;
}

.code4rest-control-field.code4rest-title-control .customize-control-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}

.code4rest-locked .components-button.is-single {
    border: 1px solid #e2e4e7;
    background-color: #fff;
    display: flex;
    height: 30px;
}
.code4rest-locked .components-button svg {
    width: 16px;
}
.measure-input-wrap {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    padding-right:5px
}
.measure-input-wrap small {
	padding-left:3px;
}
.measure-input-wrap input.measure-inputs {
    border: 1px solid #e2e4e7;
}
.code4rest-radio-container-control button.components-button.is-tertiary svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
}
.code4rest-radio-icon-control.code4rest-two-col .components-button-group.code4rest-radio-container-control .components-button.is-tertiary svg {
	height: 60px;
}
.code4rest-radio-container-control button.components-button .code4rest-radio-icon {
    width: 100%;
    height: 100%;
}
#customize-control-page_layout .components-button-group.code4rest-radio-container-control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}
#customize-control-page_layout .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-width: 25%;
    padding: 10px;
    margin: 0;
    min-height: 80px;
}
#customize-control-page_title_layout .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-height: 90px;
    padding: 10px;
}
#customize-control-page_title_layout .code4rest-radio-container-control button.components-button.is-tertiary:not(:first-child) {
    margin-left: 10px;
}
.code4rest-radio-dashicon {
    max-width: 20px;
}

.code4rest-sorter-item-panel-header {
    display: flex;
	width: 100%;
	cursor: grab;
	align-items: center;
	border-bottom: 1px solid #A0AEC0;
	margin-bottom: -1px;
	.code4rest-sorter-title {
		flex-grow: 2;
		padding: 0 8px;
		font-weight: bold;
	}
	.code4rest-sorter-visiblity {
		border-radius: 0;
		height: 36px;
		border-right: 1px solid #A0AEC0;
		.dashicon {
			width: 14px;
			height: 14px;
			font-size: 14px;
		}
	}
	.code4rest-sorter-item-expand {
		border-radius: 0;
		position: relative;
		height: 36px;
		border-left: 0;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			height: 50%;
			background: #A0AEC0;
			width: 1px;
		}
		&:focus {
			&:before {
				opacity: 0;
			}
		}
		.dashicon {
			width: 14px;
			height: 14px;
			font-size: 14px;
		}
	}
}

.code4rest-sorter-drop .code4rest-sorter-item {
    line-height: 28px;
    height: auto;
    background: white;
    position: relative;
    border: 1px solid #A0AEC0;
    white-space: nowrap;
    position: relative;
    margin: 0 0 4px;
    padding: 0px;
    border-radius: 3px;
}
.code4rest-sorter-drop {
    display: flex;
    flex-direction: column;
}
.code4rest-sorter-item-panel-content {
	padding: 10px;
	.components-base-control__field {
		display: flex;
		flex-direction: column;
	}
	.components-button.code4rest-sorter-item-remove {
		color: #b52727;
	}
}
.sortable-style-tabs {
	.components-tab-panel__tabs {
		display: flex;
		border-bottom: 1px solid #dadada;
		margin-bottom: 15px;
		.components-button {
			display: flex;
			-webkit-box-flex: 1;
			flex: 1;
			justify-content: center;
			font-size: 11px;
			font-weight: 600;
			font-style: normal;
			height:36px;
			text-transform: uppercase;
			border: 0;
			border-bottom: 4px solid transparent;
			border-radius: 0;
			margin-bottom: -1px;
			opacity: 0.6;
			box-shadow: none;
			&.active-tab {
				border-bottom-color: #007cba;
				opacity: 1;
			}
		}
	}
}
.code4rest-social-add-area {
    display: flex;
}

.code4rest-social-add-area .components-base-control {
    flex-grow: 1;
    padding-right: 10px;
}

.code4rest-social-add-area .components-base-control .components-base-control__field {
    margin-bottom: 0;
}

.code4rest-social-add-area .code4rest-sorter-add-item {
	height: 32px;
	line-height: normal;
	svg, .dashicons {
		width: 14px;
		height: 14px;
		font-size: 14px;
		margin-top: 2px;
	}
}
.code4rest-sorter-row {
    margin-bottom: 16px;
}
.code4rest-sorter-item-panel-content .components-button.button-add-media {
    display:block;
    margin-bottom:20px;
    height: auto;
}
.social-custom-image {
    display: flex;
	margin-bottom: 20px;
	align-items: center;
	justify-content: space-around;
	.components-button.remove-image.is-destructive {
		color: #b52727;
	}
}
.code4rest-social-image {
    max-width: 50px;
    padding-right: 20px;
}
.code4rest-sorter-item-panel-content .code4rest-radio-container-control button.components-button.is-tertiary {
    padding: 4px;
}
@media ( max-width: 1760px ) {
	.measure-input-wrap {
		padding-right: 2px;
	}
	.measure-input-wrap input.measure-inputs {
		padding: 0 2px;
	}

	.code4rest-locked .components-button.is-single {
		padding: 0 2px;
	}
	.code4rest-range-control button.components-button {
		padding: 0 2px;
	}

	.components-button.has-icon.has-text svg {
		margin-right: 3px;
		max-width: 20px;
	}
	.code4rest-locked .components-button.is-single svg {
		width: 14px;
	}
}
.code4rest-post-title-sorter .code4rest-sorter-item-panel-content .components-toggle-control .components-base-control__field {
    flex-direction: row;
}
.code4rest-meta-sorter .code4rest-radio-container-control button.components-button.is-tertiary svg {
    max-width: 12px;
    margin: 0 auto;
}
// .code4rest-sorter-item-panel-content .components-range-control .components-base-control__field {
//     flex-direction: row;
// }
.components-toggle-control .components-base-control__field .components-toggle-control__label {
    white-space: normal;
}
.code4rest-sorter-item-panel-content .code4rest-radio-container-control {
	margin-bottom: 10px;
}
.sorter-sub-option {
    padding: 12px 12px 0px;
    border: 1px solid #bbb;
    margin-bottom: 12px;
}
.meta-label-input-control {
    display: flex;
    margin-bottom: 6px;
}
.code4rest-label-visiblity svg {
    width: 14px;
}
.components-button.code4rest-label-visiblity {
    height: 30px;
}
.label-is-hidden .components-text-control__input {
    opacity: 0.2;
    pointer-events: none;
}
.code4rest-radio-icon-control.code4rest-three-col .components-button-group.code4rest-radio-container-control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}
.code4rest-radio-icon-control.code4rest-three-col .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-width: 25%;
    padding: 10px;
    margin: 0;
	min-height: 90px;
	svg {
		max-width: 50px;
	}
}
.code4rest-radio-icon-control.code4rest-two-col .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-height: 90px;
    padding: 10px;
}
.code4rest-radio-icon-control .components-button-group.code4rest-radio-container-control .components-button.btn-flex-col.is-tertiary {
	flex-direction: column;
	font-size: 10px;
	.code4rest-radio-icon {
		margin-bottom: 3px;
		display:block;
	}
}
.code4rest-radio-icon-control.code4rest-two-col .code4rest-radio-container-control button.components-button.is-tertiary:not(:first-child) {
    margin-left: 10px;
}
.code4rest-row-layout-control .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-width: 25%;
    padding: 5px;
    margin: 0;
    min-height: 40px;
}
.code4rest-row-layout-control .components-button-group.code4rest-radio-container-control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}
.code4rest-row-layout-control .components-button-group.code4rest-radio-container-control .components-button.is-tertiary.active-radio {
    background: white
}
.code4rest-row-layout-control .components-button-group.code4rest-radio-container-control .components-button.is-tertiary.active-radio svg rect {
    fill: #007cba;;
}
#customize-control-footer_widget1_tabs {
    display: block !important;
}
.typography-button-wrap .components-button {
    height: 36px;
}
.code4rest-radio-icon-control.code4rest-three-col-short .components-button-group.code4rest-radio-container-control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}
.code4rest-radio-icon-control.code4rest-three-col-short .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-width: 25%;
    padding: 0px;
    margin: 0;
    height: 30px;
}
.code4rest-sorter-no-sorting .code4rest-sorter-item {
    margin-bottom: 12px;
}
.code4rest-sorter-no-sorting  .code4rest-sorter-item-panel-header {
    cursor: default;
}
.components-button-group.code4rest-featured-image-ratio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}

.code4rest-sorter-item-panel-content .code4rest-featured-image-ratio button.components-button.is-tertiary {
    padding:0;
    height:30px;
    margin:0;
}
.code4rest-sorter-item-panel-content .code4rest-radio-container-control button.components-button.is-tertiary svg {
    max-width:14px;
    margin:0 auto;
}
// Tweeks:
#customize-theme-controls .accordion-section-content {
    color: #2D3748;
}
.code4rest-sorter-item-panel-content .components-range-control .components-base-control__field input.components-range-control__number {
    width: auto;
}
.code4rest-popover-social-list .components-button-group.code4rest-radio-container-control {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:5px;
    padding-bottom: 15px;
    padding-top: 5px;
}
.code4rest-popover-social-list .components-button-group.code4rest-radio-container-control .components-button.social-radio-btn.is-tertiary {
    min-width: 80px;
    margin: 0;
    padding: 0;
    font-size: 10px;
}
.radio-icon-padding  .code4rest-radio-container-control button.components-button.is-tertiary {
    padding: 10px 0;
}
.code4rest-sorter-drop-social_item_group .code4rest-sorter-item-panel-header .code4rest-sorter-visiblity {
	background: #f9f9f9;
    border: 0;
}
.code4rest-sorter-drop-social_item_group .code4rest-sorter-item-panel-header .code4rest-sorter-visiblity svg {
    max-width: 14px;
}
.code4rest-sorter-drop-social_item_group .code4rest-sorter-item-panel-header .code4rest-sorter-visiblity.item-is-hidden {
    opacity: 0.2;
}
.code4rest-link-color-control .components-base-control__field {
    margin-bottom: 0;
}
.customize-control-code4rest_borders_control .code4rest-border-control>.code4rest-responsive-controls-content {
    display: block;
}
.customize-control-code4rest_borders_control .code4rest-responsive-controls-content.code4rest-border-single-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}
.customize-control-code4rest_borders_control .code4rest-responsive-controls-content.code4rest-border-single-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
span.border-icon {
    display: flex;
    width: 30px;
    align-items: center;
    flex-grow: 1;
}
span.border-icon svg {
    width: 24px;
    height: 24px;
}
.components-custom-gradient-picker .components-base-control__label {
	padding-top: 10px;
   font-size: 12px;
   display: block;
   font-weight: 600;
   letter-spacing: 0.1px;
   line-height: 18px;
}
.code4rest-background-tabs .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
    justify-content: flex-start;
}
.components-custom-gradient-picker .components-custom-gradient-picker__gradient-bar {
   box-sizing: border-box;
}
.code4rest-color-picker-wrap .code4rest-popover-color .components-popover__content {
    min-width: 300px;
    min-height: 320px;
    max-height: 60vh;
}
.code4rest-color-picker-wrap .code4rest-popover-tabs .components-tab-panel__tab-content {
    position: relative;
}

// Fake Tabs
#accordion-section-code4rest_customizer_sidebar_design, #accordion-section-code4rest_customizer_cart_design, #accordion-section-code4rest_customizer_product_layout_design, #accordion-section-code4rest_customizer_course_layout_design, #accordion-section-code4rest_customizer_lesson_layout_design, #accordion-section-code4rest_customizer_course_archive_design, #accordion-section-code4rest_customizer_header_popup_design, #accordion-section-code4rest_customizer_llms_membership_archive_design, #accordion-section-woocommerce_product_catalog_design, #accordion-section-code4rest_customizer_post_archive_design, #accordion-section-code4rest_customizer_sfwd_courses_layout_design, #accordion-section-code4rest_customizer_post_layout_design,#accordion-section-code4rest_customizer_header_transparent_design, #accordion-section-woocommerce_store_notice_design, #accordion-section-code4rest_customizer_scroll_up_design, li#accordion-section-code4rest_customizer_courses_layout_design, #accordion-section-code4rest_customizer_sfwd_groups_layout_design, #accordion-section-code4rest_customizer_sfwd_essays_layout_design, #accordion-section-code4rest_customizer_search_design, #accordion-section-code4rest_customizer_sfwd_lesson_layout_design, #accordion-section-code4rest_customizer_sfwd_topic_layout_design, #accordion-section-code4rest_customizer_sfwd_grid_layout_design, li.accordion-section.control-section-design-hidden, #accordion-section-code4rest_customizer_sfwd_quiz_layout_design, #accordion-section-code4rest_customizer_general_404_design, #accordion-section-code4rest_customizer_sfwd_courses_archive_layout_design, #accordion-section-code4rest_customizer_tribe_events_layout_design, #accordion-section-code4rest_customizer_courses_archive_layout_design {
    display: none !important;
}
.code4rest-prevent-transition {
    transition: none !important;
}
// Graditent overide.
.code4rest-popover-color .components-circular-option-picker {
    position: relative;
    z-index: 10000000;
}
.code4rest-popover-color .components-circular-option-picker .components-popover.components-custom-gradient-picker__color-picker-popover {
    top:40px !important;
    left:30px !important;
    bottom:auto !important;
}
.code4rest-popover-color .components-circular-option-picker .components-popover.components-custom-gradient-picker__color-picker-popover > div {
    top: 100%;
    bottom: auto;
}
.code4rest-popover-color .components-circular-option-picker .components-popover.components-custom-gradient-picker__color-picker-popover::before, .code4rest-popover-color .components-circular-option-picker .components-popover.components-custom-gradient-picker__color-picker-popover::after {
    display:none;
}
.code4rest-tiny-text .code4rest-radio-container-control button.components-button.is-tertiary {
    font-size:9px;
}
#customize-control-logo_layout .code4rest-radio-container-control button.components-button.is-tertiary {
    font-size:9px;
}
.code4rest-typography-control .typography-button-wrap>button.components-button.code4rest-typography-size-indicate {
    min-width: 46px;
}
.code4rest-builder-is-active .wp-full-overlay.collapsed #customize-theme-controls #sub-accordion-section-code4rest_customizer_header_builder, .code4rest-footer-builder-is-active .wp-full-overlay.collapsed #customize-theme-controls #sub-accordion-section-code4rest_customizer_footer_builder {
    transform: translateY(100%) !important;
    overflow:hidden;
}
.code4rest-builder-is-active .wp-full-overlay.collapsed #customize-preview, .code4rest-footer-builder-is-active .wp-full-overlay.collapsed #customize-preview {
    bottom:0 !important;
}
.code4rest-builder-areas .code4rest-builder-group-horizontal .code4rest-builder-drop-left_center, .code4rest-builder-areas .code4rest-builder-group-horizontal .code4rest-builder-drop-right_center {
	display:none;
}
.code4rest-builder-areas.has-center-items .code4rest-builder-drop-left_center, .code4rest-builder-areas.has-center-items .code4rest-builder-drop-right_center {
	display:flex;
}
.code4rest-radio-icon-control.code4rest-two-forced .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    margin:0;
}

.code4rest-radio-icon-control.code4rest-two-forced .code4rest-radio-container-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}
.customize-control-code4rest_borders_control button.components-button.reset.code4rest-reset {
    margin-top: 5px;
}
.code4rest-units .components-toolbar .components-button:before {
    display: none;
}
li#customize-control-code4rest_color_palette .customize-control-description {
    text-align: right;
    margin-top: 10px;
}
.code4rest-radio-icon-control.code4rest-three-col.code4rest-auto-height .components-button-group.code4rest-radio-container-control .components-button.is-tertiary {
    min-height: 0;
}
@media ( max-width: 1700px ) {
.code4rest-tiny-text .code4rest-radio-container-control button.components-button.is-tertiary {
font-size: 7px;
}
}
p.kt-box-shadow-title {
	text-align: center;
	margin-bottom: 0;
}
.code4rest-boxshadow-control .code4rest-responsive-controls-content input.components-text-control__input {
    border: 1px solid #e2e4e7;
	width: 50px;
	padding-left: 2px;
}
.kt-box-inset-settings {
    padding-top: 10px;
}
#customize-control-google_subsets .code4rest-radio-container-control {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
 }
 .code4rest-sorter-title {
    overflow: hidden;
}
 #customize-control-google_subsets .code4rest-radio-container-control button.components-button.is-tertiary {
	 margin: 0;
	 font-size:9px
 }
 .code4rest-popover-tabs .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
    opacity: 1;
}
.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content>div {
    padding: 0;
}
.code4rest-sorter-no-sorting .code4rest-sorter-item {
    background: #fff;
    border: 0;
    line-height: 42px;
}

.code4rest-sorter-no-sorting .code4rest-sorter-item-panel-header {
    border-bottom: 0;
}
.code4rest-sorter-drop:not(.code4rest-sorter-no-sorting) .code4rest-sorter-item {
    border-left: 3px solid #007cba;
}
.code4rest-sorter-drop:not(.code4rest-sorter-no-sorting) .code4rest-move-icon {
    margin-left: -3px;
    margin-right:5px;
    transform: rotate(90deg);
    cursor: grab;
    width: 18px;
    opacity: 0.7;
}
.code4rest-sorter-drop:not(.code4rest-sorter-no-sorting) .code4rest-sorter-item-panel-header .code4rest-sorter-visiblity {
    border-left: 1px solid #A0AEC0;
}
.rtl .code4rest-control-field button.components-button.code4rest-reset {
    margin-right: -20px;
    margin-left: 0;
}
// Color Palette Control Fix.
.code4rest-color-picker-wrap {
	> span + .color-button-wrap .components-button.code4rest-color-icon-indicate {
		transform: scale(1.15);
		box-shadow: 0 0 0 1.5px #007cba;
		box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
		outline: 1px solid transparent;
	 }
	.components-popover.code4rest-popover-color.is-from-left {
		left: 40px !important;
	}
	.components-popover.code4rest-popover-color {
		animation: code4rest-animate__appear-animation .1s cubic-bezier(0,0,.2,1) 0s
	}
	 .components-popover.code4rest-popover-color.is-from-right {
		left: 40px !important;
	}
	.components-popover.code4rest-popover-color.is-from-right .components-popover__content {
		right: auto;
	}
}
// .code4rest-color-picker-wrap {
// 	.code4rest-popover-color .components-popover__content > div:not(.code4rest-swatches-wrap):not(.code4rest-picker) {
// 		min-height: 300px;
// 	}
// }
.code4rest-background-picker-wrap {
	> span + .background-button-wrap .components-button.code4rest-background-icon-indicate {
		transform: scale(1.15);
		box-shadow: 0 0 0 1.5px #007cba;
		box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
		outline: 1px solid transparent;
	}
	.components-popover.code4rest-popover-color.is-from-left {
		left: 40px !important;
	}
	.components-popover.code4rest-popover-color {
		animation: code4rest-animate__appear-animation .1s cubic-bezier(0,0,.2,1) 0s
	}
	 .components-popover.code4rest-popover-color.is-from-right {
		left: 40px !important;
	}
	.components-popover.code4rest-popover-color.is-from-right .components-popover__content {
		right: auto;
	}
}
 @keyframes code4rest-animate__appear-animation{0%{opacity:0;}to{opacity:1;}}
 .rtl .code4rest-color-picker-wrap .components-popover.code4rest-popover-color.is-from-right, .rtl .code4rest-color-picker-wrap .components-popover.code4rest-popover-color.is-from-left, .rtl .code4rest-background-picker-wrap .components-popover.code4rest-popover-color.is-from-left, .rtl .code4rest-background-picker-wrap .components-popover.code4rest-popover-color.is-from-right {
    left: auto !important;
}
.code4rest-builder-areas {
    padding-left: 20px;
}
.code4rest-builder-areas.popup-vertical-group {
	padding-left: 0;
	padding-top: 26px;
}
.code4rest-builder-areas.popup-vertical-group button.components-button.code4rest-row-actions {
    top:0;
    opacity: 1;
    width:calc( 100% - 20px );
}
.code4rest-builder-areas button.components-button.code4rest-row-actions {
    left: 0;
}
.code4rest-builder-areas button.components-button.code4rest-row-left-actions {
    position: absolute;
    left: 0;
    height: 100%;
    min-width: 0;
    width: 20px;
    padding: 0;
    color: #c8dbe4;
    box-shadow: none !important;
    background: #007cba;
    border-radius: 0;
	font-size: 10px;
	&:hover {
		color: white;
	}
}
.code4rest-builder-areas.popup-vertical-group button.components-button.code4rest-row-left-actions {
    display: none;
}
.code4rest-builder-areas button.components-button.code4rest-row-left-actions .dashicon {
	width: 12px;
	height: 12px;
    font-size: 12px;
	margin:0;
}
.code4rest-background-picker-wrap .components-popover.code4rest-popover-color.components-custom-gradient-picker__color-picker-popover .components-popover__content {
    left: 0;
    transform: none;
}
.code4rest-color-picker-wrap .code4rest-background-tabs .components-popover.components-custom-gradient-picker__color-picker-popover .components-popover__content {
    left: 0;
    transform: none;
	min-width: 240px;
}
.code4rest-radio-icon-control.code4rest-two-grid .code4rest-radio-container-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr) );
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}
.code4rest-radio-icon-control.code4rest-two-grid .code4rest-radio-container-control button.components-button.is-tertiary {
    margin: 0;
}
// Temp Fix for Core issue.
.customize-control-title .disabled-element-wrapper, .code4rest-control-field .disabled-element-wrapper {
    opacity: 0;
}
// Font Pairing
.code4rest-font-pair-popover > .components-popover__content {
    padding: 0 12px 12px;
}
.components-button-group.kt-font-pair-group {
    min-width: 290px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
.code4rest-font-pair-wrap {
    margin-right: 0;
    margin-left: auto;
}
.components-button-group.kt-font-pair-group button.components-button.kt-font-pair-btn {
    height: auto;
	text-align: center;
    flex-direction: column;
	justify-content: center;
	img {
		max-height: 40px;
		height: auto;
		width: auto;
	}
	span {
		font-size: 11px;
		font-weight: normal;
	}
	&.state-confirm {
		background: rgba(0, 124, 186, .1);
	}
}

// Issues with 6.1 because of popover switching to absolute positioning.
#customize-theme-controls .customize-pane-child.accordion-section-content, #customize-theme-controls .customize-pane-child.accordion-sub-container {
	min-height: 100%;
}
.components-popover.code4rest-customizer-popover:not(.components-animate__appear) {
	left: -5px !important;
    right: -5px !important;
    max-width: calc( 100% + 20px );
}
.code4rest-color-picker-wrap .code4rest-popover-color:not(.components-animate__appear) .components-popover__content {
	min-height: 284px;
}
.code4rest-typography-control .components-popover.code4rest-popover-typography.code4rest-customizer-popover:not(.components-animate__appear)>.components-popover__content {
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}
.code4rest-color-picker-wrap .code4rest-popover-color.code4rest-customizer-popover:not(.components-animate__appear) .components-popover__content {
	max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}
.code4rest-background-picker-wrap .code4rest-popover-color.code4rest-customizer-popover:not(.components-animate__appear) .components-popover__content {
	max-width: 100%;
    min-width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
    min-height: 330px;
}
.code4rest-color-picker-wrap .code4rest-popover-color.code4rest-popover-color-gradient:not(.components-animate__appear) .components-popover__content {
	min-height: 330px;
	overflow: visible !important;
}
.code4rest-customizer-popover:not(.components-animate__appear) .code4rest-picker {
    max-width: 100%;
	margin-left:auto;
	margin-right: auto;
}
.code4rest-customizer-popover:not(.components-animate__appear) .code4rest-swatches-wrap {
	max-width: 300px;
	margin-left:auto;
	margin-right: auto;
}
// New Gradient Control
.components-custom-gradient-picker__item {
	display: block;
	flex:5 1 0%;
	max-height: 100%;
    max-width: 100%;
    min-height: 0px;
    min-width: 0px;
	.code4rest-controls-content {
		gap: 12px;
	}
	.code4rest-controls-content .components-base-control {
		margin-bottom: 0;
		flex: 10 0 0;
	}
	.code4rest-control-toggle-advanced.only-icon {
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		font-weight: 600;
		font-style: normal;
		text-transform: uppercase;
		height: 30px;
		line-height: 1.2;
		border: 1px solid #CBD5E0;
		border-radius: 2px;
		background: transparent;
		color: #4A5568;
		padding: 4px;
		box-shadow: none;
		white-space: normal;
		svg {
			width: 20px;
		}
		&.is-primary {
			border-color: var(--wp-admin-theme-color, #00669b);
			background: var(--wp-admin-theme-color, #00669b);
			color: #fff;
			box-shadow: none;
		}
	}
}
.block-editor-block-inspector .components-custom-gradient-picker__item .code4rest-select-large .components-select-control__input {
	height: 40px;
	min-height: 40px;
}
.code4rest-gradient-position-control .code4rest-gradient-position_header .code4rest-gradient-position__label {
	margin: 0px 0px 8px;
	display:block;
}
.code4rest-gradient-position-control .components-unit-control-wrapper {
    flex-grow: 1;
}
.code4rest-gradient-control .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown {
	position: absolute;
    height: 16px;
    width: 16px;
    top: 16px;
    display: flex;
}
.code4rest-gradient-control .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
	height: inherit;
	width: inherit;
	border-radius: 50%;
	padding: 0;
	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff,0 0 2px 0 rgba(0, 0, 0, 0.25);
	outline: 2px solid transparent;
	position: static;
    top: auto;
}
.code4rest-gradient-control {
	.components-custom-gradient-picker__ui-line .components-base-control {
		margin-bottom: 0;
	}
	.components-custom-gradient-picker__ui-line .components-base-control .components-base-control__field {
		margin-bottom: 0;
	}
}
.code4rest-gradient-control .components-custom-gradient-picker__gradient-bar {
	border-radius: 2px;
    width: 100%;
    height: 48px;
	margin-bottom: 16px;
	padding-right: 0;

	.components-custom-gradient-picker__markers-container {
		position: relative;
		width: calc(100% - 48px);
		margin-left: auto;
		margin-right: auto;
	}

	.components-custom-gradient-picker__control-point-dropdown {
		position: absolute;
		height: 16px;
		width: 16px;
		top: 16px;
		display: flex;
	}

	.components-custom-gradient-picker__insert-point-dropdown {
		position: relative;

		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
		height: inherit;
		width: inherit;
		min-width: 16px;
		border-radius: 50%;

		background: #fff;
		padding: 2px;

		color: #111;

		svg {
			height: 100%;
			width: 100%;
		}
	}
}
.code4rest-gradient-control .components-angle-picker-control .components-input-control__container .components-input-control__input {
    height: 32px;
    padding-left: 8px;
    padding-right: 8px;
}
.code4rest-pop-gradient-color-picker {
    width: 280px;
	max-width: 100%;
}
.components-popover.components-dropdown__content.components-color-palette__custom-color-dropdown-content.code4rest-pop-color-popover {
    z-index: 10000000;
    animation: code4rest-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
	.components-popover__content {
		min-height: 0;
	}
}
.wrap-components-custom-gradient-picker {
	position: relative;
	z-index: 11;
}
.components-dropdown__content.components-color-palette__custom-color-dropdown-content .code4rest-picker > div:first-child {
    padding-bottom: 25% !important;
}
.code4rest-background-picker-wrap .code4rest-popover-color .components-popover__content>.code4rest-pop-gradient-color-picker {
    min-height: 0;
}
.code4rest-background-picker-wrap .components-popover.code4rest-popover-color >.components-popover__content {
    overflow: visible;
}