.SlectBox { width: 140px; padding: 5px 8px; font-size: 14px; color: #9e9e9e; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
/*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
.SelectClass { position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; border: none; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.SumoSelect > .optWrapper > .options > li label, .SumoSelect > .CaptionCont { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
.SumoSelect { display: inline-block; position: relative; outline: none; }
.SumoSelect > .CaptionCont { position: relative; background: #fff;   box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-shadow: 0px 0px 7px #b3b3b3;
  -webkit-box-shadow: 0px 0px 7px #b3b3b3;
  -moz-box-shadow: 0px 0px 7px #b3b3b3;
  -ms-box-shadow: 0px 0px 7px #b3b3b3;
  -o-box-shadow: 0px 0px 7px #b3b3b3; padding: 10px;}
.SumoSelect > .CaptionCont > span { display: block; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: default; }
/*placeholder style*/
.SumoSelect > .CaptionCont > span.placeholder { color: #ccc; font-style: italic; }
.SumoSelect > .CaptionCont > label { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 30px; }
.SumoSelect > .CaptionCont > label > i { background:url(../images/select-icon.png); background-position: center center; width: 16px; height: 16px; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; background-repeat: no-repeat; opacity: 0.8; }
.SumoSelect > .optWrapper { top: 30px; width: 100%; position: absolute; left: 0; opacity: 0; visibility: visible; transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -moz-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -ms-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -o-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -100; background: #fff; border: 1px solid #ddd; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.11); overflow: hidden; }
.SumoSelect > .optWrapper.open { top: 38px; visibility: visible; opacity: 1; z-index: 1000; }
.SumoSelect > .optWrapper > .options { list-style: none; display: block; padding: 0px; margin: 0px; overflow: auto; /* max-height: 250px;*/ }
.SumoSelect > .optWrapper.isFloating > .options { max-height: 100%; box-shadow: 0px 0px 100px #595959; }
.SumoSelect > .optWrapper > .options > li { padding: 8px 6px; border-bottom: 1px solid #F3F3F3; position: relative; }

.SumoSelect > .optWrapper > .options > li:last-child { border-bottom: none; }
.SumoSelect > .optWrapper > .options > li:hover { background-color: #E4E4E4; }
.SumoSelect > .optWrapper > .options > li.sel { background-color: #a1c0e4; }
.SumoSelect > .optWrapper > .options > li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; cursor: pointer; font-size:13px;   width: 100%; }
.SumoSelect > .optWrapper > .options > li span { display: none; }
/*Floating styles*/
.SumoSelect > .optWrapper.isFloating { position: fixed; top: 0px; left: 0px; right: 0px; width: 90%; bottom: 0px; margin: auto; max-height: 90%; }