.SumoSelect {vertical-align:top;}
.SumoSelect p {margin:0}
.SumoSelect .SlectBox {width:200px;padding:5px 8px 4px 8px;font-size:14px;line-height:16px;}

/* 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:focus > .CaptionCont,.SumoSelect:hover > .CaptionCont {box-shadow:0px 0px 2px #7799d0;border-color:#7799d0}
    .SumoSelect > .CaptionCont {position:relative;border:0;border-bottom:2px solid #ddd;min-height:14px;background-color:#fff;border-radius:2px;margin:0px}
        .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}

        .SumoSelect > .CaptionCont > label {position:absolute;top:0px;right:0px;bottom:0px;width:30px}
            .SumoSelect > .CaptionCont > label > i {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=');
                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:20px;width:100%;position:absolute;left:0;opacity:0;visibility:hidden;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);border-radius:3px;overflow:hidden}
		.sf-theme-dark .SumoSelect {color:#666}
        .SumoSelect > .optWrapper.open {top:25px;visibility:visible;opacity:1;z-index:1000}

        /* Set the height of pop up here (only for desktop mode) */
        .SumoSelect > .optWrapper > .options {list-style:none;display:block;padding:0px;margin:0px;overflow:auto;border-radius:2px;max-height:250px;} /* height */ 
        .SumoSelect > .optWrapper.isFloating > .options {max-height:100%;box-shadow:0px 0px 100px #595959}
        .SumoSelect > .optWrapper > .options > li {padding:6px 6px;border-bottom:1px solid #F3F3F3;position:relative}
            .SumoSelect > .optWrapper > .options > li:first-child {border-radius:2px 2px 0px 0px}
            .SumoSelect > .optWrapper > .options > li:last-child {border-bottom:none;border-radius:0px 0px 2px 2px}
            .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}
            .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%}

    /* .SumoSelect:} > .CaptionCont > label {background-color:#F1F1F1} */
    /* disabled state */
    .SumoSelect > .optWrapper > .options > li.disabled {background-color:inherit;pointer-events:none}
        .SumoSelect > .optWrapper > .options > li.disabled * {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 5-7 */ filter:alpha(opacity=50);/* Netscape */ -moz-opacity:0.5;/* Safari 1.x */ -khtml-opacity:0.5;/* Good browsers */ opacity:0.5}
    /* styling for multiple select */
    .SumoSelect > .optWrapper.multiple > .options > li {padding-left:35px;cursor:pointer}
        .SumoSelect > .optWrapper.multiple > .options > li span,
        .SumoSelect .select-all > span{position:absolute;display:block;width:30px;top:0px;bottom:0px;margin-left:-35px}
            .SumoSelect > .optWrapper.multiple > .options > li span i,
            .SumoSelect .select-all > span i{position:absolute;margin:auto;left:0px;right:0px;top:0px;bottom:0px;width:14px;height:14px;border:1px solid #AEAEAE;border-radius:2px;box-shadow:inset 0px 1px 3px rgba(0, 0, 0, 0.15);background-color:#fff}
.SumoSelect > .optWrapper > .MultiControls {display:none;border-top:1px solid #ddd;background-color:#fff;box-shadow:0px 0px 2px rgba(0, 0, 0, 0.13);border-radius:0px 0px 3px 3px}
    .SumoSelect > .optWrapper.multiple.isFloating > .MultiControls {display:block;margin-top:5px;position:absolute;bottom:0px;width:100%}
    .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls {display:block}
        .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p {padding:6px}

    .SumoSelect > .optWrapper.multiple > .MultiControls > p {display:inline-block;cursor:pointer;padding:12px;width:50%;box-sizing:border-box;text-align:center}
        .SumoSelect > .optWrapper.multiple > .MultiControls > p {background-color:#f1f1f1}
        .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk {border-right:1px solid #DBDBDB;border-radius:0px 0px 0px 3px}
        .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnCancel {border-radius:0px 0px 3px 0px}
    /* styling for select on popup mode */
    .SumoSelect > .optWrapper.isFloating > .options > li {padding:12px 6px}

    /* styling for only multiple select on popup mode */
    .SumoSelect > .optWrapper.multiple.isFloating > .options > li {padding-left:35px}
    .SumoSelect > .optWrapper.multiple.isFloating {padding-bottom:43px}
    /* selected state
    .SumoSelect > .optWrapper.multiple > .options > li.selected span i:after,
    .SumoSelect .select-all.selected > span i:after{content:'';position:absolute;width:11px;height:11px;top:2px;left:2px;background-color:rgb(17, 169, 17);border-radius:2px;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.15)} */
    .SumoSelect > .optWrapper.multiple > .options > li.selected span i,
    .SumoSelect .select-all.selected > span i,
    .SumoSelect .select-all.partial > span i{background-color:rgb(17, 169, 17);box-shadow:none;border-color:transparent;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');background-repeat:no-repeat;background-position:center center}
    /* disabled state */
    .SumoSelect.disabled {opacity:0.7;cursor:not-allowed}
     .SumoSelect.disabled > .CaptionCont{border-color:#ccc;box-shadow:none}
    /* Select all button height:20px */
    .SumoSelect .select-all{border-radius:3px 3px 0px 0px;position:relative;border-bottom:1px solid #ddd;background-color:#fff;padding:8px 0px 3px 35px}
    .SumoSelect .select-all > span i{cursor:pointer}
    .SumoSelect .select-all.partial > span i{background-color:#ccc}
    /* styling for optgroups */
    .SumoSelect > .optWrapper > .options > li.optGroup {padding-left:5px;text-decoration:underline}