@charset "utf-8";

#wrap {position: relative; width:100%; height:100%; overflow: hidden;}
#wrap ::-webkit-scrollbar {width: 5px; height: 5px;}
#wrap ::-webkit-scrollbar-thumb {background-color: #aaa; border-radius: 0px;}
#wrap ::-webkit-scrollbar-track {background-color: #ddd; border-radius: 0px;}

.login {display:flex; align-items:center; justify-content:center;}
.login-wrap {width:350px; height:380px; display:flex; flex-direction:column;}
.login-wrap > p {font-size:10px; color:#292929; display:block; text-align:center; margin:10px 0 30px;}
.login-form {margin:10px 0; display:flex; flex-direction:column; gap:10px;}
.login-form .txt-form {display:flex; flex-direction:column; gap:10px;}
.login-form input {height:60px; width:100%; font-size:14px; border-radius:12px; background:#F9F9F9; display:flex; align-items:center; justify-content:center; padding:0 20px; border:0; outline:0; }
.login-form input:placeholder {color:#130f26; opacity:0.3;}
.login-form a {height:60px; width:100%; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:16px; font-weight:600; color:#fff; background: linear-gradient(-225deg, #334FE9, #8d50f7);}

.map-area {position:relative; width:100%; height:100%; /*background:url('../images/content/map-bg.png') no-repeat 50% 50%; background-size:cover;*/}
.menu {position:absolute; top:0.6rem; left:0.6rem; width:2.4rem; height:2.4rem; border-radius:50%; background:linear-gradient(-225deg, #334FE9, #8d50f7); display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff; z-index:9999;}
.menu i {position:relative; width:24px; height:24px; transition: transform 0.3s ease;}
.menu .icon:before {content:''; position:absolute; width:20px; height:20px; transition: transform 0.3s ease; top:50%; left:50%; transform:translate(-50%, -50%); background:url('/images/content/menu-icon.svg') no-repeat 50% 50%; background-size:contain;}
.menu .icon-active:before {content:''; position:absolute; width:18px; height:18px; top:50%; left:50%; transform:translate(-50%, -50%); background:url('/images/content/close-icon.svg') no-repeat 50% 50%; background-size:contain;}
.main-menu {display:none; position:absolute; top:3.6rem; left:0.9rem; flex-direction:column; gap:0.2rem; z-index:9999;}
.main-menu .item {position:relative; display:block; width:1.8rem; height:1.8rem; border-radius:50%; background: linear-gradient(-225deg, #334FE9, #8d50f7); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease;}
.main-menu .item:before {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:22px; height:22px; transition: transform 0.3s ease;}
.main-menu .item:nth-child(1):before {background:url('/images/content/m-icon01.svg') no-repeat 50% 50%; background-size:contain;}
.main-menu .item:nth-child(2):before {background:url('/images/content/m-icon02.svg') no-repeat 50% 50%; background-size:contain;}
.main-menu .item:nth-child(3):before {background:url('/images/content/m-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.main-menu .item.active {opacity: 1!important;}
.main-panel .item {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-radius: 12px; opacity: 0; left:0px; transition: transform 0.3s ease; display:none; z-index:100;}
.main-panel .item:before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; background:rgba(0,0,0,0.3);}
.main-panel .item .device-section {position:absolute; width:calc(100% - 30%); top:12px; bottom:12px; left:50%; transform:translate(-50%, 0); box-shadow:0 4px 30px rgba(0,0,0,0.15); border-radius:12px; background:#f7f7f7; padding:20px;}
.main-panel .item.active {opacity: 1; display:block;}

.detail-list {display:flex; align-items:center; justify-content:space-between; margin:4px 0; padding:4px 0; border-bottom:1px solid #eaeaea;}
.detail-list .device-item > p {width:fit-content; border-radius:50%;}
.detail-list .device-item > p img {width:100%; height:100%; border:1px solid #ddd;}
.detail-list:last-child {border-bottom:0; margin-bottom:0;}
.device-wrap {position:absolute; top:12px; left:78px; bottom:12px; width:14rem; height:fit-content; background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-radius: 12px;}
.device-wrap .device-header {height:100px; border-bottom:1px solid #e5e5e5; padding:0 10px;}
.device-wrap .device-header ul {display:flex; width:100%; height: 100%; align-items: center; justify-content:space-between;}
.device-wrap .device-header ul li {flex:1; display:flex; flex-direction:column;}
.device-wrap .device-header ul li a {position:relative; display:flex; justify-content:center; align-items:center; height:48px;}
.device-wrap .device-header ul li a > p {font-size:32px; color:#3c33e9; font-weight:800; opacity:1;}
.device-wrap .device-header ul li a > span {position:absolute; bottom:5px; right:5px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:#fff;}
.device-wrap .device-header ul li a > span.warning {background:#FF922B;}
.device-wrap .device-header ul li a > span.danger {background:#FF1645;}
.device-wrap .device-header ul li p {display:block; font-size:13px; color:#000; opacity:0.5; text-align:center; font-weight:500;}
.device-wrap .close-device {position:absolute; left:50%; bottom:-20px; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow: 0 4px 30px rgba(0,0,0,0.15); transform:translate(-50%, 0%); display:flex; align-items:center; justify-content:center; font-size:18px;}

.dc-wrap {display:flex; gap:5px; align-items:center;}
.dc-wrap > p {font-size:14px; color:#aaa; font-weight:600;}
.device-content {padding:15px; position:relative;}
.dc-wrap .device-search {margin-left:10px;}
.dc-wrap .device-search,
.device-content .device-search {position:relative; width:100%; background:#f9f9f9; height:60px; border-radius:12px; display:flex;}
.dc-wrap .device-search input[type="text"],
.device-content .device-search input[type="text"] {background:transparent; border:0; outline:0; font-size:14px; color:#130f26; width:100%; padding:0 5px;}
.dc-wrap .device-search  input[type="text"]:placeholder,
.device-content .device-search input[type="text"]:placeholder {opacity:0.3;}
.dc-wrap .device-search a,
.device-content .device-search a {width:3rem; display:flex; align-items:center; justify-content:center; height:100%;}
.dc-wrap .device-search a i,
.device-content .device-search a i {width:20px; height:20px; background:url('/images/content/magnify.svg') no-repeat 50% 50%; background-size:contain;}
.device-control {display:flex; width:100%; justify-content:space-between; margin:20px 0;}
.device-control select,
.dc-wrap select {border:0; font-size:16px; opacity:0.8; font-weight:600; color:#000; padding-right:10px;}
.device-control p {width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#ddd; color:#333;font-size:14px; font-weight:500;}
.device-list {display:flex; gap:10px; flex-direction:column; max-height: 500px; overflow: auto; padding:10px 5px 20px;}
.device-item {display:flex; gap:10px; align-items: flex-start;}
.device-item > p {width:58px; height:58px; border-radius:50%; /*border:1px solid #ddd;*/ overflow:hidden; flex-shrink:0;}
.device-item > p img {position:relative; border-radius:50%; width:85%; height:85%;top:50%;left:50%; transform: translate(-50%, -50%)}
.device-item a {margin: auto 0;}
.detail-list .device-item > p {width:fit-content; border-radius:50%;}
.device-item .profile-txt {flex:1;}
.device-item .profile-txt .tit {font-size:14px; font-weight:600; color:#000; opacity:0.4; word-break:break-all; letter-spacing:-1px;}
.device-item .profile-txt .sub {font-size:12px; font-weight:400; color:#000; opacity:0.4;}
.device-item .profile-txt span.tit {color:#000; opacity:1;}
.device-item .profile-txt .battery {display:flex; gap:0.25rem; font-size:12px; font-weight:500; color:#000; opacity:0.8; align-items:center;}
.device-item .profile-txt .battery i {width:20px; height:10px;}
.device-item:nth-child(1) .profile-txt .battery i {background:url('/images/content/bt100.svg') no-repeat 50% 50%; background-size:contain;}
.device-item:nth-child(2) .profile-txt .battery i {background:url('/images/content/bt50.svg') no-repeat 50% 50%; background-size:contain;}
.device-item:nth-child(3) .profile-txt .battery i {background:url('/images/content/bt20.svg') no-repeat 50% 50%; background-size:contain;}
.device-item.active .profile-txt .tit {color:#3C33E9; opacity:1;}

.marker {position:absolute; top:calc(50% - 5rem); left:50%; translate(-50%, -50%); width:60px; height:74px; border-radius:50%; background:url('/images/content/marker-sample.svg') no-repeat 50% 50%; background-size:contain; cursor:pointer;}
.m-info {display:none; position: absolute; background: #fff; padding:0.75rem 1rem; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-radius: 12px; z-index: 10;transform: translate(-50%, 0%);}
.m-info .sub {font-size:12px; min-width:220px; max-width:480px; margin-bottom:5px; color:#aaa!important; font-weight:300!important;}
.m-info .sub span {color:#334FE9; border-right:0px!important; display:inline-block; margin-left:0.5rem; font-weight:500!important;}
.m-info .info ul {flex-wrap:nowrap; gap:1rem;}
.m-info .info ul li p {font-size:12px; font-weight:700!important;}
.m-info .main {font-size:14px; font-weight:500; margin-top:10px; line-height:1.3;}

.b-menu {position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); display: none; gap:5px;}
.b-menu a {position:relative; width:48px; height:48px; border-radius:12px; background: linear-gradient(-225deg, #334FE9, #8d50f7); opacity:0.5; transition:all 0.2s;}
.b-menu a:before {content:''; position:absolute; width:24px; height:24px; top:50%; left:50%; transform:translate(-50%, -50%);}
.b-menu a.icon01:before {background:url('/images/content/b-icon01.svg') no-repeat 50% 50%; background-size:contain;}
.b-menu a.icon02:before {background:url('/images/content/b-icon02.svg') no-repeat 50% 50%; background-size:contain;}
.b-menu a.icon03:before {background:url('/images/content/b-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.b-menu a.icon04:before {background:url('/images/content/b-icon04.svg') no-repeat 50% 50%; background-size:contain;}
.b-menu a:hover,
.b-menu a.active {opacity:1;}

.m-menu {position: absolute; bottom: 0.6rem; right: -200px;	display: none;}
.m-menu ul {display:flex; justify-content:space-between; gap:5px; align-items: flex-end;}
.m-menu ul > li {display:flex; flex-direction: column-reverse; gap:5px;}
.m-menu ul > li a {display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background: linear-gradient(-225deg, #334FE9, #8d50f7); opacity:0.5; transition:all 0.2s;}
.m-menu ul > li a:hover {opacity:1;}
.m-menu ul li.other {width:100%; height:48px; flex-direction: row; border-radius:12px; background:#fff; box-shadow:0 4px 30px rgba(0,0,0,0.15);}
.m-menu ul li.other a {width:48px; height:48px; background:transparent; display:flex; align-items:center; justify-content:center;}
.sub-menu {display:none; flex-direction:column; gap:5px;}
.sub-menu a {position: relative; display: inline-block; padding: 8px 12px; text-decoration: none; color: #333;}
.sub-menu > a {width:48px; height:48px; border-radius:12px; background: linear-gradient(-225deg, #334FE9, #8d50f7); opacity:0.5; transition:all 0.2s;}
.sub-menu > a p {position:absolute; background:#333; color:#fff; font-size:0.65rem; font-weight:500; right:3rem; padding:0.25rem 0.4rem; min-width:4rem; display:flex; align-items:center; justify-content:center; border-radius:0.5rem;}
.sub-menu > a p:after {content: "";	position: absolute; top: 50%; right: -6px; transform: translateY(-50%); width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #333;}
.main-accordion {position:absolute; top:0.6rem; right:0.6rem;}
.accordion {width: 320px; margin: 0 auto; display:flex; flex-direction:column; gap:5px;}
.accordion .item {width:100%; height:100%; box-shadow:0 4px 30px rgba(0,0,0,0.15); border-radius:24px;}
.accordion .item .content > .box {padding:20px;}
.accordion .item .title {position:relative; display: flex; align-items:center; gap:0.5rem; padding:0 20px; font-weight:500; border-radius:24px; height:52px; background:#fff; cursor:pointer; transition:background 0.2s ease;}
.accordion .item .title:after {content:'\EA13'; font-family:'remixicon'; position:absolute; font-size:1.25rem; color:#000; right:20px; top:50%; transform:translate(0, -50%); font-weight:300;}
.accordion .item .title i {width:20px; height:20px; background:#000;}
.accordion .item:nth-child(1) .title i {background:url('/images/content/a-icon01.svg') no-repeat 50% 50%; background-size:contain;}
.accordion .item:nth-child(2) .title i {background:url('/images/content/a-icon02.svg') no-repeat 50% 50%; background-size:contain;}
.accordion .item:nth-child(3) .title i {background:url('/images/content/a-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.accordion .item .content {position:relative; display:none; opacity:0; height:100%; background:#fff; border-radius:0 0 24px 24px; transition: transform 0.2s ease;}
.accordion .item.active .content {opacity: 1; display:block; overflow:hidden;}
.accordion .item.active .title {color:#3C33E9; font-weight:700; border-radius:24px 24px 0 0;  border-bottom:1px solid #E5E5E5;}
.accordion .item.active .title:after {content:'\F1AF'; font-family:'remixicon';}

.history-title {padding:20px 30px 0; display:flex; gap:0.5rem; align-items:center;}
.history-title .img {width:58px; height:58px; border-radius:50%; overflow:hidden; flex-shrink:0;}
.history-title .img img {max-width:100%;}
.history-title .tit {font-size:18px; font-weight:800; color:#000;}
.history-list {max-height: 500px; overflow:auto; padding: 30px; margin: 0; display: flex; align-items: flex-start; flex-direction:column;}
.history-list li {display: flex;}
.history-list li span {position:relative;  border-right: 1px solid #d1d1d1;}
.history-list li .year {flex-shrink: 0; position: relative; /*padding: 0.45rem 1.5rem 1rem 0;*/ padding:0; text-indent:-9999px; display:block; font-weight: 400; font-size: 14px; margin-right: 1rem; color: #888;}
.history-list li .year br {display:none;}
.history-list li .year:before {content: "";	position: absolute; right: -8px; top: 4px; width: 15px; height: 20px; background:url('/images/content/history-marker-off.svg') no-repeat 50% 50%; background-size:contain;}
.history-content p {margin: 0.3rem 0; color: #888; font-weight:400; font-size: 14px;}
.history-content .sub {font-size:12px; color:#aaa!important; font-weight:300!important;}
.history-content .sub span {color:#334FE9; border-right:0px!important; display:inline-block; margin-left:0.5rem;}
.history-list li.active .history-content p {font-weight:600; color:#000;}
.history-list li.active .year {color:#000;}
.history-list li.active .year:before {content: "";	position: absolute; right: -8px; top: 4px; width: 15px; height: 20px; background:url('/images/content/history-marker-on.svg') no-repeat 50% 50%; background-size:contain;}

.info ul {display:flex; width:100%; flex-wrap:wrap;}
.info ul li {flex:1; display:flex; align-items:center; gap:0.25rem;}
.info ul li > i {width:16px; height:16px;}
.info ul li:nth-child(1) > i {background:url('/images/content/info-icon01.svg') no-repeat 50% 50%; background-size:contain;}
.info ul li:nth-child(2) > i {background:url('/images/content/info-icon02.svg') no-repeat 50% 50%; background-size:contain;}
.info ul li:nth-child(3) > i {background:url('/images/content/info-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.info ul li p {font-weight:300!important;}

.geo-wrap {width:100%; position:relative; height:100%; display:flex; flex-wrap:wrap;}
.geo-wrap .geo-menu {flex-shrink:0; width:50px; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:10px 0; gap:5px;}
.geo-wrap .geo-menu > a {font-size:1rem; color:#666666; font-weight:500;}
.geo-wrap .geo-menu .active {color:#334FE9;}
.geo-wrap .geo-content {flex:1; border-left:1px solid #e5e5e5; height:100%; overflow:auto; max-height: 500px;}
.geo-wrap .geo-content .geofence-item {width:100%; padding:10px; display:flex; flex-wrap:wrap; border-bottom:1px solid #ddd; gap:5px 10px;}
.geo-wrap .geo-content .geofence-item:last-child {border-bottom:0;}
.geo-wrap .geo-content .geofence-item.active {box-shadow: inset 0 0 0 3px #334fe9;}
.geo-wrap .geo-content .geofence-item .input-area {height:40px; padding: 0px 5px 0 35px;}
.geo-wrap .geo-content .geofence-item .input-area .custom-input {font-size:13px;}
.geofence-item.circle .box .input-area:before {font-size:18px;left:5px;}
.geo-wrap .geo-content .geofence-item > * {flex:1;}
.geo-wrap .geo-content .geofence-item .box {min-width:70%;}
.geo-wrap .geo-content .geofence-item .link {min-width:calc(70% - 0.05rem); padding:0 0.5rem;}
.geo-wrap .geo-content .geofence-item .switch-area p {text-align:left;}
.geo-wrap .geo-content .geofence-item .custom-switch {width:60px; height:20px;}
.geo-wrap .geo-content .geofence-item .custom-switch .slider:before {width:15px; height:15px;}
.geo-wrap .geo-content .geofence-item .custom-switch input:checked + .slider:before {transform: translateX(40px);}

.geofence-item.rectangle .box .input-area:before {content:'\F3D7'; position:absolute; font-family:'remixicon'; font-size:20px; left:10px; color:#334FE9;}
.geofence-item.circle .box .input-area:before {content:'\F3C2'; position:absolute; font-family:'remixicon'; font-size:20px; left:10px; color:#334FE9;}
.geofence-item.polygon .box .input-area:before {content:'\F3D5'; position:absolute; font-family:'remixicon'; font-size:20px; left:10px; color:#334FE9;}
.geo-wrap .geo-footer {width:100%; border-top:1px solid #ddd; padding:15px;}
.geo-wrap .geo-footer .delete {height:50px; border:1px solid #eaeaea; border-radius:8px; font-size:14px; display:flex; align-items:center; justify-content:center; color:#ff7b7b; font-weight:700;}
.geo-wrap .geo-footer .delete:hover {background:#f9f9f9;}
.fw50 {flex:1 1 24%!important;}

.input-area {position:relative; background:#f9f9f9; border-radius:8px; width:100%; height:60px; display:flex; align-items:center; padding:0 10px 0 38px;}
.custom-input {border:0; background:transparent; width:100%; font-size:14px;}
.custom-input:focus {border:0; outline:0;}
.custom-input::placeholder {color:#b5b3ba;}
.switch-area {display:flex; flex-direction:column; max-width:65px;}
.switch-area p {font-size:12px; display:block; text-align:center; color:#b5b3ba;}
.switch-area p.active {color:#334FE9;}
.custom-switch {position: relative; display: inline-block; width: 80px; height: 30px;}
.custom-switch input {opacity: 0; width: 0; height: 0;}
.custom-switch .slider {position: absolute;  max-width:65px;  cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px;}
.custom-switch .slider:before {position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;}
.custom-switch input:checked + .slider {background-color: #d8d6fb;}
.custom-switch input:checked + .slider:before {transform: translateX(35px); background: linear-gradient(-225deg, #334FE9, #8d50f7);}
.range-area {display:flex; align-items:center; height:35px; gap:0.5rem; gap:10px;}
.range-area i {width:20px; height:20px; flex-shrink:0; font-size:18px; display: flex; align-items: center; justify-content: center; color:#b8b7be}
.range-area i.icon01 {background:url('/images/content/range-icon.svg') no-repeat 50% 50%; background-size:contain;}
.range-area i.icon02 {background:url('/images/content/range-icon02.svg') no-repeat 50% 50%; background-size:contain;}
.range-area i.icon03 {background:url('/images/content/range-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.custom-range {-webkit-appearance: none; width: 100%; height: 8px; background: #ddd; border-radius: 5px;}
.custom-range::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: linear-gradient(-225deg, #334FE9, #8d50f7); border-radius: 50%; cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.5);}
.custom-range::-moz-range-thumb {width: 20px; height: 20px; background: linear-gradient(-225deg, #334FE9, #8d50f7); border-radius: 50%; cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.5);}
.link {height:30px; border:1px solid #eaeaea; border-radius:4px; font-size:14px; display:flex; align-items:center; justify-content:space-between; font-weight:500; transition:all 0.2s; padding:0 20px;}
.link em {border-radius:50%; background:#ff922b; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;}
.link em.no {background:#c6c6c6; font-weight:400;}
.link:hover {background:#f9f9f9;}
.control-area {display:flex; gap:5px;}
.control-area a {width:30px; height:30px; border:1px solid #eaeaea; border-radius:4px; font-size:18px; display:flex; align-items:center; justify-content:center; font-weight:500; transition:all 0.2s;}
.control-area a.delete {color:#ff7b7b;}
.control-area a.check {color:#42e884;}
.control-area a:hover {background:#f9f9f9;}

.pop-alarm {position:absolute; max-width: 350px; border-radius:12px; padding:1rem 1.5rem; bottom:70px; left:50%; transform:translate(-50%, 0);}
.pop-alarm .tit {font-size: 16px; font-weight:600; color:#fff;}
.pop-alarm p {font-size:16px; font-weight:400; color:#fff; opacity:0.6;}
.alarm-warning {background:#FF0000; opacity:0.8;}
.alarm-basic {background:#000; opacity:0.8;}

.entitled-menu {position:absolute; top:50%; right:0; transform:translate(-370px, -50%); width:314px; border-radius:24px; background:#fff; box-shadow:0 4px 30px 0 rgba(0,0,0,0.15); padding:1.5rem;}
.entitled-menu .link {height:50px; border:1px solid #eaeaea; border-radius:8px; font-size:14px; display:flex; align-items:center; justify-content:center; color:#A9A5A5; font-weight:700;}
/*.tooltip-box {position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 10px; font-size: 12px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 9999; display: none;}*/
.chx-item {display:inline-block; vertical-align:middle; margin-right:3px;}
.chx-item input[type="checkbox"] + label {position:relative; display:inline-block; cursor: pointer; font-size:10pt; font-weight:600; vertical-align:middle; color:#888; letter-spacing:-1px;}
.chx-item input[type="checkbox"] + label span.label-txt {position:relative; display: inline-block; width: 20px; height:20px; background:#fff; vertical-align:middle; margin-top:-2px; border:1px solid #eaeaea; padding-left:0px!important; border-radius:3px;}
.chx-item input[type="checkbox"]:checked + label {vertical-align:middle; color:#c62d1e; font-weight:600;}
.chx-item input[type="checkbox"]:checked + label span.label-txt {position:relative; background:#fff; background-size:12px; vertical-align:middle; background: linear-gradient(-225deg, #334FE9, #8d50f7);}
.chx-item input[type="checkbox"]:checked + label span.label-txt:before {content:''; position:absolute; left: 50%; top:50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background:url('/images/content/checkbox.png') no-repeat 50% 50%;}
.chx-item input[type="checkbox"] {display: none;}
.chx-item.other input[type="checkbox"]:checked + label span.label-txt {position:relative; background:#fff; background-size:12px; vertical-align:middle;}
.chx-item.other input[type="checkbox"]:checked + label span.label-txt:before {content:''; position:absolute; left: 50%; top:50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background:url('/images/content/checkbox_on.png') no-repeat 50% 50%;}

.tab-wrap {width:100%; height:100%; position:relative; display:flex; flex-direction:column; gap:10px;}
.tab-wrap .tab-header {display:flex; align-items:center; gap:15px; height:40px;}
.tab-wrap .tab-header a {font-size:18px; color:#000; opacity:0.3;}
.tab-wrap .tab-header a.active {color:#3C33E9; opacity:1;}
.tab-wrap .tab-header img {margin-right:20px;}
.tab-wrap .tab-content {height:calc(100% - 40px); border-radius:12px; border:1px solid #eaeaea; width:100%; overflow:hidden; background:#fff;}
.tab-wrap .modal-close-btn {position:absolute; right:0; top:0; cursor:pointer;}
.tab-item { display: none; height:100%; }
.tab-item.active { display: block; }
.tab-header a.active { font-weight: bold; }
.tab-section {position:relative; width:100%; height:100%;}
.tab-section:before {content:''; position:absolute; width:1px; height:100%; background:#e4e4e4; top:0; left:50%; transform:translate(-50%, 0);}
.tab-section.half {display:flex; height:100%;}
.tab-section.half .list {flex:1; max-width:50%; width:100%;}
.tab-section.half .list > .tbl-container {padding:0;}

div[class*='tbl_st'] {position: relative; width: 100%; background: #fff; height:100%;}
div[class*='tbl_st'] > table {position: relative; margin-left: -1px; width: 100%; text-align: center; -webkit-overflow-scrolling: touch; word-break: keep-all; }
div[class*='tbl_st'] > table th {padding: 0 0.6rem; font-size:16px; height:50px; vertical-align: middle; font-weight: 600; color: #333; background: #F7F8F9; border-bottom: 1px solid #eaeaea;}
div[class*='tbl_st'] > table td {padding: 0 0.6rem; height:50px; vertical-align: middle; color: #333; border-bottom: 1px solid #eaeaea; text-overflow:ellipsis; /*overflow:hidden;*/ white-space:nowrap;  max-width:10rem;}
div[class*='tbl_st'] > table td a {margin:0 4px;}
div[class*='stripe'] > table td {font-size:14px; overflow:hidden;}
div[class*='stripe'] > table td.al {text-align:left;}
div[class*='stripe'] > table td span.date {color:#888; font-size:10px;}
div[class*='stripe'] > table td a {font-weight:600; transition:all 0.2s;}
div[class*='stripe'] > table td a:hover {color:#3C33E9;}
div[class*='stripe'] > table tr:hover td {background:#f9f9f9; transition:all 0.2s;}
.tab-nodate {width:100%; height:100%; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; color:#aaa;}
.tbl-container {padding:20px; height:100%;}
.tbl-container .tbl-title {display:flex; flex-direction:column;}
.tbl-container .tbl-title > h4 {font-size:20px; color:#3C33E9; font-weight:600; padding:10px 0px;}
.tbl-container .tbl-title p.date {font-size:12px; color:#888; display:flex; align-items:center; gap:10px;}
.tbl-container .tbl-title p.date span {max-width:100px;}
.tbl-container .tbl-content {height:100%; overflow:auto; padding:20px;}
.tbl-container .tbl-content img {max-width:100%; margin:1rem 0;}
.tbl-container .tbl-content p {font-size:13px; color:#000; margin-top:0.5rem; word-break:break-all;}
.tbl-container .tbl-content .p-section {position:relative; padding:15px 0;}
.tbl-container .tbl-content .p-section:after {content:''; position:absolute; bottom:0rem; width:100%; height:1px; background:#ddd; left:0;}
.tbl-container .tbl-content .p-section .tbl-title > .date {margin-bottom:0.52025-06-282025-06-282025-06-282025-06-282025-06-28rem;}

div[class*='type1'] p {display:flex; align-items:center; justify-content:center; gap:5px;}
div[class*='type1'] i {width:16px; height:16px; display:flex;}
div[class*='type1'] i.icon1 {background:url('/images/content/info-icon01.svg') no-repeat 50% 50%; background-size:contain;}
div[class*='type1'] i.icon2 {background:url('/images/content/info-icon02.svg') no-repeat 50% 50%; background-size:contain;}
div[class*='type1'] i.icon3 {background:url('/images/content/info-icon03.svg') no-repeat 50% 50%; background-size:contain;}
.type1 .profile-info {display:flex; width:100%; align-items:center; justify-content:space-between;}
.type1 .profile-info > .area {display:flex; gap:5px; align-items:center;}
.type1 .profile-info > .area a {font-size:14px; color:#888; font-weight:700;}
.type1 .profile-info img {max-width:28px;}
.type1 .p-area {display:flex; gap:0.5rem;}
.type1 .p-area .sub {margin-left:auto; font-size:12px; color:#334fe9;}
.type1 .p-area .img img {max-width:28px;}
.type1 .p-area .tit {font-size:16px; font-weight:600;}
.type1 .p-area .import { color:#334FE9;}
.fl-ac {justify-content:center;}
.tbl_sch {display:flex; justify-content:space-between; width:100%; padding:0 10px; height:80px; align-items:center;}
.tbl_footer {border-top:1px solid #eaeaea; display:flex; justify-content:space-between; width:100%; padding:0 20px; height:80px; align-items:center;}

.set-tbl-sch {display:flex; justify-content:space-between; width:100%; padding:5px 10px; align-items:center; margin-bottom:0.25rem;}
.set-tbl-sch .set-tit {display:flex; align-items:center; gap:0.25rem;}
.set-tbl-sch .set-tit p {font-size:14px; color:#aaa; font-weight:600;}
.set-tbl-sch .set-tit select {border:0; font-size:16px; opacity:0.8; font-weight:600; color:#000; padding-right:10px;}
.set-tbl-sch .set-tit .btn-delete {height:45px; border-radius:12px;}

.device-search {position:relative; width:100%; background:#f9f9f9; border-radius:12px; display:flex; padding:5px 0 5px 15px; height:45px;}
.device-search input[type="text"] {background:transparent; height:100%; border:0; outline:0; font-size:14px; color:#130f26; width:100%; padding:0 20px 0 0;}
/*.device-search:after {content:''; right:10px; top:50%; transform:translate(0px, -50%); position:absolute; width:20px; height:20px; background:url('/images/content/magnify.svg') no-repeat 50% 50%; background-size:contain;}*/
.tab-section.half .list {overflow:auto; padding:10px 0;}
div[class*='tbl_st'] {height:auto;}
.dt-paging {margin-top:1rem;}

/*
.device-content {padding:15px; position:relative;}
.dc-wrap .device-search {margin-left:10px;}
.dc-wrap .device-search,
.device-content .device-search
.dc-wrap .device-search input[type="text"],
.device-content .device-search input[type="text"] 
.dc-wrap .device-search  input[type="text"]:placeholder,
.device-content .device-search input[type="text"]:placeholder {opacity:0.3;}
.dc-wrap .device-search a,
.device-content .device-search a {width:3rem; display:flex; align-items:center; justify-content:center; height:100%;}
.dc-wrap .device-search a i,
.device-content .device-search a i 
.device-control {display:flex; width:100%; justify-content:space-between; margin:20px 0;}
.device-control select,

*/


.set-detail { display: none;  max-height:300px; overflow:auto; position: absolute; top: 100px; background:#fff; padding:20px; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-radius: 12px;}
.set-detail .detail-list .detail-item {display:flex; align-items:center;}
.set-detail .detail-list .link-btn {text-indent:-9999px; display:block; width:18px; height:18px; background:url('/images/content/link-off.png') no-repeat 50% 50%;}
.set-detail .detail-list .link-btn.active {background:url('/images/content/link-on.png') no-repeat 50% 50%;}
.layer-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(137,133,150,0.6); z-index: 1000;}
.btn-setting {display:flex; align-items:center;}

.popup-content {padding:20px 0;}
.popup-content .profile-img {margin:0 auto; text-align:center;}
.popup-content .profile-txt {font-size:18px; font-weight:600; text-align:center;}
.layer-popup {min-width:350px; box-shadow: 0 4px 30px rgba(0,0,0,0.15); border-radius: 12px;}
.layer-popup .button-area {display:flex; width:100%; gap:10px; margin:0 auto; align-items: center; justify-content: center; padding: 20px 0; border-top: 1px solid #eaeaea;}
.layer-popup .button-area a,
.layer-popup .button-area button {flex:1; max-width:120px; cursor:pointer; font-size:14px; font-weight:600; height:60px; border-radius:12px; border:1px solid #eaeaea; display:flex; align-items:center; justify-content:center;}
.layer-popup .button-area a.cancel {color:#FF7B7B;}
.layer-popup .button-area .primary-button {color:#3C33E9;}
.layer-popup .button-area .primary-button:hover {background: linear-gradient(-225deg, #334FE9, #8d50f7); color:#fff;}

#mapCtlNodes1 {left:auto; top: calc(50% - 4.75rem); right:0.6rem; transform: translate(0%, -50%); min-width:320px;}
.type2 .popup-content {padding:0;}
.type2 .popup-content .set-title {height:auto; padding:15px 20px; justify-content:flex-start; border-bottom:1px solid #ddd;}
.type2 .popup-content h4 {margin:0; font-size:0.85rem;}
.type2 .popup-content .map {width:100%; max-height:100%; height:10rem; background:#f1f1f1;}
.type2 .popup-content .info {padding:10px 0 0;}
.type2 .popup-content .info .point {font-size:0.65rem; display:block; font-weight:500; color:#aaa;}
.type2 .popup-content .info .address {font-size:0.65rem; display:block; font-weight:500; color:#333; line-height: 1.2; margin-top:0.5rem;}
.type2 .popup-content .info .i-copy {margin-top:0.5rem; display:flex; align-items:center; border-radius:10px; border:1px solid #ddd;}
.type2 .popup-content .info .i-copy p {word-break: break-all; line-height:1.2; width:calc(100% - 3rem); border-right:1px solid #ddd; display:block; font-size:0.65rem; padding:0.25rem 0.5rem;}
.type2 .popup-content .info .i-copy a {width:3rem; display:flex; align-items:center; justify-content:center; font-size:0.65rem; height:100%; color:#FF0055; font-weight:500;}

.type2 .button-area {width: 100%; border-top: 1px solid #ddd; padding: 15px;}
.type2 .button-area a {height: 50px; border: 1px solid #eaeaea; border-radius: 8px; font-size: 14px; display: flex; align-items: center; justify-content: center; color: #ff7b7b; font-weight: 700;}
.type2 .button-area .btn-primary {color:#fff;}



.set-title {height:80px; width:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.set-title h3 {font-size:20px; font-weight:700; color:#000;}
.set-title .close {position:absolute; top:16px; right:20px; cursor:pointer;}
.set-title .close i {font-size:20px;}
.set-header {border-top: 1px solid #eaeaea; padding:20px 30px;}
.set-profile {width:100%; display:flex; gap:20px; justify-content:center;}
.set-profile .img { position:relative;flex-shrink:0; width:158px; height:158px;}
.set-profile .img p {width:100%; height:100%; border-radius:50%; overflow:hidden;}
.set-profile .img p img {width:100%;}
.set-profile .img .count {position:absolute; bottom:0; right:0; width:50px; height:50px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.set-profile .info {flex:1; display:flex; flex-direction:column; justify-content:center;}
.set-profile .info .form {position:relative; display:flex; gap:10px; margin-bottom:10px;}
.set-profile .info .form input[type="text"] {width:100%; background:#f9f9f9; height:60px; border-radius:12px; display:flex; border:0; outline:0; font-size:14px; color:#130f26; width:100%; padding:0 20px;}
.set-profile .info .info-link {display:flex; gap:5px;}
.set-profile .info .info-link .menu-radio {display: flex; gap: 10px;}
.set-profile .info .info-link .menu-item input[type="radio"] {display: none;}
.set-profile .info .info-link .menu-item label {position:relative; width:48px; height:48px; background:#F9F9F9; display:flex; align-items:center; text-indent:-9999px; border-radius:8px; cursor:pointer;}
.set-profile .info .info-link .menu-item input[type="radio"]:checked + label {background: linear-gradient(-225deg, #334FE9, #8d50f7); color: #fff;}

.set-profile .info .info-link .menu-item label:before {content:''; position:absolute; width:24px; height:24px; left:50%; top:50%; transform:translate(-50%, -50%);}
.set-profile .info .info-link .menu-item:nth-child(1) input[type="radio"] + label:before {background:url('/images/content/mio01-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(1) input[type="radio"]:checked + label:before {background:url('/images/content/mio01-on.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(2) input[type="radio"] + label:before {background:url('/images/content/mio02-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(2) input[type="radio"]:checked + label:before {background:url('/images/content/mio02-on.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(3) input[type="radio"] + label:before {background:url('/images/content/mio03-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(3) input[type="radio"]:checked + label:before {background:url('/images/content/mio03-on.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(4) input[type="radio"] + label:before {background:url('/images/content/mio04-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(4) input[type="radio"]:checked + label:before {background:url('/images/content/mio04-on.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(5) input[type="radio"] + label:before {background:url('/images/content/mio05-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(5) input[type="radio"]:checked + label:before {background:url('/images/content/mio05-on.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(6) input[type="radio"] + label:before {background:url('/images/content/mio06-off.png') no-repeat 50% 50%; background-size:contain;}
.set-profile .info .info-link .menu-item:nth-child(6) input[type="radio"]:checked + label:before {background:url('/images/content/mio06-on.png') no-repeat 50% 50%; background-size:contain;}
.set-content {border-top: 1px solid #eaeaea; padding:20px 20px 0 20px ; display:flex; gap:20px;}
.set-content > .set-container {flex:1; padding:0;}

.set-container {display:flex; flex-direction:column; gap:10px; padding:20px 20px 0 20px;}
.set-container .set-section {display:flex; height:60px; align-items:center; border-radius:12px; background:#f9f9f9; padding:0 20px;}
.set-container .set-section > p {width:5rem; font-size:14px; font-weight:500; color:#aaa;}
.set-container .set-section > input[type="text"] {width:calc(100% - 5rem); color:#334FE9; font-weight:700; font-size:17px; background:transparent; border:0;}
.set-container .set-section .logout {margin-left:auto; padding:0.25rem 0.5rem; border-radius:1rem; background:#334FE9; color:#fff; font-size:0.65rem;}
.set-container .set-box {border:1px solid #ddd; border-radius:12px;}
.set-box-header {display:flex; justify-content:space-between; align-items:center; padding:0 20px; height:50px; border-bottom:1px solid #ddd;}
.set-box-header h3 {font-size:17px; color:#334fe9; font-weight:600;}
.set-box-header .custom-switch {height:20px; width:56px;}
.set-box-header .custom-switch .slider {max-width: 56px;}
.set-box-header .custom-switch .slider:before {width:17px; height:17px; bottom:2px; left:2px;}
.set-box-content {padding:20px; display:flex; gap:10px; flex-direction:column;}
.set-box-content input[type="text"] {width:100%!important; color:#334FE9; font-weight:400!important; font-size:15px!important; background:transparent; border:0;}
.set-box-content input[type="text"]::placeholder {font-size:15px; color:#aaa; font-weight:400;}
.set-box-content > p {font-size:12px; color:#130f26; word-break: break-all;}

#profileSetting .set-profile {justify-content:center;}
#profileSetting .set-profile .img {margin:0 auto;}

.p-count > p {font-size:14px; color:#000; opacity:0.4;}
.p-page {display:flex; justify-content:center;}
.p-page .p-page-link { font-size:16px; font-weight:500; color:#333; margin:0 5px; padding:0 5px; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.p-page .p-page-link.active,
.p-page .p-page-link:hover {color:#fff; background: linear-gradient(-225deg, #334FE9, #8d50f7);}
.p-page .prev {width:40px; background:url('/images/content/page-arrow-left.png') no-repeat 50% 50%; text-indent:-9999px; position:relative; top:-2px;}
.p-page .next {width:40px; background:url('/images/content/page-arrow-right.png') no-repeat 50% 50%; text-indent:-9999px; position:relative; top:-2px;}
.p-page .p-page-link.prev:hover {background:#fff url('/images/content/page-arrow-left.png') no-repeat 50% 50%!important;}
.p-page .p-page-link.next:hover {background:#fff url('/images/content/page-arrow-right.png') no-repeat 50% 50%!important;}


.sub-add {position: relative; display: inline-block; cursor: pointer;}
.sub-tooltips {position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; box-shadow:0 0 15px rgba(0,0,0,0.15); color: white; padding: 10px 20px; border-radius: 10px; white-space: nowrap; font-size: 12px; opacity: 0; color:#000; font-weight:600; pointer-events: none; transition: opacity 0.2s ease;}
.sub:hover .sub-tooltips {opacity: 1; pointer-events: auto;}


.btn-delete {height: 60px; border: 1px solid #eaeaea; border-radius: 8px; font-size: 14px; display: flex; min-width: fit-content; align-items: center; justify-content: center; color: #ff7b7b; font-weight: 700;}
.btn-add {height: 60px; border: 1px solid #eaeaea; border-radius: 8px; font-size: 14px; display: flex; min-width: fit-content; align-items: center; justify-content: center; color: #3C33E9; font-weight: 700;}
.btn-delete:hover {border: 1px solid #eaeaea; color: #ff7b7b;}
.btn-add:hover {border: 1px solid #eaeaea; color: #3C33E9;}
.btn-primary {font-size:14px; font-weight:600; color:#3C33E9;}
.btn-warning {font-size:14px; font-weight:600; color:#FF7B7B;}
.modal-footer {justify-content:center;}
.modal-footer button {height:40px; font-size:15px; color:#fff; min-width:100px;}

span[class*='badge-'] {display:flex; width:100%; align-items:center; justify-content:center; border-radius:4px; height:26px; font-size:10px; font-weight:600; color:#000;}
.badge-basic {background:#D8D8D8;}
.badge-progress {background:#33DEE9;}
.badge-complete {background:#42E884;}
.badge-hold {background:#FF7B7B;}

.add-container {height:100%;}
.write-wrap {width:100%; height:100%; position:relative;}
.write-wrap .write-content {width:100%; height:calc(100% - 80px); padding:20px; display:flex; flex-direction:column; gap:10px;}
.write-wrap .write-content input[type="text"] {background:#f9f9f9; border-radius:12px; height:60px; border:0; padding:0 20px;}
.write-wrap .write-content input[type="text"]::placeholder {color:#aaa;}
.write-wrap .write-content textarea {background:#f9f9f9; color:#888; border-radius:12px; height:calc(100% - 60px); border:0; padding:20px;}
.write-wrap .write-footer {width:100%; height:80px; border-top:1px solid #eaeaea; padding:0 20px; display:flex; align-items:center; justify-content:flex-end; gap:10px;}
.write-wrap .write-footer > a {min-width:100px;}

.popup-content h4 {font-weight:700; font-size:20px; margin-bottom:1rem;}
.file-area {padding: 0 20px; }
.file-area #file-list {margin-top:1rem;}
.file-area #file-list li {position:relative; font-size:15px; color:#777; font-weight:500; display:flex; align-items:center; gap:10px;}
.file-area #file-list img {border: 1px solid #ddd; border-radius: 4px;}
#drop-area {width: 100%; height: 100px; border: 1px dashed #999; border-radius: 10px; text-align: center; display:flex; align-items:center; justify-content:center; font-size: 16px; color: #666; margin: 0px auto;}
#drop-area.hover {border-color: #333; background-color: #f0f0f0;}

.user-type {display: flex; gap: 10px; }
.user-type .btn-type {height: 40px; border:1px solid #eee; color:#aaa; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 400;}
.user-type .btn-type.active {background: linear-gradient(-225deg, #334FE9, #8d50f7); color: #fff; font-weight:600; font-size: 16px;}
.auth-wrap {display: flex; gap: 10px;}
.btn-auth-send {width:100%; background:#333; color:#fff; border-radius: 12px; max-width:120px; font-weight:600; font-size: 14px;}


.battery {display:flex; gap:0.25rem; font-size:12px; font-weight:500; color:#000; opacity:0.8; align-items:center;}
.battery[class^="bt"] {position:relative; padding-left:25px;}
.battery[class^="bt"]:before {content:''; position:absolute; width:20px; height:10px; left:0; top:50%; transform:translate(0, -50%);}
.battery.bt100:before {background:url('/images/content/bt100.svg') no-repeat 50% 50%; background-size:contain;}
.battery.bt50:before {background:url('/images/content/bt50.svg') no-repeat 50% 50%; background-size:contain;}
.battery.bt20:before {background:url('/images/content/bt20.svg') no-repeat 50% 50%; background-size:contain;}

.device-item.active > p {position:relative; z-index:1; height:58px;}
.device-item.active > p:after {content: ''; position: absolute; width: 58px; height: 58px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #1d2088; z-index: 0; opacity: 0.1; -webkit-animation: circleSpread 1s infinite linear; animation: circleSpread 1s infinite linear; transform-origin: top left;}
.device-item.active > p img {z-index:2; position:relative;}

.set-box-content .box [class^="sound"] {position:relative; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-indent:-9999px;}
.set-box-content .box [class^="sound"]:before {content:''; position:absolute; width:35px; height:35px; left:50%; top:50%; transform:translate(-50%, -50%);}
.set-box-content .box a.sound1:before {background-color: #aaa; -webkit-mask-image: url('/images/content/sound1.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound1.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box a.sound1.active:before {background-color: #fff; -webkit-mask-image: url('/images/content/sound1.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound1.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box a.sound2:before {background-color: #aaa; -webkit-mask-image: url('/images/content/sound2.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound2.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box a.sound2.active:before {background-color: #fff; -webkit-mask-image: url('/images/content/sound2.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound2.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box a.sound3:before {background-color: #aaa; -webkit-mask-image: url('/images/content/sound3.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound3.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box a.sound3.active:before {background-color: #fff; -webkit-mask-image: url('/images/content/sound3.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url('/images/content/sound3.svg'); mask-repeat: no-repeat; mask-size: contain;}
.set-box-content .box.sound-wrap {display:flex; align-items:cneter; justify-content:center;}
.set-box-content .box.sound-txt p {font-size:16px; color:#777; line-height:22px; font-weight:500; margin:20px 0; text-align:center;}
.set-box-content .box.sound-txt a.stop {display:flex; width:100%; align-items:center; color:#FF7B7B; font-weight:600; background:#fff!important; border:1px solid #ddd; justify-content:center; height:60px; border-radius:12px;}
.set-box-content .box.sound-txt a.stop.active {background:#ff7b7b!important; color:#fff;}
.set-box-content .box a.sound1,
.set-box-content .box a.sound2,
.set-box-content .box a.sound3,
.set-box-content .box a.stop { margin: 5px; background: #eee; text-decoration: none; transition: transform 0.2s ease, background 0.3s;}
.set-box-content .box a.sound1.active,
.set-box-content .box a.sound2.active,
.set-box-content .box a.sound3.active,
.set-box-content .box a.stop.active {background: linear-gradient(-225deg, #334FE9, #8d50f7); color: #fff;}
.set-box-content .box a.sound1.animate,
.set-box-content .box a.sound2.animate,
.set-box-content .box a.sound3.animate {transform: scale(1.2);}

.dt-container {height:100%; display:flex; flex-direction:column;}
.dt-layout-row:nth-child(1) {display:flex; justify-content:space-between; width:100%; padding:10px 20px; align-items:center;}
.dt-layout-row:nth-child(2) {align-items:flex-start!important; height:calc(100% - 140px); position: relative; width: 100%; overflow:auto;}
.dt-layout-row:nth-child(3) {border-top:1px solid #eaeaea; display:flex; justify-content:space-between; width:100%; padding:0 20px; height:80px; align-items:center;}

table.dataTable th {background:#f7f8f9; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; border-left:0; border-right:0; font-size:14px; font-weight:700!important; opacity:0.8; color:#000;}
table.dataTable tr:nth-child(odd) td {background:#fff;} 
table.dataTable tr td a {color:#000; font-weight:600;}
table.dataTable tr td {border-left:0; border-right:0; color:#888;}
table.dataTable tr td,
table.dataTable tr td a {font-size:13px;}
table.dataTable > tbody > tr > th, 
table.dataTable > tbody > tr > td {padding:10px 10px!important;}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1, 
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(even) > .sorting_1,
table.dataTable.display > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody tr > .sorting_1,
table.dataTable > tbody tr:hover td {box-shadow:none!important; background:none!important;}
table.dataTable > tbody > tr > td a:hover {color:#3C33E9;}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {border-bottom:1px solid rgba(0,0,0,0.15)!important;}
.dt-search label {display:none;}
div.dt-container .dt-search input[type="search"] {background:#f9f9f9 url(/images/content/magnify.svg) no-repeat 95% 50%; height:40px; box-sizing:border-box; padding:0 10px; border-radius:12px; border:0; display:flex; align-items:center;}

.dt-info {font-size:14px; color:#000; opacity:0.4;}
.dt-paging nav {display:flex; justify-content:center;}
.dt-paging nav button { font-size:16px; font-weight:500; color:#333; margin:0 5px; padding:0 5px; width:36px; height:36px; border-radius:8px; display:flex!important; align-items:center; justify-content:center;}
.dt-paging nav button.active,
.dt-paging nav button:hover,
.dt-paging nav button[aria-current="page"] {color:#fff; background: linear-gradient(-225deg, #334FE9, #8d50f7)!important; opacity:1.0!important;}

.dt-paging nav button.last,
.dt-paging nav button.next,
.dt-paging nav button.first,
.dt-paging nav button.previous {font-size:22px;}

table.dataTable.stripe > tbody > tr:nth-child(odd) > *, 
table.dataTable.display > tbody > tr:nth-child(odd) > * {line-height:1;}
div.dt-container div.dt-layout-table > div {border-right:1px solid #eaeaea;}
.dt-column-header span {font-size: 12px; font-weight: 600;}

.reply-wrap {width:100%; position:relative; margin:0.5rem 0 0;}
.reply-wrap .reply-button {display:flex; align-items:center; justify-content:flex-end; gap:0.25rem;}
.reply-wrap .reply-button a {border:1px solid #3c33e9; color: #3C33E9; border-radius: 12px; font-size:12px; font-weight:600; height:30px; display:flex; align-items:center; padding:0 15px; transition:all 0.2s;}
.reply-wrap .reply-button a:hover {background:#3c33e9; color:#fff;}
.reply-wrap .reply-button a.delete {border:1px solid #FF1645; color: #FF1645; border-radius: 12px; font-size:12px; font-weight:600; height:30px; display:flex; align-items:center; padding:0 15px; transition:all 0.2s;}
.reply-wrap .reply-button a.delete:hover {background:#FF1645; color:#fff;}
.reply-area {width:100%; margin:0.5rem 0;}
.reply-area textarea {width:100%; height:100px; border:1px solid #ddd;}


@keyframes circleSpread {
	0% {transform: scale(0.8) translate(-50%, -50%); opacity: 0;}
	50% {opacity: .75;}
	100% {transform: scale(1.2) translate(-50%, -50%); opacity: 0;}
}


/* toast �߰� */
#toast-container.toast-top-center > div, 
#toast-container.toast-bottom-center > div {width:350px; border-radius: 12px;}
.toast-title,
.toast-message {font-size: 14px;  letter-spacing: 0;}

/* ��ȳ� */
#myTrackerDirection.layer-popup {min-width:320px;}
#myTrackerDirection.layer-popup .popup-content {padding:0 0;}
#myTrackerDirection.layer-popup .popup-content .set-title {height:auto; padding:20px;}
#myTrackerDirection.layer-popup .popup-content h4 {margin-bottom:0; font-size:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;}
#myTrackerDirection.layer-popup .popup-content h4 #total {display:none;}
#myTrackerDirection.layer-popup .popup-content .close-layer {font-size:14px; width:2rem; height:2rem; border-radius:50%; border:1px solid #ddd; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background:#f4f4f4;}
#myTrackerDirection.layer-popup #panel {overflow:auto; padding:20px;}
#myTrackerDirection.layer-popup #panel select {border:0; font-size:16px; opacity:0.8; font-weight:600; color:#000; padding:5px 10px 5px 5px; border:1px solid #ddd; border-radius:10px;}



/* ���� ���� css */
#app-wrap { max-width: 480px; position: relative; width: 100%; height: 100%; overflow: hidden; margin: 0 auto; border-left: 1px solid #e4e4e4; border-right: 1px solid #e4e4e4; }
.header { height:4rem; padding: 1rem; display:flex; align-items:center; justify-content: center; text-align: center; position: sticky; top: 0; background: #fff; z-index: 10; }
.header h3 { display: flex; align-items:center; font-weight: bold; font-size: 1.1rem; color: #4f46e5; margin-right: auto; margin-left: auto;}
.tabs { height:3.5rem; display: flex; padding:0.75rem 1rem; gap:1.5rem;}
.tabs button { text-align:left; padding: 0.25rem 0; border: none; background: none; font-weight: 500; color: #999; cursor: pointer; font-size:1rem;}
.tabs button.active { color: #000; }
.list { padding: 1rem; display:flex; flex-direction:column; gap:1.5rem; }
.item { cursor: pointer; }
.item-list {display:flex; align-items:center; justify-content:space-between; gap:1.5rem;}
.item-list i {font-size:1.25rem; color:#000; opacity:0.3;}
.item-title {display:flex; flex-direction:column; font-weight:500; font-size: 0.85rem; margin-bottom: 0.3rem; color: #111;}		
.item-title .date {font-weight:400; margin-top:0.25rem; font-size: 0.75rem; color: #888; }
.item.active .item-title { color: #4f46e5; }
.view-page { display: none; padding: 1rem; }
.view-back { display: none; position:absolute; left:1rem; color: #4f46e5; display: flex; align-items:center; cursor: pointer; font-size:1.25rem; font-weight:500;}
.view-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; color:#3c33e9; }
.view-date { font-size: 0.75rem; color: #999; margin-bottom: 1rem; }
.view-content { font-size: 0.85rem; line-height: 1.6; position:relative; display: flex; flex-direction: column;}
.view-content p {font-size: 0.85rem; line-height: 1.6; }
.view-content p + p {margin:1.5rem 0;}
.view-content .img-area {position:relative; width:calc(100% + 2rem); height:15rem; left:-1rem; margin:2rem 0;}
.view-content .img-area img {position:absolute; width:100%; height:100%; max-width: 100%;}
.view-info {position:relative; display:flex; gap:0.35rem; align-items:center;}
.view-info .img {width:1.2rem; height:1.2rem; border-radius:50%; background:#f4f4f4; overflow:hidden;}
.view-info .img img {width:100%; height:100%;}
.view-info .txt {font-size:14px; color:#000; font-weight:600;}
.vp-list {padding: 1rem; display: flex; flex-direction: column; gap:0rem; overflow: auto; height: calc(100% - 150px);}

p.badge {display:flex; align-items:center; max-width:fit-content; margin-bottom:0.5rem; height:30px; border-radius:4px; padding:5px 10px; font-size:12px; font-weight:600; color:#000;}
.pending {background:#d8d8d8;}
.progress {background:#33dee9;}
.complete {background:#42e884;}
.hold {background:#ff7b7b;}

.reply-wrap {position:relative; border-top:1px solid #ddd; padding:1rem 0; margin:1rem 0;}
.reply-wrap .view-info {margin-bottom:1rem;}
.reply-wrap p.badge {margin-bottom:0;}
.reply-wrap span.date {font-weight:400; font-size: 0.75rem; color: #888; }