/*
======================================================================================
* 퍼블리싱 할 때 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;
}
.top-bar{
    height:73px;
}
/*
#=========================================#
        로딩
#=========================================#
*/

#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);
}
.btn_filter{
    transition: all 0.2s;
}
.btn_filter.active{
    transform: rotate(180deg);
}
/*
#=========================================#
        컨텐츠 영역 커스텀
#=========================================#
*/
.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);
    position:relative;
}
.side-nav .side-menu {
    transition: all 0.5s;
}
.side-nav > ul > li > .side-menu.side-menu--active {
    background-color: rgb(var(--color-primary) / 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;
    }
}

/*
#=========================================#
        테이블 상태
#=========================================#
*/
.table.table-sm th{
    font-weight: 600;
}
.table.table-sm th,
.table.table-sm td {
    padding: 0.5rem;
    text-align: center;
    border-bottom-width: 1px;
}

.table.table-xs th,
.table.table-xs td {
    padding: 0.3rem;
    text-align: center;
    border-bottom-width: 1px;
}
.table.table-xs th{font-weight: 600;}

.screen_area .table.table-sm th,
.screen_area .table.table-sm td {
    padding: 0.2rem;
    text-align: center;
    border-bottom-width: 1px;
}

/* 테이블 페이지 네이션 */
.pagination .page-item.active .page-link {
    border-color: rgb(var(--color-stone));
}
/*
#=========================================#
        라이트피커 커스텀
#=========================================#
*/
.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; 
}

/*
#=========================================#
        인풋 커스텀
#=========================================#
*/
.screen_area .form-control{
    padding:0.3rem;
}

/*
#=========================================#
        현장이미지 등록 > 버튼 띄우기
#=========================================#
*/
.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;
}

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

.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:1368px;
}

.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;
}
.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:235px;
    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: 12px;
}
.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: 28px;
    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:5px;
    border-radius: 30px;
    background: #0F958A;
    font-size: 12px;
    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;
    }
}

.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; right:20px; top:0%; width:450px; transition:all 0.5s; opacity: 0;}
.alert.show {top:20px; opacity:1;}

@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; }

/*
#=========================================#
        테이블 active
#=========================================#
*/
.custom_active td:hover{
    background-color:rgba(244, 63, 93, 0.196);
}
.custom_active td.active{
    padding:0;
}
.custom_active td.active {
    box-shadow: 0 0 0 2px rgb(219 39 119) inset;
    animation-name: borderW;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes borderW{
    0%{
        box-shadow: 0 0 0 2px rgb(219 39 119) inset;
    }

    50%{
        box-shadow: 0 0 0 5px rgb(219 39 119) inset;
    }
    
    100%{
        box-shadow: 0 0 0 2px rgb(219 39 119) inset;
    }
}
.custom_active td:hover.active{
    background-color:inherit!important
}

/*
#=========================================#
        테이블 에러 애니메이션
#=========================================#
*/

.custom_table .error_active{
    animation-name: errorBox;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes errorBox{
    0%{
        background-color:rgb(225 29 72);
        transform:rotateY(0deg);

    }

    50%{
        background-color:rgb(180, 31, 17);
    }

    100%{
        background-color:rgb(225 29 72);
        transform:rotateY(180deg);
    }
}