.RadColorPicker {
  width: 37px;
  font-size: 1px;
  text-align: left;
  /* color picker button */
  /* preview panel */
  /* no color button */
  /* apply color button */
  /* color picker tabs */
  /* WebPalette color buttons */
  /* prevents overlapping LI elements in IE7 and IE8 Compatibility view */
  /* Opera */
  /* RGBSliders palette */
  /* Million colors palettes */
  /* HSB Mode palette */
  /* HSB specific */
  /* HSV specific */
  /* MillionsOfColors color picker */
  /* The B input in IE6 pushes the V input down, even though the V LI has display:none */
  /* ColorBox Styles */
  /* color picker button */
  /* rcp header */
  /* color picker tabs */
  /* apply color button */
  /* HSB, HSV palette handle */
  /* HSB, HSV slider handle */
  /* Rounded corners and shadows */
  /* Overwriting RadSlider styles */ }
  .RadColorPicker .rcpPalette {
    position: relative;
    padding-left: 4px;
    margin: 0 4px 4px -5px;
    background-position: top left;
    background-repeat: no-repeat;
    _border: none; }
  .RadColorPicker .rcpDisabled .rcpPalette,
  .RadColorPicker .rcpDisabled .rcpIcon a,
  .RadColorPicker .rcpDisabled .rcpIcon em {
    opacity: .3;
    filter: alpha(opacity=30); }
  .RadColorPicker .rcpPalette,
  .RadColorPicker .rcpTabs,
  .RadColorPicker .rcpHeader,
  .RadColorPicker .rcpWebPalette,
  .RadColorPicker .rcpRGBPageView ul,
  .RadColorPicker .rcpMillionColorsPageView,
  .RadColorPicker .rcpInputsWrapper ul,
  .RadColorPicker .rcpRecentColors {
    zoom: 1; }
  .RadColorPicker .rcpPalette:after,
  .RadColorPicker .rcpTabs:after,
  .RadColorPicker .rcpHeader:after,
  .RadColorPicker .rcpWebPalette:after,
  .RadColorPicker .rcpRGBPageView ul:after,
  .RadColorPicker .rcpMillionColorsPageView:after,
  .RadColorPicker .rcpInputsWrapper ul:after,
  .RadColorPicker .rcpRecentColors:after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden; }
  .RadColorPicker ul,
  .RadColorPicker ul li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    height: auto;
    display: block; }
  .RadColorPicker a {
    outline: none;
    text-decoration: none;
    moz-user-select: none; }
  .RadColorPicker .rcpTabs,
  .RadColorPicker .rcpHexInput,
  .RadColorPicker .rcpInput,
  .RadColorPicker label,
  .RadColorPicker .rcpButton,
  .RadColorPicker .rcpRecentColorsLabel {
    font: normal 12px "Segoe UI", Arial, Sans-serif; }
  .RadColorPicker .rcpPalette label,
  .RadColorPicker .rcpRecentColorsLabel {
    width: 12px;
    padding-right: 3px;
    line-height: 22px;
    text-align: right; }
  .RadColorPicker .rcpIcon,
  .RadColorPicker .rcpIcon a {
    width: 37px;
    height: 22px;
    display: block;
    overflow: hidden; }
  .RadColorPicker .rcpIcon {
    position: relative;
    /* Otherwise in Opera in rtl mode, the absolute A and EM are not positioned correctly. */ }
  .RadColorPicker .rcpIcon a,
  .RadColorPicker .rcpIcon em {
    position: absolute;
    text-indent: -9999px; }
  .RadColorPicker .rcpIcon a {
    z-index: 9;
    cursor: default; }
  .RadColorPicker .rcpIcon em {
    z-index: 8;
    width: 12px;
    height: 12px;
    margin: 5px 0 0 5px;
    _z-index: 10 !important;
    _line-height: 12px; }
  .RadColorPicker .rcpColorPreview,
  .RadColorPicker .rcpInput,
  .RadColorPicker .rcpHexInput,
  .RadColorPicker .rcpMillionColorsPalette,
  .RadColorPicker .rcpMillionColorsSlider div.rslTrack {
    border: 1px solid; }
  .RadColorPicker .rcpHeader {
    padding: 5px 1px 9px; }
  .RadColorPicker .rcpEmptyHeader {
    padding: 3px 1px 0; }
  .RadColorPicker .rcpColorPreview {
    width: 33px;
    height: 20px;
    float: left;
    margin-right: 1px; }
  .RadColorPicker .rcpPalette .rcpHeader .rcpHexInput,
  .RadColorPicker .rcpPalette .rcpHeader .rcpInput {
    height: 19px;
    line-height: 19px;
    display: block;
    padding: 1px 1px 0 1px;
    text-transform: lowercase;
    text-align: left;
    cursor: default; }
  .RadColorPicker .rcpHexInput, .RadForm.rfdTextbox .RadColorPicker input.rcpHexInput {
    width: 50px;
    float: left; }
  .RadColorPicker input.rcpHexInput[readonly] {
    background: none;
    border: 1px solid transparent; }
  .RadColorPicker .rcpInput, .RadForm.rfdTextbox .RadColorPicker input.rcpInput {
    width: 22px; }
  .RadColorPicker .rcpHeader .rcpImageButton {
    width: 22px;
    height: 22px;
    display: block;
    float: left;
    cursor: pointer;
    margin-left: 2px; }
  .RadColorPicker .rcpImageButton span {
    display: block;
    height: 22px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1px;
    text-indent: -99999px; }
  .RadColorPicker .rcpButton {
    display: block;
    width: 50px;
    height: 22px;
    text-align: center;
    padding-right: 6px;
    float: right;
    margin-left: 2px;
    cursor: default;
    white-space: nowrap; }
  .RadColorPicker .rcpButton span {
    display: block;
    line-height: 22px;
    padding-left: 6px; }
  .RadColorPicker .rcpTabs {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -29px;
    /* The position should be the Tabs height (26px by design) + the height of the bottom shadow (5px by design) -2px in order to cover the bottom border */
    left: 9px;
    _bottom: -28px; }
  .RadColorPicker .rcpTabs ul {
    float: left; }
  .RadColorPicker .rcpTabs ul li {
    float: left;
    margin: -2px 0 0 -1px;
    _margin-left: 0; }
  .RadColorPicker .rcpTabs ul li.rcpSelectedTab {
    margin-top: 0; }
  .RadColorPicker .rcpTabs ul li a {
    display: block;
    background-position: right top;
    padding-right: 6px;
    cursor: default; }
  .RadColorPicker .rcpTabs ul li a span {
    display: block;
    padding-left: 6px;
    line-height: 26px;
    white-space: nowrap; }
  .RadColorPicker .rcpPageView {
    padding: 1px; }
  .RadColorPicker .rcpRecentColors {
    padding: 10px 1px 0 1px; }
  .RadColorPicker .rcpPalette .rcpRecentColorsLabel {
    padding: 0 1px; }
  .RadColorPicker .rcpWebPalette li,
  .RadColorPicker .rcpRecentColors li {
    float: left; }
  .RadColorPicker .rcpRecentColors li {
    margin: 0 2px 2px 0;
    width: 12px;
    height: 12px; }
  .RadColorPicker .rcpWebPalette li {
    *margin-bottom: 0; }
  .RadColorPicker .rcpColorBox,
  .RadColorPicker .rcpSelectedColor {
    cursor: pointer;
    display: block; }
  .RadColorPicker .rcpColorBox span,
  .RadColorPicker .rcpSelectedColor span,
  .RadColorPicker .rcpRecentColors span {
    line-height: 1px;
    width: 12px;
    display: block;
    padding: 1px;
    text-indent: -9999px;
    overflow: hidden; }
  .RadColorPicker .rcpRecentColors span {
    width: 10px;
    height: 10px; }
  @media screen and (min-width:550px) {
    .RadColorPicker .rcpRecentColors li {
      width: 12px; } }
  .RadColorPicker .rcpWebPalette .rcpBreakLine {
    float: none;
    clear: both;
    height: 1px;
    line-height: 1px;
    margin-bottom: -1px;
    overflow: hidden; }
  .RadColorPicker .rcpRGBPageView ul li {
    float: left;
    margin-bottom: 2px; }
  .RadColorPicker .rcpRGBPageView .rcpInput {
    float: left;
    margin-left: 10px; }
  .RadColorPicker .rcpRGBPageView ul li label,
  .RadColorPicker .rcpSlider {
    float: left; }
  .RadColorPicker .rcpHsbPageView .rcpVInputWrapper {
    display: none; }
  .RadColorPicker .rcpMillionColorsPalette {
    width: 256px;
    height: 160px;
    overflow: visible;
    position: relative;
    float: left;
    cursor: crosshair; }
  .RadColorPicker .rcpHsbPageView .rcpMillionColorsPalette {
    background: black url('Common/hsbPalette.jpg') no-repeat left top; }
  .RadColorPicker .rcpHsbPageView .rcpMillionColorsSlider div.rslTrack {
    background: white url('Common/hsbSlider.png') no-repeat center center; }
  .RadColorPicker .rcpHsvPageView .rcpMillionColorsPalette {
    background: red url('Common/hsvPalette.png') no-repeat left top;
    width: 160px; }
  .RadColorPicker .rcpHsvPageView .rcpMillionColorsSlider div.rslTrack {
    background: white url('Common/hsvSider.jpg') no-repeat left top; }
  .RadColorPicker div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle {
    width: 8px;
    height: 8px;
    line-height: 8px;
    margin-left: 13px;
    cursor: s-resize; }
  .RadColorPicker div.RadSliderRTL div.rslVertical a.rslDraghandle {
    *margin-left: 0;
    *margin-right: -5px; }
  .RadColorPicker .rcpHsvPageView .rcpLInputWrapper {
    display: none; }
  .RadColorPicker .rcpMillionColorsSlider {
    float: left;
    margin: 0 0 0 5px; }
  .RadColorPicker .rcpMillionColorsSlider div.rslTrack {
    width: 12px;
    left: -2px; }
  .RadColorPicker .rcpMillionColorsSlider div.rslSelectedregion {
    width: 12px;
    background: transparent none; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper {
    float: left;
    width: 45px;
    margin-left: 10px; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper li {
    float: right;
    margin-bottom: 2px; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper label {
    float: left; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper .rcpInput {
    float: right; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper .rcpMillionColorsInputs {
    margin-top: 5px; }
  .RadColorPicker .rcpMillionColorsHandle {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 0;
    left: 0;
    cursor: crosshair;
    /* improves drag&drop in mobile browsers */
    -webkit-transform: rotate3d(0, 0, 1, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-transform: rotate3d(0, 0, 1, 0);
    -moz-backface-visibility: hidden;
    -moz-perspective: 1000;
    -o-transform: rotate3d(0, 0, 1, 0);
    -o-backface-visibility: hidden;
    -o-perspective: 1000;
    -ie-transform: rotate3d(0, 0, 1, 0);
    -ie-backface-visibility: hidden;
    -ie-perspective: 1000; }
  .RadColorPicker .rcpBreakLine {
    *margin-top: -2px; }
  .RadColorPicker .rcpButton {
    _display: inline; }
  .RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper li {
    _float: none; }
  .RadColorPicker .rcpColorBox,
  .RadColorPicker .rcpColorBox span,
  .RadColorPicker .rcpSelectedColor,
  .RadColorPicker .rcpSelectedColor span {
    background-image: url('Common/rcpBorderSprite.png');
    _background-image: url('Common/rcpBorderSprite.gif');
    border: 0 none; }
  .RadColorPicker .rcpColorBox {
    background-position: right top; }
  .RadColorPicker .rcpColorBox span {
    background-position: left bottom; }
  .RadColorPicker .rcpSelectedColor,
  .RadColorPicker .rcpColorBox:hover,
  .RadColorPicker .rcpColorBox:focus,
  .RadColorPicker .rcpColorBox:active {
    background-position: right bottom; }
  .RadColorPicker .rcpSelectedColor span,
  .RadColorPicker .rcpColorBox span:hover,
  .RadColorPicker .rcpColorBox span:focus,
  .RadColorPicker .rcpColorBox span:active {
    background-position: left top; }
  .RadColorPicker .rcpEmptyColor {
    background-position: right -52px; }
  .RadColorPicker .rcpCustomColorButton {
    background-position: -979px -52px; }
  .RadColorPicker .rcpRecentColors {
    background-position: 0 -331px; }
  .RadColorPicker .rcpIcon a {
    background-position: 0 -52px; }
  .RadColorPicker .rcpIcon a:hover {
    background-position: 0 -74px; }
  .RadColorPicker .rcpIcon a:active,
  .RadColorPicker .rcpIcon a:focus {
    background-position: 0 -96px; }
  .RadColorPicker .rcpHeader {
    background-position: 0 -199px; }
  .RadColorPicker .rcpTabs {
    background-position: 0 -169px; }
  .RadColorPicker .rcpTabs .rcpSelectedTab a {
    background-position: right -289px; }
  .RadColorPicker .rcpTabs .rcpSelectedTab a span {
    background-position: left -26px; }
  .RadColorPicker .rcpButton {
    background-position: right -118px; }
  .RadColorPicker .rcpButton:hover,
  .RadColorPicker .rcpButton:focus,
  .RadColorPicker .rcpButton:active {
    background-position: right -140px; }
  .RadColorPicker .rcpButton span {
    background-position: 0 -118px; }
  .RadColorPicker .rcpButton:hover span,
  .RadColorPicker .rcpButton:focus span,
  .RadColorPicker .rcpButton:active span {
    background-position: 0 -140px; }
  .RadColorPicker .rcpMillionColorsHandle {
    background-position: -1010px -76px;
    background-color: transparent; }
  .RadColorPicker div.rcpMillionColorsHandle {
    _background-image: url('Common/rcpCrossHair.gif');
    _background-position: 0 0; }
  .RadColorPicker div.rcpMillionColorsSlider div.rslVertical .rslTrack a.rslDraghandle {
    background-position: -1018px -90px; }
  .RadColorPicker .rcpRoundedRight,
  .RadColorPicker .rcpRoundedBottomRight,
  .RadColorPicker .rcpRoundedBottomLeft,
  .RadColorPicker .rcpRightShadow,
  .RadColorPicker .rcpCornerShadow,
  .RadColorPicker .rcpBottomShadow {
    position: absolute;
    background-repeat: no-repeat; }
  .RadColorPicker .rcpRoundedRight {
    width: 4px;
    height: 100%;
    right: -4px;
    top: 0;
    background-position: -6px top; }
  .RadColorPicker .rcpRoundedBottomRight {
    width: 5px;
    _width: 9px;
    height: 5px;
    right: -5px;
    bottom: -5px;
    background-position: -6px -1996px; }
  .RadColorPicker .rcpRoundedBottomLeft {
    width: 100%;
    height: 4px;
    bottom: -4px;
    left: 0;
    background-position: 0 -315px;
    _background-position: -26px bottom; }
  .RadColorPicker .rcpRightShadow {
    top: 0;
    right: -9px;
    width: 5px;
    height: 100%;
    background-position: -15px top; }
  .RadColorPicker .rcpCornerShadow {
    bottom: -9px;
    right: -9px;
    _right: -9px;
    width: 9px;
    height: 9px;
    background-position: -27px top; }
  .RadColorPicker .rcpBottomShadow {
    bottom: -9px;
    left: 0;
    width: 100%;
    height: 5px;
    background-position: left -325px; }
  .RadColorPicker .rcpSlider div.rslHorizontal .rslTrack a.rslDraghandle {
    background-position: right -100px;
    width: 7px;
    height: 4px;
    line-height: 10px;
    margin-top: 7px; }
  .RadColorPicker .rcpSlider .rslHorizontal .rslTrack {
    background-repeat: no-repeat;
    height: 14px;
    top: 9px;
    border: 0 none; }
  .RadColorPicker .rcpRedSlider .rslHorizontal .rslTrack,
  .RadColorPicker .rcpRedSlider .rslHorizontal .rslSelectedregion {
    background-position: center -244px; }
  .RadColorPicker .rcpGreenSlider .rslHorizontal .rslTrack,
  .RadColorPicker .rcpGreenSlider .rslHorizontal .rslSelectedregion {
    background-position: center -258px; }
  .RadColorPicker .rcpBlueSlider .rslHorizontal .rslTrack,
  .RadColorPicker .rcpBlueSlider .rslHorizontal .rslSelectedregion {
    background-position: center -273px; }

/* Right to left support for the show/hide icon */
.RadColorPickerRTL {
  /* IE6 draghande position in RTL */
  /* IE6 fix - the R, G, B inputs do not show */ }
  .RadColorPickerRTL,
  .RadColorPickerRTL .rcpInput,
  .RadColorPickerRTL .rcpHexInput {
    text-align: right; }
  .RadColorPickerRTL .rcpIcon a {
    -moz-transform: scaleX(-1);
    /*firefox*/
    -o-transform: scaleX(-1);
    /*opera*/
    -webkit-transform: scaleX(-1);
    /*safari and chrome*/
    filter: fliph;
    /*IE*/
    transform: scaleX(-1);
    /*all browsers when support is provided*/
    _margin-right: 1px; }
  .RadColorPickerRTL .rcpIcon em {
    margin: 5px 5px 0 0; }
  .RadColorPickerRTL .rcpRGBPageView .rcpInput {
    margin: 0 0 0 5px; }
  .RadColorPickerRTL .rcpRGBPageView .rcpInput,
  .RadColorPickerRTL .rcpRGBPageView ul li labe, .RadColorPickerRTL l
  .rcpColorPreview,
  .RadColorPickerRTL .rcpHexInput,
  .RadColorPickerRTL .rcpHeader .rcpImageButton,
  .RadColorPickerRTL .rcpTabs ul,
  .RadColorPickerRTL .rcpTabs ul li,
  .RadColorPickerRTL div.rcpMillionColorsPalette,
  .RadColorPickerRTL div.rcpMillionColorsSlider {
    float: right; }
  .RadColorPickerRTL .rcpTabs ul {
    margin-right: 13px;
    _width: 100%;
    _float: left; }
  .RadColorPickerRTL .rcpInputsWrapper {
    _float: right;
    _margin-left: 15px; }
  .RadColorPickerRTL div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle {
    _right: -4px; }
  .RadColorPickerRTL .rcpColorPreview {
    margin: 0 0 0 1px; }
  .RadColorPickerRTL .rcpHexInput,
  .RadColorPickerRTL .rcpHeader .rcpImageButton {
    margin: 0 0 0 2px; }
  .RadColorPickerRTL .rcpSlider,
  .RadColorPickerRTL .rcpButton {
    float: left; }
  .RadColorPickerRTL .rcpRGBPageView ul li {
    _width: 100%; }
  .RadColorPickerRTL div.rcpMillionColorsSlider {
    margin: 0 5px 0 0; }
  .RadColorPickerRTL .rcpMillionColorsPageView .rcpInputsWrapper {
    margin-left: 0;
    *margin-left: -20px; }
  .RadColorPickerRTL .rcpMillionColorsPageView .rcpInputsWrapper label {
    float: right; }
  .RadColorPickerRTL .rcpEmptyColor {
    background-position: -1002px -52px; }

/* Custom color */
div.RadColorPicker.rcpCustomColorWrapper {
  width: 345px;
  height: 207px;
  padding: 0px;
  background-image: none; }


.RadColorPicker_EHB {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  /* Rounded corners and shadows */ }
  .RadColorPicker_EHB .rcpViews,
  .RadColorPicker_EHB .rcpHeader,
  .RadColorPicker_EHB .rcpPageView {
    background-color: #f1f5fb; }
  .RadColorPicker_EHB .rcpColorPreview,
  .RadColorPicker_EHB .rcpInput,
  .RadColorPicker_EHB .rcpHexInput,
  .RadColorPicker_EHB .rcpMillionColorsPalette,
  .RadColorPicker_EHB .rcpMillionColorsSlider div.rslTrack {
    background-color: white;
    border-color: #b8cbde; }
  .RadColorPicker_EHB .rcpPalette,
  .RadColorPicker_EHB input,
  .RadColorPicker_EHB a {
    color: black; }
  .RadColorPicker_EHB .rcpHeader,
  .RadColorPicker_EHB .rcpHeader .rcpImageButton,
  .RadColorPicker_EHB .rcpRecentColors,
  .RadColorPicker_EHB .rcpIcon a,
  .RadColorPicker_EHB .rcpTabs a,
  .RadColorPicker_EHB .rcpTabs a span,
  .RadColorPicker_EHB .rcpButton,
  .RadColorPicker_EHB .rcpButton span,
  .RadColorPicker_EHB .rcpMillionColorsHandle,
  .RadColorPicker_EHB .rcpSlider div.rslTrack,
  .RadColorPicker_EHB .rcpSlider .rslTrack a.rslDraghandle,
  .RadColorPicker_EHB div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle {
    background-image: url('ColorPicker/ColorPickerSprites.png');
    background-repeat: no-repeat; }
  .RadColorPicker_EHB .rcpPalette,
  .RadColorPicker_EHB .rcpRoundedRight,
  .RadColorPicker_EHB .rcpRoundedBottomRight,
  .RadColorPicker_EHB .rcpRightShadow,
  .RadColorPicker_EHB .rcpCornerShadow {
    background-image: url('ColorPicker/rcpVerticalSprites.png'); }
  .RadColorPicker_EHB .rcpRoundedBottomLeft,
  .RadColorPicker_EHB .rcpBottomShadow {
    background-image: url('ColorPicker/ColorPickerSprites.png'); }
  .RadColorPicker_EHB .rcpPalette,
  .RadColorPicker_EHB .rcpRoundedRight,
  .RadColorPicker_EHB .rcpRoundedBottomRight,
  .RadColorPicker_EHB .rcpRoundedBottomLeft {
    _background-image: url('ColorPicker/rcpVerticalSpritesIE6.png'); }

