/* option to hide colors on the palette to create line breaks */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpPalette .rcpColorBox[title="hidden"] {
    visibility: hidden;
}

/* spacing under the first row */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpPalette .rcpWebPalette > li:nth-child(1) {
    margin-bottom: 3px;
}

/* the color picker's width property creates wrapping issues at different screen sizes, so setting palette size in css works better */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpPalette .rcpColorBox > span {
    height: 1.4em !important;
    width: 1.4em !important;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpPalette .rcpSelectedColor {
    border-color: rgba(102,102,102,0.6);
    box-shadow: rgba(255,255,255,0.8) inset;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpPalette .rcpSelectedColor > span {
    height: 1.4em !important;
    width: 1.4em !important;
}

/* height and width sizing */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro {
    height: 100%;
    width: 100%;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon {
    padding: 0;
    height: 100%;
    width: 100%;
    min-width: initial;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon > em {
    width: calc(100% - 18px);
    height: calc(100% - 2px);
    margin: 0;
    border-width: 1px;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon > a {
    height: calc(100% - 2px);
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: initial;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon > a:before {
    right: 0em;
}

/* disabled */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro.rcpDisabled > .rcpIcon > em {
    width: 100%;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro.rcpDisabled a:hover {
    background-color: #f9f9f9;
    border-color: #e0dfdf;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro.rcpDisabled a:focus {
    box-shadow: none;
}

.IPT1ColPick .RadColorPicker.RadColorPicker_Metro.rcpDisabled a:active {
    background-color: #f9f9f9;
    border-color: #e0dfdf;
    color: #000;
}

/* empty icon */
.IPT1ColPick .RadColorPicker.RadColorPicker_Metro .rcpEmptyIcon em:before {
    position: absolute;
    top: 50%;
    right: 50%;
    margin: 0;
    padding-right: 4px;
    transform: rotate(0deg) translate(50%, -50%) scale(6);
}

/* fix for when in a grid */
.rgRow .IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon > em,
.rgAltRow .IPT1ColPick .RadColorPicker.RadColorPicker_Metro > .rcpIcon > em {
    left: 0;
    right: 0;
}