@import url(siren.css);
@import url(components.css);
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('../fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('../fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('../fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html, body {
    height: 100%;
    margin: 0;
}
/* RESET */
*{margin:0;padding:0}
ul,ol{list-style:none}
button{-webkit-border-radius:0;border-radius:0;background-color:transparent;cursor:pointer}
a,a:hover,a:active,a:focus{text-decoration:none}
em,address{font-style:normal}
table{border-collapse:collapse;border-spacing:0}
iframe,fieldset,img,button{border:0 none}
textarea{resize:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
img{vertical-align:top}
hr{display:none}

/* font rule */
body, table, input, textarea, select, button, th, td, input, select, textarea, th, td, p, dl, dt, dd, li, pre, a{
	font-family: 'Montserrat', 'Gmarket Sans', Arial, sean-serif !important;;
	font-weight:500;
    font-size: 16px;
    color: #EBE9E9;
}
a{color: #EBE9E9 !important;}
select {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="none" stroke="%23000" stroke-width="2" d="M2 5l6 6 6-6"/></svg>') no-repeat right 10px center;
}
.table > :not(caption) > * > * {color: #EBE9E9 !important;}
.table tbody tr:last-child td {border-bottom: 1px solid #7B706B !important;}
.table td, 
.table th{vertical-align: middle !important;white-space: nowrap; padding: 15px 10px;}
.table tfoot td {padding: 200px 0; text-align: center;font-size: 14px; font-weight: 300; border-bottom:1px solid #7B706B !important}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

body.main-bg {
    background-image: url('../images/bg.png');;
    background-color: #10090B;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.login-bg {
    background-image: url('../images/login_bg.png');;
    background-color: #10090B;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: rgba(255, 255, 255, 0.7) !important
}
footer {
    color: rgba(255, 255, 255, .4); 
    font-size: 11px;
    padding-bottom: 20px;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
/* button */
.btn {display: flex !important; align-items: center !important;justify-content: center}
.btn-primary {background-color: #F6921E !important;border: 0 !important;}
.btns button .material-symbols-outlined {margin-right: 5px; font-size: 20px !important;}


/* modal */
.modal .modal-header,
.modal-content {background-color: #1B1713 !important;}
.modal-header,
.modal-footer {border-color:rgba(255, 255, 255, .2) !important;}
.modal-header {justify-content: space-between}
.modal-footer {justify-content: center !important}
.modal-content {border: 1px solid rgba(246, 146, 30, .7) !important}
.modal .modal-header .btn-close { box-shadow: none !important; transform: translate(0, 0) !important; background-color: transparent !important;}
.modal-content .table {margin-top: -5px !important;}
.modal-content .table thead tr th {border-top: 0 !important;}

.modal-content .table tbody tr:last-child td {border-bottom: 0 !important;}
.modal-content .table tfoot td {padding: 100px 0; border-bottom: 0 !important; }

/* toast */
.toast {
    background-color: #1B1713 !important;
    border: 1px solid rgba(246, 146, 30, .7) !important;
}
.toast-header {
    background-color: #F6921E !important;
}
.toast-body {color:#EBE9E9;}
.toast-body .mt-2 {
    display: flex;
    justify-content: center;
}
.toast-body .mt-2 button {margin: 0 5px;}
.top-25 {
    top: 25% !important;
}
/* 파일 업로더 dropzone */
.dropzone {
    background: transparent !important;
    border: 0 !important;
    text-align: center;
}
.dropzone .dz-preview .dz-details {
    color: #fff;
    padding: 0 !important;
    top: 90px !important;
}
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 0 !important;
    font-size: 12px !important;
}
.dropzone .dz-preview {
    min-height: 90px !important;
    margin: 10px !important;
}
.dropzone .dz-preview .dz-image {
    width: 90px !important;
    height: 90px !important;
}

/* pagination */
.page-item.next .page-link::after,
.page-item.next .page-link:hover:after,
.page-item.prev .page-link:before, 
.page-item.prev .page-link:hover:before,
.page-item.previous .page-link:before {background-image: none !important;width: 0 !important;height: 0 !important;}
.page-item .page-link {color:#EBE9E9 !important; background-color: rgba(255, 255, 255, 0);border-color: rgba(255, 255, 255, 0);}
.page-item.active {background-color: transparent !important;}
.page-item.active .page-link {background-color: #F6921E !important;border-color: #F6921E}
.page-item .page-link:focus,
.page-item .page-link:hover {color:#F6921E !important;background-color: transparent;border-color: transparent;}
.page-item.active .page-link:hover {color: #fff !important;}
.page-item .material-symbols-outlined {font-size: 18px;}

/* -----------------------
Layout
------------------------- */
.content-body.sub-body .card { min-height: 650px; } /* sub-content  */
.main-menu {
    width: 260px;
    background: rgba(255,255,255, .10);
    z-index: 1031;
    position: absolute;
    display: table-cell;
    height: 100%;
    overflow: hidden;
}
.main-menu .main-menu-content .menu_logout {
    position: absolute;
    left: 30px;
    bottom:120px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5) !important;
    display: none;
}

h2.content-header-title {display: flex; align-items: center; font-size: 21px;}
h2.content-header-title i {margin-right: 5px;}

.nav-toggle {position: absolute; top: 15px; right: 15px;}

/* table contents */
.modal-content .table,
section.tables {
    color: #fff;
}
section.tables .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 55px; */
    border-bottom: 0;
}

.modal-content .table > :not(caption) > * > *,
section.tables .card-body .table > :not(caption) > * > * {border-bottom: 0}
.modal-content .table thead tr th,
section.tables .card-body .table thead tr th {border-top:1px solid #7B706B;border-bottom:1px solid #7B706B;color: #7B706B !important;padding: 22px 10px;}

.modal-content .table tbody tr th,
.modal-content .table tbody tr td,
section.tables .card-body .table tbody tr td {font-size: 13px; font-weight: 300; padding: 15px 10px;}
.modal-content .table tbody tr th {font-weight: 500;background-color: #555;}
.modal-content .table tbody tr th::before {content: "•"; font-size: 11px; padding-right: 5px; color: #fff;}

/* 탭메뉴 */
.tables .nav-pills .nav-link {padding: 6px 10px;border-radius: 5px !important;margin-bottom: 5px;}
.tables .nav-pills .nav-link.active, 
.tables .nav-pills .show > .nav-link {
    color: #F6921E;
    font-weight: 600;
    background-color: rgba(246, 146, 30, .12);
    border: 1px solid #F6921E;
}


.modal-content .table tbody tr td .normal,
.modal-content .table tbody tr td .check,
.modal-content .table tbody tr td .discharge,
section.tables .card-body .table tbody tr td .normal,
section.tables .card-body .table tbody tr td .check,
section.tables .card-body .table tbody tr td .discharge {font-weight: 500;}
.modal-content .table tbody tr td .normal,
section.tables .card-body .table tbody tr td .normal {color:#20E800;}
.modal-content .table tbody tr td .check,
section.tables .card-body .table tbody tr td .check {color: #FFB802;}
.modal-content .table tbody tr td .discharge,
section.tables .card-body .table tbody tr td .discharge {color: #EE0000;}

/* ------------------------
Login
------------------------- */
.auth-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)* 100);
    width: 100%;
}
.auth-wrapper.auth-basic {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.auth-wrapper .auth-inner {width: 100%;}
.auth-wrapper.auth-basic .auth-inner {position: relative;}
.auth-wrapper.auth-basic .auth-inner {max-width: 300px;}
.auth-wrapper.auth-basic .auth-inner .card {background: none;}
.auth-wrapper.auth-basic .auth-inner .card-body {padding: 0;}
.auth-wrapper.auth-basic .auth-inner .brand-text {text-align: center;}

.auth-wrapper.auth-basic .auth-inner .card-body .card-text {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 50px;
}

.auth-wrapper.auth-basic .auth-inner .auth-login-form input,
.auth-wrapper.auth-basic .auth-inner .auth-login-form button {
    border-radius: 20px;
    border: 0;
    padding: 10px;
}
.auth-login-form input.form-control {padding: 10px 20px !important;}

.auth-wrapper.auth-basic .auth-inner .form-check {display: flex; align-items: center;padding-left: 0;margin-top: 5px;}
.auth-wrapper.auth-basic .auth-inner .form-check .form-check-input {margin-top:0;margin-left: 0;}
.auth-wrapper.auth-basic .auth-inner .form-check .form-check-input:checked {background-color: #F6921E;}
.auth-wrapper.auth-basic .auth-inner .form-check .form-check-input:focus {box-shadow: 0;}
.auth-wrapper.auth-basic .auth-inner .form-check .form-check-label {line-height: 100%;padding-left: 5px;}
.auth-wrapper.auth-basic .auth-inner .form-check-input:not(:checked):not(:indeterminate) {background-color: rgba(255, 255, 255, .2); margin: 0;}
.auth-wrapper.auth-basic .auth-inner footer {text-align: center;}

/*-------------------------
dashboard  
---------------------------*/
h4.card-title {
    font-size: 14px !important;
    color: #F6921E !important;
    font-weight: 500 !important;
}
/* 실시간 위치별 현황 모바일 */
.live_location_mobile {display: none !important;}
.loc_tabs {display: flex;background-color:rgba(255, 255, 255, .4); border-radius: 5px; padding: 0; margin: 0;overflow: hidden; margin-bottom: 20px;}
.loc_tabs li {flex: 1 1 0; text-align: center;color: #352A29;}
.loc_tabs li.active,
.loc_tabs li:hover,
.loc_tabs li:focus{background-color: #F6921E; cursor: pointer;}

.mobi_table tbody td {border-bottom: 1px solid rgba(255, 255, 255, .2); font-weight: 300;font-size: 12px;}
.mobi_table tbody td .label {min-width: 61px;display:block;text-decoration: none;font-size: 11px; padding: 2px 8px 0;font-weight: 500;text-align: center;}
.mobi_table tbody td .label.check {border-radius: 10px;  background:#F6921E;}
.mobi_table tbody td .label.check_ok { border-radius: 10px;  background:#5A5652; pointer-events: none; }
.mobi_table tbody td .label.check::before {content: "점검하기"; color: #241F1A;}
.mobi_table tbody td .label.check_ok::before {content: "점검완료"; color: #121212;}

.mobi_table tbody td span {font-weight: 500;}
.mobi_table tbody td span.check {color: #FFB802;}
.mobi_table tbody td span.discharge {color: #EE0000;}

.tab_bar {display: none !important;}

.sub-body .card .card-header .card-title {display: none;}
/*-------------------------
dashboard 통계 
---------------------------*/
.card-statistics [class*="col-"]:not(:first-of-type) {
    border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.statistics {height: 100%;}
.avatar.normal { background-color: #20E800; }
 h4.normal {color: #20E800 !important;}
.avatar.check { background-color: #FFB802;}
h4.check {color: #FFB802 !important;}
.avatar.discharge {background-color: #EE0000;}
h4.discharge {color:#EE0000 !important}

.card-statistics .statistics-body .avatar .avatar-content {
    width: 100%;
    height: auto;
}

.today {
    margin-left: 10px;
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
}
.today h5 span {font-size: 16px;}
.today h5 small {font-size: 12px; color: #7B706B;}
.today_date strong {
    font-weight: 500;
    font-size: 20px;
    color: #EBE9E9;
}
.today_date small {
    font-weight: 200;
    font-size: 16px;
    display: block;
}
.today_temp {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.today_temp div,
.today_temp div p {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 0;
}
.today_temp div p i{
    font-size: 20px;
}
.today_temp div p:first-child {
 color: #7B706B;
 margin-right: 25px;
}
.today_date,
.today_temp {
    margin-top: 10px;
}
.today_date {line-height: 140%;}
/*-------------------------
dashboard 실시간 위치별 현황 
---------------------------*/
.card.card-company-table {
    background: rgba(255, 255, 255, 0.25);
}
.map, .flow_plan {padding-top: 40px;}
.map {display: flex;justify-content: center;}
/* .map_flow {position: relative; background: url(/assets/images/map.svg) 0 0 no-repeat; min-width: 301px;max-width: 301px; min-height: 281px; max-height: 281px;} */
.map_flow {
    position: relative;
    width:81%;
    height: 0;
    padding-top: calc(332 / 422 * 100%); /* calc(이미지 높이 ÷ 이미지 가로 × 100%) */
    background-size: cover !important;
    background-position: center  !important;
    background-repeat: no-repeat;
}
.map_flow .active,
.flow_plan .tab-content .tab-pane .active {animation: blink 1s infinite;}
.flow_dot {position:absolute; width: 7px; height: 7px; border-radius: 5px;}
.flow_dot.normal {background-color:#20E800;box-shadow: 0 0 10px 2px #20E800;}
.flow_dot.check {background-color: #FFB802;box-shadow: 0 0 10px 2px #FFB802;}
.flow_dot.discharge {background-color: #EE0000;box-shadow: 0 0 10px 2px #EE0000;}
.f1_left {left: 25%; bottom: 12%;}
.f2_left {left: 25%;  bottom: 34%;}
.f3_left {left: 25%;  bottom: 55%}
.f1_right {right: 21%; bottom: 33%;}
.f2_right {right: 21%; bottom: 56%;}
.f3_right {right: 21%; bottom: 77%;}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.map_legend {
    display: flex;
    list-style: none;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
}
.map_legend li { position: relative; margin: 5px 20px;font-weight: 500;}
.map_legend li:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 5px;
    top: 8px;
    left: -12px;
}
.map_legend li:first-child::before{
    background-color: #20E800;
    box-shadow: 0 0 10px 2px #20E800;
    color: #20E800;
}
.map_legend li:nth-child(2)::before {
    background-color: #FFB802;
    box-shadow: 0 0 10px 2px #FFB802;
    color: #FFB802;
}
.map_legend li:last-child::before {
    background-color: #EE0000;
    box-shadow: 0 0 10px 2px #EE0000;
    color: #EE0000;
}
.map_legend li:first-child { color: #20E800; }
.map_legend li:nth-child(2) { color: #FFB802; }
.map_legend li:last-child { color: #EE0000; }
/*----- 
평면도 
-------*/
/* 층별 탭 */
.flow_tab {    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.flow_tab .tab-plan {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.tab-content {
    overflow: hidden; /* tab-content를 벗어나는 요소 숨기기 */
    position: relative;
    width: 100%;
}
.tab-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
/* 층별 평면도 */
.plan_title {
    font-size: 16px;
    color: #150C08;
    font-weight: 700;
    text-align: center;
}
.plan_f1, .plan_f2, .plan_f3 {
    position: relative;
    display: block;
    width: 85%;
    height: 0;
    height: auto;
    padding-bottom: 56.25%; /* 16:9 비율 (height/width * 100) */
    background-size: contain !important; /* contain을 사용하여 이미지 비율 유지 */
    background-position: center !important;
    background-repeat: no-repeat;
}

.area_a, .area_b, .area_c {border: 1px solid #20E800; position: absolute;}

.flow_plan .normal {border-color:#20E800;}
.flow_plan .check {border-color: #FFB802;}
.flow_plan .discharge {border-color: #EE0000;}

/* 평면도1층 소화기 - 위치 */
.plan_f1 .area_a {left: 0; bottom: 40%}
.plan_f1 .area_b {right: 11%;bottom: 57%;}
.plan_f1 .area_c {right: 20%;bottom: 27%;}

/* 평면도1층 소화기- 크기 */
.plan_f1 .area_a {width: 1.6%; height: 18%;}
.plan_f1 .area_b {width: 10%; height: 2.2%;}
.plan_f1 .area_c {width: 1.5%; height: 13%;}

/* 평면도2층 소화기 - 위치 */
.plan_f2 .area_a {left: 0; bottom: 41%;}
.plan_f2 .area_b {right: 21.5%;bottom: 52%;}

/* 평면도2층 소화기- 크기 */
.plan_f2 .area_a {width: 1.5%;height: 10%;}
.plan_f2 .area_b {width: 1.5%; height: 14%}

/* 평면도3층 소화기 - 위치 */
.plan_f3 .area_a {left: 0; bottom: 41%;}
.plan_f3 .area_b {right: 20%;bottom: 29%;}
/* 평면도3층 소화기- 크기 */
.plan_f3 .area_a {width: 1.5%; height: 14%;}
.plan_f3 .area_b {width: 1.5%; height: 11%}

/*-------------------------
dashboard 확인이 필요한 장치 
---------------------------*/
.verif{ display: block; max-height: 144px; overflow-y: auto; width: 97%; }
.verif::-webkit-scrollbar { width: 8px; height:8px }
.verif::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; }
.verif::-webkit-scrollbar-thumb:hover { background-color: #555; }

.verif .table thead th {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.21);
    border-bottom: 1px solid rgba(255, 255, 255, 0.21);
}
.verif .table tbody td {
    font-size: 12px;
    color: #EBE9E9;
    border-bottom: 0 !important;
    font-weight: 300;
}
.verif .table thead th:nth-child(3),
.verif .table tbody td:nth-child(4) {
    text-align: center;
}
.verif .table tbody td .label {min-width: 61px;display:block;text-decoration: none;font-size: 11px; padding: 2px 8px 0;font-weight: 500;text-align: center;}
.verif .table tbody td .label.check {border-radius: 10px;  background:#F6921E;}
.verif .table tbody td .label.check_ok { border-radius: 10px;  background:#5A5652; pointer-events: none; }
.verif .table tbody td .label.check::before {content: "점검하기"; color: #241F1A;}
.verif .table tbody td .label.check_ok::before {content: "점검완료"; color: #121212;}

.verif .table tbody td span {font-weight: 500;}
.verif .table tbody td span.check {color: #FFB802;}
.verif .table tbody td span.discharge {color: #EE0000;}

.verif .table tfoot td {padding: 30px 0; text-align: center;font-size: 14px; font-weight: 300; border-bottom:1px solid #7B706B !important}

.verif table .location {
    color: #F6921E; margin-right: 5px;
}

/*-------------------------
이상현상 알람/발송log 
---------------------------*/

.alarm_log tbody td .label {min-width: 61px;display:block;text-decoration: none;font-size: 11px; padding: 2px 8px 0;font-weight: 500;text-align: center;}
.alarm_log tbody td .label.check {border-radius: 10px;  background:#F6921E;}
.alarm_log tbody td .label.check_ok { border-radius: 10px;  background:#5A5652; pointer-events: none; }
.alarm_log tbody td .label.check::before {content: "점검필요"; color: #241F1A;}
.alarm_log tbody td .label.check_ok::before {content: "확인완료"; color: #121212;}

.alarm_log tbody td span {font-weight: 500;}
.alarm_log tbody td span.check {color: #FFB802;}
.alarm_log tbody td span.discharge {color: #EE0000;}

.sub-body .card-header .btns .btn.active {
    background-color: #1B1713 !important; border: 2px solid #F6921E !important; color: #F6921E !important;
}
.sub-body .card-header .btns {display: flex;}
.sub-body .card-header .btns button:not(:first-child) {margin-left: 5px;}
/* .sent_log [data-bs-toggle="tooltip"] {background-color: #F6921E;} */


/* ------------------
알림 관리
------------------- */
.form-switch .form-check-input {width:3em !important}

.form-check-input:checked {
    background-color: #F6921E !important;
    border-color: #F6921E !important;
}
.form-switch .form-check-input:not(:checked) {
    background-color: #4d4743 !important;
}
.noti_manage thead tr:first-child th:nth-child(n+3),
.noti_manage thead tr:last-child th:nth-child(2n-1),
.noti_manage tbody tr td:nth-child(2n+3) { 
 border-left: 1px solid #7B706B !important;
 text-align: center !important;
}
.noti_manage tbody tr td:last-child,
.noti_manage thead tr:last-child th:last-child {
    border-left: 0 !important;
}
.noti_manage tbody tr td .form-switch {display: inline-block;}
.noti_manage thead tr:last-child th,
.noti_manage tbody tr td:nth-child(n+3) {text-align: center !important;}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFDABA'/%3e%3c/svg%3e") !important;
}


/* --------------
사용자 관리
-------------- */
.stop_using td:nth-child(n+3) {
 text-decoration: line-through;
 color: rgba(255, 255, 255, .4) !important;
}

/* --------------
검색 
-------------- */

.btn_search {
    width: 100% ;
    min-height: 31.5px;
    position: relative;
    margin: 10px 0;
}
.btn_search .search_ar button {
    line-height: 1;
    display: flex;
}

.search_ar .form-control {
    display: none;
    background-color: #716661;
    border: 0;
    width: 0;
    opacity: 0;
    padding: 0;
}
#search-btn {
    position: relative;
    top: 4px;
    left: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    align-items: center;
    z-index: 2; /* 버튼이 항상 앞에 보이도록 설정 */
    color: #7B706B ;
    }
    
#search-box {
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    z-index: 1; /* 검색 박스가 버튼 뒤에 보이도록 설정 */
    box-sizing: border-box;
}
#close-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
}
#search-box.expanded,
#search-box.expanded .form-control {
    position: absolute;
    width: 300px;
    opacity: 1;
    display: block;
    
}
#search-box.expanded #search-btn {
    position: absolute !important;
    
    left: 5px;
}
#search-box.expanded .form-control {
    visibility:visible;
    padding: 0.375rem  0.75rem 0.375rem 35px;
}   
#search-box.expanded #close-btn{
    display: block;
    top: 3px;
    right: 5px;
}
#search-box.expanded #search-btn,
#search-box.expanded #close-btn {
    color: #212529 !important;
}

/* ---------------
회원가입
--------------- */
.sign-up {background: rgba(12, 5, 0, .9) ;}
.sign-up .brand-text {text-align: center;margin-bottom: 30px;}
.sign-up .form-label {color:rgba(255, 255, 255, .7); margin-bottom: 5px;}
.sign-up .form-control {padding: 9px 10px}
.sign-up .form-control:disabled,
.modal .form-control:disabled {background-color:#fff ; opacity: .3 ;}

.sign-up .btn  {padding: 10px;}
.sign-up-text {font-size: 40px; color: #EBE9E9;}
.sign-up-text  span {font-size: 33px; font-weight: 100xxxX;}

/* 컬러 */
.color_red {color: #ff0000;}
.color_orange {color: #FFB802;}

/* 가변 */

@media (max-width: 1193px) {
    .verif {
        max-height:283px;
    }
    .logout {display: none !important;}

    .main-menu .main-menu-content .menu_logout {
        display: block !important;
    }

}
@media (max-width: 768px) {
    .content-body.sub-body .card { min-height:auto; } 
    .card-statistics .statistics-body .avatar .avatar-content {
        width: 30px !important;
        height: 30px !important;
    }
    .verif .table tbody td {
        font-size: 13px;
    }
    .verif .table tbody td .label {
        padding: 4px 8px;
    }
    footer {
        text-align: center;
        padding-bottom: 20px;
    }
    .navbar-floating .navbar-container:not(.main-menu-content) {
        padding: 0.8rem 0 !important;
    }
    .content-header-title {
        font-size: 18px;
    }
    .today {
        margin-left: 0;
        padding: 15px;
    }

    .card-statistics .statistics-body {
        padding: 0 !important;
    }
    .statistics-body .match-height {
        flex-direction: column-reverse
    }
    .today {margin-left: 0;}
    .content-header-title,
    .logout,
    .today h5 span,
    .today h5 small {display: none !important;}
    .today_date, .today_temp {margin-top: 0;}
    .today_date strong {font-size: 16px !important;line-height: 100%;}
    .today_date small {display: inline-block;line-height: 100%;}
    .today_temp {flex-direction: row}
    .today .card-text,
    .today_temp div {display: flex;align-items: flex-end;}
    .today_temp div p:first-child{margin-left:10px;margin-right:5px;} 
    .today_temp div p {line-height: 100%;  }
    .today_temp p span {display: none;} 

    .header-title-mobile {
        position: absolute;
        margin: auto !important;
        width: 100% !important;
        text-align: center;
    }
    /* 모바일에서 위치현황 안보이게 */
    .live_location_web {display: none !important; }
    .live_location_mobile {display: block !important;}
    /* 모바일 탭바 */
    .tab_bar {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #F6921E;
        z-index: 9999;
        border-radius: 0 !important;
        padding: 8px 0;
    }
    .tab_bar ul {
        display: flex;
        padding: 0;
        margin: 0;
    }
    .tab_bar ul li {flex: 1 1 0; text-align: center;line-height: 80%;}
    .tab_bar ul li a {text-decoration: none;}
    .tab_bar ul li span {display: block;font-size: 11px;}

    .nav-pills {
        margin-right: 0!important;
    }

    .btn_search {flex-wrap: wrap;}

    /* 검색 */
    .sub-body .card .card-header .card-title {
        display: block;
        width: 100%;
        padding: 5px 0;
        margin-bottom: 15px !important;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    } 
    #search-box.expanded,
    #search-box.expanded .form-control {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    /* today */
    .today {padding: 15px 0;}
    .today_date strong,
    .today_date small,
    .today_temp div p {
        font-size: 14px !important;
    }
    .today_temp div p i {font-size: 16px;}
    .today .card-text {flex-wrap: nowrap;}
    /* .today h5 small {display:block !important;position: absolute; top:10px;right: 13px;} */
    /*  */
    .verif .table tbody td {
        font-size: 13px;
    }

    .card-statistics .statistics-body {
        padding: 1rem !important;
    }
    .card-statistics [class*="col-"]:not(:first-child){
        border-left: 0;
    }
    /* .card-statistics [class*="col-"]:not(:first-of-type) {
        border-left: 0;
    } */
    .card-statistics [class*="col-"]:first-of-type {
        border-left: 0;
    }
    .statistics {display: flex;flex-direction: column-reverse}
    .statistics h4 {font-size:35px;text-align: center; margin: 0 !important; font-family: 'Montserat';}
    .logout,
    .statistics h4 small,
    .statistics .avatar,     
    .statistics .avatar-content {display: none !important;}
    .statistics > .d-flex {justify-content: center;}

    .today { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, .2);}
    .today_temp div p {
        margin: 0;
    }

    /* table responsive */
    .modal-content .table > :not(caption) > * > *,
    section.tables .card-body .table > :not(caption) > * > * {border-bottom: 0}
    .modal-content .table thead tr th,
    section.tables .card-body .table thead tr th {padding: 20px 10px !important;}

    .table tbody tr td:last-child .material-symbols-outlined {
        font-size: 20px;
    }
    .table td a{     
        line-height: 100%;
        vertical-align: middle;
    }

    .sub-body .card-header .btn_search {
        margin: 10px 0;
    }
    .sub-body .card-header .btns button {
        font-size: 11px;
    }


    /* 서브 검색바 */
    .search_ar.input-group{
        width: 100% !important;
    }
    
}
.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a i {
    margin-left: 0 !important;
}
.nav.navbar-nav a {color: rgba(255, 255, 255, 0.7) !important; text-decoration: none;}