epfl-elements 4.2.0 → 4.3.0

package/dist/css/elements.css

@@ -11656,6 +11656,44 @@ body > .site > .main-container + .bg-gray-100 {
   margin-top: 0.625em;
 }
 
+.btn:disabled, .btn.disabled,
+button:disabled,
+button.disabled,
+button.btn:disabled,
+button.btn.disabled,
+input[type=button]:disabled,
+input[type=button].disabled {
+  opacity: 1;
+}
+.btn:focus, .btn.focus-visible, .btn.focus,
+button:focus,
+button.focus-visible,
+button.focus,
+button.btn:focus,
+button.btn.focus-visible,
+button.btn.focus,
+input[type=button]:focus,
+input[type=button].focus-visible,
+input[type=button].focus {
+  outline-width: 2px !important;
+  outline-style: solid !important;
+  outline-offset: 2px;
+}
+.btn:focus, .btn:focus-visible, .btn.focus,
+button:focus,
+button:focus-visible,
+button.focus,
+button.btn:focus,
+button.btn:focus-visible,
+button.btn.focus,
+input[type=button]:focus,
+input[type=button]:focus-visible,
+input[type=button].focus {
+  outline-width: 2px !important;
+  outline-style: solid !important;
+  outline-offset: 2px;
+}
+
 .btn {
   text-decoration: none;
   white-space: normal;
@@ -11663,10 +11701,7 @@ body > .site > .main-container + .bg-gray-100 {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 .btn:before {
-  border-width: 2px;
-}
-.btn:disabled, .btn.disabled {
-  opacity: 1;
+  content: none;
 }
 
 .btn-primary {
@@ -11676,8 +11711,11 @@ body > .site > .main-container + .bg-gray-100 {
   background: #b51f1f;
   border-color: #b51f1f;
 }
-.btn-primary:focus:before, .btn-primary.focus:before {
-  border-color: #b51f1f;
+.btn-primary:focus, .btn-primary.focus-visible, .btn-primary.focus {
+  outline-color: #b51f1f !important;
+}
+.btn-primary:focus, .btn-primary:focus-visible, .btn-primary.focus {
+  outline-color: #b51f1f !important;
 }
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
   background: #891818;
@@ -11713,8 +11751,11 @@ body > .site > .main-container + .bg-gray-100 {
   background: transparent;
   border-color: #e6e6e6;
 }
-.btn-secondary:focus:before, .btn-secondary.focus:before {
-  border-color: #707070;
+.btn-secondary:focus, .btn-secondary.focus-visible, .btn-secondary.focus {
+  outline-color: #707070 !important;
+}
+.btn-secondary:focus, .btn-secondary:focus-visible, .btn-secondary.focus {
+  outline-color: #707070 !important;
 }
 .bg-dark .btn-secondary:focus, .bg-dark .btn-secondary.focus {
   border-color: #e6e6e6;
@@ -11781,21 +11822,27 @@ a.tag:hover {
   text-decoration: none;
   background: #fff;
   border: 1px solid #c1c1c1;
+  font-size: inherit;
   line-height: 1;
   font-weight: 400;
   color: #343a40;
   border-radius: 2px;
-  -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
-  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
+  -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  vertical-align: middle;
 }
 .tag .remove {
   text-decoration: none;
   float: right;
+  padding: 0;
+  border: 0;
   font-size: 1.25em;
   line-height: 0.5em;
   margin-top: 0.2em;
   margin-left: 0.3em;
   color: inherit;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 .tag .remove:hover {
   color: #ff0000;
@@ -11833,6 +11880,110 @@ a.tag:hover {
   border-bottom: 1px solid #212121;
 }
 
+a.tag > *,
+.btn.tag > *,
+button.tag > * {
+  vertical-align: middle;
+}
+a.tag .remove,
+.btn.tag .remove,
+button.tag .remove {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  margin-right: -2px;
+  background: #e6e6e6;
+  border-radius: 2px;
+  line-height: 1.3rem;
+  text-align: center;
+}
+a.tag:hover, a.tag:focus,
+.btn.tag:hover,
+.btn.tag:focus,
+button.tag:hover,
+button.tag:focus {
+  border-color: #212121;
+}
+a.tag:hover .remove, a.tag:focus .remove,
+.btn.tag:hover .remove,
+.btn.tag:focus .remove,
+button.tag:hover .remove,
+button.tag:focus .remove {
+  background: #ff0000;
+  color: #fff;
+}
+a.tag:focus, a.tag.focus-visible, a.tag.focus,
+.btn.tag:focus,
+.btn.tag.focus-visible,
+.btn.tag.focus,
+button.tag:focus,
+button.tag.focus-visible,
+button.tag.focus {
+  outline: solid 2px #ff0000 !important;
+  outline-offset: 2px;
+}
+a.tag:focus, a.tag:focus-visible, a.tag.focus,
+.btn.tag:focus,
+.btn.tag:focus-visible,
+.btn.tag.focus,
+button.tag:focus,
+button.tag:focus-visible,
+button.tag.focus {
+  outline: solid 2px #ff0000 !important;
+  outline-offset: 2px;
+}
+a.tag.tag-secondary:focus, a.tag.tag-secondary.focus-visible, a.tag.tag-secondary.focus, a.tag.tag-plain:focus, a.tag.tag-plain.focus-visible, a.tag.tag-plain.focus,
+.btn.tag.tag-secondary:focus,
+.btn.tag.tag-secondary.focus-visible,
+.btn.tag.tag-secondary.focus,
+.btn.tag.tag-plain:focus,
+.btn.tag.tag-plain.focus-visible,
+.btn.tag.tag-plain.focus,
+button.tag.tag-secondary:focus,
+button.tag.tag-secondary.focus-visible,
+button.tag.tag-secondary.focus,
+button.tag.tag-plain:focus,
+button.tag.tag-plain.focus-visible,
+button.tag.tag-plain.focus {
+  outline-color: #707070 !important;
+}
+a.tag.tag-secondary:focus, a.tag.tag-secondary:focus-visible, a.tag.tag-secondary.focus, a.tag.tag-plain:focus, a.tag.tag-plain:focus-visible, a.tag.tag-plain.focus,
+.btn.tag.tag-secondary:focus,
+.btn.tag.tag-secondary:focus-visible,
+.btn.tag.tag-secondary.focus,
+.btn.tag.tag-plain:focus,
+.btn.tag.tag-plain:focus-visible,
+.btn.tag.tag-plain.focus,
+button.tag.tag-secondary:focus,
+button.tag.tag-secondary:focus-visible,
+button.tag.tag-secondary.focus,
+button.tag.tag-plain:focus,
+button.tag.tag-plain:focus-visible,
+button.tag.tag-plain.focus {
+  outline-color: #707070 !important;
+}
+a.tag.tag-plain .remove,
+.btn.tag.tag-plain .remove,
+button.tag.tag-plain .remove {
+  color: #212121;
+}
+a.tag.tag-plain:hover, a.tag.tag-plain:focus,
+.btn.tag.tag-plain:hover,
+.btn.tag.tag-plain:focus,
+button.tag.tag-plain:hover,
+button.tag.tag-plain:focus {
+  border-color: #212121;
+}
+a.tag.tag-plain:hover .remove, a.tag.tag-plain:focus .remove,
+.btn.tag.tag-plain:hover .remove,
+.btn.tag.tag-plain:focus .remove,
+button.tag.tag-plain:hover .remove,
+button.tag.tag-plain:focus .remove {
+  background: #fff;
+  color: #ff0000;
+}
+
 .tag-group {
   padding: 1em;
   background: #f2f2f2;
@@ -11857,6 +12008,13 @@ a.tag:hover {
   border: 1px solid #c1c1c1;
 }
 
+.btn.tag.tag-sm .remove,
+.tag-input-sm .tag.btn .remove {
+  width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+}
+
 .selectize-control {
   cursor: text;
 }
@@ -12073,11 +12231,11 @@ a.tag:hover {
 }
 
 .collapse-title {
-  color: #212121;
   position: relative;
   padding: 0;
   background: none;
   border: none;
+  color: #212121;
   -webkit-transition: color 0.15s, -webkit-box-shadow 0.25s;
   transition: color 0.15s, -webkit-box-shadow 0.25s;
   transition: box-shadow 0.25s, color 0.15s;
@@ -12096,7 +12254,9 @@ a.tag:hover {
   transition: opacity 0.3s, -webkit-transform 0.2s;
   transition: opacity 0.3s, transform 0.2s;
   transition: opacity 0.3s, transform 0.2s, -webkit-transform 0.2s;
-  z-index: -1;
+  /* z-index: $zindex-background;
+    with z-index:-1 the pseudo element is hidden if the section has a background color - ak*/
+  z-index: 0;
 }
 .collapse-title:focus {
   outline: none;
@@ -12171,7 +12331,15 @@ a.tag:hover {
   margin-bottom: 0;
 }
 
-.collapse-item::after {
+button.collapse-title:focus, button.collapse-title.focus-visible {
+  outline: 0 !important;
+}
+
+button.collapse-title:focus, button.collapse-title:focus-visible {
+  outline: 0 !important;
+}
+
+.collapse-item:after {
   content: "";
   display: block;
   padding-top: 2rem;
@@ -12207,7 +12375,7 @@ header.collapse-title p {
   }
 }
 
-header.collapse-title + .collapse-item::before {
+header.collapse-title + .collapse-item:before {
   content: "";
   display: block;
   padding-top: 0.5rem;
@@ -12427,7 +12595,19 @@ header.collapse-title + .collapse-item::before {
   padding: 0 2.1em 0 1.1em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
   text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 2px;
+}
+.drawer .drawer-link.focus-visible .text {
+  text-decoration-thickness: 0.2em;
+  text-underline-offset: 4px;
+}
+.drawer .drawer-link:focus-visible .text {
+  text-decoration-thickness: 0.2em;
+  text-underline-offset: 4px;
 }
 .drawer .drawer-toggle {
   display: block;
@@ -12455,10 +12635,24 @@ header.collapse-title + .collapse-item::before {
 .drawer .drawer-toggle:hover {
   background: #b51f1f;
 }
+.drawer .drawer-toggle:focus, .drawer .drawer-toggle.focus-visible {
+  outline: 0 !important;
+}
+.drawer .drawer-toggle:focus, .drawer .drawer-toggle:focus-visible {
+  outline: 0 !important;
+}
 .drawer.open .drawer-toggle .icon {
   -webkit-transform: rotate(180deg) translateY(50%);
           transform: rotate(180deg) translateY(50%);
 }
+.drawer[focus-within] {
+  outline: 2px solid #b51f1f;
+  outline-offset: 2px;
+}
+.drawer:focus-within {
+  outline: 2px solid #b51f1f;
+  outline-offset: 2px;
+}
 
 .icon {
   display: -webkit-inline-box;
@@ -12727,12 +12921,11 @@ header.collapse-title + .collapse-item::before {
   .nav-lang .dropdown-toggle,
 .nav-lang .dropdown-item {
     width: auto;
-    height: 2.125rem;
-    padding: 0.4rem 1.5rem 0.4rem 0.5rem;
+    height: 2.5rem;
+    padding: 0.5rem 1.5rem 0.5rem 0.625rem;
   }
   .nav-lang .icon {
-    -webkit-transform: translateY(0.1rem);
-            transform: translateY(0.1rem);
+    display: none;
   }
 }
 .nav-toggle-mobile {
@@ -12747,13 +12940,18 @@ header.collapse-title + .collapse-item::before {
       -ms-flex-align: baseline;
           align-items: baseline;
   margin: 0;
-  padding: 0.8rem 0.9rem;
+  padding: 0.8125rem 0.875rem;
   font-size: 1rem;
   font-weight: bold !important;
 }
 @media (min-width: 576px) {
   .nav-toggle-mobile {
-    padding: 0.625rem 0.9rem;
+    padding: 0.5rem 0.9375rem;
+  }
+}
+@media (min-width: 768px) {
+  .nav-toggle-mobile {
+    padding: 0.625rem 0.9375rem;
   }
 }
 @media (max-width: 575.98px) {
@@ -13090,9 +13288,9 @@ ol ol ol > li:before {
   counter-increment: third-item;
 }
 ol ul > li:before {
+  top: 0.7rem;
   background: transparent;
   border: 1px solid #ff0000;
-  top: 0.7rem;
 }
 
 .list-unstyled li,
@@ -13205,8 +13403,8 @@ picture .img-fluid {
   text-overflow: ellipsis;
 }
 .ms-choice > span.placeholder {
-  color: #707070;
   font-size: 1rem;
+  color: #707070;
 }
 .ms-choice > div {
   position: absolute;
@@ -13468,6 +13666,26 @@ a.social-icon:hover, a.social-icon:focus {
   opacity: 0;
   z-index: -1;
 }
+.upload-input:focus + label.btn, .upload-input.focus-visible + label.btn {
+  outline: 2px solid;
+  outline-offset: 2px;
+}
+.upload-input:focus + label.btn, .upload-input:focus-visible + label.btn {
+  outline: 2px solid;
+  outline-offset: 2px;
+}
+.upload-input:focus + label.btn-primary, .upload-input.focus-visible + label.btn-primary {
+  outline-color: #b51f1f;
+}
+.upload-input:focus + label.btn-primary, .upload-input:focus-visible + label.btn-primary {
+  outline-color: #b51f1f;
+}
+.upload-input:focus + label.btn-secondary, .upload-input.focus-visible + label.btn-secondary {
+  outline-color: #707070;
+}
+.upload-input:focus + label.btn-secondary, .upload-input:focus-visible + label.btn-secondary {
+  outline-color: #707070;
+}
 
 .dropdown-item {
   text-decoration: none;
@@ -13476,6 +13694,26 @@ a.social-icon:hover, a.social-icon:focus {
   background: #ff0000;
   color: #fff !important;
 }
+.dropdown-item .icon {
+  margin-right: 0.25rem;
+  vertical-align: middle;
+}
+.dropdown-item .icon + * {
+  vertical-align: middle;
+}
+
+li.dropdown-item:before {
+  content: none;
+}
+
+.dropdown .dropdown-toggle:after {
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.dropdown.show .dropdown-toggle:after {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 
 .nav-toggle {
   display: none;
@@ -13841,6 +14079,140 @@ figcaption {
           animation: rotation 1s linear infinite;
 }
 
+.user-dropdown .btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.35rem 0.7rem;
+  border: 0;
+}
+.user-dropdown .btn .user-avatar {
+  --avatar-size: 2.5rem;
+  -ms-flex-preferred-size: var(--avatar-size);
+      flex-basis: var(--avatar-size);
+  width: var(--avatar-size);
+}
+@media (min-width: 576px) {
+  .user-dropdown .btn .user-avatar {
+    --avatar-size: 2.625rem;
+  }
+}
+@media (min-width: 768px) {
+  .user-dropdown .btn .user-avatar {
+    --avatar-size: 2.875rem;
+  }
+}
+.user-dropdown .btn p {
+  margin: 0 0.5rem 0 1rem;
+}
+
+.header .nav-user {
+  margin-left: auto;
+}
+.header .nav-user + .nav-lang {
+  margin-left: 0 !important;
+}
+
+.nav-user.user-login {
+  position: relative;
+  padding-left: 1.5rem;
+}
+.nav-user.user-login .icon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  margin-right: 0.25rem;
+}
+
+@media (max-width: 1199.98px) {
+  .header .nav-user {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+@media (max-width: 767.98px) {
+  .header .nav-user-login {
+    padding: 0;
+  }
+  .header .nav-user-login .user-login-link {
+    padding: 0.5em;
+  }
+  .header .nav-user-login .label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .header .nav-user-login .icon {
+    position: static;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0;
+  }
+  .header .nav-user {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .header .nav-user + .nav-lang-short > ul {
+    padding-left: 0 !important;
+  }
+  .header .nav-user .btn {
+    padding: 0.35rem;
+  }
+  .header .nav-user:not(.show) .btn {
+    border-radius: 50%;
+  }
+  .header .nav-user:not(.show) .btn:after {
+    content: none;
+  }
+  .header .nav-user:not(.show) .user-name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .header .nav-user.show {
+    position: fixed;
+    top: 0.625rem;
+    right: 0.75rem;
+    left: 0.75rem;
+    margin: 0;
+    background: white;
+    z-index: 1199;
+  }
+  .header .nav-user.show .btn {
+    width: 100%;
+    padding-left: 0.68rem;
+    padding-right: 0.68rem;
+    border: 2px solid #707070;
+    border-bottom: 0;
+    border-radius: 2px 2px 0 0;
+  }
+  .header .nav-user.show .btn:after {
+    margin-left: auto;
+  }
+  .header .nav-user.show .dropdown-menu {
+    top: -2px !important;
+    left: 0 !important;
+    width: 100%;
+    border: 2px solid #707070;
+    border-top: 0;
+    border-radius: 0 0 2px 2px;
+  }
+}
 .search {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
@@ -14201,9 +14573,27 @@ a.card-gray:hover .card-body {
   content: " –";
 }
 .card-info .event-info:after,
-.card-info .event-info-date:after {
+.card-info .event-info-date:after,
+.card-info .card-info-date.event-date:after {
   content: none;
 }
+.card-info .event-info-date .event-date,
+.card-info .event-info-date .event-time,
+.card-info .event-info-date .icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.card-info .event-info-date .icon {
+  width: 18px;
+  height: 18px;
+  color: #707070;
+}
+.card-info .event-info-date .icon:not(:first-child) {
+  margin-left: 0.5em;
+}
+.card-info .event-info > span {
+  display: block;
+}
 .card-info a {
   display: inline-block;
   color: #ff0000;
@@ -14332,28 +14722,6 @@ p + .card-info {
   padding: 0.25rem 0;
 }
 
-.card-info .event-date:not(:last-child):after {
-  content: " –";
-}
-.card-info .event-time:not(:last-of-type):after {
-  content: " ›";
-  margin: 0 0.25em 0 0.15em;
-}
-.card-info .event-info-date .event-date,
-.card-info .event-info-date .event-time,
-.card-info .event-info-date .icon {
-  display: inline-block;
-  vertical-align: middle;
-}
-.card-info .event-info-date .icon {
-  color: #707070;
-  height: 18px;
-  width: 18px;
-}
-.card-info .event-info > span {
-  display: block;
-}
-
 a.card-img-top {
   position: relative;
 }
@@ -15232,10 +15600,10 @@ article aside {
   padding-right: 40px;
 }
 .search-container .icon {
-  color: #c1c1c1;
   position: absolute;
   top: 50%;
   right: 0.75rem;
+  color: #c1c1c1;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   -webkit-transition: color 0.3s;
@@ -16000,6 +16368,9 @@ ol.flickity-page-dots li:before {
 .breadcrumb-item a:hover {
   color: #212121;
 }
+.breadcrumb-item .tag {
+  vertical-align: baseline;
+}
 .breadcrumb-item .icon {
   top: -0.08em;
   font-size: 0.86em;
@@ -17352,9 +17723,6 @@ ol.flickity-page-dots li:before {
   -webkit-transition: padding 0.15s;
   transition: padding 0.15s;
 }
-.fullwidth-teaser-header .btn:before {
-  border: none;
-}
 .fullwidth-teaser-header .btn:hover, .fullwidth-teaser-header .btn:focus {
   background: #b30000;
   color: #fff;
@@ -17368,6 +17736,20 @@ ol.flickity-page-dots li:before {
   background: none;
   border-top-color: #b30000;
 }
+.fullwidth-teaser-header .btn:active:after {
+  border-top-color: #891818;
+}
+.fullwidth-teaser-header .btn:focus {
+  outline: 0 !important;
+}
+.fullwidth-teaser-header .btn.focus-visible {
+  outline: 2px solid #fff !important;
+  outline-offset: -4px !important;
+}
+.fullwidth-teaser-header .btn:focus-visible {
+  outline: 2px solid #fff !important;
+  outline-offset: -4px !important;
+}
 
 .fullwidth-teaser-content {
   padding: 1rem 0 0;
@@ -18503,8 +18885,8 @@ a.nav-arrow:hover .icon-container {
   text-decoration: none;
 }
 .header-light p.site-title {
-  font-weight: 700;
   line-height: 1.1em;
+  font-weight: 700;
 }
 .header-light .drawer {
   margin-left: -0.9rem;
@@ -18541,12 +18923,12 @@ a.nav-arrow:hover .icon-container {
           align-items: center;
 }
 @media (max-width: 767.98px) {
-  .header-light .header-light-content .nav-toggle-mobile {
+  .header-light .header-light-content :not(.nav-lang.dropdown):not(.nav-user) + .nav-toggle-mobile {
     padding: 0.5rem 0.9rem;
   }
 }
 @media (max-width: 575.98px) {
-  .header-light .header-light-content .nav-toggle-mobile {
+  .header-light .header-light-content :not(.nav-lang.dropdown):not(.nav-user) + .nav-toggle-mobile {
     padding: 0.625rem 0.9rem;
   }
 }
@@ -19237,6 +19619,10 @@ a.cc-link {
   color: #ff0000;
 }
 
+.event-info p {
+  margin-bottom: 0;
+}
+
 .list-events .list-group-teaser-content .card-title {
   max-width: 660px;
 }
@@ -19285,12 +19671,12 @@ a.cc-link {
   margin-bottom: 0;
 }
 .list-group.list-events-featured .list-group-teaser-container {
+  height: 100%;
   background: #fff;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 100%;
 }
 .list-group.list-events-featured .list-group-teaser-container .btn-secondary:hover, .list-group.list-events-featured .list-group-teaser-container .btn-secondary:active, .list-group.list-events-featured .list-group-teaser-container .btn-secondary:focus {
   background: #fff;
@@ -20089,8 +20475,8 @@ article.blog-post footer {
 }
 
 .error-title {
-  color: #ff0000;
   font-size: 12vw;
+  color: #ff0000;
   margin-bottom: 0.75rem;
   text-align: center;
 }
@@ -20112,55 +20498,71 @@ article.blog-post footer {
   margin-left: -10px;
   margin-right: -10px;
 }
-.events-filters form .form-group-search {
-  -ms-flex-preferred-size: 100%;
-      flex-basis: 100%;
-}
-.events-filters form .form-group-search .search-container {
-  margin: 0;
-}
 .events-filters form > * {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  max-width: 100%;
   padding-left: 10px;
   padding-right: 10px;
 }
-.events-filters .select-multiple .ms-drop,
-.events-filters .select-multiple .ms-drop ul,
-.events-filters .dropdown .picker__table {
-  width: auto;
+.events-filters form .form-group {
+  width: 100%;
 }
-.events-filters .dropdown {
+.events-filters form .dropdown {
+  width: 100%;
   margin-bottom: 1rem;
 }
-.events-filters .dropdown button {
+.events-filters form .dropdown button {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 0.375rem 0.75rem;
   text-align: left;
-  width: 100%;
 }
-.events-filters .dropdown .dropdown-menu.show {
-  left: auto !important;
+.events-filters form .dropdown .dropdown-menu.show {
+  top: 38px !important;
   right: 0;
+  left: auto !important;
   -webkit-transform: none !important;
           transform: none !important;
-  top: 38px !important;
 }
-.events-filters .dropdown .picker__holder {
+.events-filters form .dropdown .picker__holder {
   border: 0;
 }
-@media (max-width: 991.98px) {
-  .events-filters .dropdown {
-    -ms-flex-preferred-size: 100%;
-        flex-basis: 100%;
+@media (min-width: 768px) {
+  .events-filters form .form-group,
+.events-filters form .dropdown {
+    width: 25%;
   }
+  .events-filters form .form-group-categories {
+    width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  .events-filters form .form-group,
+.events-filters form .dropdown {
+    width: 15%;
+  }
+  .events-filters form .form-group-categories {
+    width: 30%;
+  }
+}
+.events-filters form .form-group-search {
+  width: 100%;
+}
+.events-filters form .form-group-search .search-container {
+  margin: 0;
+}
+.events-filters .select-multiple .ms-drop,
+.events-filters .select-multiple .ms-drop ul,
+.events-filters .dropdown .picker__table {
+  width: auto;
 }