.picker_wrapper.no_alpha .picker_alpha {
    display: none
}

.picker_wrapper.no_editor .picker_editor {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.picker_wrapper.no_cancel .picker_cancel {
    display: none
}

.layout_default.picker_wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    font-size: 1.2rem;
    width: 22rem;
    padding: .5rem
}

.layout_default.picker_wrapper input, .layout_default.picker_wrapper button {
    font-size: 1.35rem
}

.layout_default.picker_wrapper > * {
    margin: .35rem
}

.layout_default.picker_wrapper::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    order: 1
}

.layout_default .picker_slider, .layout_default .picker_selector {
    padding: .85rem
    /* sets width and height of relevant sliders */
}

.layout_default .picker_hue {
    width: 100%
}

.layout_default .picker_sl {
    flex: 1 1 auto
}

.layout_default .picker_sl::before {
    content: '';
    display: block;
    padding-bottom: 100%
}

.layout_default .picker_editor {
    order: 1;
    width: 9.5rem;
}

.layout_default .picker_editor input {
    width: 100%;
    height: 100%
}

.layout_default .picker_sample {
    order: 1;
    flex: 1 1 auto
}

.layout_default .picker_done, .layout_default .picker_cancel {
    order: 1
}

.picker_wrapper {
    box-sizing: border-box;
    background: #F2F2F2;
    cursor: default;
    font-family: sans-serif;
    color: #444444;
    pointer-events: auto
}

.picker_wrapper:focus {
    outline: none
}

.picker_wrapper button, .picker_wrapper input {
    box-sizing: border-box;
    border: none;
    outline: none
}

.picker_wrapper button {
    cursor: pointer;
    padding: .6rem 1.2rem;
    color: white;
    background-color: #087CC3;
}


.picker_wrapper button:hover {
    color: #087CC3;
    background-color: white;
}

.picker_selector {
    position: absolute;
    z-index: 1;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: .25rem solid #FFFFFF;
    border-radius: 100%;
    background: currentColor;
    cursor: pointer
}

.picker_slider .picker_selector {
    border-radius: .1rem
}

.picker_hue {
    position: relative;
    background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
}

.picker_sl {
    position: relative;
    background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),
    linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))
}

.picker_alpha, .picker_sample {
    position: relative;
    /* change has no effect */
    background: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/100% 100%,
    linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 50% 50%/100% 100%;
}

.picker_alpha .picker_selector, .picker_sample .picker_selector {
    background: none
}

.picker_editor input {
    font-family: monospace;
    padding: .1rem .2rem
}

.picker_sample::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor
}

.picker_arrow {
    position: absolute;
    z-index: -1
}

.picker_wrapper.popup {
    position: absolute;
    z-index: 2;
    margin: 1rem
}

.picker_wrapper.popup, .picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {
    background: #F2F2F2;
}

.picker_wrapper.popup .picker_arrow {
    width: 3rem;
    height: 3rem;
    margin: 0
}

.picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -99
}

.picker_wrapper.popup .picker_arrow::before {
    width: 100%;
    height: 100%;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.picker_wrapper.popup .picker_arrow::after {
    width: 150%;
    height: 150%;
    box-shadow: none
}

.popup.popup_top {
    bottom: 100%;
    left: 0
}

.popup.popup_top .picker_arrow {
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.popup.popup_bottom {
    top: 100%;
    left: 0
}

.popup.popup_bottom .picker_arrow {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1)
}

.popup.popup_left {
    top: 0;
    right: 100%
}

.popup.popup_left .picker_arrow {
    top: 0;
    right: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.popup.popup_right {
    top: 0;
    left: 100%
}

.popup.popup_right .picker_arrow {
    top: 0;
    left: 0
}