/* Default custom select styles */
div.cs-select { display: inline-block; vertical-align: middle; position: relative; text-align: left; background: #fff; z-index: 100; width: 100%; max-width: 500px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

    div.cs-select:focus { outline: none; /* For better accessibility add a style for this in your skin */ }

.cs-select select { display: none; }

.cs-select span { display: block; position: relative; cursor: pointer; padding: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Placeholder and selected option */
.cs-select > span { padding-right: 3em; }

    .cs-select > span::after,
    .cs-select .cs-selected span::after { speak: none; position: absolute; top: 50%; /*top: 29px; left: -3px;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    .cs-select > span::after { content: '\25BE'; right: 1em; }

.cs-select .cs-selected span::after { content: '\2713'; margin-left: 1em; }

.cs-select.cs-active > span::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }

div.cs-active { z-index: 200; }

/* Options */
.cs-select .cs-options { position: absolute; overflow: hidden; width: 100%; background: #fff; visibility: hidden; }

.cs-select.cs-active .cs-options { visibility: visible; }

.cs-select ul { list-style: none; margin: 0; padding: 0; width: 100%; }

    .cs-select ul span { padding: 1em; }

    .cs-select ul li.cs-focus span { background-color: #ddd; }

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul { padding-left: 1em; }

.cs-select li.cs-optgroup > span { cursor: default; }