/**
 * @file
 * Additions to basecore/css/components/better-exposed-filters.css.
 */
/*****exposed filter news page***/

.bef-exposed-form fieldset, .bef-exposed-form fieldset.fieldgroup{border: none}
.view-display-id-block_10{
    display:flex;
    flex-wrap: wrap;
}


 .view-display-id-block_10 .view-filters {
    flex: 1 0 20%;
}

.view-display-id-block_10 .view-content {
    flex: 1 0 70%

  }

.view-display-id-block_10 > nav{ flex-basis: 100%; align-items:center; }

  .view-display-id-block_10 ul {
    list-style-type: none;
}

#views-exposed-form-news-and-events-block-10 ul {
    list-style-type: none;

}

#views-exposed-form-news-and-events-block-10 legend {
    font-size: 1.42em;    
    border:none;
    position: relative;
  padding-left: 25px; /* Create space for the dash to sit in */
  font-weight: 700;
  color: var(--mt-color-base-dark);
  display: inline-block;
}

#views-exposed-form-news-and-events-block-10 legend :before {
    content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Perfectly centers the dash vertically */
  width: 15px;
  height: 4px;
  background-color: var(--mt-color-primary);    
}

@media (max-width: 768px){

    #views-exposed-form-news-and-events-block-10 legend :before {
        display: none;
    }

    #views-exposed-form-news-and-events-block-10 legend{
            margin-top: 5px;
            padding: 20px;
            background-color: whitesmoke;
            border-radius: 5px;
            /*max-width: 1200px;*/
            cursor: pointer;
        }


        #views-exposed-form-news-and-events-block-10 legend::before{
        padding-right: 10px;
        font-family: "FontAwesome";
        content: "\f078";
        font-weight: 100;
        color: var(--mt-color-primary);
        -webkit-text-stroke: 1px whitesmoke;
        }

        #views-exposed-form-news-and-events-block-10 .expanded legend::before{
            padding-right: 10px;
            font-family: "FontAwesome";
            content: "\f077";
            font-weight: 100;
            color: var(--mt-color-primary);
            -webkit-text-stroke: 1px whitesmoke;
        }
        #views-exposed-form-news-and-events-block-10 .bef-nested{display:none}  /*use the display none to the element we want to hide*/

    }

    /*********************NEWCOURSES************/
 #views-exposed-form-newpagecourses-block-2,
 #views-exposed-form-newpagecourses-block-1 {
    display: flex;
    flex-wrap: wrap;        /* allow wrapping if screen is narrow */
    gap: 1rem;              /* spacing between filters */
    align-items: flex-end;  /* align selects + buttons nicely */
  }

  #views-exposed-form-newpagecourses-block-2 > * ,
  #views-exposed-form-newpagecourses-block-1 > *{
    flex: 1 1 auto;/* let all children expand equally */
    min-width: 300px;/* prevent them from getting too small */
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;
  }
  
  /*#views-exposed-form-newpagecourses-block-2 .form-type-select
  {
    width:16%;
  }*/
 
    #views-exposed-form-newpagecourses-block-1 fieldset legend,
    #views-exposed-form-newpagecourses-block-1 fieldset.fieldgroup legend,
    #views-exposed-form-newpagecourses-block-2 fieldset legend,
    #views-exposed-form-newpagecourses-block-2 fieldset.fieldgroup legend {
      margin-left: 0px;  font-weight: 600;
    }

/* Make the fieldsets themselves inline-block */
#views-exposed-form-newpagecourses-block-2 .form--inline > fieldset,
#views-exposed-form-newpagecourses-block-1 .form--inline > fieldset{
  display: inline-flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: var(--mt-color-accent);
}

#views-exposed-form-newpagecourses-block-2 legend,
#views-exposed-form-newpagecourses-block-2 legend{border:none}

  /* Select All link styling */
  #views-exposed-form-newpagecourses-block-2 a.bef-toggle,
  #views-exposed-form-newpagecourses-block-1 a.bef-toggle {
    display: inline-block;
    margin-bottom: 0.25rem;
    color: #0074bd;
    text-decoration: underline;
    cursor: pointer;
  }

/* Responsive wrap */
@media (max-width: 768px) {
    #views-exposed-form-newpagecourses-block-2 .form--inline,
    #views-exposed-form-newpagecourses-block-1 .form--inline{
      flex-direction: column;
    }
    #views-exposed-form-newpagecourses-block-2 .form-type-select,
    #views-exposed-form-newpagecourses-block-1 .form-type-select{
      width:100%;
    }
  }