
.components-color-palette__custom-color-wrapper {
    position: relative;
    z-index: 0
}

.components-color-palette__custom-color-button {
    background: none;
    border: none;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    box-sizing: border-box;
    cursor: pointer;
    height: 64px;
    outline: 1px solid transparent;
    position: relative;
    width: 100%
}

.components-color-palette__custom-color-button:focus {
    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));
    outline-width: 2px
}

.components-color-palette__custom-color-button:after {
    background-image: repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0),repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0);
    background-position: 0 0,24px 24px;
    background-size: 48px 48px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.components-color-palette__custom-color-text-wrapper {
    border-radius: 0 0 2px 2px;
    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.2),inset 1px 0 0 0 rgba(0,0,0,.2),inset -1px 0 0 0 rgba(0,0,0,.2);
    font-size: 13px;
    padding: 12px 16px;
    position: relative
}

.components-color-palette__custom-color-name {
    color: var(--wp-components-color-foreground,#1e1e1e);
    margin: 0 1px
}

.components-color-palette__custom-color-value {
    color: #757575
}

.components-color-palette__custom-color-value--is-hex {
    text-transform: uppercase
}

.components-color-palette__custom-color-value:empty:after {
    content: "​";
    visibility: hidden
}

.components-custom-gradient-picker:not(.is-next-has-no-margin) {
    margin-bottom: 24px;
    margin-top: 12px
}

.components-custom-gradient-picker__gradient-bar {
    border-radius: 2px;
    height: 48px;
    position: relative;
    width: 100%;
    z-index: 1
}

.components-custom-gradient-picker__gradient-bar.has-gradient {
    background-image: repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0),repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0);
    background-position: 0 0,12px 12px;
    background-size: 24px 24px
}

.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background {
    inset: 0;
    position: absolute
}

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

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

.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown {
    background: #fff;
    border-radius: 50%;
    color: #1e1e1e;
    height: inherit;
    min-width: 16px;
    padding: 2px;
    position: relative;
    width: inherit
}

.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg {
    height: 100%;
    width: 100%
}

.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff,0 0 2px 0 rgba(0,0,0,.25);
    height: inherit;
    outline: 2px solid transparent;
    padding: 0;
    width: inherit
}

.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active,.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus {
    box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus)*2) #fff,0 0 2px 0 rgba(0,0,0,.25);
    outline: 1.5px solid transparent
}

.components-custom-gradient-picker__remove-control-point-wrapper {
    padding-bottom: 8px
}

.components-custom-gradient-picker__inserter {
    direction: ltr
}

.components-custom-gradient-picker__liner-gradient-indicator {
    display: inline-block;
    flex: 0 auto;
    height: 20px;
    width: 20px
}

.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
    border: none
}

.components-custom-gradient-picker .components-custom-gradient-picker__toolbar>div+div {
    margin-left: 1px
}

.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed>svg {
    background: #fff;
    border: 1px solid #949494;
    border-radius: 2px
}

.components-custom-gradient-picker__ui-line {
    position: relative;
    z-index: 0
}

/* More */

.components-circular-option-picker {
    display: inline-block;
    min-width: 188px;
    width: 100%
}

.components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px
}

.components-circular-option-picker .components-circular-option-picker__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1
}

.components-circular-option-picker>:not(.components-circular-option-picker__swatches) {
    position: relative;
    z-index: 0
}

.components-circular-option-picker__option-wrapper {
    display: inline-block;
    height: 28px;
    transform: scale(1);
    transition: transform .1s ease;
    vertical-align: top;
    width: 28px;
    will-change: transform
}

@media (prefers-reduced-motion:reduce) {
    .components-circular-option-picker__option-wrapper {
        transition-delay: 0s;
        transition-duration: 0s
    }
}

.components-circular-option-picker__option-wrapper:hover {
    transform: scale(1.2)
}

.components-circular-option-picker__option-wrapper>div {
    height: 100%;
    width: 100%
}

.components-circular-option-picker__option-wrapper:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8V6H4v2h2zm2 0V6h2v2H8zm2 8H8v-2h2v2zm2 0v-2h2v2h-2zm0 2v-2h-2v2H8v2h2v-2h2zm2 0v2h-2v-2h2zm2 0h-2v-2h2v2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z' fill='%23555D65'/%3E%3Cpath d='M18 18v2h-2v-2h2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z' fill='%23555D65'/%3E%3C/svg%3E");
    border-radius: 50%;
    bottom: 1px;
    content: "";
    left: 1px;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: -1
}

.components-circular-option-picker__option {
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 14px;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    transition: box-shadow .1s ease;
    vertical-align: top;
    width: 100%
}

@media (prefers-reduced-motion:reduce) {
    .components-circular-option-picker__option {
        transition-delay: 0s;
        transition-duration: 0s
    }
}

.components-circular-option-picker__option:hover {
    box-shadow: inset 0 0 0 14px!important
}

.components-circular-option-picker__option.is-pressed {
    box-shadow: inset 0 0 0 4px;
    overflow: visible;
    position: relative;
    z-index: 1
}

.components-circular-option-picker__option.is-pressed+svg {
    border-radius: 50%;
    left: 2px;
    pointer-events: none;
    position: absolute;
    top: 2px;
    z-index: 2
}

.components-circular-option-picker__option:after {
    border: 1px solid transparent;
    border-radius: 50%;
    bottom: -1px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    box-sizing: inherit;
    content: "";
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px
}

.components-circular-option-picker__option:focus:after {
    border: 2px solid #757575;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    content: "";
    height: 32px;
    left: -2px;
    position: absolute;
    top: -2px;
    width: 32px
}

.components-circular-option-picker__option.components-button:focus {
    background-color: transparent;
    box-shadow: inset 0 0 0 14px;
    outline: none
}

.components-circular-option-picker__button-action .components-circular-option-picker__option {
    background: #fff;
    color: #fff
}

.components-circular-option-picker__dropdown-link-action {
    margin-right: 16px
}

.components-circular-option-picker__dropdown-link-action .components-button {
    line-height: 22px
}

.components-palette-edit__popover-gradient-picker {
    padding: 8px;
    width: 280px
}

.components-dropdown-menu__menu .components-palette-edit__menu-button {
    width: 100%
}

.component-color-indicator {
    background: #fff linear-gradient(-45deg,transparent 48%,#ddd 0,#ddd 52%,transparent 0);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    display: inline-block;
    height: 20px;
    padding: 0;
    width: 20px
}

/* Custom */
.components-popover {
    will-change: transform;
    /*z-index: 1000000;*/
}

.components-popover__content {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0,0,0,.1), 0 1.2px 1.7px -0.2px rgba(0,0,0,.1), 0 2.3px 3.3px -0.5px rgba(0,0,0,.1);
    box-sizing: border-box;
    width: min-content;
}

.components-circular-option-picker {
	z-index: 0;
}

.component-color-indicator {
	width: 34px;
	height: 33.6px;
	border-radius: 4px 0 0 4px;
}

#pt-cv-overlay-gradient {
	z-index: 999;
	position: relative;
}

#pt-cv-overlay-gradient .components-tooltip {
	display: none !important;
}
#pt-cv-overlay-gradient .components-half {
	display: flex;
}

#pt-cv-overlay-gradient .components-popover__content {
	min-width: 300px;
}

#pt-cv-overlay-gradient .components-popover__content .components-popover__content {
	min-width: 240px;
}

#pt-cv-overlay-gradient .cvb-label {
	background: #f6f7f7;
	border: 1px solid #ccc;
	padding: 6px;
	border-radius: 0 4px 4px 0;
	margin: 0;
	font-weight: normal;
}