.RadColorPicker_CnMaterial .rcpPalette {
    background-color: var(--bg-color-main);
    border-color: var(--color-main_text-light);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16), 0 6px 6px rgba(0, 0, 0, 0.2);
}

.RadColorPicker_CnMaterial .rcpIcon ~ .rcpPalette {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.RadColorPicker_CnMaterial .rcpHeader {
    background-color: var(--bg-color-main-three);
}

.RadColorPicker_CnMaterial .rcpImageButton,
.RadColorPicker_CnMaterial a.rslDraghandle:before {
    color: #607D8B;
}

.RadColorPicker_CnMaterial .rcpImageButton:hover {
    color: #263238;
}

    .RadColorPicker_CnMaterial .rcpIcon em,
    .RadColorPicker_CnMaterial .rcpColorPreview,
    .RadColorPicker_CnMaterial .rcpInput,
    .RadColorPicker_CnMaterial .rcpHexInput,
    .RadColorPicker_CnMaterial .rcpMillionColorsPalette,
    .RadColorPicker_CnMaterial .rcpMillionColorsSlider div.rslTrack {
        border-color: var(--border-color-ctrl);
        color: var(--color-ctrl-default);
        background-color: transparent;
    }

        .RadColorPicker_CnMaterial .rcpIcon em:hover,
        .RadColorPicker_CnMaterial .rcpColorPreview:hover,
        .RadColorPicker_CnMaterial .rcpInput:hover,
        .RadColorPicker_CnMaterial .rcpHexInput:hover,
        .RadColorPicker_CnMaterial .rcpMillionColorsPalette:hover,
        .RadColorPicker_CnMaterial .rcpMillionColorsSlider div.rslTrack:hover {
            background-color: transparent;
            color: var(--color-ctrl-default);
            border-color: #90A4AE;
        }

        .RadColorPicker_CnMaterial .rcpIcon em:active,
        .RadColorPicker_CnMaterial .rcpColorPreview:active,
        .RadColorPicker_CnMaterial .rcpInput:active,
        .RadColorPicker_CnMaterial .rcpHexInput:active,
        .RadColorPicker_CnMaterial .rcpMillionColorsPalette:active,
        .RadColorPicker_CnMaterial .rcpMillionColorsSlider div.rslTrack:active,
        .RadColorPicker_CnMaterial .rcpIcon em:focus,
        .RadColorPicker_CnMaterial .rcpColorPreview:focus,
        .RadColorPicker_CnMaterial .rcpInput:focus,
        .RadColorPicker_CnMaterial .rcpHexInput:focus,
        .RadColorPicker_CnMaterial .rcpMillionColorsPalette:focus,
        .RadColorPicker_CnMaterial .rcpMillionColorsSlider div.rslTrack:focus {
            border-color: #8BC34A;
            color: var(--color-ctrl-default);
            background-color: transparent;
        }

    .RadColorPicker_CnMaterial .rcpIcon a,
    .RadColorPicker_CnMaterial .rcpTabs li,
    .RadColorPicker_CnMaterial .rcpButton {
        border: 0;
        border-color: var(--border-color-ctrl-default);
        color: var(--color-main_text) !important;
        padding: 6px 8px !important;
        /*background-color: var(--bg-color-main-three);*/
    }
.RadColorPicker .rcpIcon a {
    border-width: 1px 1px 2px 1px !important;
}
.RadColorPicker_CnMaterial .rcpIcon a:hover,
.RadColorPicker_CnMaterial .rcpTabs li:hover,
.RadColorPicker_CnMaterial .rcpButton:hover {
    border-color: var(--border-color-main-three);
    color: var(--color-main_text);
    background-color: var(--bg-color-main-three);
}

.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab,
.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab:hover {
    border-color: var(--border-color-ctrl);
    color: var(--color-ctrl-default);
    background-color: var(--bg-color-ctrl-selected);
}

.RadColorPicker_CnMaterial .rcpIcon a:focus {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.RadColorPicker_CnMaterial .rcpIcon a:active:before,
.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab a,
.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab:hover a {
    color: var(--color-ctrl-default);
}

.RadColorPicker_CnMaterial.rcpCustomColorWrapper {
    width: 28em !important;
    height: 21.2857142857em !important;
}

.RadColorPicker_CnMaterial.rcpCustomColorWrapper .rcpPalette {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.RadColorPicker_CnMaterial .rcpIcon,
.RadColorPicker_CnMaterial .rcpIcon a,
.RadColorPicker_CnMaterial .rcpButton {
    border-radius: 0.1428571429em;
}

.RadColorPicker_CnMaterial .rcpIcon a:before {
    right: 0.4642857143em;
}

.RadColorPicker_CnMaterial .rcpIcon a.t-ripple-effect {
    border: 0px solid transparent;
}

.RadColorPicker_CnMaterial .rcpIcon a.t-ripple-effect:before {
    right: 0.5em;
}

.RadColorPicker_CnMaterial .rcpViews,
.RadColorPicker_CnMaterial .rcpPageView {
    padding: 0;
}

.RadColorPicker_CnMaterial .rcpViews {
    margin: 0em 0em 0em -0.2142857143em;
    background-color: var(--bg-color-main);
}

.RadColorPicker_CnMaterial .rcpPalette {
    padding: 0;
    border-radius: 0.1428571429em 0.1428571429em 0em 0em;
    border: none;
}

.RadColorPicker_CnMaterial .rcpHeader {
    height: 3.4285714286em;
    margin: 0em 0em 0em -0.2142857143em;
    padding: 0;
    border: 0;
    border-radius: 0.1428571429em 0.1428571429em 0em 0em;
}

.RadColorPicker_CnMaterial .rcpColorPreview {
    width: 5.1428571429em;
    height: 3.4285714286em;
    border: 0;
}

.RadColorPicker_CnMaterial .rcpPalette .rcpHeader .rcpHexInput,
.RadColorPicker_CnMaterial .rcpPalette .rcpHeader .rcpInput {
    height: 3.2142857143em;
    padding: 0em 0.7142857143em;
}

.RadColorPicker_CnMaterial .rcpHexInput,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpHexInput {
    width: 5.7142857143em;
    border: 0;
    border-radius: 0;
}

.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpHexInput:hover,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpHexInput:active,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpHexInput:focus {
    background-color: transparent;
}

.RadColorPicker_CnMaterial .rcpImageButton {
    width: 3.4285714286em;
    height: 3.4285714286em;
    margin-left: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.RadColorPicker_CnMaterial .rcpImageButton:before {
    margin: auto;
    position: absolute;
    height: 1em;
    line-height: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.RadColorPicker_CnMaterial .rcpButton {
    overflow: hidden;
    height: 3.4285714286em;
    line-height: 3.4285714286em;
    margin: 0;
    padding: 0em 1.1428571429em;
    border: 0;
    border-radius: 0;
}

.RadColorPicker_CnMaterial .rcpPageView {
    margin: 0;
}

.RadColorPicker_CnMaterial .rcpRecentColorsWrapper {
    padding: 0.7142857143em 0em 0.7142857143em 0.7142857143em;
}

.RadColorPicker_CnMaterial .rcpRecentColorsWrapper .rcpRecentColorsLabel {
    padding: 0;
    color: #607D8B;
}

.RadColorPicker_CnMaterial .rcpRecentColorsWrapper .rcpRecentColors {
    padding: 0;
}

.RadColorPicker_CnMaterial .rcpTabs {
    left: -0.1428571429em;
    bottom: -3.4285714286em;
}

.RadColorPicker_CnMaterial .rcpTabs _::-moz-range-track, body:last-child .RadColorPicker_CnMaterial .rcpTabs {
    bottom: -3.5em;
}

.RadColorPicker_CnMaterial .rcpTabs ul {
    width: 100%;
}

    .RadColorPicker_CnMaterial .rcpTabs li {
        width: 25%;
        border-width: 2px 0 0;
        border-style: solid;
        border-color: var(--bg-color-main-three);
        padding: 0.8928571429em 0em;
        box-sizing: border-box;
        text-transform: uppercase;
        text-align: center;
        overflow: hidden;
    }

.RadColorPicker_CnMaterial .rcpTabs li:active,
.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab {
    border-color: #8BC34A;
    border-radius: 0;
}

    .RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab a,
    .RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab:hover a {
        color: var(--color-main_text);
    }

.RadColorPicker_CnMaterial .rcpTabs a,
.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab a {
    line-height: normal;
    background-image: none;
}

.RadColorPicker_CnMaterial .rcpTabs .rcpSelectedTab + li {
    margin: 1px 0 0;
}

.RadColorPicker_CnMaterial .rcpInput,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpInput {
    padding: 0;
    border-width: 0 0 1px;
    border-radius: 0;
}

.RadColorPicker_CnMaterial .rcpInput:active,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpInput:active,
.RadColorPicker_CnMaterial .rcpInput:focus,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial input.rcpInput:focus {
    border-width: 0 0 2px;
}

.RadColorPicker_CnMaterial .rcpSlider .rslTrack a.rslDraghandle:before {
    content: "";
    display: none;
}

.RadColorPicker_CnMaterial .rcpSlider .rslTrack a.rslDraghandle,
.RadColorPicker_CnMaterial .rcpSlider .rslTrack a.rslDraghandle:hover {
    width: 0.8571428571em;
    height: 0.8571428571em;
    border-radius: 3.2142857143em;
    background-color: #8BC34A;
    border-color: #8BC34A;
}

.RadColorPicker_CnMaterial .rcpSlider .rslTrack a.rslDraghandle:active {
    width: 1.2857142857em;
    height: 1.2857142857em;
}

.RadColorPicker_CnMaterial .rcpMillionColorsPalette,
.RadColorPicker_CnMaterial .rcpHsvPageView .rcpMillionColorsPalette {
    width: 21.8571428571em;
    height: 17.8571428571em;
    border: 0;
}

.RadColorPicker_CnMaterial div.rcpMillionColorsSlider {
    margin: 0.7142857143em 0em 0.7142857143em 1.2857142857em;
}

.RadColorPicker_CnMaterial .rcpMillionColorsPageView .rcpInputsWrapper {
    width: 4.2857142857em;
    margin: 0em 0em 0.3571428571em -1em;
}

.RadColorPicker_CnMaterial .rcpMillionColorsPageView .rcpInputsWrapper .rcpInput,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial .rcpMillionColorsPageView .rcpInputsWrapper input.rcpInput {
    width: 2.8571428571em;
    padding: 0.6071428571em 0em;
}

.RadColorPicker_CnMaterial .rcpPalette label, .RadColorPicker_CnMaterial .rcpRecentColorsLabel {
    line-height: 2.7142857143em;
}

.RadColorPicker_CnMaterial div.rcpMillionColorsSlider div.rslVertical .rslTrack {
    border: 0;
}

.RadColorPicker_CnMaterial div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle {
    width: 0.8571428571em;
    height: 0.8571428571em;
    border-radius: 3.2142857143em;
    background-color: #8BC34A;
    border-color: #8BC34A;
    margin-left: -0.3571428571em;
    text-indent: -9999px;
}

.RadColorPicker_CnMaterial div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle:active {
    width: 1.2857142857em;
    height: 1.2857142857em;
    margin-left: -0.5714285714em;
}

.RadColorPicker_CnMaterial div.rcpMillionColorsSlider div.rslVertical a.rslDraghandle:before {
    content: "";
}

.RadColorPicker_CnMaterial .rcpRGBPageView .rcpSlider {
    margin: 1em 0em 0em;
}

.RadColorPicker_CnMaterial .rcpRGBPageView ul li {
    margin-bottom: 0;
}

.RadColorPicker_CnMaterial .rcpRGBPageView label {
    padding: 0em 0em 0em 0.7142857143em;
    line-height: 3.4285714286em;
    color: #607D8B;
}

.RadColorPicker_CnMaterial .rcpRGBPageView .rcpInput,
.RadForm.rfdTextbox .RadColorPicker_CnMaterial .rcpRGBPageView input.rcpInput {
    width: 2.8571428571em;
    margin: 0em 0.7142857143em 0em 1.0714285714em;
    padding: 0.6071428571em 0em;
}

.RadColorPicker.RadColorPicker_CnMaterial .rcpIcon {
    padding: 7px 0;
    width: 5.1428571429em;
}

.RadColorPicker_CnMaterial .rcpIcon em {
    border: 0 none;
    height: 2.57143em;
    margin: -0.5714285714em 0em 0em;
    width: 2.57143em;
}

.RadColorPicker_CnMaterial .rcpEmptyColorPreview:before {
    content: "";
    margin: 24px 0 0 -12px;
    width: 100px;
    height: 2px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    background-color: #f34235;
}

.RadColorPicker_CnMaterial .rcpEmptyIcon em:before {
    content: "";
    margin: 0 0 0 -10px;
    width: 65px;
    height: 2px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    background-color: #f34235;
}

.RadColorPickerRTL .rcpEmptyColorPreview:before {
    margin: 33px -7px 0 6px;
    width: 101px;
}

.RadColorPickerRTL .rcpTabs ul {
    margin-right: 0.2em;
}

.RadColorPickerRTL .rcpEmptyIcon em:before {
    margin: 18px -12px 0 -10px;
}