/* The container must be positioned relative: */
.custom-select, .dyn-select {
  position: relative;
}

.dyn-select {
  display: none;
}


.custom-select select, .dyn-select select {
  display: none; /*hide original SELECT element: */
  z-index: 3000;
}

.select-selected {
  background-color: #FFF;
  border-radius: 4px; 
  margin:5px; 
  margin-top:1px; 
  width:calc( 100% - 25px );
z-index: 3100;
}



/* style the items (options), including the selected item: */
.select-items div,.select-selected {

  padding: 8px 16px;
  border:solid 1px  rgba(0, 0, 0, 0.2);
  cursor: pointer;
  
    transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
  
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #FFF;
  border:solid 1px  rgba(0, 0, 0, 0.2);
  width:calc( 100% + 7px );
  margin-left:8px; 
  top: calc( 100% - 2px );
  left: -3px;
  right: 0;
  z-index: 99;
  	-webkit-box-shadow: 0px 0px 22px 1px rgba(0,0,0,0.39);
	-moz-box-shadow: 0px 0px 22px 1px rgba(0,0,0,0.39);
	box-shadow: 0px 0px 22px 1px rgba(0,0,0,0.39);
	
	border-radius:4px; 
	overflow:hidden;
}

.select-items div {
	  border:solid 0px  red !important;
	  padding-top:6px; 
	  height:14px;
	  border-bottom:solid 0px  red;
}

.select-items-small{
	  padding-top:2px !important; 
	  height:12px !important;
}

/*
.select-items-small:hover{
	  padding-top:6px !important; 
	  height:20px !important;
}
*/

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover {
  background-color: #999999;
  color:#FFF;
}

.same-as-selected {
  background-color: #CD1719;
  color:#FFF;
}


/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 50px;
  right: 5px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #333 transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #333 transparent;
  top: 44px;
}


/* Style the arrow inside the select element: */
._dyn_sel .select-selected:after {
  top: 14px;
}

/* Point the arrow upwards when the select box is open (active): */
._dyn_sel .select-selected.select-arrow-active:after {
  border-color: transparent transparent #333 transparent;
  top: 8px;
}