/* CSS styles for the tool */
.img_bg {
    min-height: 230px;
    border: 1px solid #e9e9e9;
}
@media (max-width: 992px) {
    .img_bg {
        min-height: 544px;
    }
}
label {
    display: block;
}
#blue,
#green,
#red {
    float: left;
    clear: left;
    height: 12px;
    width: 100%;
    margin: 6px;
    -webkit-box-shadow: inset 0px 3px 6px 0px rgba(179, 172, 179, 0.5);
    -moz-box-shadow: inset 0px 3px 6px 0px rgba(179, 172, 179, 0.5);
    box-shadow: inset 0px 3px 6px 0px rgba(179, 172, 179, 0.5);
    border-radius: 5px;
}

#swatch {
    width: 100%;
    height: 130px;
    margin: 0px;
}

@media (max-width: 996px) {
    .po30 {
        padding: 0 0 30px 0;
    }
}

#red .ui-slider-handle,
#green .ui-slider-handle,
#blue .ui-slider-handle {
    background: #f6f6f6; /* Old browsers */
    background: -moz-linear-gradient(
        top,
        #f6f6f6 1%,
        #bdbdbd 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        #f6f6f6 1%,
        #bdbdbd 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        #f6f6f6 1%,
        #bdbdbd 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#bdbdbd', GradientType=0); /* IE6-9 */
}

#red .ui-slider-range {
    background: #ef2929;
}

#red .ui-slider-handle {
    border: 2px solid #8f8b8b;
    border-radius: 10px;
    outline: none;
}

#green .ui-slider-range {
    background: #8ae234;
}

#green .ui-slider-handle {
    border: 2px solid #8f8b8b;
    border-radius: 10px;
    outline: none;
}

#blue .ui-slider-range {
    background: #729fcf;
}

#blue .ui-slider-handle {
    border: 2px solid #8f8b8b;
    border-radius: 10px;
    outline: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #aaaaaa;
    background: #ffffff !important;
    font-weight: normal;
    color: #212121;
    outline: none;
}

.rgb_input {
    border: 1px solid #cbc9c9;
    text-align: center;
    outline: none;
    width: 40px;
    margin-left: 12px;
}

.rgb-input {
    min-height: 167px;
}

.prn {
    padding-right: 0;
}

@media (max-width: 996px) {
    .prn {
        padding-left: 0;
        padding-right: 0;
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.rgb-colorP {
    border: 2px dotted #aaa !important;
}

#why {
    display: none;
    position: relative;
}

#why textarea {
    font-size: 12px;
    height: 70px;
}

#why button {
    padding: 0 5px;
    position: absolute;
    bottom: -8px;
    right: -5px;
}
.rgbc-title {
    display: block;
    clear: both;
    margin: 10px 0 5px 0;
    font-weight: 700;
}