.ce_metamodels_frontendfilter {
    font-size: 1rem;
    overflow: visible;
    /* margin-top: 1em; */
}

.ce_metamodels_frontendfilter .formbody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: .85em;
    /* margin-left:-12px; */
}

.formbody label,
.formbody legend {
    font-size: .95em;
    font-weight: 500;
    color: var(--txt-color-0);
}

.formbody .model label {
    display:none;
    width:0;
    height:0;
    visibility: hidden;
}

.formbody .widget.model {
    margin-top: .5em;
    margin-bottom: .5em;
}

.formbody .model legend {
    float: right;
    margin-left: 10px;
}

.formbody .checkbox_container input.checkbox {
  width:16px;
  height:16px;
  border: none;
}

.submit {
    font-size: .85em;
    padding: 5px 12px;
    margin-top: .5em;
    border-radius: 15px;
    border:none;
    color: rgba(255,255,255,.9);
    background-color: var(--lnk-bg-color-2);
    cursor: pointer;
}

.submit:hover {
    color: rgba(255,255,255,1);
    background-color: var(--lnk-bg-color-1);
}

.clearall {
    font-size: .8em;
    font-weight: 600;
    /* position: absolute;
    margin-top: -32px;
    margin-left: 130px; */
    margin-bottom: 2em;
}

.formbody .widget {
    display: flex;
    margin: 0 12px 0 0;
    width: auto;
}

.custom-widget label {
    /* padding-left: 12px; */
}

.formbody .widget { min-width:190px; }

.formbody input.text {
  color: var(--txt-color-0);
  background-color: rgba(255, 255, 255, 0);
  /* margin-left:1em; */
  border: 2px solid rgba(110, 104, 95, .2);
  outline:none;
  border-radius: 4px;
  padding: 3px 7px;
}

.formbody input.text:focus {
  border: 2px solid var(--txt-color-light);
}


.formbody .widget:last-child { margin-right:0; }

.formbody .widget select {
    margin-right: auto;
    width: auto;
}

.mm_select {
    display: flex;
    flex-direction: column;
}

/* The container must be positioned relative: */
.formbody .custom-widget {
    position: relative;
    width: auto;
  }
  
.formbody .custom-widget select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: var(--bg-color-1);
    position: relative;
    z-index: 1;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 8px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: rgba(85,50,15,.3) transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent rgba(85,50,15,1) transparent;
    top: 2px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    background-color: var(--bg-color-1);
    color: var(--txt-color-2);
    padding: 2px 12px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }

  .select-items div {
    background-color: #eee;
  }

  .select-items div:hover {
    background-color: #ddd;
  }

  .select-selected {
    color: var(--lnk-color-1);
    padding-top:0;
    z-index: 8;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: var(--bg-color-0);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: var(--bg-body);
  }

@media screen and (max-width: 767px) {

  .ce_metamodels_frontendfilter {
    font-size: .9rem;
  }

  .formbody .name   label,
  .formbody .location label { display:inline-block; min-width:130px; }
  .ce_metamodels_frontendfilter .formbody {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      /* margin-left:-12px; */
  }
    
    .formbody .widget { 
      /* max-width:170px; */
      width: 45%;
      min-width: 120px;
    }

    .formbody .widget:nth-child(even) { 
      margin-right: 0;
    }

    .submit_container {
      float:left;
      margin-right: 1em;
    }
    .clearall {
    }
}

@media screen and (max-width: 460px) {
    .formbody .widget { max-width: 165px; }
    .formbody .widget.mm_text input { max-width: 140px; }
    /* .formbody .widget:nth-child(4) { max-width: 165px; }
    .formbody .widget:nth-child(6) { max-width: 165px; } */
}

@media screen and (max-width: 380px) {

    .formbody .widget {
        margin: 0 10px 5px 0;
    }
}