@charset "UTF-8";
@import url("/assets/common/css/font.css");
*{
  font-family: Noto Sans KR;
  margin: 0px;
  padding: 0px;
}




/*오른쪽 버튼 */
.map_side_button_area{

  position: absolute;
  top: 25px;
  right: 20px;
  width: 35px;
  height: 145px;
}

.map_side_button{

  width: 35px;
  height: 35px;
  background-color: #ffffff;
  border: 2px solid;
  border-color: #27525a;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0px 2px 5px #00000040;
}

.map_side_button:active{

  opacity: 0.4;
}

.map_side_button_1{

  width: 35px;
  height: 35px;
  background-color: #ffffff;
  border: 2px solid;
  border-color: #33485A;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0px 2px 5px #00000040;
}

.map_side_button_1:active{ /*EV_Demo focus -> active */

  opacity: 0.4;
}

.map_side_button_1:disabled {

  opacity: 0.5;
}
.button_disabled{
  opacity: 0.3;
}

.map_side_button1{
  position: relative;
  top: 8px;
  left: 8px;
  width: 35px;
  height: 35px;
  background-image: url("/assets/image/screen/bt_map_allview_n.svg");
  background-repeat: no-repeat;
}
/***
.map_side_button2{
  position: relative;
  top: 7px;
  left: 6px;
  width: 35px;
  height: 35px;
  background-image: url("/assets/image/screen/bt_map_traffic_n.svg");
  background-repeat: no-repeat;
}
***/

/* [Demo] */
.map_side_button2{
  position: relative;
  top: -4px;
  left: -9px;
  width: 47px;
  height: 47px;
  /*background-image: url("/assets/image/screen/bt_map_traffic_n.svg");*/
  background-image: url("/assets/image/screen/bt_map_fuellist_n.png");/* for Demo */
  background-repeat: no-repeat;
}

.map_side_button3{
  position: relative;
  top: 7px;
  left: 8px;
  width: 35px;
  height: 35px;
  background-image: url("/assets/image/screen/bt_map_zoomin_n.svg");
  background-repeat: no-repeat;
}

.map_side_button4{
  position: relative;
  top: 14px;
  left: 8px;
  width: 35px;
  height: 35px;
  background-image: url("/assets/image/screen/bt_map_zoomout_n.svg");
  background-repeat: no-repeat;
}


/*하단 왼쪽 버튼*/
.map_side_button_area2{

  position: absolute;
  bottom: 20px;
  /*left : 240px;*/
  left : 20px;
  width: 35px;
  height: 95px;
}


.map_side_button5{
  position: relative;
  top: 7px;
  left: 6px;
  width: 35px;
  height: 35px;
  background-image: url("/assets/image/screen/bt_map_layer_n.svg");
  background-repeat: no-repeat;
}

#map_side_button6{
  position: relative;
  width: 35px;
  height: 35px;
  background-position: 8px 8px;
  background-image: url("/assets/image/screen/bt_map_fullmap_n.svg");
  background-repeat: no-repeat;

}

#map_side_button7{
  position: relative;
  width: 35px;
  height: 35px;
  background-position: 7px 7px;
  background-image: url("/assets/image/screen/bt_map_smallmap_n.svg");
  background-repeat: no-repeat;

}

/*하단 버튼*/

.map_bottom_toolbar{
  display: flex;
  position: absolute;
  bottom: 20px;
  /*right: 20px;*/
  left : 80px; /*  세계 지도  언어 선택 버튼  */
  width: 400px;
  height: 26px;
  background-color: #cccccc;
  border-radius: 2px;
  overflow: hidden;
}

.map_bottom_button_bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.map_bottom_button_bar__button {
  padding: 0 1.25rem;
  border: 1px solid #a5a8a8;
  background-color: #6b7a86;
  color: #c4c5c7;
  width: 100px;
  height: 27px;
  font-size: 12px;
}

.map_bottom_button_bar__button:focus {
  border: 1px solid #0940fd;
  -webkit-box-shadow: 0 0 0 2px #6fb5f1;
  box-shadow: 0 0 0 2px #6fb5f1;
  z-index: 1;
  outline: 0px;
  background-color: #33485A;
}


/*지도 위치 앞뒤  버튼 */
.map_side_prev_next_button_area{
  position: absolute;
  top: 27px;
  right: 55px;
  height: 35px;
  width : 80px;
}


.map_side_button1_next{
  position: absolute;
  top: 0px;
  left: 5px;
  width: 37px;
  height: 33px;
  /*background: transparent url('img/bt_mappin_next_n.png') 0% 0% no-repeat padding-box;*/
  /*background-image: url("/assets/image/screen/bt_mappin_next_n.png");*/
  background: transparent url("/assets/image/screen/bt_mappin_next_n.png") 0% 0% no-repeat padding-box;
}

.map_side_button1_next:active{
  background: transparent url("/assets/image/screen/bt_mappin_next_s.png") 0% 0% no-repeat padding-box;
}

.map_side_button1_prev{
  position: absolute;
  top: 0px;
  left: 35px;
  width: 37px;
  height: 33px;
  background: transparent url("/assets/image/screen/bt_mappin_previous_n.png") 0% 0% no-repeat padding-box;
}

.map_side_button1_prev:active{
  background: transparent url("/assets/image/screen/bt_mappin_previous_s.png") 0% 0% no-repeat padding-box;
}