/*
======================================================================================
* 퍼블리싱 할 때 dist > custom_css 안에서만 사용
* dist > app.css는 건들지 말것
* 전체 테마 color변경을 원할 경우
    초기 순서 : yarn install > yarn run watch 후 src > _color.css 에서 컬러테마 변경
    작업 중간 수정 : yarn run watch 후 src > _color.css 에서 컬러테마 변경
======================================================================================
*/
@import 'tom-select.css';
/*
#=========================================#
        reset
#=========================================#
*/
.h_38 {
    height: 38px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s;

}
body {
    word-break:keep-all;
}
/*
#=========================================#
        로딩
#=========================================#
*/

#loadingContainer {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffffc1;
    z-index: 999;
    justify-content: center;
    align-items: center;
}
/*
#=========================================#
        버튼 추가 커스텀
#=========================================#
*/

.btn-stone {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-stone) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-stone) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline-stone {
    --tw-border-opacity: 0.4;
    border-color: rgb(var(--color-stone) / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--color-stone) / var(--tw-text-opacity));
}

.btn-outline-stone:hover:not(:disabled) {
    background-color: rgb(var(--color-stone) / 0.01);
}

.btn-green {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-green) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-green) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline-green {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-green) / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--color-green) / var(--tw-text-opacity));
}

.btn-outline-green:hover:not(:disabled) {
    background-color: rgb(var(--color-green) / 0.1);
}
/*
#=========================================#
        컨텐츠 영역 커스텀
#=========================================#
*/
.content {
    background-color: rgb(250 250 249);
}

.box {
    border: 1px solid #e8e5e5;
}
/* 체크박스 애니메이션 변경 */

[type="checkbox"] {
    background-position: 0 30px;
    --tw-border-opacity: 0.5 !important;
    border-color: rgb(var(--color-slate-300) / var(--tw-bg-opacity)) !important;
}
[type="checkbox"]:checked,
[type="radio"]:checked {
    background-position: 0 0px;
}

/* 체크박스 커스텀 */
.checkbox_btn input {
    display: none;
    margin: 0 !important;
}
.checkbox_btn input + span {
    position: relative;
    height: 34px;
    padding: 0 10px;
    min-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkbox_btn input:checked + span {
    z-index: 5;
    background: rgb(var(--color-primary) / var(--tw-bg-opacity));
    color: #fff;
    border-color: #1556dc;
}
.flex .checkbox_btn:first-child input + span {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.flex .checkbox_btn:last-child input + span {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.flex .checkbox_btn:not(:first-child) {
    margin-left: -1px;
}

.check_custom {
    display:none;
}
.check_custom + span {
    width:20px; height:20px;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius:50%;
    background-color: #fff;
}
.check_custom:checked + span {
    border:1px solid #1556dc;
    background:#fff url('../custom_img/check_icon.svg') no-repeat center center;
}

/* 라디오 커스텀 */
.radio_btn input {
    display: none;
    margin: 0 !important;
}
.radio_btn input + span {
    position: relative;
    height: 34px;
    padding: 0 10px;
    min-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* .radio_btn.dis input + span {
    background: rgb(var(--color-slate-400));
    color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
    cursor: not-allowed;
}
.radio_btn.dis ~ label span {
    color: rgb(var(--color-slate-400));
    cursor: not-allowed;
} */
.radio_btn input:checked:disabled + span,
.radio_btn input:checked + span {
    z-index: 5;
    background: rgb(var(--color-primary) / var(--tw-bg-opacity));
    color: #fff;
    border-color: #1556dc;
}
.radio_btn input:disabled + span {
    background: rgb(var(--color-slate-200) / var(--tw-bg-opacity));
    border-color: rgb(var(--color-slate-400));
    opacity:.5;
}
.flex .radio_btn:first-child input + span {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.flex .radio_btn:last-child input + span {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.flex .radio_btn:not(:first-child) {
    margin-left: -1px;
}

/* 톰셀렉트 커스텀 */
.tom_search + .ts-control .ts-input {
    padding-left: 2rem;
}
.ts-control.plugin-remove_button .item .remove {
    font-size: 12px;
}
.ts-control.multi .ts-input > div {
    background: #292929;
    color: #fff;
}

/* box 비활성 */
.box_disabled {
    background: rgb(var(--color-slate-200));
}
.box_disabled h3 {
    color: rgb(var(--color-slate-400));
}
.box_disabled .danger_btn_darea {
    display: none;
}
.box_disabled p {
    color: rgb(var(--color-slate-400));
}

.tom-select .ts-input {
    border-radius: 0.375rem;
}

.slick_select {
    width:100%; height:40px; 
    border:0 none; 
    padding:5px 2px; 
    font-size:13px; 
    background-color: transparent; 
}
.slick_datapicker:focus,
.slick_select:focus {
    outline:none;
    border:0 none;
    box-shadow:none;
}
.slick_datapicker {
    width:100%; height:40px; 
    border:0 none;
    padding-right:20px;
    font-size:13px; 
    background-color: transparent; 
}
.slick_datapicker + label {
    position:absolute; right:6px; top:0;
}

/*
#=========================================#
        사이드 메뉴 커스텀
#=========================================#
*/
.side-nav {
    border-right: 1px solid rgb(var(--color-dark) / 0.08);
}
.side-nav .side-menu {
    transition: all 0.5s;
}
.side-nav > ul > li > .side-menu.side-menu--active {
    background-color: rgb(var(--color-stone) / var(--tw-bg-opacity));
}
.side-nav .side-menu:hover {
    background-color: rgb(238 242 255);
}
.side-nav > ul > li > .side-menu.side-menu--active:hover {
    background-color: rgb(41 37 36);
}
.side-nav .side-menu .side-menu__title {
    margin-left: 0.45rem;
}
.side-nav .side-menu,
.side-nav > ul ul li a:not(.side-menu--active) {
    /* color:#8A92A6 */
    color: rgb(var(--color-slate-500));
}
.side-menu:active {
    scale: 0.9;
}
.side-nav > ul ul li a.side-menu--active .side-menu__title {
    font-weight: 600;
}

/*
#=========================================#
        사이드 메뉴 접기 펼치기 css
#=========================================#
*/
.side-nav {
    background-color: #fff;
    transition: all 0.3s;
    box-shadow: -10px 0px 15px rgba(0, 0, 0, 0.3);
}
.side-nav .logo_lg {
    display: flex;
}
.side-nav .logo_sm {
    display: none;
}
.side-nav.fold {
    width: 85px;
}
.side-nav.fold .logo_lg {
    display: none;
}
.side-nav.fold .logo_sm {
    display: flex;
}
.side-nav.fold .side-menu {
    justify-content: center;
    padding-left: 1px;
    padding-right: 1px;
}
.side-nav.fold > ul > li > .side-menu.side-menu--active {
    justify-content: center;
    padding-left: 1px;
    padding-right: 1px;
}
.side-nav.fold .side-menu__icon .ml-2 {
    margin-left: 0;
}
.side-nav.fold .side-menu__icon .ml-4 {
    margin-left: 0;
}
.side-nav.fold .side-menu__icon .ml-6 {
    margin-left: 0;
}
.side-menu__title {
    transition: all 0.1s 0.1s;
    opacity: 1;
}
.side-nav.fold .side-menu .side-menu__title {
    opacity: 0;
    position: fixed;
    left: -99px;
    top: -99px;
}

@media all and (max-width: calc(1279px)) {
    .side-nav {
        z-index: 101;
        position: absolute;
        left: 0;
        top: 0;
        width: 230px;
        height: 100%;
    }
    .side-nav.fold {
        width: 70px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .side-nav + .content .fold_btn {
        margin-left: 160px;
        transition: margin 0.3s;
    }
    .side-nav.fold + .content .fold_btn {
        margin-left: 0px;
    }
    .content {
        margin-left: 70px;
    }
    .side-nav > ul ul li a.side-menu--active,
    .side-nav .side-menu {
        padding-left: 1.25rem;
    }
    .side-nav .side-menu .side-menu__title {
        display: flex;
    }
    .side-nav .side-menu .side-menu__title .side-menu__sub-icon {
        display: block;
    }
    .side-nav > ul > li > .side-menu.side-menu--active {
        padding-left: 1.25rem;
    }
}

/*
#=========================================#
        모바일 메뉴 
#=========================================#
*/

.mobile-menu {
    margin: auto;
    background-color: rgb(255 255 255);
}

.mobile-menu .scrollable {
    background-color: rgb(255 255 255);
}
.mobile-menu .menu {
    color: black;
    padding-left: 1rem;
    padding-right: 1rem;
}
.mobile-menu .menu.menu--active {
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
    border-radius: 0.5rem;
}
.mobile-menu .menu.menu--active .menu__icon {
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.mobile-menu .menu.menu--active .menu__title {
    font-weight: 500;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mobile-menu ul li.side-nav__devider {
    width: 90%;
    height: 1px;
    background-color: rgb(var(--color-dark) / 0.08);
}
.mobile-menu ul li ul {
    margin: 0;
    background-color: rgb(var(--color-slate-50) / var(--tw-bg-opacity));
}
.mobile-menu ul li ul ul {
    background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}

@media all and (max-width: calc(767px)) {
    /* 모바일 검색 */
    .search-result {
        width: 300px;
    }
}

/*
#=========================================#
        테이블 상태
#=========================================#
*/

.ui-widget {
    width: 100% !important;
}

.table.table-sm th,
.table.table-sm td {
    padding: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.state_btn {
    display: inline-block;
    padding: 0px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.state_btn.be {
    background-color: rgb(255, 229, 84);
    color: rgba(0, 0, 0, 0.831);
    line-height: 1.5rem;
}
.state_btn.ing {
    background-color: rgb(0, 129, 26);
    color: rgb(255, 255, 255);
    line-height: 1.5rem;
}
.state_btn.stop {
    background-color: rgb(251, 206, 206);
    color: rgb(185, 28, 28);
    line-height: 1.5rem;
}
.state_btn.end {
    background-color: rgb(225, 225, 225);
    color: rgb(72, 77, 84);
    line-height: 1.5rem;
}

.delete_info::before {
    content: "";
    position: absolute;
    right: 15px;
    bottom: calc(100% - 2px);
    width: 20px;
    height: 8px;
    border-bottom: 8px solid #000;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

/* 테이블 페이지 네이션 */
.pagination .page-item.active .page-link {
    border-color: rgb(var(--color-stone));
}
/*
#=========================================#
        슬릭그리드 커스텀
#=========================================#
*/
.slick-header.ui-state-default {
    background-color: rgb(var(--color-slate-50) / var(--tw-bg-opacity));
    border: 0 none;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.slick-header-column.ui-state-default,
.slick-group-header-column.ui-state-default {
    border-color: rgb(209 213 219);
    text-align: center;
    padding: 0;
    font-weight: 500;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
}
.headerH .slick-header-column.ui-state-default,
.headerH .slick-group-header-column.ui-state-default {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 20px;
}
.headerH .slick-header-column.ui-state-default .slick-sort-indicator,
.headerH .slick-group-header-column.ui-state-default .slick-sort-indicator {
    right: 5px;
}
.slick-header-column.ui-state-default:last-of-type,
.slick-group-header-column.ui-state-default:last-of-type {
    border-right: 1px solid transparent;
}
.slick-sort-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.slick-cell {
    text-align: center;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
    line-height: 37px;
}
.slick-cell .a_tag {
    position: absolute;
    top: -1px;
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.slick-row.ui-widget-content {
    border-bottom: 1px solid #e5e7eb;
}
.slick-row.ui-widget-content:hover {
    background: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}

.slick-cell,
.slick-headerrow-column,
.slick-footerrow-column {
    padding: 0;
}

/* 슬릭그리드 체크박스 커스텀 */
.slick-cell-checkboxsel input[type="checkbox"],
.slick-column-name input[type="checkbox"] {
    cursor: pointer;
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-300) / var(--tw-border-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 1.2rem;
    height: 1.2rem;
    margin-top: -3px;
}
.slick-cell-checkboxsel input[type="checkbox"]:focus,
.slick-column-name input[type="checkbox"]:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
    --tw-ring-opacity: 0.2;
    --tw-ring-offset-width: 0px;
}
.slick-cell-checkboxsel input[type="checkbox"]:checked,
.slick-column-namel input[type="checkbox"]:checked {
    border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
    --tw-border-opacity: 0.1;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}
.slick-cell-checkboxsel input[type="checkbox"]:disabled:not(:checked),
.slick-column-namel input[type="checkbox"]:disabled:not(:checked) {
    cursor: not-allowed;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.slick-cell-checkboxsel input[type="checkbox"]:disabled:checked,
.slick-column-namel input[type="checkbox"]:disabled:checked {
    cursor: not-allowed;
    opacity: 0.7;
}
.slick-cell-checkboxsel input[type="checkbox"]:disabled:checked,
.slick-column-namel input[type="checkbox"]:disabled:checked {
    background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.no-data-container {
    padding: 20px;
}
.no-data {
    text-align: center;
}
.no_data {
    display:flex;
    width:100%;
    height:350px;
    align-items: center;
    justify-content: center;
}

/*
#=========================================#
        라이트피커 커스텀
#=========================================#
*/
.datepicker2 {
    transition: all 0.1s;
}
.datepicker2:active {
    scale: 0.9;
}

/*
#=========================================#
        탭 커스텀
#=========================================#
*/
.nav {
    width: auto;
}
.nav.nav-boxed-tabs .nav-item:first-of-type .nav-link {
    border-radius: 5px 0 0 5px;
}
.nav.nav-boxed-tabs .nav-item:last-of-type .nav-link {
    border-radius: 0 5px 5px 0;
}
.nav.nav-boxed-tabs .nav-item:not(:first-of-type) {
    margin-left: -1px;
}
.nav.nav-boxed-tabs .nav-item .nav-link {
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
}
/*
#=========================================#
        툴팁 커스텀
#=========================================#
*/
.tippy-box {
    max-width:100% !important;
    background-color: #000;
    white-space:nowrap;
    overflow-y:auto;
    max-height:300px; 
}

/*
#=========================================#
        현장이미지 등록 > 버튼 띄우기
#=========================================#
*/
.field_img_box {
    position:relative;
}
.field_img_box .btn_box {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    justify-content: center;
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    margin:auto;
    opacity:0;
    transition:all 0.5s;
}
.field_img_box:hover .btn_box {
    opacity:1;
}


/*
#=========================================#
        캔버스 위에 띄우기
#=========================================#
*/
.canvas_box {
    position:relative;
}
.sensor_info {
    z-index:10;
}
.sensor_info:hover {
    opacity:1 !important;
    transition:all 0.2s;
}

.sensor_dot {
    z-index:9;
    position:absolute;
    width:12px; height:12px;
    border-radius:50%;
    opacity:.8;
}
.sensor_dot.bg_danger {
    background-color:rgb(var(--color-danger) / var(--tw-bg-opacity))
}


.drow_btn.active {
    color:#fff !important;
    background-color:rgb(var(--color-primary) / var(--tw-bg-opacity)) !important;
}

/*
#=========================================#
        대시보드
#=========================================#
*/

.small_table .slick-cell {
    line-height:27px;
}
.small_table .slick-header-column.ui-state-default, 
.small_table .slick-group-header-column.ui-state-default{
    height:30px;
    line-height:28px;
}

.graph_box {
    position:relative;
    padding:23px 0 23px;
    margin-bottom:10px;
}
.graph_box .semicircle {
    position:relative;
    width:100%;
    margin: 0 auto;
    text-align:center;
    display: flex;
    justify-content:center;
    align-items:center;
}
.graph_box .semicircle svg {
    width:100%;
    height: 100%;
    max-width: 568px;
    width: 100%;
    display:block;
}
.graph_box .txt {
    z-index:1;
    position:absolute;
    left:20px;
    bottom:0;
    width:calc(100% - 40px);
    text-align:center;
}
.graph_box .txt span {
    padding:3px 8px;
    background-color: rgb(220 252 231);
    color: rgb(21 128 61);
    border-radius:3px;
}
.graph_box .txt span.danger {
    background-color: rgb(255 228 230);
    color: rgb(225 29 72);
}
.graph_box .txt p {
    margin-top:15px;
    font-size:18px;
    white-space:nowrap;
}
.graph_box .txt p b {
    font-size:30px; font-weight:400;
}

.dashboard_img_box {
    position:relative;
    width:1280px;
}

.dashboard_img_box .people_icon {
    position:absolute;
}
.dashboard_img_box .people_icon .circle_icon {
    display: block;
    width:25px;
    height:25px;
    line-height:25px;
    background-color: #D31717;
    border-radius:50%;
    text-align:center;
    color:#fff;
    font-size:13px;
    font-weight:700;
}
.dashboard_img_box .people_icon .trans_icon {
    display: block;
    width:25px;
    height:25px;
}
.dashboard_img_box .hover_bg {
    position:absolute; left:0; top:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity:0;
    transition:all 0.1s;
}
.dashboard_img_box .beacon_zoon {
    z-index:1;
    position:absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dashboard_img_box .beacon_zoon.beacon_area:after {
    content:'';
    position:absolute;
    left:0; top:0; right:0; bottom:0; 
    margin:auto;
    width:10px; height:10px;
    background-color:#fec92d;
    border-radius:50%;
}
.dashboard_img_box .beacon_zoon.beacon_area.danger:after {
    background-color:#D31717;
}
.dashboard_img_box .beacon_zoon.beacon_area > span {
    margin-top:50px;
}
.dashboard_img_box .beacon_zoon svg {
    position:relative; 
    z-index:2;
    width:30px; height:30px;
    stroke-width:2px;
}
.dashboard_img_box .beacon_zoon:before {
    content:'';
    position:absolute;
    left:0; top:0; width:100%;
    height:100%;
    background-color:#fec92d;
    border-radius:50%;
    opacity:.4;
}
.dashboard_img_box .beacon_zoon.doorlock:before {
    border-radius:0;
}
.dashboard_img_box .beacon_zoon.doorlock span {
    position:absolute; left:50%; top:calc(100% + 5px);
    transform:translateX(-50%)
}
.dashboard_img_box .beacon_zoon.danger:before {
    background-color: #D31717;
}
.dashboard_img_box .beacon_zoon.basic:before {
    background-color: #00a761;
}
.dashboard_img_box .beacon_zoon:hover .hover_box {
    opacity:1;
    transition: all 0.4s;
}
.dashboard_img_box .beacon_zoon .hover_box {
    z-index:10;
    position:absolute; left:0; top:-30px;  
    width:100%;
    min-width:150px;
    height:100%;
    opacity:0;
}

.dashboard_img_box .beacon_zoon .hover_box.center_box {
    top:0;
    display:flex;
    align-items: center;
    justify-content: center;
}

.dashboard_img_box .beacon_zoon .hover_box.gas_list {
    left:50%;
    top:50%;
    width:225px;
    height:200px;
    transform:translate(-50%,-50%)
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list > p {
    display:inline-flex;
    padding:5px 10px;
    border-radius: 4px;
    background: #F39E11;
    font-size:12px;
    font-weight:500;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list > p.danger {
    background:#D31132;
    color:#fff;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list ul {
    margin-top:10px;
    text-align:center
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li {
    padding:5px;
    border-radius: 16px;
    line-height:1;
    background: #18181C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li img {
    margin:0 auto;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li span{
    color: #DADADA;
    font-size: 11px;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li p{
    color:#fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.4px;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li p b{
    padding-right:3px;
    font-size: 18px;
    font-weight: 600;
    line-height:1;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li strong{
    display:block;
    width:80%;
    margin:5px auto 0;
    padding:3px;
    border-radius: 30px;
    background: #0F958A;
    font-size: 10px;
    font-weight:500;
    color:#fff;
}
.dashboard_img_box .beacon_zoon .hover_box.gas_list li strong.danger {
    background:#D31132;
    color:#fff;
}

.dashboard_img_box .line {
    border-top:1px dashed #D31717;
    transform-origin: left center;
}
.dashboard_img_box .line:before {
    content:'';
    position:absolute;
    right:-3px; top:-7px; 
    width:12px; height:12px;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:10px solid #D31717;
}

.tippy-box .tippy-content {
    padding:0;
}
.tippy-box .tippy-content > div {
    padding:10px 0;
}
.tippy-box .tippy-content p {
    padding:0 10px;
}
.tippy-box .tippy-content li.bg_danger {
    background-color: #D31717;
}

.tippy-box[data-theme="danger"] {
    background-color: #D31717;
}
.tippy-box[data-theme="danger"] .tippy-svg-arrow {
    fill:#D31717
}



/*
#=========================================#
        모달
#=========================================#
*/

.modal.show {
    z-index:9998 !important;
}
@media (max-width:640px){
    .modal .modal-dialog.modal-3xl .dashboard_img_box{
        width:600px;
    }
}
@media (min-width:640px){
    .modal .modal-dialog.modal-3xl {
        width:600px;
    }
    .modal .modal-dialog.modal-3xl .dashboard_img_box{
        width:600px;
    }
}
@media (min-width:1124px){
    .modal .modal-dialog.modal-3xl {
        width:1124px;
    }
    .modal .modal-dialog.modal-3xl .dashboard_img_box{
        width:1084px;
    }
}
@media (max-width:640px){
    .modal .modal-dialog.modal-4xl .dashboard_img_box{
        width:600px;
    }
}
@media (min-width:640px){
    .modal .modal-dialog.modal-4xl {
        width:600px;
    }
    .modal .modal-dialog.modal-4xl .dashboard_img_box{
        width:600px;
    }
}
@media (min-width:1124px){
    .modal .modal-dialog.modal-4xl {
        width:1280px;
    }
    .modal .modal-dialog.modal-4xl .dashboard_img_box{
        width:1084px;
    }
}

.flex_w100_txt {width:calc(100% - 100px)}
.flex_w40_txt {width:calc(100% - 40px)}
.flex_w20_txt {width:calc(100% - 20px)}


/* 통계 > 입출입 내역 */
.bar_chart {overflow:hidden; display:flex; gap:3px; width:100%; height:10px; border-radius:5px; }



/*
#=========================================#
        colorpicker
#=========================================#
*/

.colorpicker .clr-field {
    display:flex;
    align-items: center;
    gap:5px;
}
.colorpicker .clr-field button {
    position:absolute ;
    left:0; top:0;
    width:35px; height:100%;
    transform:none;
    border-radius:5px 0 0 5px;
}
.colorpicker .clr-field input {
    padding-left:50px;
}

/* 시스템관리 > 환경설정 */
.setting_logo_change:hover .btn_box {opacity:1; }
.setting_logo_change .btn_box {opacity:0; position:absolute; left:0%; top:0; display:flex; flex-direction: column; align-items: center; justify-content: center; gap:3px; width:100%; height:100%; }
/* .setting_logo_change:hover button {opacity:1;} */
/* .setting_logo_change button {
    opacity:0;
    position:absolute;
    left:50%; top:50%; 
    width:150px;
    transform:translate(-50%,-50%) 
} */

.watch_img {
    position:absolute; left:8%; top:24%;
    width:83%; height:51%;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#bbff2a;
    border-radius:50%;
}
.watch_img img {
    max-width:80%;
}

.phone_img {
    z-index: 5;
    position:absolute; left:1%; top:0.5%;
    width:97.8%; height:99%;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#bbff2a;
    border-radius:5px;
}
.phone_img:before {
    content:''; 
    position:absolute; left:calc(50% - 10px); top:1%;
    width:20px; height:20px;
    border-radius:50%;
    background-color:#000;
}
.phone_img img {
    max-width:80%;
}
img.phone_top {
    z-index:10;
    position:absolute; left:1%; top:0.5%; 
    width:97.8%;
}

/*
#=========================================#
        tippy-box
#=========================================#
*/
.system_alarm .tippy-box {
    max-width:550px !important;
}



/*
#=========================================#
        알림
#=========================================#
*/
.alert {z-index:10003; position:fixed; left:20px; bottom:-50%; width:450px; transition:bottom 0.4s;  }
.alert.show {bottom:20px; }

@media all and (max-width:640px){
    .alert { width:90%; }
}





/*
#=========================================#
        한화면에 담기
#=========================================#
*/
.onepageWrap .side-nav {z-index:200; position:fixed; left:-250px; top:0; height:100%; }
.onepageWrap .side-nav.open {left:0; }
.onepageWrap .fold_btn.open {margin-left:250px; }

@media all and (max-width:calc(1279px)){
    .onepageWrap .content {margin-left:0; }
    .onepageWrap .side-nav + .content .fold_btn {margin-left:0; }
    .onepageWrap .fold_btn.open {margin-left:250px !important; }
}


/* 대시보드 현장가스정보 슬라이드 */
.gas_slide_wrap {position:relative; padding:0 25px; }
.gas_slide_wrap .swiper-button-prev::after,
.gas_slide_wrap .swiper-button-next::after {font-size:25px; color:#292929 }
.gas_slide_wrap .swiper-button-prev {left:0; }
.gas_slide_wrap .swiper-button-next {right:0; }
.gas_slide_wrap .swiper-button-prev,
.gas_slide_wrap .swiper-button-next {opacity:0.5; }
.gas_slide_wrap .swiper-button-prev:hover,
.gas_slide_wrap .swiper-button-next:hover {opacity:1; }

.gas_slide_wrap.type02 {padding:0 10px; }
.gas_slide_wrap.type02 .swiper-button-prev,
.gas_slide_wrap.type02 .swiper-button-next {top:56%; }
.gas_slide_wrap.type02 .swiper-button-prev {left:-5px; }
.gas_slide_wrap.type02 .swiper-button-next {right:-5px; }


.dashboard_img_box.on .people_icon {filter:grayscale(1); opacity:.5; }
.dashboard_img_box.on .people_icon.on {z-index:50; filter:grayscale(0); opacity:1; }
.dashboard_img_box .people_icon:hover {z-index:10; }



/*
#=========================================#
        전체현장보기
#=========================================#
*/
.all_content {padding:0; }
.dashboard_all_img_box {position:relative; }
.dashboard_all_img_box > img {width:100%; }
.dashboard_all_img_box a.area {position:absolute; display:flex; align-items:center; justify-content:center; border:4px solid red; font-size:30px; font-weight:700; line-height:1.6; text-align:center; background-color:rgba(255,255,255,0.3);}
.dashboard_all_img_box .svg_area {position:absolute; cursor:pointer; }
.dashboard_all_img_box .people_all_box {position:absolute; left:7%; bottom:0; width:52%; height:21%; background-color:#fff; font-size:12px; }
.dashboard_all_img_box .people_all_box .txt_box {min-height:40px; }
.dashboard_all_img_box .people_all_box .txt_box i {margin-top:6px; }
.dashboard_all_img_box .people_all_box .graph_box {padding-top:5px; margin-bottom:0; }
.dashboard_all_img_box .people_all_box .graph_box .txt p {font-size:16px; }
.dashboard_all_img_box .people_all_box .graph_box .txt p b {font-size:26px; }
.dashboard_all_img_box .table-box {position:absolute; right:7.7%; bottom:0.5%; width:14.7%; height:26.9%; border:1px solid #000; background-color: #fff; border-radius:7px; font-size:10px; }
.dashboard_all_img_box .table-box {overflow-y:scroll; }
.dashboard_all_img_box .table-box table {width:100%; font-size:9px; }
.dashboard_all_img_box .table-box table th {padding:2px 5px; border:1px solid #ddd; background-color:#f1f1f1; line-height:1.2; }
.dashboard_all_img_box .table-box table td {padding:2px 5px; border:1px solid #ddd; font-size:10px; line-height:1.2; }

.dashboard_all_img_box.type02 .img_box img {width:86%; margin:0 auto; }
.dashboard_all_img_box.type02 .people_all_box {position:relative; left:0; top:0; margin-left:7%; margin-top:-30px; margin-bottom:30px; }
.dashboard_all_img_box.type02 .edge_img {position:absolute;left: 100%;width: 65.38%;height: calc(100% - 31px);top: 30px;}

/*
#=========================================#
        alert 모달 박스
#=========================================#
*/
.modal .alert_wrap {overflow-y:auto; max-height:245px; }
.modal .alert_box {background-color:#fff; }
.modal .alert_box > div:first-of-type {overflow-y:auto; min-height:150px; }
.modal .alert_box > div:last-of-type {flex-wrap:wrap; }