<!--
<h1>Multiselect Drop-down List</h1>-->
  <div id="sel-cont">
<div class="ui sub header">Lehrveranstaltungen</div>
<br/>
<label><i>Wählen Sie max. 3 Lehrveranstaltungen aus:</i></label>
    <select name="select" class="ui selection dropdown" multiple="" id="multi-select" >
  <option value="">Wählen Sie aus...</option>
  <option value="01">Vertiefung IWM</option>
  <option value="02">WM Verwaltung</option>
  <option value="03">Datenintergration</option>
  <option value="04">Webintergration</option>
  <option value="05">Wissensvermittlung</option>
  <option value="06">Medienrecht</option>
  </select>  
  <br/>
  </div>

/* Color-Scheme:
graydark: #4b636e, graylight: #a7c0cd, gray: 	#78909c
greendark:#6b9b37, greenlight:#cfff95, green: #9ccc65 
*/

/*Font-Family*/
body, .ui.sub.header  {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    color: #4b636e;
    }

/* Position */
#sel-cont, h1 {
  position:relative;
  top: 15px; 
  left: 20px;
  width: 600px;	
}

/*@group MultiSelect */
/*Selectbox*/
.ui.selection {
	width:350px;
}

/*Border graydark*/ 
.ui.selection.dropdown, .ui.selection.dropdown .menu, .ui.selection.dropdown:focus,
.ui.selection.dropdown:hover, .ui.selection.dropdown:hover .menu {
    border: 1px solid #4b636e;
}  

/*Color text default graylight*/
.ui.default.dropdown:not(.button) > .text, .ui.dropdown:not(.button) > .default.text, .ui.dropdown .menu > .message:not(.ui) {
    color: #a7c0cd;
}

/* Multiselect selected*/
.ui.visible.selection.dropdown > .label,.ui.selection.dropdown .label {
	background-color: #a7c0cd;  
	color: #fff; 				
	box-shadow: 0 0 0 1px #4b636e inset; 
}

/* Dropdown-Icon*/
.ui.selection.dropdown > .dropdown.icon {
	color: #4b636e; /*default*/
}
.ui.selection.dropdown > .dropdown.icon:hover {
	color: #6b9b37; /*hover*/
}
/* @end */
    
/* @group Active*/
/*Border - greendark*/
.ui.selection.active.dropdown, .ui.selection.active.dropdown:hover,.ui.selection.active.dropdown .menu, 
.ui.selection.active.dropdown:hover .menu {
    border-color: #6b9b37;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
}  
/*fa-caret-up from fontawesome*/ 
.ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon::before {
content: '\f0d8';
color: #4b636e;   
}
/*Multiselect hover Values*/
.ui.dropdown .menu > .item:hover,
.ui.selection.dropdown .menu.item:hover, .ui.dropdown .menu .selected.item:hover, .ui.dropdown.selected:hover {
	font-size: 13px;
    color: #fff;
    background-color: #a7c0cd;
}
.ui.dropdown .menu .selected.item, .ui.dropdown.selected {
    background: #fff;
    color: #4b636e;
} 
/* Textcolor and Font-Size Multiselect*/
.ui.dropdown .menu > .item, .ui.selection.dropdown .menu.item {
	font-size: 13px;
    color: #4b636e;
}
/* @end */

/* Icons und Items */
/*Delete-Icon selected values hover*/
.ui.label > .delete.icon:hover {
  color: red;
}
/* @end */

$('#multi-select')
  .dropdown({maxSelections: 3})
;