.multi-select-wrapper {
  box-sizing: border-box;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  padding:10px;
  margin:0;
}
.multi-select-container {
  display:flex;
  flex:1;
  flex-direction:row;
}
.multi-select-wrapper .multi-select-container .ctrl {
  padding:5px;
  width:36px;
  display: flex;
  flex-direction:column;
  justify-content: center;
}
.multi-select-wrapper .multi-select-container .main,
.multi-select-wrapper .multi-select-container .selected {
  flex:1;
  box-sizing: border-box;
  min-width: 80px;
}

.footer, .header {
	display: flex;
	justify-content: space-between;

}
.header {
	padding:5px;
	font-size:1.5rem; 
	color:#365F9C;
}
/* bottom */
.multi-select-wrapper .footer button,
.multi-select-wrapper .multi-select-container .ctrl button{
  cursor: pointer;
  /*flex:1;*/
  padding:0;
  margin:5px;
  box-sizing:border-box;
  background:#365F9C;
  color:#9BAFCC;
  border:none;
  outline:none;
}

.multi-select-wrapper .footer button{
	padding: 3px;
}

.multi-select-wrapper .footer button:hover,
.multi-select-wrapper .multi-select-container .ctrl button:hover{
  cursor: pointer;
  color:#fff;
}

.multi-select-wrapper .footer button:active,
.multi-select-wrapper .multi-select-container .ctrl button:active{
  color:#365F9C;
  background:#9BAFCC;
}

.multi-select-wrapper .footer button:focus
.multi-select-wrapper .multi-select-container .ctrl button:focus{
  
}

/* select customize */
.multi-select-wrapper .multi-select-container .main select,
.multi-select-wrapper .multi-select-container .selected select{
  box-sizing: border-box;
  border:1px solid #365F9C;
  width:100%;
  height: 100%;
  cursor: pointer;
  margin-left:-1px;
}

.multi-select-wrapper .multi-select-container .main select,
.multi-select-wrapper .multi-select-container .selected select:focus{
  outline: none;
}