@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;700&family=Open+Sans&display=swap");



:root {

  --color-maastricht-blue: rgb(4, 30, 66);

  --color-anti-flash-white: rgb(241, 241, 241);

  --color-white: rgb(255, 255, 255);

  --color-cultured: #f5f5f5;

  --color-aztect-gold: #c2a252;

  --color-header-primary: rgba(4, 30, 67, 1);

  --color-header-secondary: rgba(194, 162, 82, 1);

  --color-body-dark-primary: #050505;

  --color-radio-button: #707070;

  --color-body-dark-secondary: #222222;

  --color-footer-span: rgba(115, 135, 177, 1);

  --color-footer-a: rgba(194, 162, 82, 1);

  --font-text: "Frank Ruhl Libre", -apple-system, BlinkMacSystemFont, "Segoe UI",

    "Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

  --font-display: "Frank Ruhl Libre", -apple-system, BlinkMacSystemFont,

    "Segoe UI", "Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

  --secondary-font-text: "Open Sans", -apple-system, BlinkMacSystemFont,

    "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue",

    sans-serif;

  --secondary-font-display: "Open Sans", -apple-system, BlinkMacSystemFont,

    "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue",

    sans-serif;

}



.hide {

  display: none !important;
 
}

.show {

  display: flex !important;

}



.container {

  align-items: center;

  justify-content: flex-end;

  margin: 0 auto 0 auto;

  display: flex;

  min-width: 100%;

  width: 100% !important;

  max-width: 483px;

}



/* the code below is for the dropdown menu */

.wrapper-dropdown {

  height: 45px;

  position: relative;

  display: flex;

  flex-direction: row;



  min-width: 231.5px;

  max-width: 483px;

  padding: 0px 0px 0px 0px;

  min-height: 44px;

  border-radius: 4px;

  border: 1px solid var(--color-body-dark-secondary);

  text-align: left;

  color: #fff;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  font-family: inherit;

  height: 57px;

  justify-content: space-around;

  align-items: center;

}



.scrollable-menu {

  height: auto;

  max-height: 200px;

  overflow-x: hidden;

}



.arrow {

  /* margin-left: 10px; */

  margin-right: 10px;

  float: right;

  rotate: 180deg;

  color: var(--color-radio-button);

}



.selected-display {

  margin-left: 20px;

  font-family: var(--font-text);

  font-size: 1.4rem;

  color: var(--color-header-primary);

  height: 45px;

  display: flex;

  flex-direction: row;

  align-items: center;

  cursor: pointer;

  width: 90%;

}



svg {

  transition: all 0.3s;

}



.wrapper-dropdown::before {

  position: absolute;

  top: 50%;

  right: 16px;

  margin-top: -2px;

  border-width: 6px 6px 0 6px;

  border-style: solid;

  border-color: #fff transparent;

}



.rotated {

  transform: rotate(-180deg);

}



.wrapper-dropdown .dropdown {

  width: 100%;

  transition: 0.3s;

  position: absolute;

  top: 120%;

  right: 0;

  left: 0;

  margin: 0;

  padding: 0;

  list-style: none;

  z-index: 99;

  box-shadow: inherit;

  background: inherit;

  -webkit-transform-origin: top;

  -moz-transform-origin: top;

  -ms-transform-origin: top;

  transform-origin: top;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  opacity: 0;

  visibility: hidden;

  height: auto;

  background-color: white;

}



.wrapper-dropdown .dropdown li {

  padding: 0 15px;

  line-height: 45px;

  overflow: hidden;

  color: var(--color-maastricht-blue);

}



.wrapper-dropdown .dropdown li:last-child {

  border-bottom: none;

}



.wrapper-dropdown .dropdown li:hover {

  background-color:#006400;

  color:white;

}



.wrapper-dropdown.active .dropdown {

  opacity: 1;

  visibility: visible;

  opacity: 1;

  visibility: visible;

  height: auto;

  z-index: 999;

}



#filterRow {

  z-index: 4 !important;

}