.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: 10px;
    /*width: 25em;*/
    width: 100%;
    padding: .5em
}

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

.layout_default.picker_wrapper > * {
    margin: .5em
}

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

.layout_default .picker_selector, .layout_default .picker_slider {
    padding: 1em
}

.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: 6.5rem
}

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

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

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

.picker_wrapper {
    box-sizing: border-box;
    background: #f2f2f2;
    box-shadow: 0 0 0 1px silver;
    cursor: default;
    font-family: sans-serif;
    color: #444;
    pointer-events: auto
}

.picker_wrapper:focus {
    outline: 0
}

.picker_wrapper button, .picker_wrapper input {
    box-sizing: border-box;
    border: none;
    box-shadow: 0 0 0 1px silver;
    outline: 0
}

.picker_wrapper button:active, .picker_wrapper button:focus, .picker_wrapper input:active, .picker_wrapper input:focus {
    box-shadow: 0 0 2px 1px #1e90ff
}

.picker_wrapper button {
    padding: .4em .6em;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: linear-gradient(0deg, #dcdcdc, transparent)
}

.picker_wrapper button:active {
    background-image: linear-gradient(0deg, transparent, #dcdcdc)
}

.picker_wrapper button:hover {
    background-color: #fff
}

.picker_selector {
    position: absolute;
    z-index: 1;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 100%;
    box-shadow: 0 0 3px 1px #67b9ff;
    background: currentColor;
    cursor: pointer
}

.picker_slider .picker_selector {
    border-radius: 2px
}

.picker_hue {
    position: relative;
    background-image: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
    box-shadow: 0 0 0 1px silver
}

.picker_sl {
    position: relative;
    box-shadow: 0 0 0 1px silver;
    background-image: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, #000, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, grey, rgba(128, 128, 128, 0))
}

.picker_alpha, .picker_sample {
    position: relative;
    background: linear-gradient(45deg, #d3d3d3 25%, transparent 25%, transparent 75%, #d3d3d3 75%) 0 0/2em 2em, linear-gradient(45deg, #d3d3d3 25%, #fff 25%, #fff 75%, #d3d3d3 75%) 1em 1em/2em 2em;
    box-shadow: 0 0 0 1px silver
}

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

.picker_editor input {
    font-family: monospace;
    padding: .2em .4em
}

.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: 1.5em
}

.picker_wrapper.popup, .picker_wrapper.popup .picker_arrow::after, .picker_wrapper.popup .picker_arrow::before {
    background: #f2f2f2;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .4)
}

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

.picker_wrapper.popup .picker_arrow::after, .picker_wrapper.popup .picker_arrow::before {
    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
}

@font-face {
    font-family: FontFPD;
    src: url(fonts/FontFPD.eot?jw2ske);
    src: url(fonts/FontFPD.eot?jw2ske#iefix) format('embedded-opentype'), url(fonts/FontFPD.ttf?jw2ske) format('truetype'), url(fonts/FontFPD.woff?jw2ske) format('woff'), url(fonts/FontFPD.svg?jw2ske#FontFPD) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class*=" fpd-icon-"], [class^=fpd-icon-] {
    font-family: FontFPD !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fpd-icon-eye:before {
    content: "\e930";
    color: #485563
}

.fpd-icon-eye-hide:before {
    content: "\e92f";
    color: #485563
}

.fpd-icon-pages:before {
    content: "\e92e";
    color: #485563
}

.fpd-icon-remove-bg:before {
    content: "\e92d";
    color: #485563
}

.fpd-icon-ai:before {
    content: "\e923"
}

.fpd-icon-align-bottom:before {
    content: "\e900";
    color: #485563
}

.fpd-icon-align-horizontal-middle:before {
    content: "\e901";
    color: #485563
}

.fpd-icon-align-left:before {
    content: "\e902";
    color: #485563
}

.fpd-icon-align-right:before {
    content: "\e903";
    color: #485563
}

.fpd-icon-align-top:before {
    content: "\e904";
    color: #485563
}

.fpd-icon-align-vertical-middle:before {
    content: "\e905";
    color: #485563
}

.fpd-icon-back:before {
    content: "\e906";
    color: #485563
}

.fpd-icon-bin:before {
    content: "\e907";
    color: #485563
}

.fpd-icon-close:before {
    content: "\e944";
    color: #485563
}

.fpd-icon-cloud-upload:before {
    content: "\e94b";
    color: #485563
}

.fpd-icon-color:before {
    content: "\e94c";
    color: #485563
}

.fpd-icon-copy:before {
    content: "\e94d";
    color: #485563
}

.fpd-icon-curved-text:before {
    content: "\e908";
    color: #485563
}

.fpd-icon-design-library:before {
    content: "\e909";
    color: #485563
}

.fpd-icon-done:before {
    content: "\e90a";
    color: #485563
}

.fpd-icon-download:before {
    content: "\e90b";
    color: #485563
}

.fpd-icon-effects:before {
    content: "\e90d";
    color: #485563
}

.fpd-icon-font-size:before {
    content: "\e90f";
    color: #485563
}

.fpd-icon-font:before {
    content: "\e910";
    color: #485563
}

.fpd-icon-format-align-center:before {
    content: "\e911";
    color: #485563
}

.fpd-icon-format-align-justify:before {
    content: "\e94e";
    color: #485563
}

.fpd-icon-format-align-left:before {
    content: "\e94f";
    color: #485563
}

.fpd-icon-format-align-right:before {
    content: "\e950";
    color: #485563
}

.fpd-icon-format-bold:before {
    content: "\e951";
    color: #485563
}

.fpd-icon-format-italic:before {
    content: "\e912";
    color: #485563
}

.fpd-icon-format-underline:before {
    content: "\e913";
    color: #485563
}

.fpd-icon-forward:before {
    content: "\e914";
    color: #485563
}

.fpd-icon-grid:before {
    content: "\e915";
    color: #485563
}

.fpd-icon-guided-tour:before {
    content: "\e916";
    color: #485563
}

.fpd-icon-images:before {
    content: "\e917";
    color: #485563
}

.fpd-icon-info:before {
    content: "\e918";
    color: #485563
}

.fpd-icon-layers:before {
    content: "\e919";
    color: #485563
}

.fpd-icon-layouts:before {
    content: "\e952";
    color: #485563
}

.fpd-icon-locked:before {
    content: "\e953";
    color: #485563
}

.fpd-icon-magnet:before {
    content: "\e954";
    color: #485563
}

.fpd-icon-menu:before {
    content: "\e955";
    color: #485563
}

.fpd-icon-more:before {
    content: "\e91a";
    color: #485563
}

.fpd-icon-move-down:before {
    content: "\e91e";
    color: #485563
}

.fpd-icon-move-up:before {
    content: "\e920";
    color: #485563
}

.fpd-icon-name-number:before {
    content: "\e921";
    color: #485563
}

.fpd-icon-position:before {
    content: "\e926";
    color: #485563
}

.fpd-icon-preview-lightbox:before {
    content: "\e92c";
    color: #485563
}

.fpd-icon-print:before {
    content: "\e931";
    color: #485563
}

.fpd-icon-redo:before {
    content: "\e933";
    color: #485563
}

.fpd-icon-reset:before {
    content: "\e956";
    color: #485563
}

.fpd-icon-rotate:before {
    content: "\e957";
    color: #485563
}

.fpd-icon-ruler:before {
    content: "\e958";
    color: #485563
}

.fpd-icon-save:before {
    content: "\e959";
    color: #485563
}

.fpd-icon-text-format:before {
    content: "\e935";
    color: #485563
}

.fpd-icon-text-input:before {
    content: "\e939";
    color: #485563
}

.fpd-icon-text-layers:before {
    content: "\e93d";
    color: #485563
}

.fpd-icon-text-secondary:before {
    content: "\e93f";
    color: #485563
}

.fpd-icon-transform:before {
    content: "\e940";
    color: #485563
}

.fpd-icon-undo:before {
    content: "\e941";
    color: #485563
}

.fpd-icon-unlocked:before {
    content: "\e942";
    color: #485563
}

.fpd-icon-zoom-in:before {
    content: "\e943";
    color: #485563
}

.fpd-icon-svg:before {
    content: "\e90c"
}

.fpd-icon-depositphotos:before {
    content: "\e93c"
}

.fpd-icon-pixabay:before {
    content: "\e93b"
}

.fpd-icon-text-transform:before {
    content: "\e93a"
}

.fpd-icon-lowercase:before {
    content: "\e937"
}

.fpd-icon-uppercase:before {
    content: "\e938"
}

.fpd-icon-share:before {
    content: "\e92b"
}

.fpd-icon-share-mail:before {
    content: "\e92a"
}

.fpd-icon-share-linkedin:before {
    content: "\e929"
}

.fpd-icon-share-pinterest:before {
    content: "\e927"
}

.fpd-icon-share-google-plus:before {
    content: "\e928"
}

.fpd-icon-share-facebook:before {
    content: "\e925"
}

.fpd-icon-share-twitter:before {
    content: "\e924"
}

.fpd-icon-corner-resize:before {
    content: "\e922"
}

.fpd-icon-jpg:before {
    content: "\e91b";
    color: #929292
}

.fpd-icon-pdf:before {
    content: "\e91c";
    color: #929292
}

.fpd-icon-png:before {
    content: "\e91d";
    color: #929292
}

.fpd-icon-qrcode:before {
    content: "\e91f"
}

.fpd-icon-flip-vertical:before {
    content: "\e61e";
    color: #444
}

.fpd-icon-flip-horizontal:before {
    content: "\e61c";
    color: #444
}

.fpd-icon-fullscreen:before {
    content: "\e949"
}

.fpd-icon-fullscreen-close:before {
    content: "\e94a"
}

.fpd-icon-thumb-up-outline:before {
    content: "\e947"
}

.fpd-icon-thumb-up:before {
    content: "\e948"
}

.fpd-icon-star-outline:before {
    content: "\e945"
}

.fpd-icon-star:before {
    content: "\e946"
}

.fpd-icon-none:before {
    content: "\e936"
}

.fpd-icon-crop:before {
    content: "\e934"
}

.fpd-icon-brush:before {
    content: "\e932"
}

.fpd-icon-photo:before {
    content: "\e1a4"
}

.fpd-icon-arrow-dropdown:before {
    content: "\e90e"
}

.fpd-icon-drag:before {
    content: "\e616"
}

.fpd-icon-add:before {
    content: "\e619"
}

.fpd-icon-reorder:before {
    content: "\e607";
    color: #444
}

.fpd-icon-remove:before {
    content: "\e606";
    color: #444
}

.fpd-icon-instagram:before {
    content: "\e609";
    color: #444
}

.fpd-icon-facebook:before {
    content: "\e608";
    color: #444
}