/************************************************************************************/
/*                  ESTILO CSS SELECT MULTIPLE                                      */
/************************************************************************************/
.multiselect-dropdown{
  width:  100% !important;
  min-height: 36px;
  display: inline-block;
  padding: 0px 15px 0px 15px;
  border-radius: 20px;
  position: relative;
  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 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  align-content: center;
  border: 1px solid;
  border-color: var(--color-darkgris);
  box-shadow: 0px 2px 4px rgb(from var(--color-negro) r g b / 0.4);
}
.multiselect-dropdown:hover {
  outline: none;
  border-color: var(--color-lightred);
  -webkit-box-shadow: invert(12%) sepia(59%) saturate(6308%) hue-rotate(348deg) brightness(103%) contrast(117%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--color-lightred);
}
.multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
  margin-right:0.5em; 
  margin-bottom:2px;
  padding:1px 0; 
  border-radius: 4px; 
  display:inline-block;
  font-size: 14px;
}
.multiselect-dropdown span.optext{
  background-color:rgb(from var(--color-lightred) r g b / 0.2);
  padding:1px 0.75em; 
  margin: 3px;
}
.multiselect-dropdown span.optext .optdel {
  float: right;
  margin: 0 -6px 1px 5px;
  font-size: 0.7em;
  margin-top: 2px;
  cursor: pointer;
  color: #666;
}
.multiselect-dropdown span.optext .optdel:hover { color: #c66;}
.multiselect-dropdown span.placeholder{
  color: var(--color-lightnegro);
}
.multiselect-dropdown-list-wrapper{
  box-shadow: gray 0 3px 8px;
  z-index: 100;
  padding: 2px 2px;
  border-radius: 20px;
  border: solid 1px #ced4da;
  display: none;
  margin: -1px;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  background: white;
}
.multiselect-dropdown-list-wrapper:hover {
  outline: none;
  border-color: var(--color-lightred);
  -webkit-box-shadow: invert(12%) sepia(59%) saturate(6308%) hue-rotate(348deg) brightness(103%) contrast(117%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--color-lightred);
}

.multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
  margin-bottom:5px;
  border-radius: 20px 20px 0 0;
  height: 36px;
  /* width: calc(100% - 7px) !important; */
  border-color: #e6e6e6;
  text-align: center;
}
.multiselect-dropdown-search::before {
  border-color: #e6e6e6;
}
.multiselect-dropdown-list{
  padding:2px;
  height: 100% !important;
  overflow-y:auto;
  overflow-x: hidden;
}
.multiselect-dropdown-list::-webkit-scrollbar {
  width: 6px;
}
.multiselect-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #bec4ca;
  border-radius:3px;
}
.multiselect-dropdown-list div{
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  font-size: small;
}
.multiselect-dropdown-list input{
  height: 1.15em;
  width: 1.15em;
  margin-right: 0.35em;  
}
.multiselect-dropdown-list input[type="checkbox"] {
  cursor: pointer;
  background-color: var(--color-blanco);
  color: var(--color-blanco);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  appearance: none;
  border: 2px solid var(--color-darkgris);
  border-radius: 2px;
  background-position: 0 -2rem;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}
.multiselect-dropdown-list input[type="checkbox"]:checked {
  background-color: var(--color-red);
  color: var(--color-lightnegro);
  background-position: 0 0;
}
.multiselect-dropdown-list div.checked{
  font-size:14px;
}
.multiselect-dropdown-list div:hover{
  background-color: rgb(from #d9000d r g b / 0.4);
}
.multiselect-dropdown span.maxselected {width:100%;}
.multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}