﻿

.theme-chooser {
    padding-left: 15px
}

    .theme-chooser > div, .theme-chooser span {
        vertical-align: middle;
        display: inline-block
    }

    .theme-chooser > div {
        width: 26px;
        height: 24px
    }

    .theme-chooser span {
        padding-left: 9px
    }

        .theme-chooser span.dx-textbox {
            padding-left: 0
        }

    .theme-chooser > div {
        width: 26px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center
    }

        .theme-chooser > div.light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/light.svg)
        }

        .theme-chooser > div.dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/dark.svg)
        }

        .theme-chooser > div.contrast {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/contrast.svg)
        }

        .theme-chooser > div.softblue {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/softblue.svg)
        }

        .theme-chooser > div.carmine {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/carmine.svg)
        }

        .theme-chooser > div.darkmoon {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/darkmoon.svg)
        }

        .theme-chooser > div.darkviolet {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/darkviolet.svg)
        }

        .theme-chooser > div.greenmist {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/greenmist.svg)
        }

        .theme-chooser > div.light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/light.compact.svg)
        }

        .theme-chooser > div.dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/dark.compact.svg)
        }

        .theme-chooser > div.contrast-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/contrast.compact.svg)
        }

        .theme-chooser > div.material-blue-light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.blue.light.svg)
        }

        .theme-chooser > div.material-blue-dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.blue.dark.svg)
        }

        .theme-chooser > div.material-lime-light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.lime.light.svg)
        }

        .theme-chooser > div.material-lime-dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.lime.dark.svg)
        }

        .theme-chooser > div.material-orange-light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.orange.light.svg)
        }

        .theme-chooser > div.material-orange-dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.orange.dark.svg)
        }

        .theme-chooser > div.material-purple-light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.purple.light.svg)
        }

        .theme-chooser > div.material-purple-dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.purple.dark.svg)
        }

        .theme-chooser > div.material-teal-light {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.teal.light.svg)
        }

        .theme-chooser > div.material-teal-dark {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.teal.dark.svg)
        }

        .theme-chooser > div.material-blue-light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.blue.light.compact.svg)
        }

        .theme-chooser > div.material-blue-dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.blue.dark.compact.svg)
        }

        .theme-chooser > div.material-lime-light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.lime.light.compact.svg)
        }

        .theme-chooser > div.material-lime-dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.lime.dark.compact.svg)
        }

        .theme-chooser > div.material-orange-light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.orange.light.compact.svg)
        }

        .theme-chooser > div.material-orange-dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.orange.dark.compact.svg)
        }

        .theme-chooser > div.material-purple-light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.purple.light.compact.svg)
        }

        .theme-chooser > div.material-purple-dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.purple.dark.compact.svg)
        }

        .theme-chooser > div.material-teal-light-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.teal.light.compact.svg)
        }

        .theme-chooser > div.material-teal-dark-compact {
            background-image: url(https://js.devexpress.com/Demos/WidgetsGallery/Content/Images/Themes/material.teal.dark.compact.svg)
        }