.multiselect-container
{
  align-self: center;
  width: 100%;
  height:100%;
}

.ms-name
{
  width: 100%;
  border-left: 1px solid #eeeeee;
  height: 100%;
  text-align: center;
  display: flex;
}
.ms-name:hover
{
  background: #eeeeee;
}

.ms-name div 
{
  align-self: center;
}
.ms-name-sel
{
  background: #eeeeee;
}

.ms-name-text
{
  padding: 0 1em;
}
.ms-name-icon
{
  padding-right: 1em;
}

.multiselect-button
{
  width: 10em;
  padding: 0.5em;
  cursor: pointer;
}

.multiselect-body
{
  height: 100%;
}

.ms-content-con
{
  font-weight: 300;
  font-size: 1.16em;
  min-width: 12em;
}



.ms-footer
{
  font-size: 1.2em;
  bottom: 0;
  position: absolute;
  height: 4em;
  border-top: 1px solid #eee;
  background: #fafafa;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0;
}


.ms-footer div
{
  padding: 0.5em 1em;
  align-self: center;
}
/*
This will give the 3 horizontal div layout, with sticky header and footer. And content expands to fill space.

.multiselect-body
{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding:0.5em;
}

.multiselect-header
{
  height: 3em;
}

.multiselect-content
{
  flex: 1;
  overflow-y:auto;
}

.multiselect-footer
{
  display: flex;
  height: 3em;
}
*/
.multiselect-enable-clear-button
{
}

.multiselect-disable-clear-button
{
  color: #eeeeee;
}

.ms-cb-parent
{
}

.ms-cb-child
{
  padding-left:1em;
}

.ms-single
{
  padding: 1em;
  display:flex;
  justify-content: space-between;
}
.ms-single:hover
{
  background: #eeeeee; 
}
.ms-single-selected
{
  background: #eeeeee;  
}
.ms-single span
{
  font-size: 1.2em;
}

.ms-footer-apply
{
  background: #4383b3;
  color: white;
  font-weight: 400;
  margin-right: 1.8em;
  margin-left: 0.8em;
}