/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
 
.fpd-navigation .fpd-tooltip[data-module=splotchy-splash] {
    display: none;
}

.fpd-container > .fpd-main-wrapper {
    background: #d4d4d4;
}

.fpd-main-wrapper .fpd-product-stage {
    background: #ffffff;
}

.fpd-views-wrapper .fpd-views-selection .fpd-view-active {
    border: 3px solid #2099e1;
}

.fpd-container input.show-as-checkbox {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;

    display: inline-block;
}

.fpd-container .fpd-tool-move-down + div {
    max-width: initial;
    width: 60px;
}

.fpd-container .fpd-tool-move-down + div {
    max-width: initial;
    width: 60px;
}

.fpd-container .fpd-splotchy-image-tools .fpd-tool-move-down + div {
    max-width: 100%;
    width: auto;
}

.toggle-buttons {
    display: flex;
}

.toggle-buttons button {
    font-size: 12px;

    flex: 1;

    padding: 3px 18px;
}

.toggle-buttons button.active {
    background: #cccccc;
}

.fpd-module .view-toggle-buttons {
    margin-bottom: 15px;
}

.fpd-module[data-module=splotchy-text] .restricted-view,
.fpd-module[data-module=splotchy-images] .restricted-view {
    display: none;
}

body .splotchy-universal-color-wheel {
    display: none;

    z-index: 390;
    
    background: #ffffff;
    border: 1px solid #cccccc;
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    transform: translate3d(-50%,-50%, 0);

    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.35);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.35);    
}

body .splotchy-universal-color-wheel .heading {
    background: #333;
    text-align: center;
    padding: 5px 0;
    position: relative;
    cursor: move;
}

body .splotchy-universal-color-wheel .heading h1,
body .splotchy-universal-color-wheel .heading h2,
body .splotchy-universal-color-wheel .heading h3,
body .splotchy-universal-color-wheel .heading h4,
body .splotchy-universal-color-wheel .heading h5,
body .splotchy-universal-color-wheel .heading h6 {
    color: #ffffff;
    margin: 0;
    padding: 0;
}

body .splotchy-universal-color-wheel .heading .close-button {
    color: #ffffff;

    position: absolute;
    top: 10px;
    right: 12px;
}

body .splotchy-universal-color-wheel .heading .close-button:after {
    cursor: pointer;

    content: "\f00d";

    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

body .splotchy-universal-color-wheel .content {
    display: flex;

    padding: 30px;
}

body .splotchy-universal-color-wheel .left-col {
    display: inline-block;
    width: 350px;
    margin-right: 30px;
}

body .splotchy-universal-color-wheel .right-col {
    display: inline-block;
}

body .fpd-container div .color-swatch {
    background: #000000;
    width: 25px;
    height: 25px;
    padding: 0;
    max-width: initial;
    margin: 0 5px;
    position: relative;
}

body .fpd-container div .color-swatch i {
    display: none;
    font-size: 12px;
    position: absolute;
    bottom: -15px;
    right: 44%;
}

body .splotchy-universal-color-wheel .color-palette-dropdown-wrapper {
    margin-bottom: 15px;
}
body .splotchy-universal-color-wheel .color-palette-dropdown-wrapper select {
    display: none;
}
.color-swatch-sample {
    pointer-events: none;
}

body .splotchy-universal-color-wheel .pantone-color-select-group {
    width: 230px;
    margin-top: 20px;
}

body .splotchy-universal-color-wheel .pantone-color-select-group input {
    background: #ffffff;
    border: 1px solid #cccccc;
}

body .splotchy-universal-color-wheel .color-swatches {
    display: flex;
    margin-bottom: 30px;
}

body .splotchy-universal-color-wheel .color-swatches .color-swatch.active {
    border: 3px solid #c8056e;
}

body .fpd-splotchy-color-palette-opener {
    color: #d61db7;

    cursor: pointer;

    font-size: 64px;

    margin-left: 5px;
}

/* sidebar background color button */
.fpd-icon-grid {
    width: 100%;
    height: 50px;
    background: url(../img/paint-can-white.svg) center center no-repeat;
}

.fpd-active .fpd-icon-grid {
    background: url(../img/paint-can-blue.svg) center center no-repeat;
}

.fpd-icon-grid:before {
    content: '';
}
.fpd-container>.fpd-main-wrapper {
    overflow: visible !important;
}
.fpd-splotchy-colors-group{
    text-align: center;
}
.fpd-splotchy-colors-group .fpd-tooltip {
    float: none !important;
    width: 30px !important;
    height: 30px !important;
    margin-right: 16px !important;
}