@charset "UTF-8";

textarea.no-resize {
    resize: none; /* 크기 조정 불가 */
}

.logo_img {
    width: 68px;
    height: 86px;
    /*margin: 0 6rem;*/
    background: url("../images/logos.png");
    margin-bottom: 20px;
}

.title_img {
    width: 345px;
    height: 115px;
    background: url("../images/title.png");
}

.atype_img {
    width: 250px;
    height: 45px;
    background: url("../images/type/Atype.png");
}

.btype_img {
    width: 250px;
    height: 45px;
    background: url("../images/type/Btype.png");
}

.meter_img {
    width: 120px;
    height: 60px;
    border-radius: 5px 5px 5px 5px;
}

.fancytree-container .fancytree-folder .fancytree-icon,
.fancytree-container .fancytree-file .fancytree-icon,
span.fancytree-icon {
    display: none;
}

.border-bottom-line {
    border-bottom: 1px solid #F3F6F7;
}

#kakao-map, #map {
    width: 100%;
    height: 500px;
}


/*
selectbox 트리구조로 노출 커스텀
*/
.dropdown {
    position: relative;
    /*display : inline-block;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    /*width: 100%;*/
    width: 290px; /*일단 input이랑 맞추자*/
    height: 200px;
    z-index: 6; /* 다른 요소들보다 앞에 배치 > 밑에 카드섹션보다 위로 올리니까 6임 */
    overflow-y: auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.3);
}
.dropdown-content.org-list {
    width: 92%;
}

/* height를 주지 않고 트리 목록에 맞춰서 높이 조정*/
.dropdown-content-fit {
    display: none;
    position: absolute;
    /*width: 100%;*/
    width: 290px;
    z-index: 6;
    overflow-y: auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.3);
}
.dropdown-content-fit.org-list {
    width: 92%;
}


.dropdown:checked ~ .dropdown-content {
    display: block;
}

.pointer {
    cursor: pointer;
}

.select-input-gray {
    width: 240px;
    border-radius: 20px;
    /*background-color: #f5f5f5;*/
}

/* 클릭 방지 */
.disabled-tree {
    pointer-events: none;
}

/* 스크롤바 컨테이너 */
.dropdown-content::-webkit-scrollbar {
    width: 6px; /* 스크롤바의 너비 조정 */
}

/* 스크롤바 트랙 (바탕) */
.dropdown-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* 트랙의 배경색 설정 */
}

.dropdown-content::-webkit-scrollbar-track:hover {
    background: rgb(206, 206, 206); /* 마우스 오버 시 트랙의 배경색 설정 */
}

/* 스크롤바 핸들 */
.dropdown-content::-webkit-scrollbar-thumb {
    background: #888; /* 스크롤바 핸들의 색상 설정 */
}

/* 스크롤바 핸들을 마우스 오버했을 때 */
.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #555; /* 마우스 오버 시 스크롤바 핸들의 색상 변경 */
}

#toast-container .toast {
    width: 400px; /* 원하는 너비로 설정 */
}

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

.margin-left-auto {
    margin-left: auto;
}

.permit-list-center {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.between-total-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.center-middle {
    display: flex;
    align-items: center;
}

input:required:invalid:after {
    display: none;
}

.fix-footer {
    position: fixed;
    bottom: 0;
    width: -webkit-fill-available;
    z-index: 56;
}

.fix-footer-sidebar {
    width: calc(100% - 80px);
}

.fix-menu-title {
    padding-left: calc(0.5rem + 4px);
}

.border-none {
    border: none;
}

.no-border-bottom {
    border-bottom: none !important;
}

/* 달력 input에 아이콘 넣기 */
.input-icon-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-icon-container input {
    padding-left: 30px; /* 아이콘에 의해 텍스트가 가려지지 않도록 패딩 조정 */
}

.input-icon-container i {
    position: absolute;
    left: 11px; /* 오른쪽에서부터의 위치 */
    top: 50%; /* 상위 컨테이너 대비 상단에서의 위치 */
    transform: translateY(-50%); /* Y축 기준 중앙 정렬 */
    pointer-events: none; /* 아이콘 클릭 시 입력 필드가 활성화되도록 */
}

.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #19213D;
    pointer-events: none;
    width: 20px;
}

.input-with-icon input {
    padding-left: 35px;
    border-radius: 15px;
}

.copyright-text {
    color: #C7C7C7;
    font-size: small;
}

.dark-color-200 {
    background: #444054;
}

.netrl-color-300 {
    background: #F1F3F7;
}


.breadcrumb-item + .breadcrumb-item:last-child {
    color: #19213D;
}

/* 커스텀 테이블 */
.table-header-text {
    border-bottom: 1px solid #D9DCDE;
    width: 126px;
}

.table-custom thead {
    background-color: #F1F4F6;
    height: 60px;
}

.table-custom tbody tr {
    height: 70px;
}

.table-custom tbody tr.no-data-pop {
    height: 30vh;
}

.table-custom tbody tr.no-data {
    height: 50vh;
}

.table-custom tbody tr:nth-child(2n) {
    background: #F6F6F6
}

.table-custom tr:first-child th:first-child {
    border-top-left-radius: 15px; /* 첫 번째 행의 첫 번째 셀 */
    border-bottom-left-radius: 15px; /* 첫 번째 행의 첫 번째 셀 */
}

.table-custom tr:first-child th:last-child {
    border-top-right-radius: 15px; /* 첫 번째 행의 마지막 셀 */
    border-bottom-right-radius: 15px; /* 첫 번째 행의 첫 번째 셀 */
}

.table-custom-sm th {
    background-color: #F1F4F6;
    height: 60px;
}

.table-custom-sm tr:first-child th:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.table-custom-sm tr:first-child th:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}


.table-custom-default thead {
    background-color: rgba(241, 244, 246, 1);
}

.table-custom-default tr:first-child th:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.table-custom-default tr:first-child th:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.table-custom-default tr td:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.table-custom-default tr td:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.table-custom-default tbody tr:nth-child(2n) {
    background: rgba(241, 243, 247, 1);
}

.table-custom-default tbody tr {
    height: 50px;
}

/* 테이블 row hover시 하이라이트 */
.table-custom tbody tr td:first-child {
    border-top-left-radius: 15px;
}

.table-custom tbody tr td:last-child {
    border-top-right-radius: 15px;
}

.table-custom tbody tr td:first-child {
    border-bottom-left-radius: 15px;
}

.table-custom tbody tr td:last-child {
    border-bottom-right-radius: 15px;
}

.table-custom tbody tr:hover {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 0px 35px 0px #E3E6E7;
}

/* 아이콘을 위쪽에 노출 */
.icon-top {
    position: relative;
    top: -5px;
    margin-left: 2px;
}

/* 단위가 있는 경우 아이콘을 위쪽에 노출, 달라질 수 있어서 분리 HYC-1111*/
.icon-top-with-unit {
    vertical-align: top;
    position: relative;
    top: -5px;
    margin-left: 2px;
}

/* 테이블 가운데 정렬 */
.position-relative {
    position: relative; /* 부모 요소의 위치 지정 */
}

.centered {
    margin: 0 auto; /* 좌우 가운데 정렬 */
}

.no-padding {
    padding: 0 !important;
}

.no-hover {
    pointer-events: none;
}

/* 커스텀 버튼 */
.btn-color-custom {
    color: #000;
    background-color: #129EC7;
    border-color: #129EC7;
}

.btn-custom {
    color: #FFFFFF;
    background-color: #129EC7;
    border-color: #129EC7;
    border-radius: 0.9375rem !important;
    /* width: 6.25rem; */
    height: 2.5rem;
}

.btn-custom:hover {
    color: #FFFFFF;
    background-color: #129EC7;
    border-color: #129EC7;
}

.btn-custom:disabled, .btn-custom.disabled {
    color: #FFFFFF;
    background-color: #BAC0CC;
    border-color: #BAC0CC;
    border-radius: 0.9375rem !important;
    /*width: 6.25rem;*/
    height: 2.5rem;
}

.btn-custom-outline {
    color: #129EC7;
    background-color: #FFFFFF;
    border-color: #129EC7;
    border-radius: 0.9375rem !important;
    /* width: 6.25rem; */
    height: 2.5rem;
}

.btn-custom-outline:hover {
    color: #129EC7;
    background-color: #FFFFFF;
    border-color: #129EC7;
}

.btn-custom-outline:disabled, .btn-custom-outline.disabled {
    color: #129EC7;
    background-color: #BAC0CC;
    border-color: #BAC0CC;
    border-radius: 0.9375rem !important;
    /*width: 6.25rem;*/
    height: 2.5rem;
}

.btn-gray-outline {
    color: black;
    background-color: #FFFFFF;
    border-color: #D2D2D2;
    border-radius: 0.9375rem !important;
    /* width: 6.25rem; */
    height: 2.5rem;
}

.btn-gray-outline:disabled, .btn-gray-outline.disabled {
    color: #FFFFFF;
    background-color: #BAC0CC;
    border-color: #BAC0CC;
    border-radius: 0.9375rem !important;
    /*width: 6.25rem;*/
    height: 2.5rem;
}

.btn-dark-outline {
    color: #495057;
    background-color: #FFFFFF;
    border-color: rgba(186, 192, 204, 1);
    border-radius: 0.9375rem !important;
    /* width: 6.25rem; */
    height: 2.5rem;
}

.btn-dark-outline:disabled, .btn-dark-outline.disabled {
    color: #FFFFFF;
    background-color: #BAC0CC;
    border-color: #BAC0CC;
    border-radius: 0.9375rem !important;
    /*width: 6.25rem;*/
    height: 2.5rem;
}

.btn-custom-dark {
    color: #FFFFFF;
    background-color: #19213D;
    border-color: #19213D;
    border-radius: 0.9375rem !important;
    /* width: 6.25rem; */
    height: 2.5rem;
}

.btn-custom-dark:hover {
    color: #fff;
    background-color: #19213D;
    border-color: #19213D;
}

.btn-custom-dark:disabled, .btn-custom-dark.disabled {
    color: #FFFFFF;
    background-color: #BAC0CC;
    border-color: #BAC0CC;
    border-radius: 0.9375rem !important;
    /*width: 6.25rem;*/
    height: 2.5rem;
}

.btn-pink-custom {
    color: #D57A7A;
    background-color: #FDEFEE;
    border-color: #FDEFEE;
}

.btn-gray-custom {
    color: #D57A7A;
    background-color: #F7F7F7;
    border-color: #F7F7F7;
}

.custom-width {
    width: 6.25rem;
}

.table-cnt-title {
    color: rgba(25, 33, 61, 1);
    font-weight: 700;
    font-size: 14px;
}

/* 테이블 데이터가 없을때 */
.no-data-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.no-data {
    height: 50vh;
}

.no-data td p {
    font-weight: 600;
    font-size: medium;
    margin-bottom: 10px;
}

.no-data-image {
    height: 140px;
    width: 140px;
    margin-bottom: 10px;
    background-image: url("../images/no-data.png");
}

.no-data-usage-chart-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.no-data-usage-chart {
    height: 140px;
    width: 140px;
    margin-bottom: 10px;
    background-image: url("../images/no-data-sheet.png");
}

/* 검색 이미지*/
.search-data-image {
    height: 140px;
    width: 140px;
    margin-bottom: 10px;
    background-image: url("../images/search-data.png");
}

.no-image {
    height: 140px;
    width: 100%;
    margin-bottom: 10px;
}

/* 언어별 배경 이미지 매핑 */
.no-image[data-locale="ko-KR"] {
    --no-image-bg: url("../images/no-image-ko.avif");
}

.no-image[data-locale="ja-JP"] {
    --no-image-bg: url("../images/no-image-ja.avif");
}

.no-image[data-locale="en-US"] {
    --no-image-bg: url("../images/no-image-en.avif");
}

/* 동적으로 배경 이미지 설정 */
.no-image {
    background-image: var(--no-image-bg);
}

/* sweetalert 관련 */
.swal2-modal {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* 그림자 효과 추가 */
}

.swal2-popup,
.swal2-popup .swal2-input {
    border-radius: 20px; /* 테두리 둥근 정도 조절 */
}

.swal-custom-cancel {
    border: 1px solid #8B8F9D !important; /* 취소 버튼 테두리 */
}

.swal2-popup .swal2-accent {
    padding-top: 20px;
    color: #F15D66 !important;
    display: block;
}

.no-outline:focus {
    outline: none !important;
    box-shadow: none !important;
}

div.title-like.required::before,
label.required::before {
    content: "＊";
    color: red;
    margin-right: 1px;
    font-weight: bold;
}

.label-title {
    font-size: 12px;
    font-weight: bold;
}

.radio-wrap {
    display: flex;
    width: 100%;
}

.label-title.form-align-center{
    flex: 1;                       /* 각각 절반 차지 */
    display: inline-flex;          /* inline-block처럼 흐르면서 flex 사용 */
    align-items: center;           /* 세로 중앙 정렬 */
    line-height: 1.2;              /* 라인 높이로 미세 틀어짐 방지 */
}

.label-title.form-align-center {
    vertical-align: middle;        /* 추가 보정(브라우저별) */
}

.label-title.form-align-center .form-check-input {
    margin-left: 0.5rem; /* 또는 margin-right */
}

.label-sub-title {
    font-size: 14px;
    font-weight: normal;
}

.tooptip-center-text {
    font-size: 14px;
    text-align: center;
}

.hidden {
    display: none;
}

.visible-hidden {
    visibility: hidden;
}

/* font color */
.custom-color {
    color: #129EC7;
}

.disabled-color {
    color: #BAC0CC;
}

.form-label-dark {
    margin-bottom: 0.5rem;
    color: #495057 !important;
}

.text-success-custom {
    color: #008743;
}

.bg-custom-black {
    background-color: #464255 !important;
}

.bg-custom-blue {
    background-color: #129EC7 !important;
}

.bg-custom-yello {
    background-color: #FFC107 !important;
}

.bg-custom-pink {
    background-color: #E67E84 !important;
}

.bg-custom-red {
    background-color: #F15D66 !important;
}

.bg-custom-gray {
    background-color: #868686 !important;
}

.bg-custom-dark-gray {
    background-color: #4A4A4A !important;
}

.bg-custom-white {
    background-color: #FFFFFF !important;
}

.font-custom-blue {
    color: #129EC7;
}

.font-custom-red {
    color: #F15D66;
}

.font-custom-gray {
    color: #000000;
}

.font-custom-dark {
    color: rgba(25, 33, 61, 1);
}

.font-custom-black {
    color: #495057;
}

.font-custom-black-78 {
    color: #464255;
}

.font-custom-gray {
    color: #969696;
}

.font-custom-white {
    color: #FFFFFF;
}
.font-custom-dark-navy {
    color: #19213D !important;
}


.text-wait {
    color: #444054 !important;
}

.text-installing {
    color: #88A6B1 !important;
}

.text-install-complete {
    color: #1394C0 !important;
}

.text-operation {
    color: #219D77 !important;
}

.text-as {
    color: #FFC107 !important;
}

.text-breakdown {
    color: #F15D66 !important;
}

.bg-wait {
    background-color: #444054 !important;
}

.bg-installing {
    background-color: #88A6B1 !important;
}

.bg-install-complete {
    background-color: #1394C0 !important;
}

.bg-operation {
    background-color: #219D77 !important;
}

.bg-as {
    background-color: #FFC107 !important;
}

.bg-breakdown {
    background-color: #F15D66 !important;
}

.btn-custom-blue {
    color: #fff;
    width: 108px;
    height: 60px;
    border-radius: 14px;
    background-color: #129EC7;
    border-color: #129EC7;
}

.btn-custom-white {
    color: #495057;
    width: 108px;
    height: 60px;
    border-radius: 14px;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.fancytree-selected {
    /*background-color: #E0F6FF !important;
    padding: 5px;
    border-radius: 8px;*/
}

#treeSidebar span.fancytree-node {
    line-height: 30px;
    height: 30px;
}

#treeSidebar span.fancytree-expander {
    margin-top: 8px;
}

/* font size */
.fs-7 {
    font-size: 0.75rem !important;
}


.app-page-title .page-title-icon-div {
    font-size: 2rem;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    padding: 0.83333rem;
    margin: 0 2rem 0 0;
    border-radius: 0.25rem;
    width: 60px;
    height: 60px;
}

.search-select {
    border: none;
    border-radius: 4px;
    background-color: #eff9ff;
    outline: none;
}

.search-input {
    height: 2.5rem;
}

.rounded-10 {
    border-radius: 1rem !important;
}

.top-header-rounded-10 {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.input-with-button {
    display: flex; /* 요소들을 한 줄로 정렬 */
    border: 1px solid #ccc; /* 외곽선 추가 */
    border-radius: 4px; /* 모서리를 둥글게 */
    overflow: hidden; /* 내부 요소가 박스를 벗어나지 않도록 처리 */
}

.input-with-button input {
    border: none; /* 입력 필드의 테두리 제거 */
    flex-grow: 1; /* 남은 공간을 모두 차지 */
}

.input-with-button button {
    background-color: #007BFF; /* 버튼 배경색 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 버튼의 테두리 제거 */
    padding: 8px 15px; /* 버튼 내부 패딩 */
    cursor: pointer; /* 커서 모양 변경 */
}

.logo-bottom-mds {
    position: fixed;
    bottom: 0;
    right: 0;
    padding-bottom: 3rem;
    padding-right: 5rem;
}

.logo-top-mdsit {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px 30px 0px 0px;
}

.logo-bottom-mdsit {
    position: absolute;
    bottom: 0;
    padding: 0rem 0rem 5rem 0rem;
}

.device-status-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 35px;
    border-radius: 10px;
}

.device-status-success {
    background: #C9F0E4;
    color: #008743;
}

.device-status-fail {
    background: #F0C9C9;
    color: #C64D52;
}

.device-status-check {
    background: #D4D4D4;
    color: #585A5A;
}

.device-status-wait {
    background: #FFC1074D;
    color: #6B5000;
}

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


.btn-container {
    /*width: 300px;*/
    height: 40px;
    position: relative;
    display: flex;
}

.btn-container input {
    width: 100%;
    border-radius: 15px;
}

.btn-container button {
    position: absolute;
    top: 0.3125rem;
    bottom: 0.3125rem;
    right: 9px;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
}

.btn-container img {
    height: 15px;
    width: 15px;
    margin-right: 2px;
}

/* 명암, 밝기 슬라이더 커스텀 */
.slider-container {
    width: 100%;
    margin: 20px;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; /* 슬라이더 길이 */
    height: 8px; /* 슬라이더 두께 */
    border-radius: 5px; /* 슬라이더 모서리를 약간 둥글게 */
    background: linear-gradient(to right, #129EC7 0%, #ECF1F4 0%);
    outline: none; /* 슬라이더 테두리 없이 */
    opacity: 0.7;
    transition: opacity .15s ease-in-out;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; /* 슬라이더 핸들 길이 */
    height: 24px; /* 슬라이더 핸들 높이 */
    background: #FFFFFF; /* 슬라이더 핸들 색상 */
    cursor: pointer;
    border-radius: 50%; /* 핸들 모양을 원모양으로 만들기 위함 */
    border: 1px solid #0000001A;
    box-shadow: 0px 5.5px 5px -3px #0E0E2C33;
    box-shadow: 0px -1px 0px 0px #0E0E2C66 inset;
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    cursor: pointer;
    border-radius: 50%; /* 핸들 모양을 원모양으로 만들기 위함 */
    border: 1px solid #0000001A;
    box-shadow: 0px 5.5px 5px -3px #0E0E2C33;
    box-shadow: 0px -1px 0px 0px #0E0E2C66 inset;
}


/* input 내부 텍스트 */
.input-container {
    position: relative;
    display: block;
}

.fixed-text {
    position: absolute;
    top: 50%;
    right: 88%;
    transform: translateY(-50%);
    pointer-events: none; /* Make sure the text does not interfere with input interaction */
    color: #D3D6D8; /* You can change the color as needed */
}
.form-control{
    caret-color: auto;
}

/* 입력값 확인 */
.form-control.input-error:focus {
    border-color: red;
    background-color: #ffe6e6;
    box-shadow: 0 0 0 0;
}

/* 검색어 selectbox + input 커스텀 */
.search-select-custom {
    height: 2.5rem;
    color: #495057;
    background-color: #F7F7F7;
    border-color: #eeeeee;
    z-index: 4;
    border-radius: 15px 0 0 15px;
    border-right: none;
    font-size: 0.88rem;
}

.search-input-custom {
    width: 250px;
    height: 2.5rem;
    border-color: #eeeeee;
    border-radius: 0 15px 15px 0;
}
.search-input-custom.only-text{
    border-radius: 15px
}

.search-input-custom:focus {
    outline: none; /* 기본 outline 제거 */
    box-shadow: none; /* 포커스 시 생기는 그림자 효과 제거 */
    border-color: #eeeeee; /* 기존 테두리 색상 유지 */
}

.search-select-custom-right {
    height: 2.5rem;
    color: #495057;
    background-color: #F7F7F7;
    border-color: #eeeeee;
    z-index: 4;
    border-radius: 0 15px 15px 0;
    border-right: none;
    font-size: 0.88rem;
}

/* 특정 클래스나 id를 사용하여 padding-left만 제거 */
#select2-dpNoColorType-container {
    padding-left: 0 !important;
}

/* div box 상단 그림자 */
.pop-box-shadow {
    box-shadow: 0px -3px 14px 0px #00000026;
}


/*
* 목록 개수 지정 selectbox
*/
.custom-select-wrapper {
    position: relative;
    /*width: 90px;*/
}

.custom-select {
    width: 100%;
    padding: 10px;
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none; /* Remove border */
    font-size: 14px; /* Adjust font size as needed */
    cursor: pointer; /* Change cursor to pointer for better UX */
}

.custom-arrow {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none; /* So that clicks go through to the select */
}

.custom-arrow img {
    width: 10.3px; /* Adjust icon size as needed */
    height: 12.5px;
}


.row-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
}


/* 언어 변경 영역*/
.container {
    display: flex;
    align-items: center;
}

.icon {
    width: 24px; /* 아이콘 크기 조정 */
    height: 24px; /* 아이콘 크기 조정 */
    margin: 0 8px; /* 아이콘과 텍스트 사이의 간격 */
}

.text {
    font-size: 16px; /* 텍스트 크기 조정 */
    margin: 0 8px; /* 아이콘과 텍스트 사이의 간격 */
}


/* 타이틀 아래 내용 */
.sub-desc-center {
    font-size: 0.75rem;
    color: black;
    text-align: center;
    margin-bottom: 1rem !important;
}


/* 검침값 수정 영역 */
.show-container {
    justify-content: center;
}

.show-container:hover .icon-pen {
    visibility: visible;
}

.edit-container {
    display: none;
}

.reading-val-div {
    width: 180px;
}

/* 사업소 코드*/
.business-code {
    font-size: 14px; /* 텍스트 크기 설정 */
    color: #6D758F; /* 텍스트 색상 설정 */
    font-weight: normal; /* 기본 굵기 */
}

.business-code .title {
    color: #6D758F;
    font-weight: bold; /* 사업소 코드를 굵게 */
}

.business-code #realOrgCode {
    font-weight: lighter;
}

/* 모든 브라우저에서 숫자 입력 화살표 숨기기 */
/* 웹킷 기반 브라우저 (크롬, 사파리 등) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 날짜는 달력 선택해야만 가능 -> readonly를 줄건데 배경색 흰색으로 */
.search-dttm[readonly],
input[name="fileInput"]:read-only {
    background-color: white;
}

/* readonly 상태일 때, 배경색을 기본으로 돌려놓기 */
.form-control[readonly] {
    background-color: #fff !important; /* 기본 배경색 */
    opacity: 1 !important; /* 투명도 기본으로 설정 */
}

.button-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.button-group .sample-download {
    display: flex;
    flex-direction: column;
}

/* 커스텀 버튼 (input 창 안에 이미지 버튼)*/
/* 컨테이너 스타일 */
.custom-input-container {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    width: 160px; /* 크기 조정 */
    margin: 0 auto; /* 중앙 정렬 */
}

/* 입력 필드 스타일 */
.custom-input {
    border: none;
    outline: none;
    flex: 1;
    background: none;
    margin-right: 10px;
    width: 100%;
}

/* 버튼 스타일 */
.action-button {
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent; /* 버튼 배경 제거 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

/* checkbox 비활성화 시 색상 변경*/
.checkbox-disabled:disabled {
    background-color: #6D758F;
    border-color: #6D758F;
}

/* checkbox 비활성화 시 색상 변경*/
.checkbox-disabled[type="checkbox"]:indeterminate {
    background-color: #6D758F;
    border-color: #6D758F;
}

.action-button img {
    width: 23px; /* 이미지 크기 */
    height: 23px;
}


.custom-card-bg {
    background: #F6F6F6;
}

/*대시보드 */
.dashboard-header-container {
    display: flex;
    justify-content: space-between; /* 아이템들을 양옆에 붙이고 사이를 띄움 */
    align-items: center; /* 세로 방향 중앙 정렬 (필요에 따라 조정) */
}

.dashboard-header-div {
    display: flex;
    flex-direction: row
}

.dashboard-header-font {
	font-weight: 600;
	font-size: 36px;
	display: block;
	letter-spacing: -1px;
	line-height: 1;
	color:#222222;
}
.dashboard-header-cnt {
	font-weight: 600;
	font-size: 36px;
	letter-spacing: -1px;
	line-height: 1;
	color: #222;
}
.dashboard-header-label {
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0;
	line-height: 22px;
	color: #444054;
	text-align: right;
}
.dashboard-header-org-name {
	font-weight: 600;
	font-size: 40px;
	line-height: 100%;
	letter-spacing: 0;
	color: #19213D;
	margin-bottom: 0;
	margin-right: 0.5rem;
}
.dashboard-header-time {
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0;
	color: #19213D;
	margin-bottom: 3px;
	margin-right: 0.5rem;
}
.common-operational-label {
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0;
	color: #19213D;
}
.card_total_order {
	height: 150px;
	border-radius: 14px;
	padding: 20px;
	gap: 10px;
	box-shadow: 0 4px 15px 0 #00000026;
	background: #FFFFFF;
}
.card_total_order_cnt {
	font-weight: 600;
	font-size: 64px;
	line-height: 1.5;
	letter-spacing: -1px;
	text-align: center;
	vertical-align: middle;
	color: #19213D;
}
.card_total_order.bg-gray {
	background: #F7F7F7;
}
.left-side-row-3-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 125%;
	letter-spacing: 0;
	color: #0E0D0B;
	text-align: left;
	margin-bottom: 0.5rem;
}
.row-2-header {
	font-weight: 600;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0;
	color: #19213D;
}
.left-side-row-3-sub-title {
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0;
	color: #444054;
	text-align: left;
}
.progress-care-value {
	font-weight: 600;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: -1px;
	color: #0E0D0B;
}
.widget-content .widget-content-left .widget-heading {
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: 0;
	color: #FFF;
}

.widget-content .widget-content-left .widget-heading-installer {
    opacity: .8;
    font-weight: bold;
}

div#userOrgNm.widget-heading.header-org-nm-text {
    color: #6B6B6A;
}
div.widget-heading.processNm {
    color: #6B6B6A !important;
}

#careTypeListStatus .dashboard-card-sub-title:nth-child(1) .progress-bar {
	background-color: #4DE0E2;
}
#careTypeListStatus .dashboard-card-sub-title:nth-child(2) .progress-bar {
	background-color: #BA68C8;
}
#careTypeListStatus .dashboard-card-sub-title:nth-child(3) .progress-bar {
	background-color: #96C998;
}
#careTypeListStatus .dashboard-card-sub-title:nth-child(4) .progress-bar {
	background-color: #FFD59E;
}
#careTypeListStatus .dashboard-card-sub-title:nth-child(5) .progress-bar {
	background-color: #BCE288;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(1) .progress-bar {
	background-color: #129EC7;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(2) .progress-bar {
	background-color: #39C712;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(3) .progress-bar {
	background-color: #FFC107;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(4) .progress-bar {
	background-color: #E67E84;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(5) .progress-bar {
	background-color: #4A4A4A;
}
#deviceStatusList .dashboard-card-sub-title:nth-child(6) .progress-bar {
	background-color: #989898;
}
.bg-stand-by {
    background-color: #39C712;
}
.bg-spare {
    background-color: #989898;
}
.csumr-progress-bar-height {
	height: 15px;
}
.min-height-300 {
	min-height: 300px;
}
.dashboard-card-title {
    font-size: 24px;
    font-weight: 700;
}

.dashboard-card-sub-title {
    font-size: 16px;
}

a.dashboard-card-sub-title {
    color: inherit;
}

.grid-container {
    display: grid;
    height: 100%;
}

.flex-xy-center {
    align-items: center;
    justify-content: center;
}

.chart-container {
    width: 100%;
}

.fw-bold-light {
    font-weight: 600 !important;
}

#warning-chart-container {
    position: relative;
    height: 53vh;
    overflow: hidden;
}

#donut-chart-container {
    position: relative;
    height: 20vh;
    overflow: hidden;
}

#average-monthly-usage-chart-container {
	position: relative;
	/* height: 67vh; */
	width: 100%;
	height: 30vh;
	overflow: hidden;
}
#usage-chart-by-Org {
	position: relative;
	width: 100%;
	height: 45vh;
	overflow: hidden;
}
#usage-chart-by-Csumr{
	position: relative;
	width: 100%;
	height: 45vh;
	overflow: hidden;
}
.h20vh {
    height: 20vh;
}
.btn-custom-white-tab {
    color: #495057;
    width: 108px;
    height: 60px;
    border-radius: 1rem;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 4px 0px #0000000A;
    display: flex; /* Flexbox를 사용 */
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-align: center; /* 텍스트 가운데 정렬 */
}

.btn-custom-white-tab.active {
    background-color: #129EC7; /* 활성화된 배경색 */
    border-color: #129EC7;
    color: #ffffff; /* 활성화된 글자 색상 */
}

/*
#device-chart, #lifeAlertChart-1, #lifeAlertChart-2 {
	width: 100%;
	height: 100%;
}*/

/* 로그인 화면 */
@media (max-width: 576px) {
	.logo-top-mdsit {
		visibility: hidden; }
	.logo-bottom-mdsit {
		visibility: hidden; }
	.logo-bottom-mobile {
		display: block;}
	}
	@media (min-width: 576px) {
	.logo-top-mdsit {
		display: block; }
	.logo-bottom-mdsit {
		display: block; }
	.logo-bottom-mobile {
		visibility: hidden;}
	}

.logo-mobile-center {
    bottom: 0;
    padding: 0 40px;
    text-align: center;
}

.waiting-img-cover {
    background: url("../../images/waiting.png");
    width: 120px;
    height: 60px;
    background-size: cover;
    background-position: center;
    border-radius: 5px 5px 5px 5px;
}

#deviceStatus_normal,
#deviceStatus_fail,
#batteryStatus_normal,
#batteryStatus_low {
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-bottom-margin {
    margin-bottom: 0; /* 특정 클래스에서만 제거 */
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    opacity: 0.3;
    color: #19213D;
}

/* PC 테이블 정렬용 CSS 스타일 */
.table-text {
    text-align: center;
}

.table-text-left {
    text-align: left;
}

.lb-image {
    border: initial !important;
}

.lb-prev, .lb-next {
    display: none !important;
}

.lb-prev:hover, .lb-next:hover {
    display: none !important;
}

.lb-number {
    display: none !important;
}

.lb-close {
    position: relative;
    top: -150px;
    right: -40px;
}

.card-header, .card-title {
    text-transform: initial;
}

.border-cancel {
    border-color: #BAC0CC !important;
}

.tooltip-inner {
    color: #FFFFFFE0;
    background-color: #19213D;
    border: 0.5px solid #19213D;
    border-radius: 4px;
    max-width: initial;
    padding: 12px;
    text-align: left;
}

.sidebar-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
}

/*.vertical-nav-menu li a {
    padding: 0 1.5rem 0 32px;
}*/

.btn-inspect {
    color: #129EC7;
    border-color: #129EC7;
}

.btn-inspect:hover, .btn-inspect:active {
    background-color: #129EC7;
    color: #F7F8FA;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
}

.w130p {
    width: 130px !important;
}

.w100p {
    width: 100px !important;
}

.w200p {
    width: 200px !important;
}

.w230p {
    width: 230px !important;
}

.w250p {
    width: 250px !important;
}
.w300p {
	width: 300px !important;
}
#arrow-left {
    vertical-align: initial;
}

.tooltip.custom-tooltip .tooltip-inner {
    max-width: initial !important;
    padding: 1rem;
    text-align: left;
}

.tooltip.custom-tooltip-icon {
    font-size: 12px;
}

.care-type-image, .device-status-image, .image-status-image, .usage-chart-img {
	width: 35px;
	height: 35px;
}

.h25 {
    height: 25px;
}

.breadcrumb-icon {
    width: 14px;
    height: 14px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.number-color {
    color: #6D758F;
}

.memo-text {
    color: #6D758F;
}

.two-line {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-inline-box;
}

#device-m
#device-manage-list th,
#breakdown-manage-list th:nth-child(2) {
    height: 30px;
    padding: 0;
}

.toast-top-right {
    bottom: 7%;
    left: 50%;
    margin-left: -200px;
    top: initial;
    right: initial;
}

.active-parent {
    background-color: #E0F6FF !important;
    border-color: #E0F6FF !important;
    /*padding: 5px;*/
    border-radius: 8px !important;
}

.disable-input-form {
    background-color: #EEE;
    opacity: 1;
    caret-color: auto;
    cursor: text;
    transition: all .2s;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    color: #343A40;
    background-clip: padding-box;
    border: 1px solid #EEE;
    appearance: none;
    border-radius: 0.9375rem;
    margin: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.disable-input-form > span {
    min-width: 5ch;
    text-align: left;
}

.disable-input-form > span:nth-child(2) {
    color: #6C757D;
}

input[name="date-range"] {
    width: 300px;
}

/* 모바일 대응시 미디어 쿼리 안에 추가*/
@media (max-width: 768px) {
    /* 로그인 컨테이너 */
    .app-login-box .app-logo {
        margin: 7rem 0rem 2rem 0rem;
        width: 70%;
        height: 55px;
    }

    #login-container > h4 > span {
        font-size: 18px;
    }

    #login-container .form-label,
    #login-container .logo-bottom-mdsit .d-flex .justify-content-between .col-md-10 .col-lg-8,
    body > div.app-container.app-theme-white.body-tabs-shadow > div > div > div > div.h-100-.d-flex.bg-white.justify-content-center.align-items-center-login.col-md-12.col-lg-9 > div.position-absolute.logo-mobile-center.logo-bottom-mobile > div:nth-child(2) {
        font-size: 12px;
    }

    #login-container > div .d-flex .align-items-center,
    #login-container > div.my-3.text-end > button {
        font-size: 14px;
    }

    .table-text {
        text-align: initial;
    }

    /* 피씨 로고 */
    .logo-pc {
        visibility: hidden;
    }

    .custom-width {
        width: 100%;
    }

    .toast-top-right {
        right: initial;
        bottom: 5%;
        left: 50%;
        margin-left: -200px;
    }

}

.card.widget-chart.communi-status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px; /* 원하는 높이 비율 또는 px */
    width: 100%;
    background-color: #F15D66;
    border-top-left-radius: 0.9375rem;
    border-top-right-radius: 0.9375rem;
}
.card.widget-chart.communi-status.empty-status:before {
    background-color: #E9E9E9;
}

.card.widget-chart.low-battery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background-color: #FF9000;
    border-top-left-radius: 0.9375rem;
    border-top-right-radius: 0.9375rem;
}
.card.widget-chart.low-battery.empty-status::before {
    background-color: #E9E9E9;
}

.card.widget-chart.low-use::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background-color: #FC30D3;
    border-top-left-radius: 0.9375rem;
    border-top-right-radius: 0.9375rem;
}
.card.widget-chart.low-use.empty-status::before {
    background-color: #E9E9E9;
}

.card.widget-chart.leak::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background-color: #A162F7;
    border-top-left-radius: 0.9375rem;
    border-top-right-radius: 0.9375rem;
}
.card.widget-chart.leak.empty-status::before {
    background-color: #E9E9E9;
}

.dashboard-cnt-text {
    font-size: 51px;
    font-weight: bold;
    color: #19213D;
    text-align: center;
}

/* font */
.font-low-battery {
    color: #FF9000;
}

.font-low-use {
    color: #FC30D3;
}

.font-communi-status {
    color: #F15D66;
}

.dashboard-large-cnt-text {
	font-size: 64px;
	text-align: center;
	font-weight: 700;
	line-height: normal;
}

.font-leak {
    color: #A162F7;
}

.view-usage-trends-btn {
    color: #FFF !important;
    background-color: #19213D !important;
    border-color: #19213D !important;
    width: 88px;
    height: 31px;
    border-radius: 5px !important;
    padding: 3px 10px !important;
    gap: 10px;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 25px !important;
    letter-spacing: normal;
    vertical-align: middle !important;
    float: right;
    right: 30px;
}

/* 전일 대비 텍스트 */
.change-value-text {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: #12163C;
    text-align: center;
}

.change-positive {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: #F93C65;
}

.change-negative {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: #00B69B;
}

.dashboard-status-icon-image {
    width: 25px;
    height: 25px;
}

.dashboard-progress-status-text {
    font-weight: 300 !important;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #222;
    cursor: pointer;
}

.select-usage-history-type {
    width: 125px;
    height: 40px;
    border-radius: 5px;
    padding-right: 12px;
    padding-left: 12px;
    border: 1px solid #EEE;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background: #FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center;
    background-size: 16px 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.usage-history-type-month-picker {
    width: 120px !important;
    height: 40px;
    border-radius: 5px;
    padding-right: 12px;
    padding-left: 2rem;
    background: #FFF;
    border: 1px solid #EEE;
    opacity: 1;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #19213D;
}

.usage-history-type-month-icon {
    margin-left: 0.7rem !important;
    color: #19213D;
    transform: translateY(-50%);
    left: 0;
    top: 50%;
    position: absolute;
    font-weight: 900;
}

/* 대시보드 새로고침 애니메이션 추가 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.reload-container {
    display: flex;
    align-items: center; /* 수직 정렬 */
    justify-content: center; /* 수평 정렬 */
    position: relative; /* 부모 요소 기준 */
    margin-left: 4px; /* 시간과 간격 확보 */
}

.reload-icon {
	transition: opacity 0.3s ease-in-out;
	vertical-align: middle;  /* 아이콘이 아래로 내려가는 문제 해결 */
	margin-bottom:6px; /* 옆의 시간 정보와 높이를 맞추기 위해 유지 */
	width: 16px;
	height: 16px;
}

.reload-spinner {
    display: none;
    width: 16px;
    height: 16px;

	border-radius: 50%;
	box-shadow: inset 0 0 0 2px transparent,
	0 -2px 0 0 #333, /* 상단만 색상 적용 */
	0 1px 0 0 transparent,
	-2px 0 0 0 transparent,
	2px 0 0 0 transparent;

    box-sizing: border-box; /* 정확한 크기 계산 */

    animation: rotate 1s linear infinite;
    transform-origin: center; /* 중심 축 완벽하게 조정 */

    position: relative;
    margin-bottom: 6px; /* 기준을 맞추기 위해 아이콘과 동일한 margin-bottom 적용 */
}
.stat-select-box {
	min-width: 107px;
	height: 40px;
	border-radius: 15px;
	padding: 0 12px;
	border: 1px solid #EEE;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0;
	color: #19213D;
	background: #FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center;
	background-size: 16px 12px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	appearance: none;
	display: block;
	vertical-align: middle;
	justify-content: space-between; /* flex item이 아닌 경우 의미 없음 → 삭제 가능 */
}
.stat-select-box:disabled{
    background: #EEEEEE;
    background-size: 16px 12px;
    pointer-events: none;
}


.select-care-type-area select {
	min-width: 130px;
}

.select-usage-history-type-area select {
	width: 107px;
}

.select-period-type-area select {
	width: 210px;
}
.stat-search-ym-area input{
	width: 130px;
	height: 40px;
	border-radius: 15px;
	gap: 8px;
	background: #FFF;
	border: 1px solid #EEE;
	font-weight: 400;
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 0;
	vertical-align: middle;
	color: #19213D;
}

/* ========================== */
/* 헤더 (radio-header)        */
/* ========================== */
.radio-header {
	display: flex;
	padding: 10px 12px;
	background-color: #F1F4F6;
	font-weight: bold;
	font-size: 0.9rem;
	color: #343a40;
	border-radius: 5px;
}

.radio-header > .col-orgNm {
	flex: 2;
}

.radio-header > .col-title,
.radio-header > .col-sub,
.radio-header > .col-status {
	flex: 1.2;
}

/* 헤더 텍스트 중앙 정렬 */
.radio-header > div {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* ========================== */
/* 데이터 행 (radio-row)      */
/* ========================== */
.radio-row {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	transition: background 0.2s ease;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0;
	color: rgba(69, 70, 78, 1);

}

/* ========================== */
/* 열 설정 및 정렬            */
/* ========================== */

/* [1열] 사업소 (라디오 버튼 + 텍스트) */
.col-orgNm {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 100px;
	max-width: 375px;
}

/* 라디오 버튼은 좌측 고정 */
.col-orgNm .form-check-input {
	flex-shrink: 0;
	margin-right: 0.5rem;
}

/* 사업소명 텍스트는 중앙 정렬 */
.col-orgNm .orgNm-text {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.col-title {
	flex: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 140px;
	max-width: 210px;
}

.col-sub {
	flex: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 160px;
	max-width: 210px;
}

.col-status {
	flex: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 100px;
}
#stat-modal {
	max-width: 550px;
}

.modal-dialog.auto-expand-wide {
	max-width: min(90vw, 1040px)  !important;
}

.badge-base {
	display: inline-block;
	border: 1px solid transparent;
	white-space: nowrap;
	width: 62px;
	height: 18px;
	gap: 3px;
	border-radius: 8px;
	padding: 2px 15px;
	font-weight: 400;
	font-size: 12px;
	line-height: 100%;
	letter-spacing: 0;
}

/* 정상: 초록 */
.badge-normal {
	color: #0F9464;
	background: rgba(15, 148, 100, 0.1);
}

/* 누수: 보라 */
.badge-leakage {
	color: #A162F7;
    background: #F6EFFE;
}

/* 저사용: 핑크 */
.badge-low-usage {
	color: #FC30D3;
	background: rgba(252, 48, 211, 0.1);
}

/* 알 수 없음 */
.badge-unknown {
	color: #999;
	background-color: #f5f5f5;
	border-color: #d9d9d9;
}
.csumr-cnt-total {
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0;
	vertical-align: middle;
	color: rgba(73, 80, 87, 1);
    margin-bottom: 0.5rem;
}

.stats-header-csumr-no, .stats-header-org-name {
	font-weight: 600;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0;
	color: rgba(18, 18, 18, 1);
}
.stats-header-tab-description {
	margin-bottom: 1.5rem;
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0;
	color: rgba(18, 18, 18, 1);
}
.stats-header-text {
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0;
	color: rgba(18, 18, 18, 1);
}
.no-data-div-stat {
	display: flex;
	flex-direction: column;
	align-items: center;     /* 수평 중앙 */
	justify-content: center; /* 수직 중앙 */
	text-align: center;
	min-height: 400px;
}
.todo-list-wrapper-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
    max-width: min(90vw, 1040px)  !important;
}
.detail-chart-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0;
	color: #19213D;
	text-align: left;
	margin-bottom: 1rem;
}

.popup-button-div {
    box-shadow: 0px -3px 14px 0px #00000026;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 10px;
}

.popup-button-div .popup-button {
    width: 100px;
    height: 40px;
    /*padding: 0.375rem 1.5rem;*/
    font-size: 12.8px;
    line-height: 19.2px;
    font-weight: 500;
    color: #19213D;
    background-color: #FFF;
    border: #BAC0CC 1px solid;
    border-radius: 15px;
    position: relative;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    outline: none !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
}

.popup-button-div .popup-button.confirm-button {
    color: #FFF;
    background-color: #129EC7;
    border: #129EC7 1px solid;
}
.google-map-modal.modal-dialog {
    max-width: 1000px !important;
}

.map-aria {
    width: 100%;
    height: 400px;

}

.google-map-search{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
}
.google-map-search span{
    position: relative;
    width: 100%;
    display: block;
}
.google-map-search span.my-location-aria{
    margin-top: 40px;
}
.my-location-aria{
    position: absolute;
    top: 5%;
    left: 2%;
    z-index: 1500;
}

.my-location-button {
    margin-top: 10px;
    background-color: white;
    width: 30px;
    height: 30px;
    background-image: url("../images/icon/my-location.png");
    background-repeat: no-repeat;
    background-position: center; /* background image를 가운데로 설정 */
    border-radius: 10%; /* 모서리를 둥글게 */
    outline: none; /* outline 제거 */
    border: none; /* 혹시 있을 수 있는 기본 border도 제거 */
    box-shadow: 5px 5px 11px 2px #00000026
}
.read-spec-select-contents-aria,
.google-map-contents-aria {
    position: inherit;
}

.copy-addr {
    margin-top: 10px;
    color: #129EC7;
    text-align: right;
    background: none;      /* 배경 제거 */
    border: none;          /* 테두리 제거 */
    outline: none;         /* 포커스 시 표시되는 외곽선 제거 */
    padding: 0;            /* 기본 padding 제거 (필요 시) */
    cursor: pointer;       /* 버튼 느낌을 유지하기 위해 커서를 포인터로 */
}

.address-input[readonly="readonly"],
.gps-input[readonly="readonly"] {

    background-color: #EFEFEF !important;
}


.input-with-button {
    position: relative;
    border-radius: 4px; /* 모서리를 둥글게 */
    overflow: hidden; /* 내부 요소가 박스를 벗어나지 않도록 처리 */
    align-items: center; /* 수직 가운데 정렬 */
    border: 0 !important;
}

.input-with-button .input-inner-button {
    position: absolute;
    padding: 3px 9px;
    right: 2%;
    border-radius: 10px;
    color: rgb(241, 243, 247);
    pointer-events: auto;
    cursor: pointer;
    background-color: #343a40 !important;
    top: 50%;
    margin-top: -13px
}

.input-with-button .input-inner-button.white-version {
    color: #343a40 !important;
    background-color: white !important;
    border: 1px solid #343a40 !important;
}

.btn-link.address-warn {
    color: red !important;
}

.google-map-dim-aria {
    width: 100%;
    height: 400px;
    background-color: #F6F6F8;
}

.compass-image {
    height: 34px;
    width: 34px;
    margin-bottom: 10px;
    background-image: url("../images/icon/compass.png");

}

.custom-modal-dim {
    z-index: 1000;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    height: 100%;
    width: 100%;
    top: 0;
}

/*google map search place 자동완성 내역 */
.pac-container {
    z-index: 2000 !important;
}
.tooltip-inner-text {
	color: #FFFFFFE0;
}


.text-align-right{
    text-align: right;
}

.align-left{
    text-align: left !important;
    display: block;
}

.white-bg{
    background-color: #FFFFFF;
}

.timezone-badge {
  display: inline-block;
  background-color: rgba(25, 33, 61, 1);
  color: white;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}

.sidebar-heading-text {
    color: rgba(53, 53, 53, 1);
}

.sensor-type-aria:not(:has(input)) {
    min-height: 67px;
    background-color: #f5f5f5;
    opacity: 50%;
}
/* 카드 기본 */
.utility-group {
    display: flex;
}
/* 라디오 숨김: 그리드에 자리 차지하지 않도록 */
.utility-group input[type="radio"] {
    position: absolute;
    display: none;
}
.icon-card {
    /*width: 77px;*/
    width: auto;
    flex: 1 1 0;
    min-width: 77px;
    box-sizing: border-box;
    height: 67px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: #a8b0bb;
    /*background-color: rgba(242, 242, 243, 1);*/
    transition: .2s;
    padding-bottom: 10px;
    background-repeat: no-repeat;
    background-position: center 14px;
    background-size: 19px;
    border-right: 3px solid rgba(242, 242, 243, 1);
}

.icon-card:last-child {
    border-right: none;
}


/* 비활성 아이콘(회색) */
.icon-card.water {
    background-image: url("../images/sensorimg/water_disable.png");
    background-repeat: no-repeat;
    background-position: center 35%; /* Y축을 위로 올림 */
}

.icon-card.gas {
    background-image: url("../images/sensorimg/gas_disable.png");
    background-repeat: no-repeat;
    background-position: center 35%; /* Y축을 위로 올림 */
}

.icon-card.elec {
    background-image: url("../images/sensorimg/electricity_disable.png");
    background-repeat: no-repeat;
    background-position: center 35%; /* Y축을 위로 올림 */
}

/* water: 체크 안된 상태에서만 hover 적용 */
#ut-water:not(:checked) + .icon-card.water:hover {
    background-color: #E8EEFF;
}

/* gas: 체크 안된 상태에서만 hover 적용 */
#ut-gas:not(:checked) + .icon-card.gas:hover {
    background-color: #FFEBE4;
}

/* elec: 체크 안된 상태에서만 hover 적용 */
#ut-elec:not(:checked) + .icon-card.elec:hover {
    background-color: #FDF2DE;
}


/* 텍스트 */
.icon-card > span { font-size: 14px; }

/* 선택되면: 배경 파랑 + 글자 흰색 + 활성 아이콘으로 교체 */
#ut-water:checked + .icon-card.water {
    background-color: #3b82f6;
    color: #fff;
    background-image: url("../images/sensorimg/water.png");
    box-shadow: 0px 0px 4px 0px rgba(61, 83, 143, 1) inset;
}
#ut-gas:checked + .icon-card.gas {
    background-color: rgba(231, 111, 69, 1);
    color: #fff;
    background-image: url("../images/sensorimg/gas.png");
    box-shadow: 0px 0px 4px 0px rgba(144, 59, 29, 1) inset;
}
#ut-elec:checked + .icon-card.elec {
    background-color: rgba(231, 173, 55, 1);
    color: #fff;
    background-image: url("../images/sensorimg/electricity.png");
    box-shadow: 0px 0px 4px 0px rgba(151, 110, 25, 1) inset;
}

/* 키보드 포커스 표시(접근성) */
/*
.utility-group input[type="radio"]:focus + .icon-card {
    outline: 2px solid #93c5fd; outline-offset: 2px;
}*/

/* 메뉴 공통 div */
.menu-link {
    display: flex;          /* 자식들을 가로 정렬 */
    align-items: center;    /* 수직 가운데 정렬 */
    gap: 6px;               /* 아이콘/텍스트/버튼 간격 */
}

.caret-div {
    float: right;
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* 스크롤바 */
.scrollable-div {
    overflow-y: auto;
}
/* 스크롤바 전체 영역 */
.scrollable-div::-webkit-scrollbar {
    width: 8px; /* 스크롤바 두께 */
}
/* 스크롤바 트랙 (배경) */
.scrollable-div::-webkit-scrollbar-track {
    background: white;
}
/* 스크롤바 손잡이(Thumb) */
.scrollable-div::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1); /* 원하는 색상 */
    border-radius: 4px;
}

.text-teal   { color: rgba(37,167,130,1); }   /* #25A782 */
.text-coral  { color: rgba(241,93,102,1); }   /* #F15D66 */
.text-purple { color: rgba(161,98,247,1); }   /* #A162F7 */
.text-navy   { color: rgba(25,33,61,1); }     /* #19213D */
.text-amber  { color: rgba(255,193,7,1); }    /* #FFC107 */


.daterangepicker .drp-calendar,
.daterangepicker .drp-buttons,
.daterangepicker .ranges {
    z-index: 1; /* 앞에 오도록 */
}

.daterangepicker .calendar-background {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1; /* 뒤 */
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.read-spec-select-option-aria {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.read-spec-select-contents-aria{
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.read-spec-select-contents-aria-popup{
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.read-spec-label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}


.spacer{
    flex: 1 1 auto;
}

.popup-input-aria {
    align-items: center;
}

.popup-input.form-control{
    display: inline-block;
    width: 87%;
}

.device-info-header {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 12px;           /* 텍스트와 버튼 간격 */
    margin-bottom: 1rem;
    justify-content: space-between;
}