@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');


:root{
  --primary-color:#5a91ed;
  --primary-purple-color: #7481ff;
  --primary-text-color: #4684ea;
  --third-color: #757575;
  --success-color: #35b961;
  --success-bg-color: #edfef2;
  --danger-1-color: #f57b5c;
  --danger-1-bg-color: #fff3f0;
  --danger-2-color: #ef3709;
  --warning-text-color: #ac8537;
  --warning-bg-color: #fef9ee;
  --filter-btn-bg: #7d6ce2;
  --filter-text-color: #9f93ea;
  --filter-tag-bg:#f4f2fc;
  --black-text-color: #3d3f43;
  --gray-text-color: #9ba0aa;
  --list-item-bg-color: #ffd4e1;
  --operation-last-month-sales-number-color:#d87385;
  --operation-expected-sales-number-color: #edbdae;
  --operation-current-sales-number-color:#a1394d;

  /*제공서비스에 들어가는 Pill*/
  --pill-bg-color: #0f62fe;
  --pill-bg-2-color: #aad3ff;

  --date-picker-bg-color: #4f62ca;
  /** 요일 색깔*/
  --day-text-color: #7035ed;
  

  --new-bg-color: #feebeb;
  --new-text-color: #f57e60;
  --ing-bg-color: #edfef2;
  --ing-text-color: #29b457;
  --done-bg-color: #f4f2fc;
  --done-text-color: purple;
}
/* reset */
*{margin: 0; padding: 0; box-sizing: border-box;}
ol,ul,li{list-style: none;}
a{text-decoration: none; color: #333;}
.center{max-width: 1800px; margin: 0 auto; position: relative;}
/* body{ position: relative; margin: 0 auto; height: 100%;} */
/* body{ position: relative; margin: 0 auto;} */
html{height: 100%;}
body{ position: relative; margin: 0 auto;height: 100vh;}
div.wrap {height: 100vh;}
div.layout{height: calc(100vh - 75px);}
#container.container {height: calc(100vh - 75px);}
div.content {height: 100%;}
div.all-flex{height: 100%;}
.clearfix::after{content: ""; display: table; clear: both;}
button {
  outline: none;
  border: none;
}

/* 공통 */
.rounded-md{border-radius: 8px;}
.rounded-lg{border-radius: 160px;}
.rounded-full{border-radius: 50%;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.w-full {width: 100%;}
.wd-40{width: 40%;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.mb-35{margin-bottom: 35px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}
.mb-60{margin-bottom: 60px;}
.mb-65{margin-bottom: 65px;}
.mb-70{margin-bottom: 70px;}
.mb-100{margin-bottom: 100px;}
.mr-10{margin-right: 10px;}
.mr-20{margin-right: 20px;}
.mr-30{margin-right: 30px;}
.ml-1 { margin-left: 1px; }
.ml-2 { margin-left: 2px; }
.ml-3 { margin-left: 3px; }
.ml-4 { margin-left: 4px; }
.ml-5 { margin-left: 5px; }
.ml-6 { margin-left: 6px; }
.ml-7 { margin-left: 7px; }
.ml-8 { margin-left: 8px; }
.ml-9 { margin-left: 9px; }
.ml-10 { margin-left: 10px; }
.ml-11 { margin-left: 11px; }
.ml-12 { margin-left: 12px; }
.ml-13 { margin-left: 13px; }
.ml-14 { margin-left: 14px; }
.ml-15 { margin-left: 15px; }
.ml-16 { margin-left: 16px; }
.ml-17 { margin-left: 17px; }
.ml-18 { margin-left: 18px; }
.ml-19 { margin-left: 19px; }
.ml-20 { margin-left: 20px; }
.ml-21 { margin-left: 21px; }
.ml-22 { margin-left: 22px; }
.ml-23 { margin-left: 23px; }
.ml-24 { margin-left: 24px; }
.ml-25 { margin-left: 25px; }
.ml-26 { margin-left: 26px; }
.ml-27 { margin-left: 27px; }
.ml-28 { margin-left: 28px; }
.ml-29 { margin-left: 29px; }
.ml-30 { margin-left: 30px; }
.mt-20{margin-top: 20px;}
/** 마진 x, y값 조절하는 클래스*/
.mx-5{margin: 0 5px;}
.mx-10{margin: 0 10px;}
.mx-20{margin: 0 20px;}
.mx-30{margin: 0 30px;}
.mx-40{margin: 0 40px;}
.my-10{margin: 10px 0;}
.my-20{margin: 20px 0;}
.my-25{margin: 25px 0;}
.my-30{margin: 30px 0;}
.my-40{margin: 40px 0;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}
.fs-23{font-size: 23px;}
.fs-25{font-size: 25px;}
.fs-30{font-size: 30px;}
.pd-10{padding: 10px;}
.bold{font-weight: bold;}
.blue{color: #4282ea;}
.new-blue{color: var(--pill-bg-color)}
.new-purple{color: var(--filter-btn-bg)}
.gray{color: #666;}
.red{color: red;}
.indigo{color: #3622aa;}
.pink{color: #ff82a9;}
.purple{color: purple;}
.green-blue{color: #2387d3;}
.yellow{color: #f1b641;}
.blue-purple{color: #7d6ce2}
.light-green{color: #1dd75b;}
.sky-blue{background: #f2f8fd; color: blue;}
.on-going{background: #fef9ee; color: #98690c;}
.bg-blue{background: #dfe4ff;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-20{margin-right: 20px;}
.mr-25{margin-right: 25px;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.pd-t5{padding-top: 5px;}
.pd-t6{padding-top: 6px;}
.pd-t7{padding-top: 7px;}
.pd-t8{padding-top: 8px;}
.pd-t10{padding-top: 10px;}
.txt-center{text-align: center;}
/* .text-sm {font-size: 14px;} */
.text-sm {font-size: clamp(0.625rem, 0.5288rem + 0.3077vw, 0.875rem);}
/* .text-md {font-size:16px;} */
.text-md {font-size: clamp(0.625rem, 0.4808rem + 0.4615vw, 1rem);}
/* .text-lg {font-size:20px;} */
.text-lg {font-size: clamp(1rem, 1.25rem + 0vw, 1.25rem);}
/* .text-xl {font-size:24px!important;} */
.text-xl {font-size: clamp(1rem, 1.5rem + 0vw, 1.5rem)!important;}
.text-xl2 {font-size: clamp(1rem, 1.875rem + 0vw, 1.875rem)!important;}
.text-xl3 {font-size: clamp(1rem, 0.5673rem + 1.3846vw, 2.125rem)!important;}
/* .text-xl4 {font-size:38px!important; clamp()} */
.text-xl4 {font-size: clamp(1rem, 0.4712rem + 1.6923vw, 2.375rem)!important;}
.font-bold{font-weight: 700;}
.font-semibold{font-weight:600;}
.font-medium{font-weight: 500;}
.font-normal{font-weight: 400!important;}
.font-light {font-weight:300!important;}
.font-extralight{font-weight: 200;}
.font-thin{font-weight: 100;}
.gray-text-color{color: var(--black-text-color);}

.fr{float: right;}
.bg-pink{background: #ffb8ce;}
.more-down{background: url(../images/more-down.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; margin-left: 7px; cursor: pointer;}
.broken-charger-status.ing{color: var(--ing-text-color); background-color: var(--ing-bg-color);}
.broken-charger-status.new{color: var(--new-text-color); background-color: var(--new-bg-color)!important;}
.broken-charger-status.done{color: var(--done-text-color); background-color: var(--done-bg-color);}
.broken-charger-status.ing, .broken-charger-status.new, .broken-charger-status.done {padding: 5px 10px; border-radius: 30px;}

/* 임시*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}


/* 로그인 페이지 */
.body-css{display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; max-width: none; background-color: white;}
/* body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } */
.log-in-all { max-width: 500px; width: 100%; }
.log-center { position: relative; top: 50%; left: 50%; transform: translate(-50%, 88%); width: 100%; max-width: 500px; }
#log-in { padding: 0 30px; margin-bottom: 40px; }
#log-in .log-in-box { margin-bottom: 10px; }
#log-in .log-in-box input { width: 100%; height: 55px; border-radius: 7px; border: 1px solid #d1d1d1; padding: 0 15px; margin-bottom: 10px; }
#log-in .log-in-box input:first-child { margin-bottom: 10px; }
#log-in .log-in-box input::placeholder { color: #999; font-weight: bold; font-size: 15px; }
#log-in .log-in-box .login-logo { background: url(../images/login-logo.png) no-repeat; width: 231px; height: 60px; margin: 0 auto; margin-bottom: 30px; }
.checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 1px solid #ccc; outline: none; cursor: pointer; border-radius: 50%; position: relative; top: 4px; }
.checkbox:checked { background: #40a3fe; border: none; }
.checkbox::after { content: ""; display: block; width: 10px; height: 10px; background: #fff; border-radius: 50%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; }
.checkbox:checked::after { visibility: visible; }
#log-in label { color: #999; font-size: 15px; }
#log-in .a-btn { border: none; background: #40a3fe; color: white; border-radius: 30px; width: 77px; height: 30px; cursor: pointer; font-weight: bold; position: absolute; right: 41px; top: 12px; }
#log-in-bottom { padding: 0 30px; }
#log-in-bottom .check-btn { width: 100%; height: 50px; border: none; background: #40a3fe; color: white; border-radius: 5px; font-weight: bold; cursor: pointer; }
#log-in-bottom .check-txt { width: 100%; height: 100%; background: #f0f0f0; padding: 20px 30px; color: #999; font-size: 14px; }
#log-in-bottom .check-txt .bold { font-weight: bold; margin-bottom: 10px; }



/* 전체 header */
header .h_inner{height: 75px; width: 100%; background-color: #f3f4f6; border-radius: 5px; position: relative;}
header .h_inner .tit_h1{padding: 0 30px;}
header .h_inner .tit_h1 a{background: url(../images/logo.png) no-repeat; width: 158px; height: 40px; position: absolute; z-index: 999; top: 16px;}
header .h_inner .tit_h1 p{position: absolute; z-index: 999; top: 23px; font-size: 22px; left: 200px; color: #4282ea;}

header .h_inner .search_box{width: 30%; position: absolute; left: 50%; transform: translate(-50%,-50%); top: 38px; display: flex;}
header .h_inner .search_box input{width: 155%; height: 45px; border-radius: 5px; border: 1px solid #d1d1d1; padding: 0 20px;}
header .h_inner .search_box .search_icon{background: url(../images/search_icon.png) no-repeat; width: 24px; height: 24px; position: absolute; right: 20px; top: 10px; cursor: pointer;}

header .h_inner .right_menu{position: absolute; right: 30px; top: 25px;}
header .h_inner .right_menu ul{display: flex;gap: 20px;}
header .h_inner .right_menu ul li:last-child{margin-right: 0px;}
header .h_inner .right_menu .talk_icon{position: relative;}
/*펄스 애니메이션*/
@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.2);
      opacity: 0.5;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}
header .h_inner .right_menu .talk_icon:after{content: "";width: 15px; height: 15px; background-color: var(--danger-2-color);position: absolute;
  top: -4px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 1.5s infinite;}
header .h_inner .right_menu .alarm_icon:after{content: "";width: 15px; height: 15px; background-color: var(--danger-2-color);position: absolute;
  top: -4px;
  right: 40px;
  width: 10px;
  height: 10px;
  
  border-radius: 50%;
  animation: pulse 1.5s infinite;}
header .h_inner .right_menu .talk_icon a{background: url(../images/speech-bubble.png) no-repeat; background-position: center;background-size:contain; display: inline-block; width: 24px; height: 24px;}
header .h_inner .right_menu .alarm_icon a{background: url(../images/notification-bell.png) no-repeat;background-position: center;background-size:contain; display: inline-block; width: 24px; height: 24px;}
header .h_inner .right_menu .my_icon a{background: url(../images/user-icon.png) no-repeat;background-position: center;background-size:contain; display: inline-block; width: 24px; height: 24px;}

.gnb{
  width: 90px;
  /* height: 100vh;  */
  height: calc(100vh - 75px);
   background-color: #fff; position: relative;float: left;
}
.gnb ul{text-align: center;}
.gnb ul li:last-child{margin-bottom: 0px; transition: background .5s ease;}
.gnb ul li{ padding: 20px 10px; transition: all 0.25s ease;}
.gnb ul li:last-child{margin-bottom: 0px;}
.gnb ul li a{font-size: 13px;}

.gnb .home_icon{background: url(../images/home_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb .home_icon:hover{background: url(../images/home_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb .home_icon.active{background: url(../images/home_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}

.gnb .market_icon{background: url(../images/franchise-management-default.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px;}
.gnb .market_icon:hover{background: url(../images/franchise-management-blue.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb .market_icon.active{background: url(../images/franchise-management-blue.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px; transition: 0.25s;}

.gnb .charger_icon{background: url(../images/charger-management-default.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px;}
.gnb .charger_icon:hover{background: url(../images/charger-management-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb .charger_icon.active{background: url(../images/charger-management-blue.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px; transition: 0.25s;}

.gnb .customer_icon{background: url(../images/crm-management-default.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px;}
.gnb .customer_icon:hover{background: url(../images/crm-management-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb .customer_icon.active{background: url(../images/crm-management-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}

.gnb .sales_icon{background: url(../images/sales-profit-default.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px;}
.gnb .sales_icon:hover{background: url(../images/sales-profit-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb .sales_icon.active{background: url(../images/sales-profit-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}

.gnb .statistics_icon{background: url(../images/statistics-default.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px;}
.gnb .statistics_icon:hover{background: url(../images/statistics-blue.png) no-repeat;background-size: contain; display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb .statistics_icon.active{background: url(../images/statistics-blue.png) no-repeat; background-size: contain;display: inline-block; width: 24px; height: 24px; transition: 0.25s;}

.gnb .notice_icon{background: url(../images/notice_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;} 
.gnb .notice_icon:hover{background: url(../images/notice_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px; transition: 0.25s;} 
.gnb .notice_icon.active{background: url(../images/notice_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px; transition: 0.25s;} 
.gnb:after{
    content: "";
    display: block;
    clear: both;
}

.all-flex{display: flex; justify-content: space-between;}


/* charger-managemet-dashboard clearfix */


/************** 대시보드 **************/
#main_dash{ padding: 10px;}
#main_dash .item_box{margin-left: 90px;}
#main_dash .item_box .box{margin: 0 15px 15px 0; padding: 20px;}
#main_dash .item_box .s-box{}
/* #main_dash .item_box .s-box .num{float: right;} */
#main_dash .item_box .s-box .btm-txt{position: absolute; bottom: 10px;}
#main_dash .item_box .s-box .btm-txt span{display: inline-block; background: #feebeb; border-radius: 50px; width: 70px; text-align: center; color: red;}
#main_dash .item_box .s-box .btm-txt span::before{content: ""; background: url(../images/up_icon_red.png) no-repeat; background-size: contain; background-position:center; display: inline-block; width: 17px; height: 14px; margin-right: 3px;}
#main_dash .item_box .s-box .btm-txt02 span{display: inline-block; background: #feebeb; border-radius: 50px; width: 70px; text-align: center; color: var(--danger-2-color);}
#main_dash .item_box .s-box .btm-txt02 span::before{content: ""; background: url(../images/drop_icon_blue.png) no-repeat;background-size:contain; background-position: center;display: inline-block; width: 17px; height: 14px; margin-right: 3px;}
#main_dash .item_box .box02{padding: 20px;background-color: #fff;}
.statistics-wrapper{background-color: #f8f9fa;
  border-radius: 5px;padding: 10px 20px; border: 1px solid #ddd;}
#main_dash .item_box .box:last-child{margin: 0px;}
#main_dash .item_box .s-box03 .today-con01{display: flex; justify-content: space-between; align-items: center;}
#main_dash .item_box .s-box03 .today-txt{display: flex;}
#main_dash .item_box .s-box03 .today-txt p{ padding: 5px 13px; border-radius: 5px; cursor: pointer; color: var(--date-picker-bg-color);}
#main_dash .item_box .s-box03 .today-txt p:nth-of-type(1){background: var(--date-picker-bg-color); color: #fff; border: none;}
#main_dash .item_box .s-box03 .today-box .tbox{width: 60%; height: 132px; border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px;}
#main_dash .item_box .s-box03 .today-box .txt-center .btm-txt{}
#main_dash .item_box .s-box03 .today-box .txt-center .btm-txt .blue-btn{background: #dfe4ff; border-radius: 50px; display: inline-block; width: 60px;}
#main_dash .item_box .s-box03 .today-box .txt-center .btm-txt .red-btn{background: #feebeb; border-radius: 50px; display: inline-block; width: 60px;}
#main_dash .item_box .s-box03 .today-box .txt-center .place-name-red{background-color: #feebeb; border-radius: 50px; display: inline-block; padding: 2px 10px; color: red;}
#main_dash .item_box .s-box03 .today-box .txt-center .place-name-blue{background-color: #dfe4ff; border-radius: 50px; display: inline-block; padding: 2px 10px; color: #4282ea;}
#main_dash .item_box .s-box03 .today-box .txt-center .btm-txt span::before{content: ""; background: url(../images/uptrend_icon.png) no-repeat; display: inline-block; width: 17px; height: 14px; margin-right: 3px;}
#main_dash .item_box .s-box03 .today-box .txt-center .btm-txt02 span::before{content: ""; background: url(../images/downtrend_icon.png) no-repeat; display: inline-block; width: 17px; height: 14px; margin-right: 3px;}
#main_dash .item_box .s-box03 .today-box .tab-con {width: 46%; position: absolute; right: 11px;}
#main_dash .item_box .s-box03 .today-box{display: flex;}
#main_dash .item_box .s-box03 .today-box .t-all-txt{width: 67%;}
.map-btn-wrapper{position: relative; height:100%; max-height: 553px;}
.map-btn-wrapper-inner{display: flex; gap: 5px;z-index: 100;position: absolute;
  bottom: 10px;
  right: 12px;}
.map-btn-wrapper-inner button {
  padding: 10px;
 
}
.map-btn-wrapper-inner button:first-of-type, .map-btn-wrapper-inner button:last-of-type{
  width: 30px;
  height: 30px;
  text-indent: -9999px;
}
.map-btn-wrapper-inner button:first-of-type{
  background: url(../images/plus-icon.png) no-repeat;
  background-position: center;
  background-size: 10px;
  background-color:#f0f0ff ;

}
.map-btn-wrapper-inner button:last-of-type{
  background: url(../images/minus-icon.png) no-repeat;
  background-position: center;
  background-size: 10px;
  background-color:#f0f0ff ;
}

.map-btn{
  border-radius: 5px;
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--pill-bg-color);
}
#main_dash .table-scroll{max-height: 300px; overflow-y: scroll;}
#main_dash .table-scroll02{max-height: 200px; overflow-y: scroll;}

#main_dash .all-each-name{display: flex; justify-content: space-between;}
#main_dash .all-each-name .each-name{display: flex; justify-content: space-between;}
#main_dash .all-each-name .each-name p{margin-bottom: 5px;}
#main_dash .all-each-name .each-name p:last-child{margin-bottom: 0px;}
#main_dash .all-each-name .each-name .charging::before{content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #3273ff; margin-right: 5px; position: relative; top: -2px;}
#main_dash .all-each-name .each-name .can-use::before{content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #ffdeaa; margin-right: 5px; position: relative; top: -2px;}
#main_dash .all-each-name .each-name .break::before{content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #ffb8ce; margin-right: 5px; position: relative; top: -2px;}
#main_dash .all-each-name .each-name .res::before{content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #bdc1ca; margin-right: 5px; position: relative; top: -2px;}
#main_dash .all-each-name .each-name .done::before{content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50px; background: #bdc1ca; margin-right: 5px; position: relative; top: -2px;}

#main_dash .charger_con .cm-all-box{width: 50%;}
#main_dash .charger_con .cm-con{display: flex; justify-content: space-between;}
#main_dash .charger_con .cm-img{background: url(../images/circle=img.png) no-repeat; width: 214px; height: 208px;}
#main_dash .charger_con .cm-box{width: 48%; height: 100px; background: #fff; padding: 10px; margin-right: 10px; float: right; border-radius: 5px;}
#main_dash .charger_con .cm-box:first-child{border: 1px solid red; position: relative;}


#main_dash .charger_con .cm-box:nth-of-type(2){
  border: 2px solid #eceded;
}
/* #main_dash .charger_con .cm-box:first-child::after{content: ""; background: url(../images/notice-alarm.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: absolute; right: -6px; top: -6px;} */
/* #main_dash .charger_con .cm-box:first-child::after{content: var(--after-content, ""); display: inline-block; width: 16px; height: 16px; position: absolute; right: -6px; top: -6px;} */

#main_dash .charger_con .cm-box01{display: flex;}
#main_dash .down-table{background: #fff; padding: 15px; border-radius: 5px;}
#main_dash .down-table table{border-collapse: collapse; width: 100%; font-size: 13px;}
#main_dash .down-table table th{background: #f9f9f9; text-align: left;}
#main_dash .down-table table th,td{padding: 5px;}


/* 대시보드 - 가맹점 현황, 고객관리, */
#main_dash .first_box{display: flex;}
#main_dash .first_box article.market_con, #main_dash .first_box article.charger_con, #main_dash .first_box .second_box .down_box .customer_con, #main_dash .first_box .second_box .down_box .manage_con{border: 1px solid #ddd;}
#main_dash .second_box{width: 39%;}
#main_dash .second_box .manage_con{height: 332px; background: #f3f4f6; margin-right: 0; border-radius: 5px;}
#main_dash .second_box .customer_con{height: 332px; background: #f3f4f6; margin-right: 0; border-radius: 5px;}
#main_dash .second_box .nc-box{height: 121px; background: #fff; border-radius: 5px; padding: 10px; position: relative;}
/* #main_dash .second_box .nc-box::after{content: ""; background: url(../images/notice-alarm.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: absolute; right: -6px; top: -6px;} */
#main_dash .second_box .cc-list{width: 70%; height: 252px; background: #fff; border-radius: 5px; padding: 10px;}
#main_dash .second_box .cc-all-con{display: flex;}
#main_dash .second_box .cc-all-con .left-box{width: 30%; margin-right: 10px;}
#main_dash .second_box .cc-all-con .left-box .box-num{position: absolute; right: 10px; bottom: 20px;}
#main_dash .second_box .cc-list table{border-collapse: collapse; width: 100%;}
#main_dash .second_box .cc-list table th{background-color: #f9f9f9; text-align: left;}
#main_dash .second_box .cc-list table th, td{padding: 5px;}
#main_dash .second_box .cc-list table .new{background: #feebeb; color: red;}
#main_dash .second_box .cc-list table .ing{background-color: #edfef2; color: #24b254;}

#main_dash .market_con{width: 30%; height: 680px; background-color: #f3f4f6; border-radius: 5px;}
#main_dash .market_con .icon01{background: url(../images/franchise-management-black.png) no-repeat; background-position: center; background-size: contain;display: inline-block; width: 24px; height: 24px; margin-right: 10px;}
#main_dash .market_con .market_txt{display: flex; align-items: center; margin-bottom: 15px; justify-content: space-between;}
#main_dash .txt_icon{display: flex; align-items: center;}
#main_dash .more_icon{background: url(../images/menu-icon.png) no-repeat;  background-position: center;display: inline-block; width: 35px; height: 25px; cursor: pointer;}
#main_dash .market_con .small_box_item{}
#main_dash .market_con .small_box_item .f_small_box{display: flex; margin-bottom: 10px;}
#main_dash .market_con .small_box_item .f_small_box .s-box{width: 50%; height: 115px; border-radius: 5px; background: #fff; position: relative;}
#main_dash .market_con .small_box_item .s-box01{margin-right: 10px;}
#main_dash .market_con .small_box_item .s-box02{}
#main_dash .market_con .small_box_item .s-box03{width: 100%; height: 470px; border-radius: 5px; background-color: #fff; position: relative;}
.donut-icon {position:absolute;top: -8px; right: -8px; width: 15px;height: 15px;border-radius: 50%;border: 5px solid #FF4500;  background-color: transparent;}


/* 대시보드  - 충전기 관리 */
#main_dash .charger_con{width: 30%; height: 680px; background-color: #f3f4f6; border-radius: 5px;}
#main_dash .charger_con .charger_txt{display: flex; align-items: center; justify-content: space-between;}
#main_dash .charger_con .icon02{background: url(../images/charger-management-black.png) no-repeat;background-position: center;background-size: contain; display: inline-block; width: 24px; height: 24px; margin-right: 10px;}


/* 가맹점관리 > 가맹점 정보 */
.other-section .info .table-scoll{max-height: 250px; overflow-y: scroll;}
.down-section .consult-con .table-scroll{max-height: 250px; overflow-y: scroll;}


/* 대시보드 - 운영 매출 */
#main_dash .manage_con .manage_txt{display: flex; align-items: center; justify-content: space-between;}
#main_dash .manage_con .manage_txt .icon03{background: url(../images/sales-profit-black.png) no-repeat; background-position:center; background-size: contain; display: flex; width: 24px; height: 24px; margin-right: 10px;}
#main_dash .manage_con .th-m-income{display: flex; justify-content: space-between; background: #fff; border-radius: 5px; height: 70px; padding: 10px;}
#main_dash .manage_con .th-m-income .num-area .fir-span{background: #feebeb;border-radius: 50px; padding: 0 10px; }
#main_dash .manage_con .th-m-income .num-area .fir-span::before{content: ""; display: inline-block; width: 16px; height: 16px; background: url(../images/uptrend_icon.png) no-repeat; position: relative; top: 3px; margin-right: 3px;}
#main_dash .manage_con .th-m-income .num-area .last-span{background: #dfe4ff;border-radius: 50px; padding: 0 10px;}
#main_dash .manage_con .th-m-income .num-area .last-span::before{content: ""; display: inline-block; width: 16px; height: 16px; background: url(../images/downtrend_icon.png) no-repeat; position: relative; top: 3px; margin-right: 3px;}
#main_dash .manage_con .down-box{display: flex; justify-content: space-between;}
#main_dash .manage_con .down-box .tm-box{background-color: #fff; border-radius: 5px; width: 50%; height: 164px; padding: 10px; display: flex; justify-content: space-between;}
#main_dash .manage_con .down-box .long-chart img{width: 75%;}
#main_dash .manage_con .down-box .short-chart img{width: 78%;}
#main_dash .manage_con .down-box .tm-left-txt{width: 63%;}
#main_dash .manage_con .down-txt .guess{background: #feebeb; border-radius: 50px; padding: 0 7px; color: red;}


/* 대시보드 - 고객 관리 */
#main_dash .customer_con .customer_txt{display: flex; align-items: center; justify-content: space-between;}
#main_dash .customer_con .customer_txt .icon04{background: url(../images/crm-management-black.png) no-repeat;background-position: center; background-size: contain; display: inline-block; width: 24px; height: 24px; margin-right: 10px;}

.test{
  color: var(--filter-btn-bg);
}
/* 대시보드 - 운영 매출 */
#main_dash .sales_con{width: 100%; height: 400px; background-color: #f3f4f6; border-radius: 5px;}
#main_dash .sales_con .sales_txt{display: flex; align-items: center; justify-content: space-between;} 
#main_dash .sales_con .sales_txt .icon05{background: url(../images/statistics-black.png) no-repeat; background-position: center; background-size: contain;  display: inline-block; width: 24px; height: 24px; margin-right: 10px;}
#main_dash .sales_con .sales_txt .txt_icon .today-txt{display: flex;background-color: #0f62fe;
  border-radius: 4px;}
/* #main_dash .sales_con .sales_txt .txt_icon .today-txt p{border: 1px solid #4282ea; padding: 5px 20px; border-radius: 5px; color: #4282ea; cursor: pointer;} */
#main_dash .sales_con .sales_txt .txt_icon .today-txt p{ padding: 10px 20px; border-radius: 5px; cursor: pointer;border: 1px solid var(--pill-bg-color); background:var(--pill-bg-color); color: #fff;text-wrap: nowrap;}
/* #main_dash .sales_con .sales_txt .txt_icon .today-txt p:first-child{} */
/* #main_dash .sales_con .sales_txt .txt_icon .today-txt p:nth-of-type(1){border: 1px solid #4282ea; background: #4282ea; color: #fff;} */
#main_dash .sales_con .sales_txt .txt_icon .today-txt p.selected {background: #fff; color: var(--pill-bg-color);}
/* #main_dash .sales_con .sales_txt .txt_icon .today-txt p:nth-of-type(1){background: #fff; color: var(--pill-bg-color);} */
#main_dash .sales_con .sales_txt .txt_icon .today-txt p:nth-of-type(2):before{content: ""; width: 1px; height: 100%; background-color: var(--gray-text-color);}
/* #main_dash .sales_con .sales_txt .txt_icon .today-txt p:last-child{border: 1px solid #4282ea; background: #4282ea; color: #fff;} */
#main_dash .sales_con .sales_txt .right-all-con{display: flex;}
#main_dash .sales_con .sales_txt .right_txt{display: flex; margin-right: 10px;}
#main_dash .sales_con .sales_txt .right_txt p{margin-right: 60px;}
#main_dash .sales_con .sales_txt .right_txt p:last-child{margin-right: 20px;}
#main_dash .sales_con .x-long-chart img{width: 72%;}
#x-long-chart {min-height: 300px;height: 300px;}
/* #main_dash .sales_con .sales_txt .container{position: relative; right: -195px; display: flex; align-items: center; gap: 5px;} */
#main_dash .sales_con .sales_txt .container{position: relative; display: flex; align-items: center; gap: 5px;}
/* #main_dash .sales_con .sales_txt .container input{height: 30px;} */
#main_dash .sales_con .sales_txt .container select{height: 30px; width: 175px;} 
/**매출 통계에 나오는 차트 툴팁**/
.sales-tooltip{
  padding: 10px;
  color: #fff;
  border-radius: 5px;
  width: 150px;
  /* height: 100px; */
}
.compared-to-last-month{display: flex; gap: 10px;}
.sales-price-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.sales-tooltip-footer{
  display: flex; 
  align-items: center;
  gap: 10px;
  font-size: 12px;
  background-color: var(--danger-1-bg-color);
  color: var(--danger-2-color);
  border-radius: 10px;
  padding: 0px 8px;
}
.sales-tooltip-icon{
  background: url(../images/up_icon_red.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
  text-indent: -9999px;

}
.statistics-filter{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  padding: 5px 0 5px 0;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}
.charger-count-container{
  width: 150px;
}
.franchise-name{
}

/* .date-input-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  padding: 5px 0 5px 0;
  background-color: #fff;
  cursor: pointer;
} */

.data-range-wrapper, .charger-count-wrapper,.date-unit-wrapper{
  position: relative;
}
.data-range-wrapper {
  padding-right: 20px;
  min-width: 280px;
}
.charger-count-wrapper{
  width: 150px;
}
.date-unit-wrapper{
  width: 100px;
}

.statistics-filter-input{
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  padding: 0;
  color: var(--gray-text-color)!important;
  cursor: pointer;
}
.date-range-wrapper{position: relative;}
#date-range.date-filter{
  width: 278px;
}

.date-range-wrapper.franchise-management-date-range #date-range.date-filter{
  /* width: 200px;
  min-width: 200px; */
  width: 200px;
  min-width: 200px;
}

#charger-count.charger-filter{
  width: 150px;
}
#date-unit.date-unit-filter{
  width: 50px;
}

.statistics-right{
  display: flex;
  align-items: center;
  gap: 20px;
}

#statistics-container{
  width: 100%;
  height: 290px;
  overflow: hidden;
}
.date-unit-container{
  position: relative;
}
.date-unit-dropdown-wrapper{
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  top: 63px;
  left: 0;
  width: 85px;
  background-color: #e3e5ea;
  padding: 10px;
  z-index: 100;
  display: none;
  border-radius: 5px;
}
.date-unit-dropdown-wrapper p.active {
  background-color: #4f62ca;
  color: #fff;
}

.date-unit-dropdown-wrapper.active{
  display: block;
}

.date-unit-dropdown-wrapper p {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-wrap: nowrap;
  font-size: 15px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.date-unit-dropdown-wrapper p:last-of-type{
  margin-bottom: 0;
}


/* #dateRange {
  border: none;
  background: transparent;
  font-size: 14px;
  width: 260px;
  outline: none;
  padding: 0;
  color: var(--gray-text-color);
  cursor: pointer;
} */

.calendar-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: url(../images/calendar-input-icon.png) no-repeat;
  background-position: center;
  background-size: cover;
  width: 15px;
  height: 15px;
}

.calendar-icon.franchise-management {
  position: absolute;
  right: 5px;
  top: 62%;
  transform: translateY(-73%);
  cursor: pointer;
  background: url(../images/calendar-input-icon.png) no-repeat;
  background-position: center;
  background-size: cover;
  width: 15px;
  height: 15px;
}


/** 이건 드랍다운 형식이 아닌 기간 */
/* .date-range-selector {
  width: 280px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 63px;
  left: 0;
  z-index: 100;
}

.date-range-selector.active{
  display: block;
}

.period-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.period-buttons-wrapper button {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  color: black;
}

.period-buttons-wrapper button.active {
  background-color: #4a90e2;
  color: white;
}

#date-calendar-wrapper.active{
  display: block;
}

.date-inputs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.single-data-input-wrapper {
  position: relative;
  width: 45%;
  cursor: pointer;
}

.date-single-input {
  width: 150.5px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  text-align: center;
  outline: none;
  cursor: pointer;
  width: 100%!important;
}

.single-data-input-wrapper .date-picker-icon {
  background: url(../images/date-picker-icon.png) no-repeat;
  background-position: center;
  width: 14px;
  height: 14px;
  background-size: contain;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

.date-separator {
  font-size: 20px;
}

.date-range-search-btn {
  width: 100%;
  padding: 10px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
} */






/**여기 끝*/
.date-range-selector {
  width: 280px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 63px;
  left: 0;
  z-index: 100;
}

.date-range-selector-tab2 {
  /* width: 280px; */
  background-color: #f0f0f0;
  /* padding: 10px; */
  border-radius: 5px;
  /* display: none; */
  /* position: absolute; */
  /* top: 63px;
  left: 0; */
  z-index: 100;
}

.date-range-selector.franchise-management{
  top: 32px;
}
.date-range-selector.franchise-management-tab2{
  top: 32px;
}

.date-range-selector.franchise-management.active{
  display: block;
}

.date-range-selector.active{
  display: block;
}

.period-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.period-buttons-wrapper button {
  flex: 1;
  padding: 5px;
  /* border: 1px solid #ccc; */
  background-color: white;
  cursor: pointer;
  color: black;
}

.date-range-selector .period-buttons-wrapper button:nth-child(odd){
  border-right: 1px solid #ddd;
}
.date-range-selector .period-buttons-wrapper button:nth-child(even){
  border-right: 1px solid #ddd;
}
.date-range-selector .period-buttons-wrapper button:nth-child(5){
  border-right: none;
}

.date-range-selector .period-buttons-wrapper button:nth-child(1){
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
/*홈 -> 기간 조회 */
.statistics-right .container .date-range-selector .period-buttons-wrapper button:nth-child(4){
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: none;
}
.date-range-selector .period-buttons-wrapper button:nth-child(5){
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


.period-buttons-wrapper button.active {
  background-color: #4f62ca;
  color: white;
}


#date-calendar-wrapper.active, 
#date-calendar-wrapper-2.active, 
#date-calendar-wrapper-3.active,  
#date-calendar-wrapper-4.active, 
#date-calendar-wrapper-5.active,
#date-calendar-wrapper-6.active,
#date-calendar-wrapper-8.active{
  display: block;
}


.franchise-management-2 .date-inputs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.date-inputs {
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  margin-bottom: 10px;
  /* flex-direction: column; */
}

.single-data-input-wrapper {
  position: relative;
  /* width: 45%; */
  width: 100%;
  cursor: pointer;
}
.data-inputs-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#hourly-time-wrapper{
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.date-single-input {
  width: 150.5px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  text-align: center;
  outline: none;
  cursor: pointer;
  width: 100%!important;
}

.single-data-input-wrapper .date-picker-icon {
  background: url(../images/date-picker-icon.png) no-repeat;
  background-position: center;
  width: 14px;
  height: 14px;
  background-size: contain;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

.date-separator {
  font-size: 20px;
}

.date-range-search-btn {
  width: 100%;
  padding: 10px;
  background-color: #4f62ca;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* .single-data-input-wrapper > #date-range-input {

} */

/*달력*/
table.calendar-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

table.calendar-table th, table.calendar-table td {
  text-align: center;
  padding: 11px;
  border:none!important;
}

table.calendar-table td {
  cursor: pointer;
}
table.calendar-table th {
  background-color: #fff;
  color: var(--day-text-color);
}

table.calendar-table td:hover {
  background-color: #f0f0f0;
}

.other-month {
  color: #ccc;
}

.today {
/* background-color: #e0e0e0; */
  background-color: #eb5757;
  font-weight: bold;
  color: #fff;
}
.selected {
  background-color: #6d31ed;
  color: white;
}

.selected:hover {
  background-color: #0056b3;
}


.other-month {
  color: #ccc;
}
.today.range-start, .today.range-end, .today.in-range {
   background-color: #eb5757;
  font-weight: bold;
  color: #fff;
}
.in-range {
  background-color: #e6f2ff;
}
.future {
  color: #ccc;
  cursor: not-allowed;
}

.range-start, .range-end {
  background-color: #6d31ed!important;
  /* border-radius: 100%; */
  color: white;
}

.range-start:hover, .range-end:hover {
  background-color: #0056b3;
}
#datepicker {
  width: 330px;
  padding: 22px;
  border-radius: 5px;
  background-color: #f3f4f6;
}

.datepicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.statistics-wrapper #date-calendar-wrapper{
  top: 57px;
  left: -333px;
}

#date-calendar-wrapper-2{
  top: 158px;
  left: 0;
}

#date-calendar-wrapper-3{
  top: 158px;
  left: 0;
}
#date-calendar-wrapper-4{
  top: 64px;
  right: 281px
}

#date-calendar-wrapper-8{
  top: 63px;
  left: -333px;
}

.operation-sales-date #date-calendar-wrapper-5{
  top: 64px;  
  right: 281px
}
#date-calendar-wrapper-6{
  top: 31px;
  left: -333px;
}


#date-calendar-wrapper, 
#date-calendar-wrapper-2,
 #date-calendar-wrapper-3, 
 #date-calendar-wrapper-4, 
 #date-calendar-wrapper-5,
 #date-calendar-wrapper-6,
 #date-calendar-wrapper-8 {
  display: none;
  position: absolute;
  background-color: #fff;
  z-index: 201;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
  border-radius: 5px;
}



/* #date-calendar-wrapper-3.franchise-management-3{
  
} */


#date-calendar-wrapper.franchise-management{
  /* top: 32px; */
}


.navigation-buttons button {
  background: transparent;
  color: grey;
  cursor:pointer;

}

.navigation-buttons button:first-child{
  margin-right: 10px;
}
.calendar-disabled {
  color: #ccc;
  background-color:#fff!important;
  cursor: not-allowed!important;
}


#tab2 .date-range-selector-2 .period-buttons-wrapper button {
  border: none;
  background-color: #f3f4f6;
}

#tab2 .date-range-selector-2 .period-buttons-wrapper button.active{
  background-color: #4f62ca;
}

#tab2 .date-range-selector-2 .period-buttons-wrapper button:nth-child(1), #tab4 .date-range-selector-3 .period-buttons-wrapper button:nth-child(1){
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#tab2 .date-range-selector-2 .period-buttons-wrapper button:nth-child(odd), #tab4 .date-range-selector-3 .period-buttons-wrapper button:nth-child(odd){
  border-right: 1px solid #ddd;
}
#tab2 .date-range-selector-2 .period-buttons-wrapper button:nth-child(even), #tab4 .date-range-selector-3 .period-buttons-wrapper button:nth-child(even){
  border-right: 1px solid #ddd;
}
#tab2 .date-range-selector-2 .date-range-search-btn{
  background-color: #4f62ca;
}

#tab2 .date-range-selector-2 .period-buttons-wrapper button:nth-child(5), #tab4 .date-range-selector-3 .period-buttons-wrapper button:nth-child(5){
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: none;
}




/***************가맹점 관리 ***************/
/* 가맹점 관리 사이드 헤더 */
.gnb02 .home_icon{background: url(../images/home_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb .home_icon:hover{background: url(../images/home_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px; transition: 0.25s;}
.gnb02 .market_icon{background: url(../images/mart_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb03 .charger_icon{background: url(../images/charger_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb03 .home_icon{background: url(../images/home_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}



.franchise-management-first-box {
  background-color: #f3f4f6;
  border-radius: 5px;
  width: 30%;
  margin: 10px 10px 10px 0;
  padding: 15px;
  padding-bottom: 0;
  /* height: calc(100% - 10px); */
  /* height: calc(100vh - 22px); */
  height: calc(100vh - 95px);
  border: 1px solid #ddd;
}
.franchise-management-first-box .franchise-nation-wide {
  max-height: 830px;
  height: 60%;
}
.franchise-management-first-box .franchise-nation-wide .color-map {
  width: 100%;
  height: 100%;
  max-height: 530px;
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 5px;
}

.franchise-management-first-box .franchise-nation-wide-charts{
  height: 46%;
  max-height: 329px;
  gap: 20px;
}

.franchise-management-first-box .franchise-nation-wide-charts .ds-box {
  width: 50%;
    /* height: 263px; */
    height: 100%;
    /* max-height: 350px; */
    max-height: 350px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
}



.franchise-management-first-box .franchise-nation-wide-charts .ds-box #cb-type-container, .franchise-management-first-box .franchise-nation-wide-charts .ds-box #cb-status-container {
  width: 100%;
  max-width: 179px;
  max-height: 170px;
  height: 100%;
  min-height: 100px;
  margin: 0 auto;
}

.franchise-management-first-box .franchise-nation-wide-charts .ds-box .legend {
  display: flex;
  justify-content: space-around;
  max-height: 70px;
  min-height: 30px;
}

/*충전기 관리 페이지 */

#container .content .all-flex #market_dash.charger-management-dashboard{
  width: 100%;
  margin: 10px 10px 10px 0;
  padding: 20px;
  background-color: #f3f4f6;
  height: calc(100% - 25px);
  /* height: calc(100% - 100px); */
  border-radius: 5px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;

}

.charger-management-dashboard > .first_box .down-box02{
  height: 84%;
  background: #fff; border-radius: 5px; padding: 20px;
}
/* .operation-sales > .operation-sales-summary {
  max-height: 100%;

} */

.charger-management-left-box {
  height: 100%;
  box-sizing: border-box;
}

.operation-sales-last-month{
  background-color: var(--operation-last-month-sales-number-color);
  padding: 3px 13px;
  border-radius: 25px;
  color: #fff;
}
.operation-sales-last-month-text{
  color: var(--operation-last-month-sales-number-color);
}

.current-operation-sales-text{
  color: var(--operation-current-sales-number-color);
}

.expected-operation-sales-text{
  color: var(--operation-expected-sales-number-color);
}



.charger-management-data{
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  
  /* height: 71%; */
  height: 72%;
  max-height: 768px;
  margin-top: 40px;
  border: 1px solid #ddd;
}

.charger-management-data #charger-state-chart, .charger-management-data #use-count-chart-container {
  /* width: 100%;
  height: 100%; */
  width: 83%;
  height: 95%;
  overflow: hidden;
}

.charger-management-data #charger-state-chart{
  max-height: 290px;
  min-height: 150px;
}
/* .charger-management-data #charger-state-chart, .charger-management-data #use-count-chart-container { */
.charger-management-data #use-count-chart-container {
  /* max-height: 350px; */
  max-height: 270px;
  min-height: 150px;
}

.charger-management-data .db-top {
  background-color: #fff;
  border-radius: 5px;

}
.charger-management-data .db-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.charger-management-data .db-top .txt-box .bt-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

}
.charger-management-data .db-top .txt-box .bt-txt span:first-child{
  color: #1031a6;
}
.charger-management-data .charger-state-btn .state-btn button {
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  background-color: transparent;
  position: relative;
}

.charger-management-data .charger-state-btn .state-btn button:nth-child(3n)::before, .charger-management-data .charger-state-btn .state-btn button:nth-child(2n)::before{
  content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    height: 50%;
    width: 1px;
    background-color: #ecedf0;
}
.charger-management-data .charger-state-btn .state-btn button.active {
  background-color: #323743;
  color: white;
}
.hide-before::before{
  display: none;
}

.charger-management-left-box article div.check-box {
  height: max(100px, 56%);
}

#countContainer{
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  position: relative;
}

#filter-component-container-1, #filter-component-container-2{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#total-count-container{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/**가맹점 관리 충전소 페이지 레이아웃*/

#container02 #tab1.main-content.active {
  height: calc(100% - 10px);
}

/*가맹점관리*/

.filter-search-btn{
  padding: 7px 20px;
  font-size: 14px;
  background-color: var(--filter-btn-bg);
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
}

.filter-component-wrapper-inner{
  display: flex;
  align-items: center;
}

.filter-search-btn.right{
  margin-left: 5px;
  text-wrap: nowrap;
}
.filter-search-btn.left{
  margin-right: 5px;
  text-wrap: nowrap;
}


#market_dash .item_box .franchise-compraison {
  width: 70%;
  margin-right: 10px;
  height: 100%;
  margin-left: 0;
}
.franchise-comparison .market-compare {
  padding: 15px;
  margin-top: 10px;
  width: 100%;
  background: #f3f4f6;
  /* height: calc(32% - 10px); */
  border-radius: 5px;
  border: 1px solid #ddd;
}

.franchise-comparison .white-box {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
}
.franchise-comparison .white-box .mark-all-text {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.franchise-comparison .white-box .mark-all-text .mar-left-txt{
  display: flex;
  align-items: center;
}

#market_dash .item_box .franchise-comparison .market-list{
  padding: 15px;
  margin-top: 10px;
  background-color: #f3f4f6;
  /* height: calc(67% - 10px); */
  border-radius: 5px;
  border: 1px solid #ddd;
}

.franchise-comparison .white-box{
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
}




/* #market_dash{padding: 12px 12px 12px 0;height: 100%; } 오리지날*/
#market_dash{height: 100%; }
#market_dash .item_box{display: flex;height: 100%; }
/* #market_dash .item_box .box{margin: 0 15px 15px 0; padding: 20px; height: 100vh;} */
/* #market_dash .item_box .box{margin: 0 15px 15px 0; padding: 20px;height: calc(67vh + 149px);} */
/* #market_dash .item_box .box{padding: 20px;height: 45%;} */
#market_dash .item_box02 .box{ width: 100%; margin: 0; position: relative;max-height: 1035px;}
#market_dash .item_box .back-icon{background: url(../images/back-arrow.png) no-repeat; width: 24px; height: 24px; margin-right: 10px; cursor: pointer;}
#market_dash .item_box .market_txt .fix-icon{background: url(../images/edit-file.png) no-repeat; display: inline-block; width: 24px; height: 24px; cursor: pointer;}
#market_dash .item_box .up-box .d-day{ background: #fff; border-radius: 5px; padding: 18px;}
#market_dash .item_box .up-box{display: flex; justify-content: space-between;}
#market_dash .item_box .up-box .place-img{width: 50%; height: 167px; border: 1px solid #d1d1d1; background: #fff;}
#market_dash .item_box .up-box .txt-day{width: 50%; margin-right: 20px;}

/* #market_dash .item_box .down-box{width: 100%; background: #fff; border-radius: 5px;  padding: 20px;} */
#market_dash .item_box .down-box{ border-radius: 5px;}
#market_dash .item_box .down-box .contract-info{width: 100%; background-color: #fff;border-radius: 5px; border: 1px solid #ddd;padding: 10px 20px;}
#market_dash .item_box .down-box .info-txt{display: flex; justify-content: space-between;}
#market_dash .item_box .down-box .info-txt .left{}
#market_dash .item_box .down-box .info-txt .right{width: 60%;}
#market_dash .item_box .down-box .info-txt p{margin-bottom: 15px;}
#market_dash .item_box .down-box .info-txt p:last-child{margin-bottom: 0px;}

/* #market_dash .first_box{width: 30%;} */
/* #market_dash .g-f-box{width: 30%;background-color: #f3f4f6;margin-right: 15px;border-radius: 5px;} */
/* #market_dash .g-f-box{background-color: #f3f4f6;border-radius: 5px;} */
/* #market_dash .g-f-box:nth-child(1){
  width: 30%;
  margin-right: 15px;
}
#market_dash .g-f-box:nth-child(2){
  width: 30%;
} */
#market_dash .g-f-box02{width: 100%;}
/* #market_dash .sec_box{width: 70%; margin-left: 15px;} */
#market_dash .sec_box{width: 70%;}

#market_dash .down-box{display: flex;}
/* #market_dash .down-box .ds-box{width: 50%; height: 350px; background: #fff; border-radius: 5px; padding: 10px; border: 1px solid #ddd;} */
/* #market_dash .down-box .ds-box .compo-chart{width: 100%; max-width: 179px;max-height: 200px;height: 100%;margin: 0 auto;} */
/* #market_dash .down-box .ds-box .compo-chart02{width: 100%; max-width: 179px; height: 100%; max-height: 200px;margin: 0 auto;} */
 

/* #grid-branch-lists .tui-grid-body-area{max-height: 545px;} */
#grid-branch-lists .tui-grid-scrollbar-y-inner-border {
  
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* #grid-branch-lists .tui-grid-body-area {height: 100%!important;
  max-height: 545px!important;} */
  


/* #market_dash .sec_box .box:nth-child(1){width: 100%; background: #f3f4f6; height: 30vh; border-radius: 5px;} */
/* #market_dash .sec_box .box02{ height: 54vh;} */
/* #market_dash .sec_box .box:nth-child(2){ height: calc(100vh - 30vh - 132px);} */

/* #market_dash .sec_box .box:nth-child(2){ height: 57vh;padding: 15px;
  margin-top: 15px;background-color: #f3f4f6; border-radius: 5px;} */
  
/* #market_dash .sec_box .white-box{width: 100%; background: #fff; padding: 20px;border-radius: 5px; border: 1px solid #ddd;} */
#market_dash .sec_box .white-box{width: 100%;height: 100%; background: #fff; padding: 20px;border-radius: 5px; border: 1px solid #ddd;}
#grid-branch-lists{height: 100%;}
#market_dash .sec_box .mar-all-txt{position:relative;display: flex; justify-content: space-between; align-items: center;}
#market_dash .sec_box .mar-left-txt{display: flex; align-items: center;}
#market_dash .sec_box .mar-left-txt input{padding: 0 5px; padding-left: 40px; border: 1px solid #d1d1d1; border-radius: 5px; height: 30px;}
#market_dash .sec_box .mar-left-txt button{background-color:var(--pill-bg-color); border: none; padding: 0 15px; border-radius: 50px; color: #fff; cursor: pointer; height: 30px;margin-left: 5px;}
#market_dash .sec_box .mar-right-txt{display: flex; align-items: center; position: relative; right: -15px;}
#market_dash .sec_box .mar-right-txt input{padding: 0 5px; border: 1px solid #d1d1d1; border-radius: 5px; height: 30px; width: 240px;}
#market_dash .sec_box .mar-right-txt span{background: url(../images/filter-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; right: 25px; cursor: pointer;}
/* #market_dash .sec_box .color-btn p{display: inline-block; background: #dfe4ff; border-radius: 50px; padding: 5px 10px; color: #4282ea; font-weight: bold; font-size: 13px; margin: 5px 0;} */
/* #market_dash .sec_box .color-btn p:last-child{display: inline-block; background: #feebeb; border-radius: 50px; padding: 5px 10px; color: red; font-weight: bold; font-size: 13px;} */
#market_dash .sec_box .color-btn p.first-p { display: inline-block; background: #9370DB; border-radius: 50px; padding: 5px 10px; color: #fff; font-weight: bold; font-size: 13px; margin: 5px 0; }
#market_dash .sec_box .color-btn p.second-p { display: inline-block; background: #FFB6C1; border-radius: 50px; padding: 5px 10px; color: #fff; font-weight: bold; font-size: 13px; margin: 5px 0; }
#market_dash .sec_box .color-btn p.third-p { display: inline-block; background: #20B2AA; border-radius: 50px; padding: 5px 10px; color: #fff; font-weight: bold; font-size: 13px; margin: 5px 0;  }
.total-franchise {margin-left: 5px;}

#filter-component-container{
  display: flex;
  align-items: center;
  /* gap: 10px; */
  /* flex-wrap: wrap; */
}
.filter-container {
  position: relative;
  display: inline-block;
}

#filter-button {
  display: flex;
  color: #fff;
  align-items: center;
  background-color: var(--filter-btn-bg);
  padding: 7px 15px;
  font-size: 14px;
  cursor: pointer;
  gap: 4px;
  border-radius: 30px;
  text-wrap: nowrap;
}
.data-filter-icon{
  background: url(../images/filter.png) no-repeat;
  background-size: 15px;
  width: 15px;
  height: 15px;
}

#filterButton svg {
  margin-right: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 3px;
  margin-top: 4px;
}

#filterSearch {
  width: calc(100% - 16px);
  padding: 8px;
  margin: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
}

.option {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: #37352f;
  cursor: pointer;
}

#filterOptions .option.disabled {
  display: none;
}

.option:hover {
  background-color: #f1f1f1;
}

.pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px;
}

.pill-container.left {
  order: -1;
}

.pill-container.right {
  order: 1;
}

.pill {
  background-color: #f4f2fc;
  border-radius: 16px;
  padding: 8px 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  color: #7d6ce2;
}
/* .pill-text > span:first-of-type{
  color: #7d6ce2;
} */


.text-pink{color: #d87385;}
.pill-filter-attribute {
  color: #acaba8;
}
.pill-filter-icon{
  background: url(../images/calendar-right-arrow-icon.png) no-repeat;
  background-position: center;
  rotate: 90deg;
  background-size: contain;
  width: 10px;
  height: 10px;
  display: inline-block;
}
.pill-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 3px;
  margin-top: 4px;
  padding: 8px;
}

.pill-dropdown-header {
  display: flex;
  /* justify-content: space-between; */
  gap: 5px;
  align-items: center;
  margin-bottom: 8px;
}

.pill-dropdown-header span {
  /* font-weight: bold; */
}

.pill-dropdown-header button {
  background-color: transparent;
  cursor: pointer;
  /* padding: 0 5px; */

}

.pill-dropdown-header button:hover {
  background-color: #eee;
}
.pill-attribute-name{
  color: #acaba8;
}

.pill-dropdown-options {
  display: none;
  position: absolute;
  /* top: 100%; */
  left: 0;
  background-color: #ffffff;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-radius: 3px;
  margin-top: 4px;
}
.pill-dropdown input {
  outline: none;
  /* border-color:#acaba8; */
  border: 1px solid #acaba8;
  border-radius: 5px;
}


.pill-dropdown-options div {
  padding: 8px 12px;
  cursor: pointer;
  color: black;
}

.pill-dropdown-options div:hover {
  background-color: #f1f1f1;
}

.pill-dropdown input#filterSearch {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-top: 8px;
}

.more-options {
  position: relative;
}

.more-options-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 5px;
}

.more-options-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #ffffff;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-radius: 3px;
  margin-top: 4px;
  color: black;
}

.more-options-dropdown div {
  padding: 8px 12px;
  cursor: pointer;
}

.more-options-dropdown div:hover {
  background-color: #f1f1f1;
}

.dropdown-content {
  /* 기존 스타일 유지 */
  z-index: 1;
  border-radius: 5px;
}
.pill-arrow {
  background: url(../images/down-arrow.png) no-repeat;
  background-position: center;
  background-size: 15px;
  width: 13px;
  height: 13px;
}
.pill-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill-dropdown {
  /* 기존 스타일 유지 */
  z-index: 1;
}
.filter-checkbox-group{
  display: flex;
  align-items: center;
  gap: 10px;  
}

.filter-checkbox-label{
   display: flex;
   align-items: center;
   gap: 3px;
   
   
}

.cs-services-wrapper{
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 10px; 
  width: 100%;
}

.cs-services-slow-charging, .cs-services-fast-charging, .cs-services-wireless-charging{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cord-icon{
  background: url(../images/cord-icon1.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}
.wires-icon{
  background: url(../images/wires.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}

.slow-icon{
  background: url(../images/slow-icon.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}

.rapidity-icon{
  background: url(../images/rapidity-icon.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}

.wireless-icon{
  background: url(../images/wireless-icon.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}

.cctv-icon{
  background: url(../images/cctv-icon.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 13px;
  height: 13px;
}


/*가맹점관리 - 회원 - 이용횟수 차트*/
#customer-use-num-container{
  max-width: 790px;
  width: 100%;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
}



/* #market_dash .chart-flex{display: flex; gap: 95px;} */
#market_dash .chart-flex{display: flex;}
#market_dash .chart-flex div > p {text-wrap: no-wrap;}
/* #market_dash .sec_box .four-chart{ display: flex; justify-content: space-between;  width: 899px; height: 179px;} */
/* #market_dash .sec_box .four-chart{ display: flex; justify-content: space-between;  width: 850px;max-width: 850px; max-height: 140px;height: 100%; */
#market_dash .sec_box .four-chart{ display: flex; justify-content: space-between;  width: calc(100% - 170px);height: clamp(100px, 150px, 180px);}
#market_dash .sec_box .four-chart div {  width: 100%; margin: 5px; min-width: 0; }

/* #market_dash .market_con{height: 830px; background-color: #f3f4f6; border-radius: 5px;} */
#market_dash .market_con{background-color: #f3f4f6; border-radius: 5px;}
/* #market_dash .market_con02{height: 100vh;} */
#market_dash .market_con .icon01{background: url(../images/mart_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px; margin-right: 10px;}
#market_dash .market_con .market_txt{display: flex; justify-content: space-between;align-items: center;}
#market_dash .market_con .market_txt .txt_left{display: flex; align-items: center;}
#market_dash .market_con .small_box_item{}
#market_dash .market_con .small_box_item .f_small_box{display: flex; margin-bottom: 10px;}
#market_dash .market_con .small_box_item .f_small_box .s-box{width: 50%; height: 130px; border-radius: 5px; background: #fff;}
#market_dash .market_con .small_box_item .s-box01{margin-right: 10px;}
#market_dash .market_con .small_box_item .s-box02{}
#market_dash .market_con .small_box_item .s-box03{width: 100%; height: 389px; border-radius: 5px; background-color: #fff;}
#market_dash .market_con .color-map{background: url(../images/c-map.png) no-repeat; width: 100%; height: 100%;max-height: 553px;margin: 0 auto; margin-bottom: 30px;border-radius: 5px;}

#market_dash .market-list .name-btn{display: flex;align-items: center;}
#market_dash .market-list .name-btn p{background: #f4f2fc; margin-right: 10px; padding: 5px 10px; border-radius: 50px; color: #9082e6; font-weight: bold;}
#market_dash .market-list .name-btn .down-arrow{background: url(../images/down-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-left: 15px; position: relative; top: 2px; cursor: pointer;}
#market_dash .market-list .name-btn p:last-child{background: #7d6ce2; color: white; cursor: pointer;}

#market_dash .market-list .txt-flex{display: flex; justify-content: space-between; align-content: center;}
#market_dash .market-list table{border-collapse: collapse; text-align: center; width: 100%;}
#market_dash .market-list table .charging-icon{display: inline-block; background: url(../images/charging-battery.png) no-repeat; width: 16px; height: 16px; position: relative; top: 2px;}
#market_dash .market-list table .fault-icon{display: inline-block; background: url(../images/failed_icon.png) no-repeat; width: 16px; height: 16px; position: relative; top: 2px;}
#market_dash .market-list table .available-icon{display: inline-block; background: url(../images/check_icon.png) no-repeat; width: 16px; height: 16px; position: relative; top: 2px;}

#market_dash .market-list table .td-flex{display: flex; justify-content: space-between;}
#market_dash .market-list table .plug{background: url(../images/electric-plug.png) no-repeat; display: inline-block; width: 16px; height: 16px;}
#market_dash .market-list table .wires{background: url(../images/wires.png) no-repeat; display: inline-block; width: 16px; height: 16px;}
#market_dash .market-list table .camera{background: url(../images/cctv-camera.png) no-repeat; display: inline-block; width: 16px; height: 16px;}

.market-compare #stationSelectPopup.station-popup {
  top: 48px;
  left: 124px;
}

.legend {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.legend-icon {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-bottom: 5px; /* Adjust margin as needed */
}

.fast-charging {
    background: #f9623e; /* Color for 급속 */
}

.slow-charging {
    background: #90b49c; /* Color for 완속 */
}

.medium-charging {
    background: #9a8ce8!important; /* Color for 중속 */
}

.mgmt-charging {
    background: #86c0eb; /* Color for 충전중 */
}

.available {
    background: #ffdeaa; /* Color for 사용가능 */
}

.disabled {
    background: #ffb8ce!important; /* Color for 장애 */
}

.legend-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.legend-text {
    margin: 2px 0; /* Adjust margin as needed */
}

.legend-number {
    font-weight: bold;
}







/*************** 가맹점 관리  - table > 가맹점 정보 페이지 ****************/
/* .container02 {display: flex; flex-direction: column; height: 100vh; width: 79%; padding: 10px 10px 0 0;} */
/* .container02 {display: flex; flex-direction: column;width: 70%; padding: 10px 10px 0 0;max-height: 1035px;} */
/* .container02 {display: flex; flex-direction: column;width: 70%; padding: 10px 10px 0 0;height: calc(100% - 15px);background-color: #f3f4f6;padding: 20px; border-radius: 5px;margin: 10px 10px 10px 0;} */
.container02 {display: flex; flex-direction: column;width: 70%; padding: 10px 10px 0 0;
  /* height: calc(100% - 26px); */
  height: calc(100vh - 100px);
  background-color: #f3f4f6;padding: 20px;
   border-radius: 5px;
   margin: 10px 10px 10px 0;}
/* .tab-buttons{background-color:#fff; border: 1px solid #f7f7f8;border-radius: 5px;} */
.tab-buttons{background-color:#fff;border-radius: 5px;}
.tab-buttons, .nested-tab-buttons { display: flex;}
.common-tab-btn{
  flex:none!important;
  padding: 10px 40px!important;
  font-size: clamp(0.625rem, 0.4327rem + 0.6154vw, 1.125rem);
  /* display: flex; */
  /* align-items: center; */
}
.tab-buttons button, .nested-tab-buttons button { padding: 10px; flex: 1; cursor: pointer; border: none; background: #fff; color: #333; transition: background 0.3s; border-radius: 5px;}
.tab-buttons button{position: relative;}
.charger-tab-buttons{
  margin: 10px 0 0 10px; 
  border: 1px solid #ddd; 
  border-radius: 5px!important; 
  display: inline-block;
}
.csm-tab-buttons{
  display: inline-block;
  border: 1px solid #eeeeee;
 
}
.csm-tab-buttons button {
  padding: 10px 40px;
}
.charger-tab-buttons-inner, .csm-tab-buttons-inner{
  display: flex;
  align-items: center;
}
/* .operation-sales-tab button{
  flex: none !important;
  font-size: clamp(0.625rem, 0.4327rem + 0.6154vw, 1.125rem);
} */
.operation-sales-tab{
  /* display: flex; */
  /* justify-content: space-between; */
} 

.operation-sales-tab-buttons{
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 7px;
 
}

.operation-sales-tab-buttons button{
  flex: none !important;
  font-size: clamp(0.625rem, 0.4327rem + 0.6154vw, 1.125rem);
  padding: 10px 40px;
}


.container02-inner {background-color: #fff;border-radius: 5px;height: 100%;}
/* .container02 .tab-buttons{
  border: 1px solid #f3f4f6;
} */
/* .tab-buttons button:nth-child(2n):before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  height: 50%;
  width: 1px;
  background-color: #ecedf0;
} */

.person-in-charge{
  background: url(../images/person-in-charge.jpg) no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  background-position: center;
  display: inline-block;
}
.tui-grid-container {
  /* font-family: Arial, sans-serif; */
  width: 100%!important;
  height: auto!important;
}

.tui-grid-cell {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.tui-grid-header-area {
  background-color: #f5f5f5;
}

.tui-grid-header-area .tui-grid-cell {
  font-weight: bold;
  color: #9d9fa0;
}

.tui-grid-body-area .tui-grid-cell {
  padding: 8px;
}

.tui-grid-row-odd .tui-grid-cell {
  background-color: #fff;
}
.tui-grid-row-even .tui-grid-cell {
  background-color: #fff;
}

.tui-grid-cell[data-column-name="기기"],
.tui-grid-cell[data-column-name="위치"],
.tui-grid-cell[data-column-name="이력"] {
  color: #6200ea!important;
}

.tui-grid-cell[data-column-name="상태"][data-row-key="0"] {
  background-color: #ffcdd2;
}
.tui-underline {
  text-decoration: underline;
  color: #9f82ee;
}
/**페이지네이션 스타일링*/
.tui-first-child{
  color: pink;
}

.tui-last-child {
  color: pink;
}
.csm-right .table-bg .tui-pagination{
  margin: 0 0 12px!important;
}
/* .tui-pagination {
  margin: 0 0 12px!important;
} */
#tab2 .table-bg #qna-pagination-container.tui-pagination {
  margin: 7px 0 0px!important;
}
.charger-mangement-right-box .tui-pagination{
  margin: 7px 0 12px !important;
}
.tui-pagination .tui-first{
  display: none!important;
}
.tui-pagination .tui-last{
  display: none!important;
}
.tui-pagination .tui-page-btn{
  font-size: 18px!important;
}
.tui-pagination .tui-ico-prev{
  /* width: 20px!important;
  height: 20px!important; */
}

.perform-section .perform-sum p#today-sales, .perform-section .perform-sum p#today-customer, .perform-section .perform-sum p#today-pwr{
  font-size: clamp(0.3rem, 13px, 1.5rem);
}
.tab-buttons button:nth-child(3n):before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  height: 50%;
  width: 1px;
  background-color: #ecedf0;
}
.tab-buttons button:nth-child(5):before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  height: 50%;
  width: 1px;
  background-color: #ecedf0;
}

.hide-before:before {
  display: none!important;
}

.tab-buttons .charger-tab-buttons-inner button.common-tab-btn.active, .tab-buttons button.active, .nested-tab-buttons button.active { background: #333; color: #fff; border-radius: 7px;}
.main-content, .nested-content { display: none; flex: 1;  }
/* .main-content.active, .nested-content.active { display: flex; justify-content: space-between; height: 100vh; padding-top: 10px;} */
/* .main-content.active, .nested-content.active { display: flex; justify-content: space-between; padding-top: 10px;} */
.main-content.active, .nested-content.active { display: flex; justify-content: space-between;}
.statistics-right-inner{
  padding: 20px;
}
.nested-tab-container { margin-top: 20px; }
.content-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.content-grid .side-menu { display: flex; flex-direction: column; gap: 10px; }
.content-grid .side-menu button { padding: 10px; background: #eee; border: none; cursor: pointer; transition: background 0.3s; }
.content-grid .side-menu button:hover { background: #ddd; }
.content-grid .content { display: flex; flex-direction: column; gap: 20px; }
/* .content-section { padding: 20px; border-radius: 5px; width: 40%; margin-right: 10px;} */
.content-section { border-radius: 5px; width: 40%; margin-right: 10px;}
.content-section h3 { margin: 0 0 15px 0;}
#tab3.main-content > .content-section {background-color: #f3f4f6;padding: 20px;}

.perform-section{background: #f4f4f4;  border-radius: 5px; padding: 20px; width: 30%; margin-right: 10px;width: 35%;}
.perform-section h3{margin-bottom: 15px;text-wrap: nowrap;}
.perform-section .product_con{width: 100%; background: #fff; border-radius: 5px; padding: 10px;}
.perform-section .product_con p{background-color: #4282ea; border-radius: 50px; padding: 6px 15px; color: #fff; display: inline-block; margin: 3px;}
.perform-section .product_con .sky-blue{background: #aad3ff;}
.perform-section .product_con .sky-blue .fee{background: url(../images/fee.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; margin-right: 6px;}
.perform-section .white-section{background: #fff; border-radius: 5px; width: 100%; padding: 15px; border: 1px solid #ddd;}
.perform-section .white-section .period{display: flex; justify-content: space-between;position: relative;}
.perform-section .white-section .period input{height: 30px; border: 1px solid #d1d1d1; border-radius: 3px; padding: 0 6px;}
.perform-section .white-section .period .filtering{background: url(../images/filter-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; right: 27px; top: 3px; cursor: pointer;}
.perform-section .white-section .big-box{width: 100%; height: 120px; border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px; position: relative;}

.perform-section .white-section .btn-txt{background: #feebeb; padding: 0 10px; border-radius: 50px; color: red;}
.perform-section .white-section .btn-txt::before{content: ""; display: inline-block; background: url(../images/uptrend_icon.png) no-repeat; width: 16px; height: 16px; position: relative; top: 2px; margin-right: 3px;}

.perform-section .white-section .btn-txt-down{background: #dfe4ff; padding: 0 10px; border-radius: 50px; color: blue;}
.perform-section .white-section .btn-txt-down::before{content: ""; display: inline-block; background: url(../images/downtrend_icon.png) no-repeat; width: 16px; height: 16px; position: relative; top: 2px; margin-right: 3px;}


/* .perform-section .white-section .big-box .big-box-txt{position: absolute; right: 15px; bottom: 25px;} */
.perform-section .white-section .big-box .big-box-txt{text-align: right;}
.perform-section .white-section .big-box .big-box-txt .sales-unit, .perform-section .white-section .small-box .small-box-txt .sales-unit{color:#9d9fa1; }
.perform-section .white-section .txt-flex{display: flex;}
.perform-section .white-section .small-box{width: 50%; height: 120px; border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px; position: relative;}
/* .perform-section .white-section .small-box .small-box-txt{position: absolute; right: 15px; bottom: 25px;} */
.perform-section .white-section .small-box .small-box-txt{text-wrap: nowrap;}
.product_con .service-provided {cursor: pointer;}
.product_con .service-provided.paid {
  position: relative;
  padding-left: 40px;
}
.product_con .service-provided.paid::before{
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../images/money-icon.png) no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
  height: 20px;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
/** 제공서비스 - 서비스 버튼 클릭시 팝업*/
#service-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: none;
}

#service-intro .service-intro-header {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

#service-intro .service-intro-desc-wrapper .service-intro-desc {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
}

#service-intro .button-container {
  display: flex;
  justify-content: space-between;
}

#service-intro .button-container .btn-confirm, .btn-cancel {
  width: 48%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

#service-intro .button-container .btn-confirm {
  background-color: #dce5ff;
  color: var(--date-picker-bg-color);
}

#service-intro .button-container .btn-cancel {
  background-color: #dce5ff;
  color: var(--date-picker-bg-color);
}



/* 가맹점관리 > 가맹점 정보 > 매출 탭 */
.other-section .sales-list-txt{display: flex; justify-content: space-between; align-items: center;}
.other-section .sales-list-txt{display: flex; justify-content: space-between; align-items: center;}
.other-section .sales-list .purple-btn{display: flex;}
.other-section .sales-list .purple-btn p{font-size: 14px; background: #f4f2fc; border-radius: 50px; color: #988ae8; padding: 3px 8px; font-weight: bold;}
.other-section .sales-list .purple-btn p .down-arrow{background: url(../images/down-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 3px; margin-left: 10px; cursor: pointer;}
.other-section .sales-list .purple-btn p:last-child{background: #7d6ce2; color: #fff; cursor: pointer;}
.other-section .sales-list .purple-btn p .filter-icon{background: url(../images/filter.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 2px;}
.other-section .down-all-txt{display: flex; justify-content: space-between; align-items: center;margin-top: 10px;}
.other-section .down-all-txt select, .other-section .down-txt select{height: 30px;  border: 1px solid #d1d1d1;background-color: #f4f4f4;
  border-top: none;
  border-left: none;
  border-right: none;}

/* 가맹점관리 > 가맹점 정보 > 회원 탭 */
.other-section .down-txt{display: flex; justify-content: space-between; align-items: center;}

/* .other-section{background: #f4f4f4; border-radius: 5px; padding: 20px; width: 65%; height: 100%;} */
.other-section{background: #f4f4f4; border-radius: 5px; padding: 20px; width: 65%;}
.other-section h3{margin-bottom: 15px;text-wrap: nowrap;}
.other-section .info{width: 100%; background-color: #fff; border-radius: 5px; padding: 20px; margin-bottom: 30px; border: 1px solid #ddd;}
.other-section .name{margin-right: 60px;}
.other-section .info p{margin-bottom: 7px;}
.other-section .info p:last-child{margin-bottom: 0px;}
.other-section table{border-collapse: collapse; width: 100%; border: 1px solid #d1d1d1;}
.other-section th{background: #f9f9f9; text-align: left;}
.other-section th, td{ padding: 6px;}
.other-section .info tr:nth-of-type(2){background: #ffd4e1;}
.other-section tr .new{background: #ffd4e1;}
.other-section tr .ing{background: #edfef2; color: green;}
.other-section tr .done{background: #f4f2fc; color: purple;}

td[data-column-name="fault_status"] {
  color: #5c5158!important;
}
td[data-column-nname="fault_date"]{
  color: #b2a9b5!important;
}
td[data-column-nname="fault_content"]{
  color: #3f3a40!important;
}


.other-section .down-section .d-box{width: 100%; background-color: #fff; border-radius: 5px;border: 1px solid #ddd;}
.other-section .down-section .consult-con{width: 100%; padding: 20px;}
.other-section .down-section .down01{width: 100%; margin-right: 15px;}
.other-section .down-section .down02{width: 50%;}


.chat-container { display: flex; flex-direction: column; width: 100%; height: 456px; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; }
.chat-header { padding: 10px; background-color: #4CAF50; color: white; text-align: center; font-size: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.chat-body { flex: 1; padding: 10px; overflow-y: auto; }
.chat-footer { display: flex; padding: 10px; border-top: 1px solid #ddd; }
.chat-footer input { flex: 1; padding: 10px; border: 1px solid #4282ea; border-radius: 3px; margin-right: 10px; }
.chat-footer button { padding: 10px; background-color: #4282ea; color: white; border: none; border-radius: 3px; cursor: pointer; }
.chat-footer button:hover { background-color: #4582ea; }
.message { margin-bottom: 10px; }
.message.sent { text-align: right; }
.message.received { text-align: left; }
.message .text { display: inline-block; padding: 10px; border-radius: 5px; max-width: 80%; }
.message.sent .text { background-color: #DCF8C6;}
.message.received .text { background-color: #E8E8E8;}


.main-content .content-section .period-con{width: 100%; background: #edeff1; border-radius: 5px; padding: 15px;height: 20%;}
.main-content .period-con-txt{display: flex;flex-direction: column; position: relative;}
.main-content .period-con-txt .filter-btn{display: grid;height: 31px;line-height: 31px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;text-align: center;}
.main-content .period-con-txt .filter-btn p:first-of-type{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.main-content .period-con-txt .filter-btn p:last-of-type{
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
.main-content .period-con-txt .filter-btn p{background-color: #f3f4f6; padding: 0px 8px; cursor: pointer;}
/* .main-content .period-con-txt .filter-btn p:first-child{background: #333; color: white; border: none;} */
.main-content .period-con-txt .filter-btn p:nth-child(even){
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.main-content .period-con-txt .filter-btn p.active{background: #333; color: white; border: none;}


.main-content .content-section .period-con .ss-icon{background: url(../images/small-search-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; cursor: pointer; position: relative; top: 3px; left: 5px;}
.main-content .content-section .period-con .ss-icon-cus{background: url(../images/small-search-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; cursor: pointer; position: relative; top: 3px; left: 5px;}
.main-content .content-section .period-con .date-range-picker .date-con .date-wrapper{
  display: flex; flex-direction: column;
}
.main-content .content-section .period-con .date-range-picker #period-applyBtn{ background-color: #4f62ca; border-radius: 5px; padding: 3px 0; color: #fff;}
.main-content .content-section .period-con .date-range-picker input{height: 30px;}
.main-content .content-section .period-con .date-con{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;} 
.main-content .content-section .period-con .date-con input{height: 25px; width: 150px;}
.main-content .content-section .period-con .standard-con{display: flex; justify-content: space-between;}
.main-content .content-section .period-con .standard-con select{width: 88%; height: 25px;}


.main-content .content-section .type-con{width: 100%; background: #fff; border-radius: 5px; padding: 15px; margin-bottom: 15px;}

.main-content .content-section .sales-con{width: 100%; background: #fff; border-radius: 5px; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd;}
/* .main-content .content-section .sales-con table{width: 100%; border-collapse: collapse;}
.main-content .content-section .sales-con table th{text-align: left;}
.main-content .content-section .sales-con table th,td{padding: 10px; border: none;} */

.main-content .content-section .sales-time-line{width: 100%; background-color: #fff; border-radius: 5px; padding: 15px;}
.main-content .content-section .sales-time-line img{width: 100%; border: 1px solid #ddd;}

.main-content .other-section .sales-list{background: #fff; border-radius: 5px; width: 100%; padding: 15px;border:1px solid #ddd;}
.main-content .other-section .sales-list table{border: none;}
.main-content .mb-btn{background: #2387d3; border-radius: 50px; padding: 3px 7px; color: #fff; font-size: 13px; border: none;}
.main-content .nmb-btn{background: #d87385; border-radius: 50px; padding: 3px 8px; color: #fff; font-size: 13px; border: none;}
.main-content .ffast{background: #651d2a; border-radius: 50px; padding: 3px 8px; color: #fff; font-size: 13px; border: none;}
.main-content .fast{background: #d87385; border-radius: 50px; padding: 3px 8px; color: #fff; font-size: 13px; border: none;}
.main-content .c-done{background: #565d6d; border-radius: 50px; padding: 3px 8px; color: #fff; font-size: 13px; border: none;}
.main-content .other-section tr .down-arrow{background: url(../images/down-black-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-left: 10px; cursor: pointer; position: relative; top: 2px;}


.main-content .content-section{}
.main-content .content-section .charger_box{width: 100%; background: #fff; border-radius: 5px; padding: 20px; border:1px solid #ddd;}
.main-content .content-section .charger_box .own-charger table{}
.main-content .content-section .charger_box .own-charger table tr th{text-align: left; padding: 10px; border-bottom: 1px solid #d1d1d1;}
.main-content .content-section .charger_box .own-charger table tr{display:grid;grid-template-columns: 1fr 1fr 1fr;}
.main-content .content-section .charger_box .c-f-box{border-bottom: 1px solid #d1d1d1;}
.main-content .content-section .charger_box .c-f-box p:first-child{font-weight: bold;}
.main-content .content-section .charger_box .c-t-box p:first-child{font-weight: bold;}
.main-content .content-section .charger_box .c-s-box{padding-top: 21px;}
.main-content .content-section .charger_box p{margin-bottom: 15px;}
.main-content .content-section .charger_box p:last-child{margin-bottom: 0px;}
.charger-tab-c-done,.charger-tab-fast, .charger-tab-super-fast, .charger-tab-wireless {
padding: 5px 10px;border-radius: 30px;  color: #fff;
}

.charger-tab-c-done {background-color:#565d6d ; }
.charger-tab-fast {background-color:#7d6ce2;}
.charger-tab-super-fast {background-color:#251775 ;}
.charger-tab-wireless {}

.main-content .content-section .own-connector{ padding: 15px; background: #fff; border-radius: 5px;border: 1px solid #ddd; }
.main-content .content-section .own-connector .connector-con{display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 27%;height: 330px;padding: 10px; overflow-y: auto; }
.main-content .content-section .own-connector .connector-con p{margin-bottom: 20px;}
.main-content .content-section .own-connector .connector-con p:last-child{margin-bottom: 0px;}

.main-content .other-section .charger-list{width: 100%; padding: 15px; background: #fff; border-radius: 5px;border: 1px solid #ddd;}
.main-content .other-section .charger-list .ch-list-table{border: none;}
.main-content .other-section .charger-list .ch-list-table .connector-img{background: url(../images/connector-img01.png) no-repeat; display: inline-block; width: 118px; height: 55px;}
.main-content .other-section .charger-list .ch-list-table .connector-img02{background: url(../images/connector-img02.png) no-repeat; display: inline-block; width: 31px; height: 31px;}
/*가맹점관리 - 회원탭의 조회기간 설정 밑에 부분*/
.main-content .user-composition{width: 100%; height: calc(80% - 15px); background: #f4f4f4;; border-radius: 5px; padding: 15px;}
.main-content .user-composition .com-table{width: 100%; padding: 2px 8px;}
.main-content .user-composition .com-table th{text-align: left; padding: 5px 8px; border-bottom: 1px solid #d1d1d1;}
.main-content .user-composition .com-table tr{font-size: 15px;}
.main-content .user-composition .com-table tr:last-child td{border-top: 1px solid #d1d1d1;}
.main-content .user-composition .user-com-chart{background: url(../images/user-com-chart.png) no-repeat; width: 346px; height: 260px; margin: 0 auto;}

.main-content .other-section .use-number-all-con{background: #fff;  border-radius: 5px; padding: 15px; width: 100%; height: 300px; border: 1px solid #ddd;}
.main-content .other-section .use-number{display: flex; justify-content: space-between; align-items: center;}
.main-content .other-section .use-number .unit-con{display: flex;flex-direction: column;}
/* .main-content .other-section .use-number .unit-con label{margin-right: 10px;} */
.main-content .other-section .use-number .unit-con select{height: 28px; width: 75px;}

#tab4 .main-content .content-section .other-section .use-number .unit-con label{
  text-align: text-left;
}

.main-content .other-section .use-number-all-con{}
.main-content .other-section .use-number-all-con .use-num-chart{background: url(../images/use-num-chart.png) no-repeat; width: 675px; height: 225px; margin: 0 auto;}


.main-content .other-section .mb-list{background: #fff; width: 100%; border-radius: 5px; padding: 15px; border: 1px solid #ddd;}
.main-content .other-section .mb-list table{border: none;}
.main-content .other-section .mb-list table tr:first-child{border-bottom: 1px solid #d1d1d1;}
.main-content .other-section .mb-list .down-txt{display: flex; justify-content: space-between; align-items: center; padding: 0 10px;}




/**************** 충전기 관리 ****************/
.charger-management-left-header{
  display: flex;
  align-items: center;
  gap: 10px;
}
.charger-management-left-header .charger_icon{background: url(../images/charger_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
#market_dash .check-box{border: 1px solid #ddd; border-radius: 5px;}
#market_dash .check-box table{width: 100%; border-collapse: collapse; background: #fff; border-radius: 5px;}
#market_dash .check-box table th, td{padding: 10px;  text-align: left;}
#market_dash .charger-all{display: flex; justify-content:flex-start;}
#market_dash .charger-all .city-select, #market_dash .charger-all .city-select, #market_dash .charger-all .town-select{
  border-radius: 5px;
}
/* #market_dash .charger-locations .charger-locations-search-options {
  width: 100%;
} */
/* #market_dash .charger-all .city-select{width: 40%; height: 30px; padding: 0 5px;} */
#market_dash .charger-all .city-select{width: 45%; height: 30px; padding: 0 5px;}
/* #market_dash .charger-all .town-select{width: 40%; padding: 0 5px; margin-left: 7.5px;} */
#market_dash .charger-all .town-select{width: calc(45% - 7.5px); padding: 0 5px; margin-left: 7.5px;}
#market_dash .charger-all .charger-btn{width: 16%;}
#market_dash .charger-all .charger-btn{background: #1031a6; border-radius: 50px; border: none; color: #fff; cursor: pointer;}
#market_dash .charger-all .all-places {margin-left: 10px; border-radius: 50px; width: 17.4%; background-color: #1031a6;color: #fff; }
#market_dash .charger-all .city-select select{}
#market_dash .charger-select{display: flex; justify-content: space-between; height: 30px;}
#market_dash .charger-select input{
  width: 90%; margin-right: 12px; padding: 0 5px; border-radius: 5px; outline: none; border: 1px solid #a6aab4;
  background:  url(../images/magnifying-glass.png) no-repeat;
  background-position: 5px center;
  background-size: 15px;
  padding-left: 25px;
} 
#market_dash .charger-select .select-btn{width: 17.4%; background: #0f62fe; border-radius: 50px; border: none; color: #fff; cursor: pointer;}

/* #market_dash .db-top{display: flex; width: 100%; justify-content: space-between;} */
/* #market_dash .db-top .txt-box{width: 50%; height: 65px; background: #fff; position: relative; margin-right: 30px;} */
/* #market_dash .db-top .txt-box .bt-txt{position: absolute; right: 0; bottom: 0;} */

/* #market_dash .down-box02{width: 100%;  background: #fff; border-radius: 5px; padding: 20px;} */
#market_dash .down-box02 .charger-state-btn{display: flex; justify-content: space-between; align-items: center;}
#market_dash .down-box02 .charger-state-btn .state-btn{display: flex;}
#market_dash .down-box02 .charger-state-btn .state-btn p{display: flex; border: 1px solid #d1d1d1; padding: 4px 13px; cursor: pointer; border-radius: 5px;}
#market_dash .down-box02 .charger-state-btn .state-btn p:first-child{background: #333; color:#fff; border: none;}
#market_dash .down-box02 .charger-state-img{background: url(../images/charger-state-img.png) no-repeat; width: 295px; height: 174px; margin: 0 auto; margin-bottom: 30px;}
#market_dash .down-box02 .user-number-img{background: url(../images/use-num-img.png) no-repeat; width: 192px; height: 154px; margin: 0 auto;}

.container02 {border: 1px solid #ddd;}
/* .container02 .charger-list-bg{background: #f3f4f6; width: 100%; border-radius: 5px; padding: 15px;} */
.container02 .charger-list-bg{background: #fff; width: 100%; border-radius: 5px; padding: 15px; margin-top: 10px;}
.charger-management-right-inner{border: 1px solid #ddd;}
.container02 .charger-list-bg .charger-table{width: 100%; border-collapse: collapse; margin-bottom: 30px;}
.container02 .charger-list-bg .charger-table th{padding: 9px;}
.container02 .charger-list-bg .charger-table th, .charger-table td{border: 1px solid #d1d1d1; background: #fff;}
.container02 .charger-list-bg .filter-btn{display: flex;}
.container02 .charger-list-bg .filter-btn p{background: #7d6ce2; border-radius: 50px; padding: 3px 15px; color: #fff; margin-right: 10px; cursor: pointer;}
.container02 .charger-list-bg .filter-btn p:last-child{margin-right: 0px;}
.container02 .charger-list-bg .filter-btn .state{background: #e2defc; color: #7d6ce2;}
.container02 .charger-list-bg .filter-btn .filter-icon{background: url(../images/filter.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; margin-right: 3px;}
.container02 .charger-list-bg .filter-btn .close-icon{background: url(../images/cancel-p-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 1px; margin-left: 5px; cursor: pointer;}

.container02 .charger-list-bg .charger-table tr:first-child th{background: #e8e8e8;}
.container02 .charger-list-bg .charger-table tr:nth-of-type(2) td{background: #ffcccc;}
.container02 .charger-list-bg .direction{display: flex; justify-content: center; align-items: center;}
.container02 .charger-list-bg .direction p{margin-right: 50px; cursor: pointer;}
.container02 .charger-list-bg .direction .left-arrow{background: url(../images/left-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 50px; cursor: pointer;}
.container02 .charger-list-bg .direction .right-arrow{background: url(../images/right-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-left: 50px; cursor: pointer}


#circle-container {
  width: 50%;
  max-width: 50%;
  max-height: 230px;
}

/**************** 고객관리 페이지 ****************/
.filter-component-wrapper{
  display: flex;
  align-items: center;
}
.customer-management{
  /* height: 100%; */
  border: 1px solid #ddd;
  height: calc(100vh - 100px);
  margin: 10px 10px 10px 0;
  background-color: #f3f4f6;
  border-radius: 5px;
  padding: 20px;
}
.csm-left-header{
  display: flex;
  align-items: center;
}
.csm-left-main{
  height:calc(100% - 56px);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
}
.complaints {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.franchise-inquiry{
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.customer-complaints .csm-complaints{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.csm-right{
  width: 70%;
  display: flex;
  flex-direction: column; 
  padding: 10px 10px 0 0;
  height: calc(100vh - 100px);
  background-color: #f3f4f6;
  padding: 20px;
  border-radius: 5px;
  margin: 10px 10px 10px 0
}
.csm-right-inner{
  height: 100%;
}
.csm-right-inner .charger-list-bg{
  border: 1px solid #ddd;
}
.operation-sales-right-inner{
  background-color: #fff;
  padding: 20px;
  height: 100%;
  border-radius: 5px;
  border: 1px solid #ddd;
  position: relative;
}
.operation-sales-date{
  position: absolute;
  right: 90px;
  top: 118px;
}
/* .operation-sales-date.active{
  display: block;
} */

.subsidy-date{
  position: absolute;
  right: 90px;
  top: 118px;
}


.csm-right .tab-buttons button{flex: none!important;
  font-size: clamp(0.625rem, 0.4327rem + 0.6154vw, 1.125rem);
}

.csm-right #tab1, .csm-right #tab2  {
  height: calc(100% - 50px);
}

.csm-right-table{
  padding: 0;
}
#grid-container {
  /* flex-grow: 1; */
}
.tui-grid-header-area {
  border-bottom: none !important;
}

.tui-grid-header-area th {
  border-bottom: none !important;
}

.tui-grid-header-area .tui-grid-cell {
  border-bottom: none !important;
}


.gnb04{}
.gnb04 .home_icon{background: url(../images/home_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}
.gnb04 .customer_icon{background: url(../images/cus_c_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px;}


#market_dash .customer-icon{background: url(../images/cus_icon.png) no-repeat; display: inline-block; width: 24px; height: 24px; margin-right: 10px;}
/* #market_dash .customer-complain{display: flex;} */
#market_dash .customer-complain{display: grid;  grid-template-columns: 1fr 1fr 1fr;
gap: 10px}
#market_dash .customer-complain .cc-box{
  /* width: 33.3333%;  */

  height: 80px; border-radius: 5px; background: #f2f8fd;
  border-radius: 15px;
   /* margin-right: 10px;  */
   padding: 10px; position: relative;
} 

#market_dash .customer-complain .cc-box:last-of-type{
  /* margin-right: 0; */
} 

#market_dash .customer-complain .new{border: 1px solid #2387d3;}
#market_dash .customer-complain .ing{border: 1px solid #f1b641; background: #fef9ee;}
#market_dash .customer-complain .done{border: 1px solid #1dd75b; background: #eefdf3;}
#market_dash .customer-complain .cc-box .num{position: absolute; right: 10px; bottom: 10px;}

#market_dash .customer-chart{background: url(../images/customer-chart.png) no-repeat; width: 421px; height: 178px; margin: 0 auto;}
/* .container02 .charger-list-bg .table-bg{width: 100%; background: #fff; border-radius: 5px; padding: 40px 20px;} */
.container02 .charger-list-bg .table-bg .fix-icon{background: url(../images/edit-file.png) no-repeat; display: inline-block; width: 24px; height: 24px; float: right; margin-bottom: 20px; cursor: pointer;}
.container02 .charger-list-bg .customer-table{width: 100%; border-collapse: collapse; margin-bottom: 30px; border: 1px solid #d1d1d1;}
.container02 .charger-list-bg .customer-table th{padding: 9px;}
.container02 .charger-list-bg .customer-table th, .charger-table td{border: 1px solid #d1d1d1; background: #fff;}
.container02 .charger-list-bg .customer-table{width: 100%;}
.container02 .charger-list-bg .customer-table tr:first-child th{background: #e8e8e8;}
.container02 .charger-list-bg .customer-table tr:nth-of-type(2) td{background: none;}
.container02 .charger-list-bg .direction{display: flex; justify-content: center; align-items: center;}
.container02 .charger-list-bg .direction p{margin-right: 50px; cursor: pointer;}



/**************** 운영 매출 페이지 ****************/
.operation-sales-left-box {
  border: 1px solid #ddd;
  height: calc(100vh - 100px);
  margin: 10px 10px 10px 0;
  background-color: #f3f4f6;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.operation-sales-left-box .check-box {
  border: 1px solid #ddd;
  border-radius: 5px;
}
.operation-sales-left-header {
  display: flex;
  align-items: center;
  gap: 5px;

}
.operation-sales-summary{
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  max-height: 735px;
  height: 100%;
  /* max-height: 100%; */
  border: 1px solid #ddd;
  overflow: hidden;
}
.operation-sales-summary > .sum-box{
  height: 16%;
}

.operation-sales-summary > .scroll-box {
  height: 84%;
}
.operation-sales-summary > .scroll-box .sum-box:nth-child(1){
  height: 30%;
}

.operation-sales-summary > .scroll-box .sum-box:nth-child(2){
  height: 26%;
}
.operation-sales-summary > .scroll-box .sum-box:nth-child(3){
  height: 30%;
}

.date-range-selector-5{
  position: relative;
}


#market_dash .op-all-num{display: flex; justify-content: space-between; align-items: center;}
#market_dash .sum-box{margin-bottom: 10px; border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px; position: relative;}
#market_dash .summary-01{display: flex; }
#market_dash .summary-01 .right-txt{position: absolute; right: 10px; bottom: 20px;}

#market_dash .summary-01 .bm::before{content: ""; background: url(../images/uptrend_icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 5px; position: relative; top: 2px;}
#market_dash .summary-01 .by::before{content: ""; background: url(../images/downtrend_icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 5px; position: relative; top: 2px;}

#market_dash .summary-01 .red-btn{background: #feebeb; border-radius: 50px; padding: 2px 8px; color: red; margin-left: 3px;}
#market_dash .summary-01 .blue-btn{background: #dfe4ff; border-radius: 50px; padding: 2px 8px; color: blue; margin-left: 3px;}

#market_dash .check-btn{width: 100%; height: 50px; background: #1031a6; border: none; border-radius: 5px; color: #fff; cursor: pointer;}

#market_dash .sales-s-con{display: flex; justify-content: space-between; align-items: center; }
#market_dash .sales-s-con .left-txt{text-align: center; text-wrap: nowrap;}
#market_dash .sales-s-con .left-txt .last-month{background: #7d6ce2; color: #fff;  border-radius: 50px; padding: 2px 8px;}
#market_dash .sales-s-con .right-txt{text-align: center;text-wrap: nowrap;}
#market_dash .sales-s-con .guess{background: #feebeb; color: red; border-radius: 50px; padding: 2px 8px;}

/* 매출 그래프(임시) */
/* .red {background: #feebeb; border-radius: 50px; padding: 2px 8px; color: red; margin-left: 3px;} */
.red {color: red; }
.fr > .red {background-color: transparent;}
.bg-blue{background: #dfe4ff;}
/* .primary-text-color{color: #1031a6;} */
/* .blue {background: #dfe4ff; border-radius: 50px; padding: 2px 8px; color: blue; margin-left: 3px;} */
.blue {color: #4282ea; }

.bu::before{content: ""; background: url(../images/uptrend_icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 5px; position: relative; top: 2px;}
.bd::before{content: ""; background: url(../images/downtrend_icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 5px; position: relative; top: 2px;}

/* 운영 매출 페이지 > 운영성과 탭 */
.gnb05 .home_icon{background: url(../images/home_icon.png) no-repeat; width: 24px; height: 24px;}
.gnb05 .charger_icon{background: url(../images/charger_icon.png) no-repeat; width: 24px; height: 24px;}
.gnb05 .sales_icon{background: url(../images/pay_c_icon.png) no-repeat; width: 24px; height: 24px;}

.operate-sales-icon{background: url(../images/pay_icon.png) no-repeat; width: 24px; height: 24px; margin-right: 10px;}

.container02 .big-box{width: 100%; background: #fff; border-radius: 5px; padding: 15px;}
.container02 .big-box .small-w-box{width: 100%; background: #fff; border-radius: 5px; padding: 15px;}

#os-long-chart {width: 100%; height: 250px;}


.check-box{max-height: 150px; overflow-y: scroll;}
#tab2 .w-flex-box{display: flex;}
#tab2 .w-flex-box .box{width: 50%; border-radius: 5px; border: 1px solid #d1d1d1; padding: 15px;}
#tab2 .w-flex-box .left-box .chart-img{background: url(../images/done-chart.png) no-repeat; background-size: contain; width: 417px; height: 235px; margin: 0 auto;}

#tab2 .small-w-box .line-box{border: 1px solid #d1d1d1; width: 100%; border-radius: 5px; padding: 15px;}
#tab2 .step-btn{display: flex; justify-content: center;}
#tab2 .step-btn span{border: 1px solid #d1d1d1; border-radius: 50%; padding: 10px 17px;}
#tab2 .step-btn .p-txt{color: #7d6ce2;}
#tab2 .step-btn .purple-circle{border: none; border-radius: 50%; padding: 10px 17px; background: #7d6ce2; color: #fff;}
#tab2 .step-btn p{margin-right: 20px;}
#tab2 .step-btn .right-arrow{display: flex;gap: 10px;align-items: center;justify-content: center;text-wrap: nowrap;}
#tab2 .step-btn .right-arrow::after{content: ""; background: url(../images/right-arrow.png) no-repeat; display: inline-block; width: 16px; height: 16px; margin-left: 10px;}
#tab2 .step-btn .right-arrow:last-of-type::after{
  content: ""; display: none;
}
#tab2 .os-table{width: 100%; border-collapse: collapse;}
#tab2 .os-table th{padding: 7px; text-align: left;}
#tab2 .os-table th, .os-table td{border: 1px solid #d1d1d1;}
#tab2 .center-box{margin: 0 auto;}


/**************** 통계 페이지 ****************/
.statistics-left-box{
  padding: 20px;
  background-color: #f3f4f6;
  margin: 10px 10px 10px 0;
  border-radius: 5px;
  height: calc(100vh - 100px);
  border: 1px solid #ddd;
}
.statistics-left-header{
  display: flex;
  gap: 10px;
  align-items: center;
}
.statistics-icon{
  background: url(../images/chart_icon.png) no-repeat; width: 24px; height: 24px;
}

/*통계 사용량, 요금 css*/

.usage-fee-wrapper  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2%;
  grid-row-gap: 2%;
}

.dashboard-section{
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 30px 30px;
  overflow: hidden; /** swiper를 위해 지정*/
}
.dashboard-section::before, .charger-common::before {
  content: "";
  display: block;
  position: absolute;
  top: 33px;
  left: 0;
  height: 30px;
  border-left: 4px solid var(--primary-purple-color);
  background-color: transparent;
}

.dashboard-section {
  position: relative;
}

.usage-amount, .fee, .charger-status, .charger-status-notice{
  color: var(--primary-purple-color);
}
.notice-message{
  font-size: 13px;
  color: #d6d6d6;
  color: var(--third-color);
}
.empty-space{
  height: 19px;
  margin: 20px 0;
}
.date-search-wrapper{
  /* margin-top: 20px; */
  display: flex;
  align-items: center;
  gap: 10px;
}
.date-search-wrapper #interval{
  border: 1px solid #ddd;
}
.date-search-wrapper .date-range{
  display: flex;
  align-items: center;
  gap: 5px;
}
.date-search-wrapper .date-range input {
  border: 1px solid #ddd;
}
.date-search-wrapper input[type="date"],.date-search-wrapper input[type="month"], .date-search-wrapper input[type="year"] {
  position: relative;
  min-height: 20px;
  padding: 5px 0;
  padding-left: 10px;
  padding-right: 30px;
  font-size: 16px;
}
.date-search-wrapper label {
  text-wrap: nowrap;
}

.date-search-wrapper input[type="date"]:focus, .date-search-wrapper input[type="month"]:focus, .date-search-wrapper input[type="year"]:focus{
  outline: none;
}
select#start_year:focus,   select#end_year:focus{
  outline: none;
}
.date-search-wrapper input[type="date"], .date-search-wrapper input[type="month"], .date-search-wrapper input[type="year"] {
  position: relative;
  min-height: 20px;
  padding: 5px 0;
  padding-left: 10px;
  padding-right: 30px;
  font-size: 16px;
}

.date-search-wrapper input[type="date"]::-webkit-calendar-picker-indicator,.date-search-wrapper input[type="month"]::-webkit-calendar-picker-indicator, .date-search-wrapper input[type="year"]::-webkit-calendar-picker-indicator{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  z-index: 1;
}
.date-search-wrapper input[type="date"]::-webkit-clear-button,
.date-search-wrapper input[type="date"]::-webkit-inner-spin-button,
.date-search-wrapper input[type="month"]::-webkit-clear-button,
.date-search-wrapper input[type="month"]::-webkit-inner-spin-button,
.date-search-wrapper input[type="year"]::-webkit-clear-button,
.date-search-wrapper input[type="year"]::-webkit-inner-spin-button
{
  display: none;
}
.date-search-wrapper .date-range input:after{
  position: absolute;
  top: 50%;
  left: 80%;
  content: "";
  width: 20px;
  height: 22px;
  background: #fff url(../images/calendar.png) center center / contain;
  transform: translateY(-50%);
  z-index: 0;
}

/* 임시 */
#installDate{
  border: 1px solid #ddd;
}
/* .pill-dropdown input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  z-index: 1;
} */

.usage-count-tooltip {
  padding: 10px;
  color: #fff;
  border-radius: 5px;
  width: 150px;
  /* height: 50px; */
}
.usage-count-tooltip-date {
  font-size: 14px;
  color: #fff;
}
.usage-count-tooltip-date {
  margin-bottom: 10px;
}

.gnb06 .home_icon{background: url(../images/home_icon.png) no-repeat; width: 24px; height: 24px;}
.gnb06 .statistics_icon{background: url(../images/chart_c_icon.png) no-repeat; width: 24px; height: 24px;}

/* .chart-icon{background: url(../images/chart_icon.png) no-repeat; width: 24px; height: 24px; margin-right: 10px;} */
#market_dash .period-search{width: 100%; height: 30px; padding: 0 3px;}
#market_dash .filter-icon{background: url(../images/filter-icon.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: absolute; right: 31px; top: 119px; cursor: pointer;}
#market_dash .chart {width: 100%; height: 200px;}

#big-con .big-right-con{width: 100%; background: #f3f4f6; border-radius: 5px; height: 100vh;}

.left_box{display: flex; justify-content: space-between;}
.left_box .D_box{width: 100%; height: 400px; border-radius: 5px; background: #fff; padding: 15px;}

.down_box .long_box{width: 100%; height: 450px; border-radius: 5px; background: #fff; padding: 15px;}

.down_box .up_con .input01{display: flex; align-items: center;}
.down_box .up_con .input01 input{height: 30px; border: 1px solid #d1d1d1; padding: 0 3px; border-radius: 3px;}
.down_box .up_con .input01 select{height: 30px; width: 80px; border: 1px solid #d1d1d1; padding: 0 3px; border-radius: 3px;}
/* .down_box .tab_btn{display: flex; justify-content: right;} */
.down_box .tab_btn .tab{width: 33%; height: 100px; background: #f1f2ff; border-radius: 5px; padding: 20px 10px; position: relative; cursor: pointer;}
.down_box .tab_btn .down{position: absolute; right: 20px; bottom: 20px;}
.down_box .tab_btn .active2{background: #919dff; color: #fff;}
.statistics.chart > div {display: none;}
.statistics.chart > div.on {display: block;}

/*
.date-popup {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    z-index: 1000;
  }
*/
.date-range-popup-header{

}  
  

.popup-content {
    display: flex;
    flex-direction: column;
    /* gap: 10px;*/
  }
  
  .quick-select {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .custom-range {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
  }
  
.date-popup button {
    cursor: pointer;
    padding: 5px 10px;
    background-color: #2387d3;
    color: white;
    border: none;
    border-radius: 4px;
  }

.date-popup  button.selected {
    background-color: #28a745; /* 선택된 버튼의 색상 (녹색) */
}

.date-popup button:not(.selected) {
    background-color: #2387d3; /* 선택되지 않은 버튼의 색상 */
}
  
  input[type="date"] {
    padding: 5px;
  }

/*
  .station-popup {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    z-index: 1000;
    width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
*/
.station-popup{
 background-color: #e3e5ea;
 border-radius: 5px;
}
.date-popup, .station-popup {
    display: none;
    position: absolute;
    top: 67px;
    border: 1px solid #ddd;
    padding: 15px;
    z-index: 1000;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
  }
  
  .date-popup {
    width: 350px;
  }
  
  .station-popup {
    width: 290px;
  }

#sidoSelect:focus, #gugunSelect:focus, #stationSearch:focus, #cs-search:focus{
  outline: none;
}
#cs-search{
  position: relative;
}
#cs-search::before {
  content: "";
  position: absolute;
  /* top: 0;
  left: 0; */
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background: url(../images/magnifying-glass.png) no-repeat;
  background-position: center;
  background-size: 20px;
  z-index: 1;
  pointer-events: none;
  
}
.franchise-search-wrapper {
  position: relative;
  width: 200px; /* Adjust as needed */
}

.franchise-search-wrapper input {
  width: 100%;
  padding-left: 30px; /* Adjust based on icon size */
  box-sizing: border-box;
}

.franchise-search-wrapper .magnifier-icon {
  position: absolute;
  left: 10px;
  width: 20px;
  heighT: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the icon from blocking input clicks */
}

/* .franchise-search-wrapper img {
 
} */


#sidoSelect, #gugunSelect, #stationSearch{
  border-radius: 6px;
  outline: none;
  border: 1px solid #ddd;
}
  #stationSelectPopup.active {
    display: block;
  }
  .stationSelectPopup .popup-content select{
    border-radius: 10px;
  }

  .stationSelectPopup input:focus{
    outline: none;
  }

  #stationSearch{
    padding: 5px 10px;
    width: 100%;
    display: flex;
    flex: 1;
  }
  

  .select-area{
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
  }

  .search-area{
    display: flex;
    flex-direction: column;
  }
  .places-count .selected-places{
    color: var(--danger-2-color)!important;
  }

  .places-count {
    width: 50%;
  }
  .places-count .total-places{
    color: var(--black-text-color);
  }
  .search-btn-wrapper {
    display: flex;
    align-items: center;
    justify-items: center;
    gap: 50px;
    
    
  }

  .search-btn-wrapper #searchBtn{
    border-radius: 5px;
    background-color: #002d7c;
    width: 50%;
  }
  .select-area select, .search-area input[type="text"] {
    width: 100%;
    /* width: 48%;   */
    
    /* 기존의 45%에서 변경 */
    /* padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px; */
}
  
  select, input[type="text"] {
    /* width: 45%; */
    padding: 5px;
  }
  
  .result-info {
    /* text-align: right; */
    /* margin-bottom: 10px; */
  }
  #selectedCount{color: var(--danger-2-color);}
  .station-list {
    max-height: 200px;
    height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 4px;
  }
  

  .station-list th{
    border: none;
    background-color:#fff;
    text-align: left;
  }

  .station-popup{
    display: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  /* th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f2f2f2;
  } */
  
  .button-area {
    text-align: center;
  }

  #stationSelectPopup button {
    border: none;
    outline: none;
    color: #fff;
    padding: 4px 6px;
    border-radius: 5px;
  }


  .button-area #confirmBtn{
    width: 100%;;
    cursor: pointer;
    background-color: #002d7c;
    color: #fff;
    border: none;
    margin-top: 5px;

  }
  
  /* button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  } */
  
  .date-popup, .station-popup button:hover {
    background-color: #45a049;
  }

  .black-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
  }
  
  .black-checkbox input {
    position: absolute;
    /* border: 1px solid black; */
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .checkmark {
    position: absolute;
    top: -3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid black;
  }
  
  .black-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  .black-checkbox input:checked ~ .checkmark {
    background-color: black;
  }
  
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  .black-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  .black-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

tbody#stationTableBody tr td {
  padding: 0!important;
  width: 30px;
  height: 30px;
  text-wrap: nowrap;
}

.sales-type-container  {
  display: flex; 
  flex-direction: column;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  height: calc(80% - 15px);
  border: 1px solid #ddd;
}
.sales-type-tab-container{
  display: flex;
}

.sales-type {
    background-color: white; 
    color: black; 
    border: 1px solid black; 
    cursor: pointer; 
    padding: 10px; 
    border-radius: 5px;
}

.sales-type.selected {
    background-color: black; 
    color: white; 
    border-radius: 5px;
}

.custom-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay-cs {
  font-weight: bold;
  margin-bottom: 8px;
}
.pay-div {
  color: grey;
}

.tui-grid-cell {
  border: none !important;
}

.tui-grid-border-line-top,
.tui-grid-border-line-left,
.tui-grid-border-line-right,
.tui-grid-border-line-bottom {
  display: none !important;
}

/* 헤더 셀 배경색 및 테두리 제거 */
.tui-grid-header-area .tui-grid-cell {
  background-color: #fff!important;
  border: none !important;
}



@media (max-height: 1000px) {
  .franchise-management-first-box, .market-info-franchise-management-right{
    height: 1500px;
  }
  /* .tui-grid-rside-area{
    height: 260px!important;
  } */
   #fault-grid .tui-grid-rside-area {
    height: 260px!important;
  }
  .tui-grid-layer-state{
    height: 200px!important;
  }

  #qna-grid .tui-grid-rside-area{
    height: 200px!important;
  }
  #qna-grid .tui-grid-container .tui-grid-layer-state {
    height: 149px!important;
  }
  .charger-state-chart-wrapper{
    position: relative;
    width: 100%;
    height:100%;
  }
  .charger-management-data #charger-state-chart{
    max-height: 208px;
    width: 83%!important;
    height: 82%!important;
    /* position: absolute;
    top: 0; */
  }

  .franchise-management-first-box .franchise-nation-wide{
    height: 50%;
  }
  .charger-management-data{
    max-height: 903px;
    height:71%;
  }
 
  #market_dash .sec_box .four-chart{
    height: 125px;
  }

  .franchise-management-first-box .franchise-nation-wide-charts{
    height: 73%;
  }
  .franchise-management-first-box .franchise-nation-wide-charts .ds-box #cb-type-container, .franchise-management-first-box .franchise-nation-wide-charts .ds-box #cb-status-container{
    max-height:155px;
  }
  /* .tui-grid-body-area{
    height: 530px!important;
  } */
  .tui-grid-layer-state{ 
    /* 이거임/ */
    height: 512px!important;
  }
  .tui-grid-scrollbar-y-inner-border{
    height: 0!important;
  }


  /**운영매출 **/
  #tab2{

  }


  #container .content .all-flex #market_dash.charger-management-dashboard {
    height:1000px;
  }

  .subsidy-date{
    display: none;
  }

  .operation-sales-left-box{
   /* max-height: 1200px; */
   height: 1300px;
  }

  .operation-sales-summary > .sum-box {
     height: 110px;
  }
  .operation-sales-right {
    height: 1300px;
  }
  .operation-sales-last-month{
    text-wrap: nowrap;
  }
  .sales-s-con .left-txt > p{
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .charger-mangement-right-box, .statistics-left-box, .statistics-right-box{
    height: 1000px;
  }
  #tab2 .w-flex-box .left-box .chart-img{
    width: 328px;
  }

  .operation-sales-summary{
    max-height: 820px;
  }

  .charger-management-right-inner{
    /* height: ; */
  }
 
}


#market_dash .chart-flex .color-btn {
    /* display: flex; */
    flex-wrap: wrap;
    min-width: 150px;
    max-width: 150px;
    margin: 0;
}

#market_dash .sec_box .color-btn p.first-p,
#market_dash .sec_box .color-btn p.second-p,
#market_dash .sec_box .color-btn p.third-p {
    margin: 5px 5px;  /* 마진 조정 */
}