* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.select-container {
    width: 100%;
     position: relative;
	background-color: transparent;
}

.selected-option {
	background-color: transparent;
    border-radius: 5px;
    padding: 0px 20px;
	font-size: 0.9em;
    cursor: pointer;
	border: solid 1px #cacccd;
	border-radius: 25px 25px 25px 25px;
	color:#8a898b;
}

.selected-option::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #8a898b;
    border-top: 2px solid #8a898b;
    transform: rotate(-135deg);
    transition: all 0.4s ease-in-out;
}

.active .selected-option::after {
    top: 20px;
    transform: rotate(45deg);
}

.options-container {
    position: absolute;
    top: 55px;
    left: 0;
     width: 100%;
    background: #fff;
	color:#8a898b;
    border-radius: 5px;
    overflow: hidden;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
	border: solid 1px #d9d9d9;
	 list-style: none;
	
}

.active .options-container {
    transform: rotateX(0);
}

.option {
    padding: 0px 20px;
    cursor: pointer;
	margin-left: -33px;
	height:35px;
	line-height: 35px;
	display: block;
	font-size: 0.9em;
	
}

.option:hover {
    background: #f42e00;
	color:#fff;
}





.select-container1 {
    width: 100%;
     position: relative;
	
	
}

.selected-option1 {
		background-color: #fff;
font-size: 0.9em;
    border-radius: 5px;
    padding: 0px 20px;
    cursor: pointer;
	border-radius: 25px 25px 25px 25px;
	color:#8a898b;
	height:50px;
	margin-top: -2px;
}

.selected-option1::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #8a898b;
    border-top: 2px solid #8a898b;
    transform: rotate(-135deg);
    transition: all 0.4s ease-in-out;
}

.active .selected-option1::after {
    top: 20px;
    transform: rotate(45deg);
}

.options-container1 {
    position: absolute;
    top: 55px;
    left: 0;
     width: 100%;
    background: #fff;
	color:#8a898b;
    border-radius: 5px;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
	border: solid 1px #d9d9d9;
	 list-style: none;
	/*height:180px;
	overflow-y: scroll;
	*/
	min-height:80px;
	max-height:280px;
	overflow: auto;
	
}

.active .options-container1 {
    transform: rotateX(0);
}

.option1 {
    padding: 0px 15px;
    cursor: pointer;
	margin-left: -33px;
	height:35px;
	line-height: 35px;
	display: block;
	font-size: 0.9em;
	word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;
}

#myInput{
	
}

.option1:hover {
    background: #f42e00;
	color:#fff;
}

.aclass{
	text-decoration: none;
	width:100%;
	height: 35px;
}



.select-container2 {
	width:94%;
     position: relative;
	z-index: 998;
	margin-left: 20px;
	
	
	
}

.selected-option2 {
		background-color: #fff;
font-family: "Roboto";
	font-size:0.8em;
    border-radius: 5px;
    padding: 0px 20px;
    cursor: pointer;
	border: solid 1px #cacccd;
	border-radius: 25px 25px 25px 25px;
	color:#8a898b;
	height: 40px;
	line-height: 40px;
	display: block;
}

.selected-option2::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #8a898b;
    border-top: 2px solid #8a898b;
    transform: rotate(-135deg);
    transition: all 0.4s ease-in-out;
}

.active .selected-option2::after {
    top: 15px;
    transform: rotate(45deg);
}

.options-container2 {
    position: absolute;
    top: 40px;
    left: 0;
     width: 100%;
	font-family: "Roboto";
	font-size:0.8em;
    background: #fff;
	color:#8a898b;
    border-radius: 5px;
    overflow: hidden;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
	border: solid 1px #d9d9d9;
	 list-style: none;
	
}

.active .options-container2 {
    transform: rotateX(0);
}

.option2 {
    padding: 0px 20px;
    cursor: pointer;
	margin-left: -33px;
	height:40px;
	line-height: 40px;
	display: block;
	
	
	
	
}

.option2:hover {
    background: #f42e00;
	color:#fff;
}


.options-container1 a{
	text-decoration: none;
	
}




.select-container3 {
	width:94%;
     position: relative;
	z-index: 998;
	margin-left: 20px;
	
	
	
}

.selected-option3 {
		background-color: #fff;
font-family: "Roboto";
	font-size:0.8em;
    border-radius: 5px;
    padding: 0px 20px;
    cursor: pointer;
	border: solid 1px #cacccd;
	border-radius: 25px 25px 25px 25px;
	color:#8a898b;
	height: 40px;
	line-height: 40px;
	display: block;
}

.selected-option3::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #8a898b;
    border-top: 2px solid #8a898b;
    transform: rotate(-135deg);
    transition: all 0.4s ease-in-out;
}

.active .selected-option3::after {
    top: 15px;
    transform: rotate(45deg);
}

.options-container3 {
    position: absolute;
    top: 40px;
    left: 0;
     width: 100%;
	font-family: "Roboto";
	font-size:0.8em;
    background: #fff;
	color:#8a898b;
    border-radius: 5px;
    overflow: hidden;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
	border: solid 1px #d9d9d9;
	 list-style: none;
	
}

.active .options-container3 {
    transform: rotateX(0);
}

.option3 {
    padding: 0px 20px;
    cursor: pointer;
	margin-left: -33px;
	height:40px;
	line-height: 40px;
	display: block;
	
	
	
	
}

.option3:hover {
    background: #f42e00;
	color:#fff;
}


.selected-option4 {
	background-color: transparent;
    border-radius: 5px;
    padding: 0px 20px;
	font-size: 0.9em;
    cursor: pointer;
	border: solid 1px #cacccd;
	border-radius: 25px 25px 25px 25px;
	color:#8a898b;
}

.selected-option4::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #8a898b;
    border-top: 2px solid #8a898b;
    transform: rotate(-135deg);
    transition: all 0.4s ease-in-out;
}

.active .selected-option4::after {
    top: 20px;
    transform: rotate(45deg);
}

.options-container4 {
    position: absolute;
    top: 55px;
    left: 0;
     width: 100%;
    background: #fff;
	color:#8a898b;
    border-radius: 5px;
    overflow: hidden;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
	border: solid 1px #d9d9d9;
	 list-style: none;
	
}

.active .options-container4 {
    transform: rotateX(0);
}

.option4 {
    padding: 0px 20px;
    cursor: pointer;
	margin-left: -33px;
	height:35px;
	line-height: 35px;
	display: block;
	font-size: 0.9em;
	
}

.option4:hover {
    background: #f42e00;
	color:#fff;
}



