/******************* custom dropdown **********************/
:root {
	--main-font-family: 'Open Sans', sans-serif;
	--secondary-font-family: 'chivo',serif;
}

.custom-dropdown-wrapper {
    position: relative;
    font-family: var(--main-font-family);
    width:430px;
	font-size: 24px;
	box-shadow: 0 0 7px rgba(0,0,0,0.5);
	border-radius: 8px;
}

.custom-dropdown-wrapper select{
    display: none;  
}

.options-wrapper{
    position: absolute;
    z-index: 100;
    width:100%;
	overflow-y:scroll;
	max-height:400px;
}

.custom-dropdown-wrapper .option-selected{
    background-color: var(--main-color-indian-red);
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-dropdown-wrapper .option-selected:not([data-value="0"]){
    background-color: #ffffff;
    padding-right: 35px;
	color:var(--main-txt-color);
	border-radius: 8px;
}


.custom-dropdown-wrapper .option-selected:after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f078";
    top: 20px;
    right: 10px;
    line-height: 0;
	color:var(--main-color-indian-red);
}

.custom-dropdown-wrapper .option {
    display:none;
    background-color: var(--main-color-indian-red);
    color: #ffffff;
    padding: 5px 10px;
    border-bottom:1px solid rgba(0,0,0,0.2);
}

.custom-dropdown-wrapper .option:hover {
    background-color: var(--secondary-color-dark-indian-red);
    cursor:pointer;
}

.custom-dropdown-wrapper.select-open .option-selected{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

.custom-dropdown-wrapper.select-open .option-selected:after{
    content: "\f077";
}

.custom-dropdown-wrapper.select-open .option{
    display: block;
}

.custom-dropdown-wrapper.select-open .option.same-as-selected[data-default=true]{
    display: none;
}

.custom-dropdown-wrapper .same-as-selected{
    background-color: var(--secondary-color-dark-orange);
}

.custom-dropdown-wrapper.split-select{
	width:300px;
	font-size:20px;
}

.custom-dropdown-wrapper.split-select .option-selected:not([data-value="0"]){
	background-color: var(--main-color-indian-red);
	color:white;
	padding-right: 55px;
}

.custom-dropdown-wrapper.split-select .option-selected::after{
	color:white;
	height: 100%;
	padding-left: 10px;
	top: 0;
	border-left:1px solid white;
	box-sizing: border-box;
	padding-top: 18px;
}

.custom-dropdown-wrapper.split-select {
	text-align: left;
}