/************** combo ***************/

.combo {
    width: 200px;
	background-color: rgb(255, 255, 255);
	position: relative;
	border: none;
	user-select: none;  
}

.combo .made .display {
	width: -webkit-fill-available;
	border-radius: var(--border-corner-button);
    border: 1px solid gray;
	box-sizing: border-box;
	cursor:pointer;
}
   
.combo .made .display .icon.bi_empty  {width:1px}
.combo .made .display:hover { background-color:var(--color-hover); }

.combo .arrow { 
	float: right;
    width: 16px;
    height: 16px;
    margin:3px;
    display: block;
}

.combo .list {
	background-color: white;
	border:1px solid gray;
	position: fixed; 
    width: 100%;
    display: none;
    z-index: 40000;

}

.combo .list .item{ border-top:none;}
.combo .list .item:hover { background-color:var(--color-hover); }

.combo.opened { }
.combo.opened > .made .list {display:unset } 



 

/* Reset <select> defaults */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  	border: 0;
  	outline: 0;
  	background: none;
  	color: inherit;
  	box-shadow: none;
}

select::-ms-expand {
  display: none;
}

/* Custom Select wrapper */


select {
  position: relative;
  display: flex;
  width: min(14rem, 90vw);
   background: linear-gradient(to left, rgb(246, 97, 81) 3rem, rgb(255, 255, 255) 1rem);
	zbackground: #fff;

  border-radius: 0.25rem;
  overflow: hidden;
  border: 1px solid #000;
}
.select select {
  flex: 1;
  padding: .1em;
  cursor: pointer;
}
.select::after {
  content: "▼";
  position: absolute;
  right: .1rem;
  top: .1rem;
  transition: 0.25s all ease;
  pointer-events: none;
}
.select:hover::after {
  color: #f39c12;
  -webkit-animation: bounce 0.5s infinite;
          animation: bounce 0.5s infinite;
}

@-webkit-keyframes bounce { 25% { transform: translatey(5px); } 75% { transform: translatey(-5px);} }
@keyframes bounce { 25% { transform: translatey(5px); } 75% { transform: translatey(-5px);} }