/*@font-face {
    font-family: RobotoLight;
    src: url(../../fonts/Roboto-Light.ttf);
}
@font-face {
    font-family: RobotoRegular;
    src: url(../../fonts/Roboto-Regular.ttf);
}*/


/*-------------------------------  SELECT  --------------------------------------*/
.custom-form-element.select{
    display: inline-block;
    width: auto;
    height: 40px;
	margin-top: 20px;
    position: relative;
    z-index: 1;
    padding: 0 15px;
    border: 1px solid rgb(200,200,200);
    line-height: 38px;
    background: white;
	cursor: pointer;
}
.custom-form-element.select *{
    margin: 0;
}
    .custom-form-element.select .placeholder, .custom-form-element.select .final-value{
        display: none;
        vertical-align: top;
        /*font-family: RobotoLight;*/
        color: rgb(128,128,128);
    }
    .custom-form-element.select .final-value{
        color: black;
    }
    .custom-form-element.select .final-value.active, .custom-form-element.select .placeholder.active{
        display: inline-block;
    }
    
    .custom-form-element.select .options{
        height: 0;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 15px;
        padding: 0;
        border: 1px solid rgb(220,220,220);
        background: white;
        opacity: 0;
        pointer-events: none;
    }
    .custom-form-element.select .options.active{
        animation: showOptionsMenu .3s ease-in-out;
        animation-fill-mode: forwards;
        pointer-events: all;
    }
    @keyframes showOptionsMenu{
        100%{opacity: 1;}
    }
        .custom-form-element.select .option{
            height: 40px;
            white-space: nowrap;
            position: relative;
            line-height: 40px;
            padding-left: 30px;
            padding-right: 10px;
            /*font-family: RobotoLight;*/
            cursor: pointer;
        }
        .custom-form-element.select .option.active:before{
            content:"";
            display: block;
            height: 6px;
            width: 12px;
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%) rotate(-60deg);
            border-bottom: 2px solid black;
            border-left: 2px solid black;
            
        }
        .custom-form-element.select .option:hover{
            background: rgb(240,240,255);
        }
            .custom-form-element.select .option .option-value{
                display: none;
            }
    .custom-form-element.select .expand-button{
        height: 30px;
        width: 40px;
        position: absolute;
		top: 5px;
		right: 0;
        padding: 0 15px;
        border: none;
		border-left: 1px solid rgb(200,200,200);
        background: none;
        cursor: pointer;
    }
    .custom-form-element.select .expand-button .arrow{
        display: block;
        height: 12px;
        width: 12px;
		position: absolute;
		top: calc(50% - 4px);
		left: calc(50% - 6px);
		border: 6px solid white;
        border-top: 6px solid rgb(232,46,50);
    }
/*-------------------------------  END OF SELECT  --------------------------------------*/