/*! Pickr 1.9.0 MIT | https://github.com/Simonwep/pickr */
.pickr {
	position: relative;
	overflow: visible;
	transform: translateY(0)
}

.pickr * {
	box-sizing: border-box;
	outline: none;
	border: none;
	-webkit-appearance: none
}

.pickr .pcr-button {
	position: relative;
	height: 2em;
	width: 2em;
	padding: .5em;
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
	border-radius: .15em;
	background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") no-repeat center;
	background-size: 0;
	transition: all .3s
}

.pickr .pcr-button::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
	background-size: .5em;
	border-radius: .15em;
	z-index: -1
}

.pickr .pcr-button::before {
	z-index: initial
}

.pickr .pcr-button::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: background .3s;
	background: var(--pcr-color);
	border-radius: .15em
}

.pickr .pcr-button.clear {
	background-size: 70%
}

.pickr .pcr-button.clear::before {
	opacity: 0
}

.pickr .pcr-button.clear:focus {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 3px var(--pcr-color)
}

.pickr .pcr-button.disabled {
	cursor: not-allowed
}

.pickr *,
.pcr-app * {
	box-sizing: border-box;
	outline: none;
	border: none;
	-webkit-appearance: none
}

.pickr input:focus,
.pickr input.pcr-active,
.pickr button:focus,
.pickr button.pcr-active,
.pcr-app input:focus,
.pcr-app input.pcr-active,
.pcr-app button:focus,
.pcr-app button.pcr-active {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 3px var(--pcr-color)
}

.pickr .pcr-palette,
.pickr .pcr-slider,
.pcr-app .pcr-palette,
.pcr-app .pcr-slider {
	transition: box-shadow .3s
}

.pickr .pcr-palette:focus,
.pickr .pcr-slider:focus,
.pcr-app .pcr-palette:focus,
.pcr-app .pcr-slider:focus {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 3px rgba(0, 0, 0, .25)
}

.pcr-app {
	position: fixed;
	display: flex;
	flex-direction: column;
	z-index: 10000;
	border-radius: .1em;
	background: var(--bs-body-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility 0s .3s;
    box-shadow: var(--bs-box-shadow);
    border: 1px solid var(--bs-gray-200);
	left: 0;
    border-radius: 15px;
}

@media (max-width:481px){
	.pcr-app{
		top : initial !important;
		left :0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0 !important;
		border-width: 1px 0 0 0;
	}
}

@media (min-width:481px){

	.pcr-app:before {
		content: '';
		display: block;
		position: absolute;
		width: 12px;
		height: 12px;
		left: 20px;
		top: -10px;
		border: solid transparent;
		border-width: 0 10px 14px 10px;
		border-bottom-color: currentColor;
		box-sizing: border-box;
		color: var(--bs-body-bg);;
		filter: drop-shadow(0 -1px 1px rgba(0,0,0,.1));
		pointer-events: none;
	}

	[data-bs-theme=dark] .pcr-app:before{
		filter: drop-shadow(0 -1px 1px rgba(255,255,255,.45));
	}

}

.pcr-app.visible {
	transition: opacity .3s;
	visibility: visible;
	opacity: 1
}

.pcr-app .pcr-swatches {
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
}

.pcr-app .pcr-swatches.pcr-last {
	margin: 0
}

@supports(display: grid) {
	.pcr-app .pcr-swatches {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(auto-fit, 2.25em)
	}
}

.pcr-app .pcr-swatches>button {
	font-size: 1em;
	position: relative;
	width: calc(2.25em - 5px);
	height: calc(2.25em - 5px);
	border-radius: 100%;
	cursor: pointer;
	margin: 2.5px;
	flex-shrink: 0;
	justify-self: center;
	transition: all .15s;
	overflow: hidden;
	background: rgba(0, 0, 0, 0);
	z-index: 1
}

.pcr-app .pcr-swatches>button::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
	background-size: 6px;
	border-radius: .15em;
	z-index: -1
}

.pcr-app .pcr-swatches>button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--pcr-color);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: .15em;
	box-sizing: border-box
}

.pcr-app .pcr-swatches>button:not(.pcr-active) {
	box-shadow: none
}

.pcr-app .pcr-interaction {
	margin: 0 -0.2em 0 -0.2em
}

.pcr-app .pcr-interaction>* {
	margin: 0 .2em
}

.pcr-app .pcr-interaction input {
	letter-spacing: .07em;
	font-size: .75em;
	text-align: center;
	cursor: pointer;
	color: #75797e;
	background: #f1f3f4;
	border-radius: .15em;
	transition: all .15s;
	padding: .45em .5em;
	margin-top: .75em
}

.pcr-app .pcr-interaction .pcr-result {
	text-align: left;
	min-width: 8em;
	transition: all .2s;
	border-radius: 5px;
	cursor: text;
    display: block;
    margin-top: 10px;
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    transition: color .2s ease;
    padding: 5px 10px;
    font-size: 14px;
}

.pcr-app .pcr-interaction .pcr-result:focus {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
    transition: color .2s ease;
}

.pcr-app .pcr-interaction .pcr-type.active {
	color: #fff;
	background: #4285f4
}

.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
	width: auto;
    border-radius: 5px;
    padding: 5px 10px;
    font-family: initial;
    font-size: 13px;
    margin-top: 15px;
}

.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
	color: var(--bs-btn-color);
}

.pcr-app .pcr-interaction .pcr-save:hover,
.pcr-app .pcr-interaction .pcr-cancel:hover,
.pcr-app .pcr-interaction .pcr-clear:hover {
	filter: brightness(0.925)
}

.pcr-app .pcr-interaction .pcr-save {
	background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
}

.pcr-app .pcr-interaction .pcr-clear,
.pcr-app .pcr-interaction .pcr-cancel {
	background: transparent;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
}

.pcr-app .pcr-interaction .pcr-clear:focus,
.pcr-app .pcr-interaction .pcr-cancel:focus {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 3px rgba(244, 66, 80, .75)
}

.pcr-app .pcr-selection .pcr-picker {
	position: absolute;
	height: 18px;
	width: 18px;
	border: 2px solid #fff;
	border-radius: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.pcr-app .pcr-selection .pcr-color-palette,
.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity {
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: flex;
	flex-direction: column;
	cursor: grab;
	cursor: -webkit-grab
}

.pcr-app .pcr-selection .pcr-color-palette:active,
.pcr-app .pcr-selection .pcr-color-chooser:active,
.pcr-app .pcr-selection .pcr-color-opacity:active {
	cursor: grabbing;
	cursor: -webkit-grabbing
}

.pcr-app[data-theme=bootstrap] {
	width: 28.5em;
	max-width: 95vw;
	padding: 1.5em
}

.pcr-app[data-theme=bootstrap] .pcr-selection {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
    height: 150px;
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview {
	position: relative;
	z-index: 1;
	width: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: .75em
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
	background-size: .5em;
	border-radius: .15em;
	z-index: -1
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview .pcr-last-color {
	cursor: pointer;
	border-radius: .15em .15em 0 0;
	z-index: 2
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview .pcr-current-color {
	border-radius: 0 0 .15em .15em
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview .pcr-last-color,
.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-preview .pcr-current-color {
	background: var(--pcr-color);
	width: 100%;
	height: 50%
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-palette {
	width: 100%;
	height: 150px;
	z-index: 1;
    margin: 0 5px;
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-palette .pcr-palette {
	flex-grow: 1;
	border-radius: .15em
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-palette .pcr-palette::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
	background-size: .5em;
	border-radius: .15em;
	z-index: -1
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-opacity {
	margin-left: .75em
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-chooser .pcr-picker,
.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-opacity .pcr-picker {
	left: 50%;
	transform: translateX(-50%)
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-chooser .pcr-slider,
.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-opacity .pcr-slider {
	width: 8px;
	flex-grow: 1;
	border-radius: 50em
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-chooser .pcr-slider {
	background: linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))
}

.pcr-app[data-theme=bootstrap] .pcr-selection .pcr-color-opacity .pcr-slider {
	background: linear-gradient(to bottom, transparent, black), url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
	background-size: 100%, 50%
}

.form-pickr .pickr > button{
	width: 100px;
	height: 29px;
}

.form-pickr-lg .pickr > button{
	height: 44px;
} 

.form-pickr-solid .pickr > button{
	border-radius: 10px !important;
	overflow: hidden;
}

body.pcr-app-shown::after{
	content: '';
	display: block;
	height: 350px;
}