@charset "UTF-8";
@import url("/assets/common/css/font.css");


* {
    margin: 0px;
    padding: 0px;
    font-family: Noto Sans KR;
    font-weight: 500;

}
body{
    width: 100%;
    height: 100%;
}




/*연료정보팝업*/



.fuel_popup{
    display: block;
    position: absolute;
    width: 253px;
    height: 170px;
    filter: drop-shadow(10px 10px 10px #00000033);
    background-repeat: no-repeat;
    background-size: 100%;
    /*	display: none;*/
}

.fuel_popup .popup_area_1{
    position: relative;
    width:100%;
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
}

.fuel_popup .popup_area_2{
    position: relative;
    width:100%;
    height: 113px;
    background-color: #fff;
    /*	border: 1px solid;*/
}

.fuel_popup li {
    position: relative;
    height: 44px;
    list-style:none;
    background-color: #fff;
    /*	border: 1px solid red;*/
}

.fuel_popup li:nth-child(even) {
    background-color: #ffffff;
    color: #dddddd;
    border: 0px solid;
}

.fuel_popup li:nth-child(odd) {
    background-color: #E5F9FB;
    color: #dddddd;
    border: 0px solid;
}

.fuel_popup .percent_area{
    position: absolute;
    display: flex;
    top:25px;
    left: 90px;
    height: 20px;
}

.fuel_popup .percent_num{
    position: relative;
    top:-7px;
    font-size: 21px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    color: #113E46;
}
.fuel_popup .distance_area, .distance_area_low_fuel {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    color: #113E46;
}


.fuel_popup .distance_area_low_fuel{
    color: #FF2641;
}

/*demo 추가*/
.fuel_popup .distance_area{
    color: #113E46;
}

.fuel_popup .alert_area{
    position: absolute;
    display: flex;
    top: 50px;
    right: 22px;
    height: 15px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    color: #FF2641;
}

.fuel_popup .alert_icon{
    position: relative;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-image: url("/assets/image/infobox/ic_popup_alert_ev.svg");
    background-repeat: no-repeat;
    background-size: 100%;
}


.fuel_popup .guage_area{
    position: relative;
    /*	display: flex;*/
    top: 19px;
    left: 20px;
    width: 55px;
    height: 55px;
    background-image: url("/assets/image/infobox/ic_popup_guage_gas.svg");
    background-repeat: no-repeat;
    background-size: 100%;
}

.fuel_popup .guage_bar{
    position: relative;
    top: 3px;
    left: 1px;
    width: 35px;
    height: 4px;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #EDEDED;
}


.fuel_popup .guage_bar_orange{
    position: relative;
    top: 3px;
    left: 1px;
    width: 35px;
    height: 4px;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #FFA953;
}

.fuel_popup .guage_bar_red{
    position: relative;
    top: 3px;
    left: 1px;
    width: 35px;
    height: 4px;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #FF334C;
}

.fuel_popup .guage_bar_green{
    position: relative;
    top: 3px;
    left: 1px;
    width: 35px;
    height: 4px;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #6DE621;
}


.fuel_popup .text_area{
    position: absolute;
    display: flex;
    top: 82px;
    left: 20px;
    height: 18px;
    /*	border: 1px solid;*/
}

.fuel_popup .text_area_lower{
    position: relative;
    display: flex;
    top: 10px;
    left: 20px;
    width: 215px;
    height: 20px;
    /*	border:1px solid;*/
}

.fuel_popup .distance_final{
    position: absolute;
    right:  0px;
    width: 145px;
    height: 25px;
    background-image: url("/assets/image/infobox/destination_distance.svg");
    background-size: 100%;
    /*	border: 1px solid;*/
}

.fuel_popup .distance_through{
    position: absolute;
    right:  0px;
    width: 145px;
    height: 25px;
    background-image: url("/assets/image/infobox/img_popup_info_gas.svg");
    background-size: 100%;
    /*	border: 1px solid;*/
}


.fuel_popup .text_vertical_bar{
    position: relative;
    top:3px;
    width: 2px;
    height: 11px;
    margin-left: 8px;
    margin-right: 8px;
    background-color: #D5D5D5;
}

.fuel_popup .horizonal_bar{
    position: absolute;
    /*	top:112px;*/
    width: 100%;
    height: 1px;
    background-color: #EDEDED;
}

.fuel_popup .text_area_gray{
    position: relative;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    color: #C6CACE;
}
.fuel_popup .text_area_black{
    position: relative;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    color: #113E46;
}
.fuel_popup .text_area_li_index{
    position: relative;
    top:3px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    color: #113E46;
}
.fuel_popup .text_area_li_num_black{
    position: absolute;
    top:0px;
    width: 100px;
    left: 95px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    color: #113E46;
    /*	border: 1px solid;*/
}
.fuel_popup .text_area_li_num_blue{
    position: absolute;
    top:0px;
    width: 60px;
    left: 95px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    color: #00C4D5;
    /*	border: 1px solid;*/
}


.fuel_popup .point_img{
    position: relative;
    left: 50%;
    width:10px;
    height: 13px;
    margin-left: -5px;
    background-image: url("/assets/image/infobox/popup_point1.svg");
    background-repeat: no-repeat;
    background-size: 100%;

}