/*the container must be positioned relative:*/

.custom-select, .custom-select-footer, .custom-select-tunnel {
  position: relative;
  font-family: inherit;
}

.custom-select select, .custom-select-footer select, .custom-select-tunnel select  {
  display: none; /*hide original SELECT element:*/
}

.select-selected,.select-selected-footer,.select-selected-tunnel {
  background-color: #baedf2;
}

/*style the arrow inside the select element:*/
.select-selected:after,.select-selected-footer:after,.select-selected-tunnel:after {
  position: absolute;
  /*content: "";*/
  top: 2px;
  right: 25px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  /*border-color: #fff transparent transparent transparent;*/
  content: url('data:image/svg+xml;charset=UTF-8,<svg width="15" height="9" xmlns="http://www.w3.org/2000/svg"><path d="M12.793.793a1 1 0 011.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6A1 1 0 012.207.793L7.5 6.086 12.793.793z" fill="currentColor"></path></svg>');
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after,.select-selected-footer.select-arrow-active-footer:after,.select-selected-tunnel.select-arrow-active-tunnel:after  {
  /*border-color: transparent transparent #fff transparent;*/
  top: 20px;
  transform-origin: center center;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

/*style the items (options), including the selected item:*/
.select-items div,.select-items-footer div,.select-selected,.select-selected-footer,.select-items-tunnel div,.select-selected-tunnel {
  color: #000;
  padding: 8px 16px;
  border: 0px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  
}
.select-selected, .select-selected-footer, .select-selected-tunnel{
  border-radius: 20px;
  font-weight: bold;
  font-size: 16px;
  z-index: 199;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #baedf2;
  /*top: 100%;*/
  top: 36px;
  left: 0;
  right: 0;
  z-index: 99;
  border-top-left-radius : 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  font-weight: bold;
  font-size: 16px;
  margin-top: -12px;
  padding-top: 12px;
}
.select-items-footer,.select-items-tunnel {
  position: absolute;
  background-color: #baedf2;
  /*top: 100%;*/
  top: -220px;
  left: 0;
  right: 0;
  z-index: 4099;
  border-top-left-radius : 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  font-weight: bold;
  font-size: 16px;
  margin-top: -12px;
  padding-top: 12px;
}
.select-items-tunnel {
  border-top-left-radius : 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.select-items-footer div:last-child,.select-items-tunnel div:last-child{
	padding-bottom: 20px;
}
/*hide the items when the select box is closed:*/
.select-hide,.select-hide-footer,.select-hide-tunnel {
  display: none;
}

.select-items div:hover, .select-items-footer div:hover, .select-items-tunnel div:hover, .same-as-selected, .same-as-selected-footer, .same-as-selected-tunnel {
  background-color: blue;/*rgba(0, 0, 0, 0.1);*/
  color: #fff;
  border-radius: 20px;
}