/* MSFmultiSelect v2.3
 * Copyright (c) 2020 Mini Super Files | https://github.com/minisuperfiles/MSFmultiSelect/blob/master/LICENSE
 * https://github.com/minisuperfiles/MSFmultiSelect
 * https://minisuperfiles.blogspot.com/p/documentation.html?project=msfmultiselect
 */

.msf_multiselect_container {
  display: inline-block;
  max-width: 24%;
  max-height: 3.563rem;
  width: 100%;
  padding: 0;
  border-bottom: none;
}

@media screen and (max-width: 48rem){
  .msf_multiselect_container {
    display: inline-block;
    max-width: 100%;
    max-height: 3.563rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    border-bottom: none;
  }
}

.msf_multiselect_container:focus-visible {
    outline: none;
}

.msf_multiselect_container .logger:focus-visible {
  outline: none;
}

.msf_multiselect_container .msf_multiselect {
  /*max-width: calc((92vw*24)/100);
  width: 100%;*/
  border: 1px solid #e4e4e4;
  list-style-type:none;
  margin: 0;
  margin-top: -1px;
  padding: 0;
  position: relative;
  z-index: 240;
}

.msf_multiselect li:hover, .msf_multiselect li:focus{
  background-color: #e5e5e5;
}
.msf_multiselect li.active{
  background-color: #e5e5e5;
}
.msf_multiselect_container textarea{
  resize: none;
  padding-left: 2px;
  padding-top: 2px;
  overflow: auto;
}
.msf_multiselect_container .msf_multiselect{
  max-height: 200px;
  overflow: auto;
  background-color: white;
  display: grid;
  text-align: left;
}
.msf_multiselect label{
  display: block;
  margin-right: 0.7rem;
  margin-bottom: 0;
  font-size: 0.875rem;
}

.msf_multiselect li{
  font-size: 0.875rem;
  border-right: 1px solid #DCDCDC;
  padding-left: 4px;
  background-color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.msf_multiselect li:hover , .msf_multiselect li:focus{
  background-color: #F5F5F5;
}

.msf_multiselect input[type=checkbox]{
  margin: 0.844rem 0.75rem 0.844rem 1rem !important;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  color: currentColor;
  border-radius: 15%;
  border: 1px solid #DCDCDC;
  display: inline-grid !important;
  background-color: white !important;
}

.msf_multiselect #text{
  margin: 0.844rem 0.75rem 0.844rem 1rem;
}
.msf_multiselect_container .msf_multiselect label + label{
  border-top: 1px solid #DCDCDC;  
}

/* v2 css here */
.msf_multiselect_container .logger .selectedLabels {
  padding: 1px 6px 1px 6px;
  background: #f2f2f2;
  border: 1px solid #e6e3e3;
  border-radius: 25px;
  display: inline-block;
  font-size: 12px;
}
.msf_multiselect_container .closeBtn {
  padding-left: 4px;
  cursor: pointer;
  color: #ff6060;
}
.msf_multiselect_container .closeBtn.readOnly {
  cursor: unset;
}
.msf_multiselect_container .hidden {
  display: none !important;
}
.msf_multiselect .searchbox {
  width: -moz-available;
  width: -webkit-fill-available;
  padding: 0;
  margin: 0;
  height: 30px;
  font-size: 12px;
}
.msf_multiselect_container .logger {
  width: 100%;
  height: 100%;
  padding: 1rem 2.25rem 1rem 0.75rem;
  border: 1px solid #DCDCDC;
  border-radius: 0.15rem;
  display: inherit;
  cursor: pointer;
  overflow-y: auto;
  font-family: 'formular-regular';
  font-size: 0.875rem; 
  color: #1E1E1E;

  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 0.75rem;
}

.msf_multiselect_container .msf_multiselect.offdropdown {
  position: unset;
}