@charset "utf-8";
@import 'fonts.css';

* { -webkit-box-sizing:border-box; box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{ font-family:'Pretendard'; font-size:0; }
ul{ margin:0; padding:0; }
li{ list-style:none; }
p{ margin:0; padding:0; }
button{ margin:0; padding:0; cursor:pointer; outline:none; }
a{ text-decoration:none; }
i{ display:inline-block; background-size:cover; background-repeat:no-repeat; background-position:center center; vertical-align:middle; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline:none; }
input{ outline:none; }
section{ width: 100%; border-radius: 5px 5px 0px 0px; overflow:hidden; }
table{ width:100%; }

/* scroll */
::-webkit-scrollbar { width: 5px; height:5px; }
::-webkit-scrollbar-thumb { background-color: #babac0; border-radius: 5px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-button { display:none; }
/* bk. editd */
/* .guate-wrap{ width:100%; height:100vh; min-width:1200px; min-height:768px; overflow:auto; display:flex; } */
.guate-wrap{ width:100%; height:100vh; min-width:1000px; min-height:768px; overflow:auto; display:flex; }
.guate-wrap2{ width:100%; height:calc(100vh - 62px); min-width:1000px; min-height:768px; overflow:auto; display:flex; }

/* aside */
.guate-side-menu{ height:100%; width: 65px; padding:24px 0; background-color:#4997D0; position:relative; transition:all 0.3s ease; }
.guate-side-menu nav{ padding:26.5px 0; }
.guate-side-hamburger{ width: 65px; display:flex; align-items:center; justify-content:center; flex-direction: column; gap: 5.25px; cursor: pointer; }
.guate-hamburger-line{ width: 24px; height: 2.62px; background: #FFFFFF; border-radius: 2px; display: block; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.guate-hamburger-line:nth-child(2){ -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }
.guate-side-hamburger.active .guate-hamburger-line:nth-child(2){ -webkit-transition: none; -o-transition: none; transition: none; }
.guate-side-hamburger.active .guate-hamburger-line:nth-child(2){ opacity: 0; }
.guate-side-hamburger.active .guate-hamburger-line:nth-child(1), .guate-side-hamburger.active .guate-hamburger-line:nth-child(3){ width: 18px; height: 2.62px; -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; }
.guate-side-hamburger.active .guate-hamburger-line:nth-child(1){ -webkit-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); }
.guate-side-hamburger.active .guate-hamburger-line:nth-child(3){ -webkit-transform: translateY(-4px) rotate(-45deg); -ms-transform: translateY(-4px) rotate(-45deg); -o-transform: translateY(-4px) rotate(-45deg); transform: translateY(-4px) rotate(-45deg); }
.guate-nav-menubox > ul > li{ height: 55px; position:relative; z-index:10; }
/* bk. edit white-space:nowrap ---> word-break:normal; */
.side-depth1-txt a{ font-weight: 700; font-size: 14px; line-height: 17px; color: #FFFFFF; word-break:normal; }
.guate-side-depth1{ width: calc(100% - 65px); height: 100%; display:flex; align-items:center; justify-content:space-between; padding:0 13px 0 20px; opacity:0; transition:all 0.1s ease; position:absolute; left:65px; top:0; cursor:pointer; visibility:hidden; }
.guate-side-arrow i{ height: 10px; width: 6.09px; background-image:url("../images/aside/arrow_grey.svg"); }
.guate-side-cate{ position:relative; z-index:2; }
.guate-cate-text{ width: calc(100% - 65px); opacity:0; transition:all 0.1s ease; position:absolute; left:65px; top:0; transform:translateY(-50%); padding:0 13px 0 20px; }
/* bk. edit white-space:nowrap ---> word-break:normal; */
.guate-cate-text p{ font-weight: 700;font-size: 14px;line-height: 17px; color: #96D2FF; word-break:normal; }
.guate-cate-line{ width:65px; height:1px; margin:15.5px 0; position:relative; }
.guate-cate-line::after{ content:""; width:23px; border-bottom:1px solid #1A649A; position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.guate-side-icon{ width: 65px; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.guate-nav-menubox li.active { background: #0000002e;}
.guate-nav-menubox li.active .side-depth1-txt a{ color:#FED908; }
.guate-nav-menubox li.active div.guate-side-depth2 ul li.active{ background: #0A4067;}
.guate-nav-menubox li div.guate-side-depth2 ul li:hover{ background: #0A4067;}
.guate-nav-menubox li div.guate-side-depth2 ul li:hover a{ color:#fff;}
.guate-side-depth2{ width:255px; position:absolute; left:65px; top:0; transition:all 0.3s ease; display:none; }
.guate-side-depth2 li{ width:100%; background-color:#185582; border-bottom:1px solid #BECDD7; padding:0 20px; }
.guate-side-depth2 li:last-child{ border-bottom:none; }
.guate-side-depth2 li a{ height:58px; font-weight: 700; font-size: 14px; line-height: 17px; color: #BEBEBE; display:flex; align-items:center; }
.guate-side-depth2 li.active a{ color:#FFF1A1; }
.guate-side-menu .guate-nav-menubox li:hover .guate-side-depth1{ background-color:#2571A8; }
.guate-side-menu.close .guate-nav-menubox li:hover .guate-side-depth2{ display:block; }
.guate-side-menu.close .guate-nav-menubox li:hover .guate-side-icon{ background-color:#2571A8; }


/* aside.open */
.guate-side-menu.open{ width:320px; }
.guate-side-menu.open::after{ content:""; width:calc(100% - 65px); height:100%; position:absolute; top:0; right:0; background-color:#3282BC; }
.guate-side-menu.open .guate-side-depth1{ opacity:1; visibility:visible; }
.guate-side-menu.open .guate-cate-text{ opacity:1; }
.guate-side-menu.open .guate-side-depth2{ left:320px; }
.guate-side-menu.open .guate-nav-menubox li:hover .guate-side-depth2{ display:block; }

/* header */
header{ width:100%; height:60px; background-color:#FFF; display:flex; align-items:center; justify-content:space-between; padding:0 19px; }
.header-tit span{ font-weight: 500; font-size: 20px; line-height: 20px; color: #073131; font-family: 'GmarketSans'; transition:all 0.3s ease; vertical-align:middle;     margin-right: 3px;}
.header-page p{ font-weight: 500; font-size: 15px; line-height: 15px; color: #4997D0; font-family: 'GmarketSans'; }
.header-division{ width:1px; height:16px; background-color:#4997D0; margin:0 30px; }
.header-user-img{ margin-right:9px; transition:all 0.3s ease; }
.header-user-txt span{ font-weight: 500; font-size: 14px; line-height: 17px; color: #666666; transition:all 0.3s ease; white-space:nowrap; }
.header-user-txt span.header-user-name{ color:#4997D0; }
.header-weather-img{ margin-right:9px; }
.header-weather-txt p{ font-weight: 700; font-size: 14px; line-height: 17px; color: #767676; transition:all 0.3s ease; }
.header-weather-txt p span{ color:#4997D0; }
.header-left, .header-right, .header-user, .header-weather{ display:flex; align-items:center; }
.header-user{ margin-right:41px; transition:all 0.3s ease; position:relative; cursor:pointer; }
.header-weather{ transition:all 0.3s ease; position:relative; cursor:pointer; }

/* bk. edit */
.guate-body{ width:100%; height:100%; background-color:#F5F5F5; transition:all 0.3s ease; }
.guate-body-main{ width:100%; height:calc(100% - 60px); padding:0px; }
.guate-body-main > main{ width:100%; height:100%; } /* bk. add */
.guate-contents{ width:100%; height:100%; background-color:#F5F5F5; transition:all 0.3s ease; }
.guate-contents-box{ width:100%; height: 100%; padding:20px; }
.guate-contents-box2{ width:100%; height: calc(100% - 32px); padding:20px; }
/* contents */
/* .guate-contents{ width:calc(100% - 65px); height:100%; background-color:#F5F5F5; transition:all 0.3s ease; } */
/* .guate-contents-box{ width:100%; height: calc(100% - 60px); padding:20px; } */
/* bk. edit */
.guate-side-menu.open ~ .guate-body{ width:calc(100% - 320px); }
.guate-side-menu.open ~ .guate-contents{ width:calc(100% - 320px); }
.guate-contents-tit{ padding:7.34px 11.6px 7.47px 11.6px; }
.guate-contents-tit p{ font-weight: 700; font-size: 14px; line-height: 17px; color: #FFFFFF; }

/* guate-traffic-info */
.guate-traffic-info{ width:100%; height:66.92%; display:flex; gap:16px; }
.guate-traffic-l{ width:66.57%; height:100%; border-radius: 5px 5px 0px 0px; overflow:hidden; }
.guate-traffic-r{ width:32.59%; height:100%; display:flex; justify-content: space-between; flex-direction:column; gap:11px; }
.guate-traffic-l section{ height:100%; }
.guate-traffic-r section{ height:24%; }
#google-map{ width:100%; height:calc(100% - 32px); }
.google-map-info{ width:247px; height:166px; overflow:hidden; }
.map-popup-head{ display:flex; align-items:center; justify-content:space-between; padding:4.74px 8.74px 3.48px 7.19px; }
.map-popup-tit p{ font-weight: 700; font-size: 13px; color: #FFFFFF; }
.map-popup-close{ cursor:pointer; }
.map-popup-body{ width:100%; height:calc(100% - 24px); background-color:#040404; }
#google-map .gm-style-iw{ box-shadow:none; }
#google-map .gm-style > div > div > div > div > div > div > div { background: none!important; }
.gm-style > div > div > div > div > div > div > div:nth-child(2) { box-shadow: none!important; }
.gm-style-iw-chr{ display:none; }
#google-map .gm-style-iw, #google-map .gm-style-iw-d{ padding:0; overflow:hidden !important; }
.gm-style .gm-style-iw-tc::after{ display:none; }

/* guate-traffic-status */
.guate-status-info{ width:100%; height:30.92%; display:flex; gap:18.7px; margin-top:19px; }
.guate-facility-status{ width: 32.14%; height:100%; }
.guate-facility-status section{ width: 100%; height: 100%; border: 1px solid #4997D0; border-radius: 5px 5px 0px 0px; overflow:hidden; }
.guate-traffic-status{ width: 66.85%; height:100%; }
.guate-traffic-status section{ width: 100%; height: 100%; border: 1px solid #4997D0; border-radius: 5px 5px 0px 0px; overflow:hidden; }
/* bk. edit start ------------------ */
/* .guate-chart-box, .guate-table-box{ width:100%; height:calc(100% - 32px); } */
.guate-chart-box, .guate-table-box{ position:relative; width:100%; height:calc(100% - 32px); }
/* bk. edit end ------------------ */
.guate-chart-area{ padding:10px 10px 8px 10px; }
#chart-area{ width:calc(100% - 50px); height: 100%; }
.chart-area-legend ul{ display:flex; align-items:center; justify-content:center; gap:17px; }
.chart-area-legend li{ display:flex; align-items:center; }
.area-legend-box{ width:8px; height:4px; margin-right:7px; }
.area-legend-txt span{ font-weight: 400; font-size: 10px; line-height: 12px; color: #767676; }
.guate-table-grid{ width:100%; height:100%; }
.custom[role="columnheader"], .custom[role="gridcell"]{  }
.dx-header-row>td>.dx-datagrid-text-content:not(.dx-sort-indicator):not(.dx-header-filter-indicator){ width:100%; }
/*.guate-table-grid .dx-datagrid .dx-datagrid-table .dx-header-row>td{ padding-top:5px; padding-bottom:5px; }*/
.guate-table-grid .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none{ border-left:0; }
/*.guate-table-grid .dx-datagrid-headers { background-color: #D5EDFF !important; }*/
.guate-table-grid .dx-datagrid-headers.dx-header-multi-row .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row>td{ background-color: #D5EDFF !important; }
.guate-table-grid .dx-datagrid-headers .dx-datagrid-table .dx-row>td{ border-color:#82C4F4 !important; }
.guate-table-grid .dx-datagrid .dx-column-lines>td{ border-color:#82C4F4 !important; }
/* bk. edited. disable .guate-table-grid .dx-datagrid-borders>.dx-datagrid-filter-panel, .dx-datagrid-borders>.dx-datagrid-headers{ border-color:#82C4F4 !important; } */
/* bk. edited. disable .guate-table-grid .dx-datagrid-borders>.dx-datagrid-rowsview, .dx-datagrid-borders>.dx-datagrid-total-footer{ border-color:#82C4F4 !important; } */
.guate-table-grid .dx-datagrid .dx-row>td{ padding:0; }
.guate-table-grid .dx-datagrid-rowsview .dx-row{ cursor:pointer; }
.hover-highlight{ background-color: #F4F4F4 !important; }
.dx-pointer-events-none .hover-highlight div{ background-color: #ECECEC !important; }
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td:not(.dx-focused):not(.dx-cell-modified):not(.dx-datagrid-invalid){ background-color:#ECECEC; }
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td:not(.dx-focused):not(.dx-cell-modified):not(.dx-datagrid-invalid) div{ color:#1A649A !important; }
.dx-texteditor::before{ content:none; }

/* guate-contents-head */
.contents-head-tit p{ font-weight: 700; font-size: 14px; line-height: 17px; color: #4997D0; }
.head-filter-tit p{ font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0.1px; color: #828282; }
.btn-filter-search{ width:100px; height:30px; background-color: #4997D0; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-search i{ margin-right:10px; font-size:0; }
.contents-head-filter{ width: 100%; height: 70px; display:flex; align-items:flex-end; justify-content:space-between; padding:12px; background: #FFFFFF; border: 1px solid #82C4F4; box-shadow: 0px 0px 4px rgba(126, 126, 126, 0.25); border-radius: 5px; margin-top:10px; transition:all 0.3s ease; }
.head-filter-left{ display:flex; align-items:center; }
.head-filter-input{ position:relative; }
.head-filter-input input{ width: 100%; height:30px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
.head-filter-input.filter-search-icon input{ padding:0 30px 0 10px; }
.head-filter-name .head-filter-input{ width:180px; }
.head-filter-row{ display:flex; align-items:center; }
.head-filter-select select{ width: 100%; height: 30px; border: 1px solid #E6E6E6; border-radius: 5px; background: url("../images/icon/select_arrow_grey.svg") no-repeat 85% 50%; background-color: #F9F9F9; padding:0 10px; }
.head-filter-date .head-filter-select{ width:75px; }
.head-filter-date .head-filter-input{ width:120px; position:relative; }
.head-filter-date .dx-texteditor-buttons-container{ width: 30px; height: 30px; position:absolute; right:0; top:0; }
.head-filter-date .dx-datebox-datetime .dx-dropdowneditor-icon::before { width:14px; margin-top:-5px; margin-left:-5px; }
.head-filter-date .dx-datebox-datetime .dx-dropdowneditor-icon{ width: 14px; font:14px/14px DXIcons; }
.head-filter-date .dx-texteditor-input-container input{ padding-right:25px !important; }
.filter-select-wave{ font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0.2px; color: #070707; }
.head-filter-right{ display:flex; align-items:center; gap:10px; }
.btn-filter-excel{ width:100px; height:30px; background-color: #68BF25; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-excel i{ margin-right:10px; }
.btn-filter-name{ background-color:transparent; border:none; position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:0; }
.head-filter-period{ width:86px; }
.head-filter-compareday, .head-filter-compareweek, .head-filter-data{ width:118px; }
.head-filter-compareday .head-filter-select, .head-filter-compareweek .head-filter-select, .head-filter-data .head-filter-select{ width:100% !important; }
.head-filter-left-top, .head-filter-left-btm{ display:flex; }
/* bk. edit add */
.head-filter-left-top form{ display:flex !important; }
.head-filter-left-btm form{ display:flex !important; }
/* bk. edit end */
.btn-filter-save{ width:100px; height:30px; background-color: #000933; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-save i{ margin-right:10px; font-size:0; }
.head-filter-date .dx-texteditor.dx-editor-filled::after{ content:none; }
.dx-datebox-date .dx-dropdowneditor-icon, .dx-datebox-date.dx-dropdowneditor-active .dx-dropdowneditor-icon{ font:14px/14px DXIcons; }
.dx-datebox-date .dx-dropdowneditor-icon::before, .dx-datebox-date.dx-dropdowneditor-active .dx-dropdowneditor-icon::before{ margin-top:-6px; }
/*.dx-texteditor.dx-state-focused::before{  }*/

.btn-filter-refresh{ width:100px; height:30px; background-color: #00ACED; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-refresh i{ margin-right:10px; font-size:0; }
.btn-filter-add{ width:100px; height:30px; background-color: #FEB808; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-add i{ margin-right:10px; font-size:0; }
.btn-filter-delete{ width:100px; height:30px; background-color: #535353; border-radius: 5px; font-weight: 700; font-size: 13px; color: #FFFFFF; border:none; display:flex; align-items:center; justify-content:center; }
.btn-filter-delete i{ margin-right:10px; font-size:0; }


/* guate-contents-node */
.guate-contents-container{ width:100%; height:calc(100% - 110px); margin-top:16px; display:flex; transition:all 0.3s ease; }
.guate-contents-node{ gap:16px; }
.guate-node-l{ width:32.55%; height:100%; }
.guate-node-l section{ height:100%; }
.guate-node-r{ width:66.50%; height:100%; display:flex; flex-direction: column; justify-content: space-between; gap:19px; }
.guate-node-r .guate-map{ height:75.37%; }
.guate-node-r .guate-time-zone{ height:23.5%; }

/* guate-contents-searchlist */
.guate-contents-searchlist{ flex-direction:column; justify-content: space-between; gap:19px; }
.contents-searchlist-box{ width:100%; height:75.49%; }
.contents-searchchart-box{ width:100%; height:22.32%; }
.guate-table-searchlist, .guate-chart-searchlist{ width:100%; height:calc(100% - 32px); }

/* guate-contents-cctv */
.guate-contents-cctv{ width: 100%; height:100%; display:flex; align-items:flex-start; justify-content:space-between; flex-direction:column; gap:19px; }
.guate-contents-cctv .guate-map{ height:70%; }
.contents-cctvlist-box{ height:27.5%; }
.guate-table-cctvlist{ display:flex; align-items:flex-start; }
#guate-table-cctvlist{ width:31.42%; }
.guate-table-cctvdetail{ width:68.75%; height:100%; border-right:1px solid #82C4F4; border-bottom:1px solid #82C4F4; border-top:1px solid #82C4F4; background-color:#FFF; }
.table-cctvdetail-title{ width:100%; height:27px; padding:0 9px; background-color:#F5F5F5; border-bottom:1px solid #82C4F4; display:flex; align-items:center; }
.table-cctvdetail-title p{ font-weight: 700; font-size: 12px; line-height: 100%; color: #575757; }
.table-cctvdetail-info{ width:100%; height: calc(100% - 27px); padding:14px 19px; overflow:auto; }
.cctvdetail-info-row{ width:100%; display:flex; align-items:center; margin-top:6px; }
.cctvdetail-info-row:first-child{ margin-top:0; }
.cctvdetail-info-col{ width: 33.33%; display:flex; align-items:center; justify-content:flex-end; }
.cctvdetail-info-col.colspan100{ width:100%; }
.cctvdetail-info-tit{ width: 110px; text-align:right; margin-right:13px; }
.cctvdetail-info-tit p{ font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0.1px; color: #828282; }
.cctvdetail-info-val{ width:calc(100% - 123px); }
.cctvdetail-info-val input{ width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
.cctvdetail-info-val select{ width: 100%; height: 25px; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; background: url("../images/icon/select_arrow_grey.svg") no-repeat 95% 50%; background-color: #F9F9F9; }
.cctvdetail-info-col.colspan100 .cctvdetail-info-val{  }

/* theme-b */
.theme-b .guate-side-menu{ background-color:#4974D0; }
.theme-b .guate-side-menu.open::after{ background-color:#3260BC; }
.theme-b .guate-side-menu .guate-nav-menubox li:hover .guate-side-depth1{ background-color:#2542A8; }
.theme-b .guate-side-menu.close .guate-nav-menubox li:hover .guate-side-icon{ background-color:#2542A8; }
.theme-b .guate-side-depth2 li{ background-color:#182882; }
.theme-b .guate-nav-menubox li.active div.guate-side-depth2 ul li.active{ background: #010D51;}
.theme-b .guate-nav-menubox li div.guate-side-depth2 ul li:hover{ background: #010D51;}
.theme-b .guate-nav-menubox li div.guate-side-depth2 ul li:hover a{color:#fff;}

.theme-b .bg-blue{ background-color:#4974D0; }
.theme-b .bg-sky{ background-color:#7EA7FD; }
.guate-traffic-r section.row2{ height:48%; }
.theme-b .guate-table-grid .dx-datagrid-headers { background-color: #D5E2FF !important; }
.theme-b .btn-filter-search{ background-color:#3260BC; }
.guate-chart-list{ height: 100%; background-color:#FFF; }
.guate-chart-list .guate-chart-box{ padding:12px; }
/* bk. edit. start -------------------- */
/* .guate-chart-list .guate-chart-box > ul{ width: 100%; height: 100%; display:flex; flex-wrap:wrap; align-content:baseline; justify-content: space-between; gap:5px; } */
.guate-chart-list .guate-chart-box > ul{ width: 100%; height: 100%; display:flex; flex-wrap:wrap; align-content:baseline; gap:7px; }
/* bk. edit. end -------------------- */
.guate-chart-list .guate-chart-box > ul > li{ width:calc(33.33% - 5px); height: calc((100% - (2 * 5px)) / 3); max-height:232px; border:1px solid #82C4F4; }
.chart-list-tit{ width:100%; height:29px; background-color:#D5E2FF; display:flex; align-items:center; padding:0 13px; border-bottom:1px solid #82C4F4; }
.chart-list-tit p{ font-weight: 700; font-size: 12px; color: #415A90; }
.guate-contents-operativa{ gap:20px; }
.guate-contents-operativa section{ height:100%; }
.contents-operativa-l, .contents-operativa-r{ width:50%; background-color:#FFF; }
/* bk. edit scroll auto */
/* .guate-operativa-info{ width:100%; height:calc(100% - 32px); padding:15px 20px; } */
.guate-operativa-info{ width:100%; height:calc(100% - 32px); padding:15px 20px; overflow: auto; }
.operativa-info-row{ width:100%; display:flex; align-items:center; gap:13px; margin-top:6px; }
.operativa-info-row:first-child{ margin-top:0; }
.operativa-info-tit{ width:125px; text-align:right; }
.operativa-info-tit p{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #828282; }
.operativa-info-val{ width:calc(100% - 138px); }
.operativa-info-val input{ width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
.operativa-info-row.align-start{ align-items:flex-start; }
.operativa-info-val textarea{ width: 100%; height: 126px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:10px; resize:none; outline:none; }
.guate-contents-sistema{ flex-direction:column; gap:19px; }
.contents-sistema-t, .contents-sistema-b{ width:100%; height: calc(50% - 9.5px); display:flex; gap:20px; }
.contents-sistema-code{ width:66.78%; height:100%; }
.contents-sistema-info{ width:32.11%; height:100%; background-color:#FFF; }
.contents-sistema-info .operativa-info-tit{ width:130px; }
.contents-sistema-info .operativa-info-val{ width:calc(100% - 145px); }
.contents-operativa-three{ width:100%; height:calc(100% - 32px); padding:20px; }
.guate-tbl{ table-layout:fixed; }
.guate-tbl td.guate-tbl-tit{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #828282; text-align:right; }
.guate-tbl td.guate-tbl-val{ padding-left:10px; }
/* bk. edited add */
/* .guate-tbl td.guate-tbl-val input{ width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; } */
.guate-tbl td.guate-tbl-val input{ float:left; width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
/* bk. edited add */
.guate-tbl td.guate-tbl-val div.guate-tbl-label{ float:left; padding:0 10px; font-size: 13px; font-weight: 400; line-height: 25px; letter-spacing: 0.1px; color: #828282; }
.guate-tbl td.guate-tbl-val textarea{ width: 100%; height: 126px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:10px; resize:none; outline:none; }
.guate-tbl td.vertical-top{ vertical-align:top; }
.guate-tbl-button button{ width:82px; height:26px; font-weight: 700; font-size: 13px; color: #FFFFFF; border-radius: 5px; border:none; margin-left:7px; }
.guate-tbl-button .button-type1{ background-color: #82C4F4; }
.guate-tbl-button .button-type2{ background-color: #7EA7FD; }
.button-type1:hover{ background-color:#4997D0; }
.button-type2:hover{ background-color:#4974D0; }
.guate-tbl .guate-tbl-val.guate-tbl-button input{ width:calc(100% - 89px); }

.filebox .upload-name { display: inline-block; vertical-align:middle; }
.filebox label { display: inline-block; width:82px; height:26px; line-height: 26px; text-align: center; font-weight: 700; font-size: 13px; color: #FFFFFF; border-radius: 5px; margin-left:7px; vertical-align:middle; cursor:pointer; }
.filebox input[type="file"] { position: absolute; width: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; }

/* treeview */
/* bk. edit disable tree design */
/*
.dx-treeview-node{ position:relative; padding-left:20px; }
.dx-treeview-item-with-checkbox .dx-checkbox{ top:7px; left:25px; }
.dx-treeview-item{ padding:3px 0; min-height:auto; }
.dx-checkbox-icon{ width: 16.3px; height: 16.3px; border:2px solid #ADB8C2; border-radius:0; }
.dx-checkbox-checked .dx-checkbox-icon{ font:10px/1em DXIcons; }
.dx-widget.dx-checkbox.dx-checkbox-checked .dx-checkbox-icon{ background-color:#4692DD; color:#FFF; border:none; }
.dx-treeview-item-with-checkbox .dx-checkbox .dx-checkbox-container{ width: 16.3px; height: 16.3px; }
.dx-treeview-item-content span{ font-size:13px; color:#404040; font-weight:400; }
.dx-treeview-toggle-item-visibility{ width: 16.3px; height: 16.3px; border:2px solid #ADB8C2; top:0; left:0; color:#ADB8C2; display:unset; position:relative; }
.dx-treeview-toggle-item-visibility::before{ content:"+"; position: absolute; top:-9px; left:-2px; font-size:22px; }
.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened::before{ content:"-"; position: absolute; top:-9px; left:1px; }
#treeView div > ul > li .dx-item.dx-treeview-item::before{ content:""; width:12px; border:1px solid #6BD3FF; position:absolute; left:36px; top:11px; }
#treeView div > ul > li[aria-level="1"] > .dx-item.dx-treeview-item::before{ width:20px; border:1px solid #6BD3FF; position:absolute; left:30px; top:35px; }
#treeView div > ul > li[aria-level="1"] > .dx-treeview-item .dx-treeview-item-content::before{ content:""; width:12px; border:1px solid #6BD3FF; position:absolute; left:16px; top:11px; }
li[aria-level="1"] > div:nth-child(1)::after{ content:""; position:absolute; top:20px; left:28px; height:32px; border:1px solid #6BD3FF; }
#treeView div > ul > li > ul > li[aria-level="2"]:nth-child(1) > .dx-item.dx-treeview-item::before{ content:none; }
li[aria-level="4"] > ul{ position:relative; }
li[aria-level="4"] > ul::after{ content:""; position:absolute; top:0; left:34px; border:1px solid #6BD3FF; height:calc(100% - 11px); }
li[aria-level="4"]::after{ content:""; position:absolute; top:20px; left:27px; border:1px solid #6BD3FF; height:calc(100% - 16px); }
li[aria-level="3"] > ul > li[aria-level="4"]:last-child::after{ content:none; }
.dx-treeview-expander-icon-stub{ width:16.3px; height:16.3px; }
.dx-checkbox-checked .dx-checkbox-icon::before{ font-size:16px; margin-top:-0.35em; }
.guate-tbl-val .dx-dropdowneditor.dx-dropdowneditor-field-clickable{ height:25px; }
.guate-tbl-val .dx-texteditor .dx-texteditor-buttons-container:last-child>.dx-dropdowneditor-button:last-child{ margin-inline-end:0; -webkit-margin-end:0; }
.guate-tbl-val .dx-dropdowneditor-button{ position:absolute; top:0; right:0; }
.guate-tbl-val .dx-placeholder{ font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; }
.dx-texteditor.dx-editor-filled .dx-placeholder::before{ padding:0 10px; }
.dx-texteditor.dx-editor-filled::after{ border:none; }
.dx-texteditor.dx-editor-filled .dx-texteditor-input{ padding:0 10px; }
.dx-widget input, .dx-widget textarea{ font-family:'Pretendard'; }
.head-filter-select .dx-dropdowneditor.dx-dropdowneditor-field-clickable{ height:30px; }
.head-filter-select .dx-texteditor-input-container{ border: 1px solid #E6E6E6; border-radius: 5px; background-color: #F9F9F9; color: #070707; }
.head-filter-select .dx-texteditor-input{ font-weight: 400; font-size: 13px; color: #070707; letter-spacing: 0.2px; }
.head-filter-select .dx-placeholder{ font-weight: 400; font-size: 13px; color: #070707; letter-spacing: 0.2px; }
.dx-dropdowneditor-icon::before{ content:url("../images/icon/select_arrow_grey.svg"); margin-top:-17px; }
.head-filter-select .dx-dropdowneditor-icon::before{ margin-left:-8px; }
.head-filter-period */

/* legend */
.bg-legend-blue{ background-color:#00ACED; }
.bg-legend-yellow{ background-color:#FEC708; }
.bg-legend-pink{ background-color:#FF5291; }
.bg-legend-indigo{ background-color:#1377A2; }

/* color */
.bg-blue{ background-color:#4997D0; }
.bg-sky{ background-color:#82C4F4; }

/* border */
.border-blue{ border:1px solid #4997D0; }
.border-sky{ border:1px solid #82C4F4; }

/* margin */
.mr6{ margin-right:6px; }
.mr16{ margin-right:16px; }
.mr10{ margin-right:10px; }
.mr19{ margin-right:19px; }
.mr22{ margin-right:22px; }
.ml6{ margin-left:6px; }


.head-filter-checkbox{display:block;}
.head-filter-checkbox input{  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;}

.head-filter-checkbox label {
  position: relative;
  cursor: pointer;
font-size:13px;    color: #070707;
}

.head-filter-checkbox label:before {
  content: '';
    -webkit-appearance: none;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 14px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 5px;
	vertical-align: -9px;
}


.head-filter-checkbox input:checked + label:after {
content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid #4997d0;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}


/* media query */

@media (max-width:1800px) and (min-width:1370px){
	.head-filter-right button {width:30px;}
	.head-filter-right button i{margin-right: 0;}
	.head-filter-right button span{display:none;}
}
@media (max-width:1370px) {
	.contents-head-filter.responsive-column-filter{ height:132px; }
	.head-filter-mini{ flex-direction:column; align-items:flex-start; }
	.head-filter-left-btm{ margin-top:13px; }
	.guate-contents-container.guate-contents-searchlist{ height:calc(100% - 160px); }
	.header-tit span{margin-right:0;}
}

@media (max-width:1355px) {
	.header-tit span span, .header-user-txt span, .header-weather-txt p{ font-size:0; }
	.header-user{ margin-right:30px; }
	.header-weather-img{ margin-right:0; }
	.header-user-txt, .header-weather-txt{ position:absolute; top:30px; background-color:#EBEAEA; padding:10px 15px; border-radius:3px; display:none; }
	.header-user-txt{ right:0; }
	.header-weather-txt{ min-width: 398px; right:-5px; }
	.header-user-txt::after, .header-weather-txt::after{ content:""; position: absolute; top:-5px; right:13px; border-left:5px solid transparent; border-right:5px solid transparent;border-bottom:5px solid #EBEAEA; }
	.header-user:hover .header-user-txt, .header-weather:hover .header-weather-txt{ display:block; }
	.header-user:hover .header-user-txt span, .header-weather:hover .header-weather-txt p{ font-size:14px; transition:none; }
}




.guate-chart-grid{ width: 100%; height: calc(100% - 12px); display:flex; justify-content:space-between; }
#bar-chart-area{ width:calc(100% - 50px); height: 100%; }
#chart-wave{ width:100%; height: calc(100% - 12px); }
.chart-list-chart{ width:100%; height: calc(100% - 29px); padding:10px; }
.chart-list-chart > div:not(.chart-area-legend){ width:100%; height:calc(100% - 17px); }
.legned-line{ width:12px; height:1.5px; position:relative; }
.legned-line-a{ background-color:#FF5291; }
.legned-line-b{ background-color:#FEC708; }
.legned-line::after{ content:""; width: 4px; height: 4px; border-radius:50%; background-color:#FFF; position:absolute; left:50%; top:50%; margin-top:-3px; margin-left:-3px; }
.legned-line-a::after{ border:1.5px solid #FF5291; }
.legned-line-b::after{ border:1.5px solid #FEC708; }
.guate-chart-tit{ font-size:10px; line-height:12px; font-weight:400; color:#767676; text-align:center; }
.legned-bar{ width: 6.4px; height: 6.4px; border-radius:50%; }
.legned-bar-a{ background-color:#62B2FD; }
.legned-bar-b{ background-color:#9BDFC4; }
.legned-bar-c{ background-color:#F99BAB; }
.legned-bar-d{ background-color:#FFB44F; }
.legned-bar-e{ background-color:#53f853; }




/* sample grid */
.contents_layout01{background:#fff; border-radius:5px;}

.contents_layout02{gap:20px;}
.layout02-l{ width: 50%;background:#fff;}
.layout02-r { width: 50%; background:#fff;}

.contents_layout03{gap:20px;}
.layout03-l{ width: 33.3%; background:#fff;}
.layout03-c{ width: 33.3%; background:#fff;} 
.layout03-r{ width: 33.3%; background:#fff;}

.contents_layout04 { flex-direction: column; gap: 19px;}
.layout04-t{ width: 100%; height: calc(50% - 9.5px);background:#fff;}
.layout04-b{ width: 100%; height: calc(50% - 9.5px);background:#fff;}

.contents_layout05{gap:20px;}
.layout05-l{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout05-r { width: 50%; background:#fff;}
.layout05-lt{ width: 100%; height: calc(50% - 10px);background:#fff;}
.layout05-lb{ width: 100%; height: calc(50% - 10px);background:#fff;}
/* bk. edited. add */
.layout05-lt30{ width: 100%; height: calc(30% - 10px);background:#fff;}
.layout05-lb70{ width: 100%; height: calc(70% - 10px);background:#fff;}
.layout05-lt60{ width: 100%; height: calc(60% - 10px);background:#fff;}
.layout05-lb40{ width: 100%; height: calc(40% - 10px);background:#fff;}

.contents_layout06{gap:20px;}
.layout06-l { width: 50%; background:#fff;}
.layout06-r{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout06-rt{ width: 100%; height: calc(50% - 10px);background:#fff;}
.layout06-rb{ width: 100%; height: calc(50% - 10px);background:#fff;}
/* bk. edit. add */
.layout06-rt70{ width: 100%; height: calc(70% - 10px);background:#fff;}
.layout06-rb30{ width: 100%; height: calc(30% - 10px);background:#fff;}
.layout06-rt60{ width: 100%; height: calc(60% - 10px);background:#fff;}
.layout06-rb40{ width: 100%; height: calc(40% - 10px);background:#fff;}

.contents_layout07{gap:20px;}
.layout07-l{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout07-r { width: 50%; background:#fff;}
.layout07-lt{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout07-lm{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout07-lb{ width: 100%; height: calc(33% - 10px);background:#fff;}

.contents_layout08{gap:20px;}
.layout08-r{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout08-l { width: 50%; background:#fff;}
.layout08-rt{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout08-rm{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout08-rb{ width: 100%; height: calc(33% - 10px);background:#fff;}

.contents_layout09{gap:20px;}
.layout09-l { width: 50%; background:#fff;}
.layout09-r{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout09-rt{ width: 100%; height: calc(50% - 10px);display: flex;gap: 20px;}
.layout09-rtl{ width: 50%; background:#fff;}
.layout09-rtr{ width: 50%; background:#fff;}
.layout09-rb{ width: 100%; height: calc(50% - 10px);background:#ffffff;}

.contents_layout10 { flex-direction: column; gap: 19px;}
.layout10-t{ width: 100%; height: calc(50% - 9.5px);background:#fff;}
.layout10-b{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout10-bl{ width: 50%; background:#fff;}
.layout10-br{ width: 50%; background:#fff;}

.contents_layout11 { flex-direction: column; gap: 19px;}
.layout11-b{ width: 100%; height: calc(50% - 9.5px);background:#fff;}
.layout11-t{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout11-tl{ width: 50%; background:#fff;}
.layout11-tr{ width: 50%; background:#fff;}

.contents_layout12 { flex-direction: column; gap: 19px;}
.layout12-b{ width: 100%; height: calc(50% - 9.5px);background:#fff;}
.layout12-t{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout12-tl{width: 33.3%; background:#fff;}
.layout12-tm{width: 33.3%; background:#fff;}
.layout12-tr{width: 33.3%; background:#fff;}

.contents_layout13 { flex-direction: column; gap: 19px;}
.layout13-t{ width: 100%; height: calc(50% - 9.5px);background:#fff;}
.layout13-b{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout13-bl{ width: 33.3%; background:#fff;}
.layout13-bm{ width: 33.3%; background:#fff;}
.layout13-br{ width: 33.3%; background:#fff;}

.contents_layout14 { flex-direction: column; gap: 19px;}
.layout14-t{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout14-tl{ width: 50%; background:#fff;}
.layout14-tr{ width: 50%; background:#fff;}
.layout14-b{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout14-bl{ width: 33.3%; background:#fff;}
.layout14-bm{ width: 33.3%; background:#fff;}
.layout14-br{ width: 33.3%; background:#fff;}


.contents_layout15 { flex-direction: column; gap: 19px;}
.layout15-t{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout15-tl{ width: 50%; background:#fff;}
.layout15-tr{ width: 50%; background:#fff;}
.layout15-b{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout15-bl{ width: 50%; background:#fff;}
.layout15-br{ width: 50%; background:#fff;}

.contents_layout16 { flex-direction: column; gap: 19px;}
.layout16-t{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout16-tl{ width: 33.3%; background:#fff;}
.layout16-tr{ width: 66.6%; background:#fff;}
.layout16-b{ width: 100%; height: calc(50% - 9.5px);display: flex;  gap: 20px;}
.layout16-bl{ width: 66.6%; background:#fff;}
.layout16-br{ width: 33.3%; background:#fff;}

.contents_layout17{gap:20px;}
.layout17-l{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout17-lt{ width: 100%; height: calc(75% - 10px);background:#fff;}
.layout17-lb{ width: 100%; height: calc(25% - 10px);background:#fff;}
.layout17-r{ width: 50%;display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
.layout17-rt{ width: 100%; height: calc(25% - 10px);background:#fff;}
.layout17-rb{ width: 100%; height: calc(75% - 10px);background:#fff;}


.contents_layout18 {display: flex; justify-content: space-between;flex-direction: column; gap: 19px;}
.layout18-t{ width: 100%; height: 33.3%; background:#fff;}
.layout18-m{ width: 100%; height: 33.3%; background:#fff;}
.layout18-b{ width: 100%; height: 33.3%;display: flex; gap: 19px; }
.layout18-bl{ width: 33.3%; background:#fff;}
.layout18-bc{ width: 33.3%; background:#fff;} 
.layout18-br{ width: 33.3%; background:#fff;}

.contents_layout19{gap:20px;}
.layout19-l{ width: 33.3%; background:#fff;}
.layout19-c{ width: 33.3%; background:#fff;} 
.layout19-r{ width: 33.3%; display: flex; justify-content: space-between;flex-direction: column; gap: 19px;}
.layout19-rt{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout19-rm{ width: 100%; height: calc(33% - 10px);background:#fff;}
.layout19-rb{ width: 100%; height: calc(33% - 10px);background:#fff;}


/* login */
body.login { min-height: 100vh; display: flex; justify-content: center; align-items: center;  background: #1e6598; position: relative;   overflow: hidden;     background-image: url("../images/tmos_bg.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
/* bk. edited. bg image remove */
/* body.login.theme-b{background: #1e4393;background-image: url("../images/tiams_bg.svg"); */
body.login.theme-b{background: #1e4393;background-image: url("../images/tmos_bg.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
.login .animated-background {position: fixed; top: 0;left: 0; width: 100%; height: 100%;  z-index: 0; overflow: hidden;}
.login .particles {  position: absolute; width: 100%;  height: 100%;  z-index: 1; }
.login .particle {  position: absolute;  width: 2px; height: 2px;  background: rgba(255, 255, 255, 0.5); border-radius: 50%; animation: floatParticle 8s infinite linear; }
  @keyframes floatParticle {
       0% {transform: translateY(100vh) scale(0); opacity: 0; }
       50% { opacity: 1; }
       100% {transform: translateY(-100vh) scale(1);opacity: 0;}
       }
.login .login-container { position: relative; z-index: 2; width: 100%; max-width: 440px;  background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 3rem; color: white; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden;  transform: translateY(20px); opacity: 0;  animation: slideIn 0.6s ease-out forwards; }
.login .login-container::before { content: '';  position: absolute;  top: 0; left: -100%;  width: 200%; height: 100%;  background: linear-gradient(  to right, transparent,  rgba(255, 255, 255, 0.1), transparent ); transform: skewX(-15deg);  transition: 0.5s;}
.login .login-container:hover::before { left: 100%; }
        @keyframes slideIn {
            to { transform: translateY(0); opacity: 1;}
        }
.login .login-header {  text-align: center;  margin-bottom: 4.5rem; }
.login .login-header h1 { font-size: 2.5rem;  font-weight: 700; margin-bottom: 0.5rem;  background: linear-gradient(45deg, #fff, #ccc);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.login .login-header p {  color: rgba(255, 255, 255, 0.7); font-size: 1rem; }
.login .form-group { position: relative;  margin-bottom: 1.5rem;  } .login .form-input { width: 100%;  padding: 1rem 1rem 1rem 1rem; background: rgba(255, 255, 255, 0.05);  border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 6px; font-size: 1.2rem;  color: white;transition: all 0.3s ease;}
.login .form-input::placeholder {  color: rgba(255, 255, 255, 0.4); }
.login .form-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.3);  background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); }
.login .input-icon { position: absolute; left: 1rem;  top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); transition: color 0.3s ease; }
.login .form-input:focus + .input-icon { color: white;  }
.login .submit-button { width: 100%;  padding: 1.2rem;  background: #fff; color: #003354; border: none;  border-radius: 5px; font-size: 1.2rem; font-weight: 600;  cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.login .submit-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%;  background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.8),  transparent ); transition: 0.5s; }
.login .submit-button:hover { transform: translateY(-2px);  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.login .submit-button:hover::before { left: 100%; }
.login .error-message {  color: #ff4477;  font-size:1rem; margin-top: 0.5rem; display: none;  animation: fadeIn 0.3s ease; }
  @keyframes fadeIn {
       from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
        }
   @keyframes ripple {
         to {  width: 300px;height: 300px;opacity: 0; }
        }

@media (max-width: 480px) {
      .login .login-container {  margin: 1rem;padding: 2rem;  }
      .login .login-header h1 { font-size: 2rem; }
        }


/* bk. custom. added -------------------------------------------------------------------------- */
/* .dx-datagrid .dx-datagrid-table .dx-header-row>td { padding-top:0px !important; padding-bottom: 0px !important;} */
.dx-datagrid>.dx-datagrid-headers { background: #D5EDFF !important; }   
.dx-button.dx-button-default { background-color: #82C4F4 !important; }
.dx-button.dx-button-default.dx-state-hover { background-color: #4997D0 !important; }
#dmap{ width:100%; height:calc(100% - 32px); }
#dmap .gm-style-iw{ box-shadow:none; }
#dmap .gm-style > div > div > div > div > div > div > div { background: none!important; }
#dmap .gm-style-iw, #dmap .gm-style-iw-d{ padding:0; overflow:hidden !important; }

.guate-table-grid2{ position: absolute; width:100%; height:100%; }
.guate-table-grid2 .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none{ border-left:0; }
.guate-table-grid2 .dx-datagrid-headers.dx-header-multi-row .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row>td{ background-color: #D5EDFF !important; }
.guate-table-grid2 .dx-datagrid-headers .dx-datagrid-table .dx-row>td{ border-color:#adddff !important; }
.guate-table-grid2 .dx-datagrid .dx-column-lines>td{ border-color:#adddff !important; }
.guate-table-grid2 .dx-datagrid-rowsview .dx-row{ cursor:pointer; }

.guate-contents-layout-section{ width:100%; height:100%; }

.guate-dxTabs{ width:100%; height:100%; padding-top: 5px; overflow:hidden; }

.guate-tbl2{ table-layout:fixed; border-collapse: collapse; margin-bottom:5px; }
.guate-tbl2 > tbody > tr > td{ border:1px solid #c3c5cd; padding: 7px; }
.guate-tbl2 td.guate-tbl-tit{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #828282; text-align:left; }
.guate-tbl2 td.guate-tbl-grey{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #828282; text-align:left; background-color: #e9e9e9; }
.guate-tbl2 td.guate-tbl-val{ padding-left:10px; }
.guate-tbl2 td.guate-tbl-val input{ float:left; width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
.guate-tbl2 td.guate-tbl-val div.guate-tbl-label{ float:left; padding:0 10px; font-size: 13px; font-weight: 400; line-height: 25px; letter-spacing: 0.1px; color: #828282; }
.guate-tbl2 td.guate-tbl-val textarea{ width: 100%; height: 126px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:10px; resize:none; outline:none; }
.guate-tbl2 td.vertical-top{ vertical-align:top; }
.guate-tbl2 .guate-tbl-val.guate-tbl-button input{ width:calc(100% - 89px); }

.guate-tbl3{ table-layout:fixed; border-collapse: collapse; }
.guate-tbl3 > tbody > tr > td{ border:1px solid #c3c5cd; padding: 0 10px 0 10px; height:26px;}
.guate-tbl3 td.guate-tbl-tit{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #000000; text-align:left; }
.guate-tbl3 td.guate-tbl-grey{ font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.1px; color: #000000; text-align:left; background-color: #e9e9e9; }
.guate-tbl3 td.guate-tbl-val input{ float:left; width: 100%; height: 25px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:0 10px; }
.guate-tbl3 td.guate-tbl-val div.guate-tbl-label{ float:left; padding:0 10px; font-size: 13px; font-weight: 400; line-height: 25px; letter-spacing: 0.1px; color: #000000; }
.guate-tbl3 td.guate-tbl-val textarea{ width: 100%; height: 126px; background-color: #F9F9F9; border: 1px solid #E6E6E6; border-radius: 5px; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; color: #070707; padding:10px; resize:none; outline:none; }
.guate-tbl3 td.vertical-top{ vertical-align:top; }
.guate-tbl3 .guate-tbl-val.guate-tbl-button input{ width:calc(100% - 89px); }