@charset "utf-8";
/* ==========================================================================
RESET 
========================================================================== */
* {font-family:'Roboto',Roboto,'NotoSans-regular','Nanum Barun Gothic', Tahoma, 'AppleGothic', sans-serif;}
body {background: #1a1a38 !important;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;font-family:'Roboto','NotoSans'}
body,input,textarea,select,button,table{font-size:13px;color:#333;outline:none}
body,html{height:100%;background: #eee;overflow: auto;}
h2{font-family:'Roboto','NotoSans'}
img,fieldset{border:0;vertical-align:middle}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none;}
a:hover,a:active,a:focus{text-decoration:none} 
caption{visibility:hidden;padding:0;margin:0;height:0}
button{border:0;padding:0;background:transparent;cursor:pointer;*overflow:visible;font-family:'Roboto','NotoSans'}
input{border:0;padding:0;background:transparent;*overflow:visible;}
input[type="file"]{cursor:pointer}
select,label{cursor:pointer}
/* ==========================================================================
COMMON
========================================================================== */
/* 스크롤 디자인 */
::-webkit-scrollbar {width: 6px; height: 12px;} /* 두께값 */
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {display: block; width: 12px;height: 12px; background: url() rgb(231, 234, 236);} /* 위아래 화살표 영역 */
::-webkit-scrollbar-track {background: rgb(231, 234, 236);} /* 스크롤 배경 */
::-webkit-scrollbar-thumb {background: rgb(196, 196, 196);} /* 스크롤 휠 */
#wrap {width: 100%;height: 100%;background: #eee;}
.btn {border-radius: 0;outline: none !important;} 
.gray-bg {background: #eee;}
input:-webkit-autofill, input:-internal-autofill-selected {box-shadow: 0 0 0 1000px white inset;-webkit-box-shadow: 0 0 0 1000px white inset;}
/* ==========================================================================
DEV RESET
========================================================================== */
.dx-dropdowneditor-input-wrapper {font-size: 13px;}
.dx-texteditor.dx-editor-outlined {height: 33px !important;border-radius: 0 !important;border-color: #d2d2d2 !important;}
/* .dx-textarea.dx-texteditor.dx-editor-outlined {height: auto !important;} */
.scen-wrap .dx-textarea.dx-texteditor.dx-editor-outlined {height: 109px !important;}
#login-wrap > .nx-logo .dx-texteditor.dx-editor-outlined {border: none;}
.dx-texteditor-input {min-height: 31px !important;}
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused, .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {background-color: #4c42c7 !important}
/* ==========================================================================
LOGIN
========================================================================== */
#login-wrap {position: relative;height: 100%;}
#login-wrap.log-bg {background-color: #4c42c7;}
.nx-logo {padding: 30px;padding-bottom: 0;text-align: left;}
.nx-logo-in {width: 160px;float: right;}
.nx-logo .custom-item {overflow: hidden;}
.nx-logo .custom-item > img {margin: 7.5px 0 7.5px 8px;}
.nx-logo .custom-item > img, .nx-logo .custom-item .product-name {float: left;}
.nx-logo .custom-item .product-name {width: calc(100% - 26px) !important}
.nx-logo > select {float: right;outline: none;width: 120px;border: none;padding: 9px 10px;appearance: none;-moz-appearance: none;-webkit-appearance: none;background: url('../images/arrow_down.png') no-repeat #fff 100px 50%;}
.login-box {position: absolute;width: 440px;height: 460px;top: 50%;left: 50%;margin: -245px 0 0 -220px;background: #fff;box-sizing: border-box;text-align: center;}
.login-box > .lg-header {margin: 77px 0 58px;}
.lg-content {width: 250px;margin: auto;}
.lg-content > .info-write > .in-txt {box-sizing: border-box;border: 1px solid #c1c1c1;width: 200px;margin-bottom: 10px;padding: 8px;font-size: 13px;}
.lg-content > .set-btn {width: 200px;margin: 0 auto;display: inline-block;}
.lg-content > .set-btn > .lg-btn {display: block;width: 200px;background: #4c42c7;font-weight:bold;padding: 9px;color: #fff;}
.lg-content > .set-btn > .typeset {overflow: hidden;margin-bottom: 20px;display: flex;justify-content: space-between;align-items: center;}
.lg-content > .set-btn > .typeset > .left {float: left;}
.lg-content > .set-btn > .typeset > .right {float: right;}
.lg-content  .info-write .auth_wrap{position: relative;}
.lg-content  .info-write .in-txt{box-sizing: border-box;border: 1px solid #c1c1c1;width: 200px;margin-bottom: 10px;padding: 8px;font-size: 13px;}
.auth-text{position: absolute;right: 32px;top: 9px;font-size: 13px;color: #727773;font-style: normal;}
.sm-btn{border-radius: 2px; border: 1px solid #A8A8A8;background: #FFF;padding: 3px 6px;color: #555;font-size: 12px;}
#id-rmb {display: none;}
#id-rmb + label {display: inline-block;cursor: pointer;background: url('../images/checkbox_empty.png') no-repeat 0;line-height: 16px;padding-left: 20px;}
#id-rmb:checked + label {background: url('../images/checkbox_check.png') no-repeat 0;line-height: 16px;padding-left: 20px;}
.lg-footer {position: absolute;bottom: 0;left: 0;right: 0;margin-bottom: 25px;}
.lg-fail-txt {font-size: 12px;color: #cd372d;text-align: center;padding: 10px 0;}
/* ==========================================================================
HEADER
========================================================================== */
.header {background: #fff;padding: 21px;}
.user-area {float: right;cursor: auto;display: flex;align-items: center;}
.user-area .nation-set {display: inline-block;width: 18px;height: 18px;margin-top: -2px;vertical-align: middle;margin-right: 10px;cursor: pointer;padding: 20px 15px;}
.user-area .user {margin-right: 5px;}
.user-area .connect {font-size: 12px;color: #707070;cursor: pointer;border-radius: 50px;padding: 4px 13px;box-sizing: border-box;background-color: #eeeeee;height: 26px;line-height: 16px;}
.user-area .connect:hover {background-color: #d2d2d2;}
.user-area .user-info {padding-left: 5px;}
.user-area .ko {background: url('../images/lan_kor.png') no-repeat 50% 50%;}
.user-area .en {background: url('../images/lan_us.png') no-repeat 50% 50%;}
.user-area .cn {background: url('../images/lan_cn.png') no-repeat 50% 50%;}
.user-area .ja {background: url('../images/lan_ja.png') no-repeat 50% 50%;}

/* ==========================================================================
INFO POPUP
========================================================================== */
.pop-container {height: 100%;}
.pop-conts {height: calc(100% - 72px);}
.pop-header, .pop-footer {overflow: hidden;} 
.pop-header,.pop-footer {padding: 20px;}
.pop-conts-in {padding: 0 20px 20px;}
.pop-header h1 {display: inline;color: #1a1a38;font-size: 15px;font-weight: bold;line-height: 30px;}
.pop-layer.info .pop-footer {width: 100%;text-align: right;}
.pop-layer.open .pop-footer {position: unset;top: unset;left: unset;width: 100%;text-align: right;}
.pop-footer {background: #eee;}
.pop-layer.info {position: absolute;top: 50%;left: 50%;width: 430px;background-color: #fff;z-index: 10;}
.pop-layer.open {display: block;position: unset;top: unset;left: unset;width: 1080px;height: 781px;background-color: #fff;}
.pop-wrap.info-wrap {display: none;position: fixed;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}
.pop-wrap .bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: .5;filter: alpha(opacity=50);}
.pop-wrap .pop-layer.info {display: block;}
.btn-layersave {display: inline-block;height: 32px;width: 80px;text-align: center;padding: 0 14px 0;background-color: #4c42c7;font-size: 13px;color: #fff;line-height: 32px;}
.btn-layersave:hover {background-color: #4d4d6a;color: #fff;}
.btn-layercancel {display: inline-block;height: 34px;width: 80px;text-align: center;padding: 0 14px 0;background-color: #fff;font-size: 13px;color: #333;line-height: 32px;border: 1px solid #d2d2d2;}
.btn-layercancel:hover {background: #ccc;color: #333;border: 1px solid #d2d2d2;}
.btn-layerClose.close-icon {background: url('../images/close.png') no-repeat 50% 50%;float: right;display: inline-block;width: 30px;height: 30px;}
.btn-layerClose.close-icon:hover {background: url('../images/close_hover.png') no-repeat 50% 50%;}
/* tab */
.pop-layer.info .pop-conts-in {position: relative;clear: both;background: #fff;height: 390px;}
.pop-layer.info .pop-conts-in > div > h2 {font-size: 12px;color: #999;padding-top: 0;}
.pop-layer.info .pop-tab-area {position: relative;}
.pop-layer.info .pop-tab-area > .line {position:absolute;border-bottom: 1px solid #4c42c7;color: #fff;top: 37px;right: 0;width: calc(100% - 240px);}
.pop-layer.info .pop-conts-in > .pop-tab-area {height: 100%;background: #fff;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn {overflow: hidden;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn li {float: left;width: 120px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn li a {display: block;border: 1px solid #d2d2d2;border-bottom: 1px solid #4c42c7;border-left: 0;margin-left: -1px;text-align: center;font-size: 13px;color: #333333;padding: 9px 0px;font-weight: 600;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn li a.first:first-child {margin-left: 0;border-left: 1px solid #d2d2d2;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn li a.on.first:first-child {margin-left: 0;border-left: 1px solid #4c42c7;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-btn li a.on {color: #4c42c7;border: 1px solid #4c42c7;border-bottom: 1px solid #fff;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont {overflow: hidden;margin-top: 40px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont > div {width: 100%;display: none;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont > div.on {display: block;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont h2 {font-size: 12px;color: #999;border-bottom: 1px solid #ccc;width: 40%;padding-left: 8px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont h2.top-area {margin-top: 20px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont ul li {overflow: hidden;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont h2, .pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont div {float: left;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt {line-height: 43px;height: 44px;border-bottom: 1px solid #ccc;width: 57%;margin-left: 3%;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt.left {float: left;border-bottom: 0;width: calc(100% - 20px);line-height: 42px;height: 43px;margin-left: 0;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .btn-edit {float: left;cursor: pointer;background: url(../images/modify.png) no-repeat 50% 50%;display: inline-block;width: 20px;height: 43px;border-bottom: 0px;float: right;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .two-line {padding: 8.5px 0px 8.5px 5px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .write .info-txt {border-bottom: 0;margin-left: calc(3% - 8px);padding: 0 0 0 8px;width: 59%;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="text"] {width: 100%;padding: 0 8px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="password"] {width: 100%;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="text"], .pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="password"] {border-bottom: 1px solid #ccc;padding: 0 8px;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="text"]:focus, .pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .info-txt input[type="password"]:focus {border-bottom: 1px solid #4e43cb;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .name-edit {width: 57%;margin-left: 3%;outline: none;border-bottom: 1px solid #ccc;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .under-line {border-bottom: 1px solid #4c42c7;}
.pop-layer.info .pop-conts-in > .pop-tab-area > .pop-tab-cont .pw-error {margin-top: 40px;margin-right: 10px;color: #f54d59;font-weight: 600;text-align: right;}

.pop-layer.chat .pop-conts-in .search-area .sch-set {margin-bottom: 10px;display:flex;position: relative;}
.pop-layer.chat .pop-conts-in .search-area .title {color: #999;width: 106px;line-height: 19px;}
.pop-layer.chat .pop-conts-in .search-area .title.oneline{display: flex;flex-flow: column;justify-content: center;}
.pop-layer.chat .pop-conts-in .search-area .sch-set .data.template-1 {width: calc(100% - 106px);height: 70px !important;}
.pop-layer.chat .pop-conts-in .search-area .sch-set .data.template-2 {width: calc(100% - 106px);height: 36px !important;}
.pop-layer.chat .pop-conts-in .search-area .sch-set .conter-wrap{position: absolute;right: 10px;bottom: 10px;color:#aaa;font-size:12px;}

/* ==========================================================================
NAVIGATION
========================================================================== */
/* 1단 */
.navbar-minimalize {position: absolute;left: 235px;top: 20px;background: url(../images/fold_icon.png) no-repeat 0;width: 20px;height: 20px;cursor: pointer;-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;transition-property: transform;}
.mini-navbar .navbar-minimalize{transform:rotate(90deg);}
.navbar-minimalize.skt{display: none}
.nav > li {cursor: pointer;border-bottom: 1px solid #4d4d6a;}
.nav li a {font-weight: normal;} 
.nav > li > .depth1 {display :block;background: #1a1a38;/*padding: 14px 20px 14px 20px*/padding: 10px !important;color: #fff;}
.nav > li > .depth1:hover, .nav > li > .depth1:focus {background: #1a1a38 !important;}
.nav > li > .depth1:hover {background:#4c42c7 !important;}
.nav > li > .depth1 > .nv-txt {vertical-align: middle;margin-left: 20px;width: 136px;}
.main-ic.reco-list {background: url('../images/menu5.png') no-repeat;display: inline-block;vertical-align: middle;width: 24px;height: 24px;}
.main-ic.reco-history {background: url('../images/menu9.png') no-repeat;display: inline-block;vertical-align: middle;width: 24px;height: 24px;}
.main-ic.reco-stats {background: url('../images/menu3.png') no-repeat;display: inline-block;vertical-align: middle;width: 24px;height: 24px;}
.main-ic.reco-usage {background: url('../images/menu2.png') no-repeat;display: inline-block;vertical-align: middle;width: 24px;height: 24px;}
/* 2단 */
/* .nav > li > .nav-scd {display: none;} */
.nav > li > .nav-scd > li {line-height: 40px;}
.nav > li > .nav-scd > li:last-child {margin-bottom: 0;}
.nav > li > .nav-scd > li > .depth2 {color: #fff;background: #4c42c7;padding: 0 10px;border-radius: 0 !important;}
.nav > li > .nav-scd > li > .depth2.on {color: #fff;background: #3d359b;padding: 0 10px}
.nav > li > .nav-scd > li.on > .depth2 {background: #3d359b;vertical-align: middle;}
.nav > li > .nav-scd > li > .depth2 > .nv-txt-scd {padding-left: 44px;width: 150px;}
.nav > li > .nav-scd > li > .depth2:hover {background: #3d359b !important;}
/* 3단 */
.nav > li > .nav-scd > li > .nav-thd {background: #3d359b;}
.nav > li > .nav-scd > li > .nav-thd > li {height: 40px;line-height: 40px;}
.nav > li > .nav-scd > li > .nav-thd > li:last-child {margin-bottom: 0;}
.nav > li > .nav-scd > li > .nav-thd > li > .depth3 {padding: 0;padding-left: 54px;color: #9999a9;}
.nav > li > .nav-scd > li > .nav-thd > li > .depth3:hover {color: #fff;background: #3d359b;}
.nav > li > .nav-scd > li > .nav-thd > li > .depth3.on {color: #fff;}
body.mini-navbar .navbar-default .nav li a.depth2 span.fa.arrow {display: block;}

.nav.nav-second-level.collapse[style] {height: auto;}
/* ==========================================================================
CONTAINER
========================================================================== */
.container {width: 100%;height: 100%;margin-top: 0;padding: 0;}
.container.monitor {height:  calc(100% - 60px);}
.container-body {height: 100%;background: none!important;padding: 0 20px 20px;overflow: auto;margin-top: 0;box-sizing: border-box;}
.container-body.wall {padding: 0;height: 100%;}
.container-body.report {padding: 0;}
.container-body.main {padding: 0;}
.container-body.scenario {padding-left: 0;padding-bottom: 0;}
/* .container > .content {min-width: 1000px;height: 100%;padding: 0 20px 0 0;}
.container > .content > .txt {display: inline-block;line-height: 100px;height: 100px;width: 150px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -75px;font-size: 16px;} */
/*.container-body > .content {min-width: 1000px;height: 100%;padding: 0 20px 0 0;}
.container-body > .content > .txt {display: inline-block;line-height: 100px;height: 100px;width: 150px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -75px;font-size: 16px;}
 .container h2 {display: block;font-size: 13px;color: #333;padding: 15px 0 15px 0;font-weight: 600;} */
.container-body h2 {display: inline-block;font-size: 15px;color: #333;padding: 15px 0 15px 0;font-weight: 600;}
.content-frame{width: 100%;height: 100%;border: 0;}
.container-body .mnt-set-btn {background: url("../images/monitoring_setting.png") 50% 50% no-repeat;float: right;display: block;width: 44px;height: 44px;line-height: 44px;margin-right: 10px;}
.container-body .mnt-set-btn:hover {background: url("../images/monitoring_setting_hover.png") 50% 50% no-repeat;}
/* 트리영역 */
.tree-area {float:left;height:100%;background: #f5f5f5;box-shadow: 1px 1px 4px #e4e4e4;width:300px;margin-right: 20px;}
.tree-area > .tab-area {background: #fff;}
.tree-area > .tab-area > .tab-btn {overflow: hidden;}
.tree-area > .tab-area > .tab-btn li {float: left;width: 25%;}
.tree-area > .tab-area > .tab-btn  li a {display: block;border-bottom: 2px solid #9999a9;text-align: center;font-size: 13px;color: #9999a9;padding: 13px 0 12px;font-weight: 600;}
.tree-area > .tab-area > .tab-btn  li a.on {color: #4c42c7;border-bottom: 2px solid #00c484;}
.tree-area > .tab-area > .tab-cont {overflow-y: auto;}
.tree-area > .tab-area > .tab-cont > div {display: none;}
.tree-area > .tab-area > .tab-cont > #tenant {display: block;}
.tree-area > .tab-area > .tab-cont > .dx-treeview-with-search > .dx-treeview-search {border: 0; border-bottom: 1px solid #d2d2d2;}
.tree-area > .tab-area > .tab-cont .dx-treeview-item-with-checkbox .dx-checkbox {top: 9px;left: 26px;}
.tree-area > .tab-area > .tab-cont .dx-treeview-item-with-checkbox .dx-checkbox .dx-checkbox-icon {width: 16px;height: 16px;}
.tree-area > .tab-area > .tab-cont .dx-treeview-item-with-checkbox .dx-checkbox-checked .dx-checkbox-icon {font-size: 10px;line-height: 17px;}
.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {margin-left: -3px !important;}
.dx-treeview-toggle-item-visibility:before {margin-left: -3px !important;}
/* 슬라이드 박스 */
.slide-box {background: #fff;width: 100%;}
.updown-btn {position: absolute;right: 20px;top: 70px;z-index: 999;cursor: pointer;}
.updown-btn:hover {background:#fafafa;cursor: pointer;}
/* ==========================================================================
FOOTER
========================================================================== */
.main-footer {clear: both;margin-top: 30px;color: #bdbdbd;font-size: 12px;}
.main-footer.wall {margin-top: 0;height: 5%;padding-left: 1%;padding-right: 1%;}
.main-footer .ver {color: #999;margin-left: 16px;}
/* ==========================================================================
ERROR PAGE
========================================================================== */
.gray-bg.error {background: #eee;}
.container .content.error-wrap {padding-top: 60px;height: 250px;margin-top: -125px;position: absolute;left: 0;right: 0;top: 50%;text-align: center;} 
.container .content.error-wrap .main-txt {font-size: 39px;color: #4c42c7;margin-top: -4px;}
.container .content.error-wrap .sub-txt {font-size: 16px;font-weight: 600;color: #333;margin-top: 6px;}
/* ==========================================================================
템플릿 수정 19-07-26
========================================================================== */
/* 네비 */ 
body.mini-navbar #page-wrapper {margin: 0 0 0 50px;background: #eee;}
body.mini-navbar .navbar-static-side {width: 50px;height: 100%;}
/* body.mini-navbar .navbar-static-side::after {content:"";background: #1a1a38;position: absolute;width: 50px;height: 100vw;margin-bottom: calc(-50vw + 50%);} */
.mini-navbar .nav-second-level {left: 50px;width: 220px;}
.mini-navbar li.active .nav-second-level {left: 46px;}
.navbar-static-side {background: #1a1a38;height: 100%;top: 61px;width: 240px;height: calc(100% - 61px);overflow: auto;}
.metismenu .arrow {float: right;line-height: 2;}
.metismenu .depth2 .arrow {line-height: 40px;}
.metismenu .arrow.sub {line-height: 3.1;}
.nav > li a.active {border-left: 4px solid #4c42c7;background: #1a1a38 !important;}
.nav > li.active {border-left: 0;background: #1a1a38 !important;}
.nav > li > a {color: #fff;padding: 10px;}
.nav > li > a i {margin-right: 20px;}
.mini-navbar .nav-second-level {padding: 0;}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {color: #fff;background: #1a1a38;}
.mini-navbar .navbar-default .nav li a span.fa.arrow.sub {display: block;}
/* 상단 */
.border-bottom {position: fixed;left: 0;right: 0;top: 0;z-index: 999999;height: 61px;}
.btn-primary {position: absolute;left: 232px;top: 5px;}
.navbar-header .logo {position: absolute;top: 21px;left: 30px;}
.navbar-header .logo.ccaas{font-size: 24px;color: #000;top: 16px;font-weight: bold;letter-spacing: -3px;} 
.container-body.main.en .navbar-header .logo.ccaas {letter-spacing: -1px;font-size: 22px;}
.container-body.main.cn .navbar-header .logo.ccaas {font-family:'Microsoft YaHei';letter-spacing: 0px;top: 13px;}
.navbar-top-links li {border-bottom: 0;line-height: 38px;}
.btn-primary {background-color: transparent;border-color: transparent;}
.btn-primary .fa-bars {color: #4a4a4d;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {background-color: transparent;border-color: transparent;box-shadow: none;}
.nav.navbar-right > li > a {display: inline-block;padding: 0;}
.white-bg {height: 60px;}
/* 컨텐츠 */
#wrapper {height: 100% !important;margin-top: 0;background: #f3f3f4;overflow: hidden;}
#page-wrapper {padding: 0;margin: 0 0 0 240px;height: 100%;}
.wrapper-content {width: 100%;padding: 0;overflow: hidden;height: calc(100% - 61px);margin-top: 61px !important;/*position: absolute;top: 0;*/} /* 191107 NORA 주석 추후 화면 확인 */
.wrapper-content.tree-pd-left {padding: 0 20px 0 0;}
.top-none {margin-top: 0 !important;}
.bot-none {margin-bottom: 0 !important;}

/* 폰트 및 아이콘 */
.fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}
.metismenu .plus-minus,
.metismenu .plus-times {float: right;}
.metismenu .glyphicon.arrow:before {content: "\e079";}
.metismenu .active > a > .glyphicon.arrow:before {content: "\e114";}
.metismenu .fa.arrow:before {content: "\f105";}
.metismenu .active > a > .fa.arrow:before {content: "\f107";}
.metismenu .ion.arrow:before {content: "\f3d2";}
.metismenu .active > a > .ion.arrow:before {content: "\f3d0";}
.metismenu .fa.plus-minus:before,
.metismenu .fa.plus-times:before {content: "\f067";}
.metismenu .active > a > .fa.plus-times {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.metismenu .active > a > .fa.plus-minus:before {content: "\f068";}
.metismenu .collapse {display: none;}
.metismenu .collapse.in {display: block;}
.metismenu .collapsing {position: relative;height: 0;overflow: hidden;-webkit-transition-timing-function: ease;transition-timing-function: ease;-webkit-transition-duration: .35s;transition-duration: .35s;-webkit-transition-property: height, visibility;transition-property: height, visibility;}
.dx-toolbar-text-auto-hide .dx-button .dx-icon {color: #4c42c7;}

/* DEV ui 수정 */ /* 20191021 Nora 추가 */
.dx-datagrid .dx-link {color: #4c42c7;}
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link {color: #4c42c7;}
.dx-datagrid-table-fixed {white-space: nowrap;}
.dx-checkbox-checked .dx-checkbox-icon {color: #4c42c7;}
.dx-checkbox.dx-state-focused .dx-checkbox-icon {border: 1px solid #4c42c7;}
.dx-datagrid-focus-overlay {border: 2px solid #4c42c7;}
.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content {color: #4c42c7;}
.dx-calendar-navigator-previous-view.dx-button .dx-icon, .dx-calendar-navigator-previous-month.dx-button .dx-icon, .dx-calendar-navigator-next-view.dx-button .dx-icon, .dx-calendar-navigator-next-month.dx-button .dx-icon {color: #4c42c7;}
.dx-checkbox-container {height: auto !important;}
.dx-datagrid.dx-datagrid-borders > .dx-datagrid-pager {margin-top: 0;border-top: 0;}
.dx-datagrid-rowsview .dx-select-checkboxes-hidden > tbody > tr > td > .dx-select-checkbox {display: block !important;}
.dx-widget input, .dx-widget textarea {font-family: 'Roboto',Roboto,'NotoSans-regular','Nanum Barun Gothic', Tahoma, 'AppleGothic', sans-serif !important;}

/* DEV */
.dx-datagrid-addrow-button .dx-icon-edit-button-addrow:before {color: #4c42c7;}
.dx-icon-column-chooser:before {color: #4c42c7;}
.dx-toolbar-after .dx-toolbar-item {padding: 0 0 0 7px !important;}
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date { box-shadow: inset 0 0 0 1px #4c42c7, inset 0 0 0 1000px #4c42c7;}
.dx-calendar-cell.dx-calendar-selected-date,.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {color: #fff;-webkit-box-shadow: inset 0 0 0 1000px #4c42c7;box-shadow: inset 0 0 0 1000px #4c42c7;font-weight: normal;}
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date {-webkit-box-shadow: inset 0 0 0 1px #4c42c7, inset 0 0 0 1000px #4c42c7;box-shadow: inset 0 0 0 1px #4c42c7, inset 0 0 0 1000px #4c42c7;}
/* DEV 팝업 */
#callMonitorWindow .dx-popup-draggable .dx-popup-title{border:0;}
#callMonitorWindow .dx-toolbar-label .dx-toolbar-item-content > div {font-weight: bold;}
#callMonitorWindow .dx-popup-title .dx-closebutton .dx-icon{color: #999;font-size:24px;}
#callMonitorWindow .dx-popup-bottom.dx-toolbar{background: #eee;}
#callMonitorWindow .dx-button-text{font-size:13px;}
#callMonitorWindow .dx-popup-bottom .dx-button{min-width: 80px;background: #4c42c7;color: #fff;border: 0;border-radius:0;}

/* grid checkbox */ /* 20200213 Nora 추가 */
.dx-checkbox.dx-state-hover .dx-checkbox-icon {border: 1px solid #4c42c7;}
.dx-checkbox.dx-state-focused .dx-checkbox-icon {border: 1px solid #4c42c7;}
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-radiobutton-icon:before,
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-radiobutton-icon:before,
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-checkbox-icon,
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-checkbox-icon {border-color: #4c42c7;}
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-radiobutton-icon:before,
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-focused .dx-radiobutton-icon:before,
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-checkbox-icon,
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-focused .dx-checkbox-icon {border: 1px solid #4c42c7;}
.dx-treeview-item-with-checkbox.dx-state-focused > .dx-checkbox .dx-checkbox-icon {border: 1px solid #4c42c7;}
.dx-checkbox-checked .dx-checkbox-icon {font: 14px/1 DXIcons;color: #4c42c7;font-size: 16px;text-align: center;line-height: 16px;}
.dx-checkbox-indeterminate .dx-checkbox-icon {font: 14px/1 DXIcons;color: #4c42c7;font-size: 14px;text-align: center;line-height: 14px;}

/* login 언어선택 */
.dx-popup-wrapper > .dx-overlay-content {border-radius :0 !important;/* max-height: none !important; */}
.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content > .custom-item > img {margin-right: 10px;}
.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content > .custom-item > img, .dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content > .custom-item > .product-name {float: left;}
.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content > .custom-item > .product-name {width: calc(100% - 28px);}
.nav.navbar-top-links.navbar-right {position: absolute;overflow: hidden;right: 0;height: 100%;bottom: 10px;margin-right: 0;}
#main-user-area {height: 100%;}
/* header 언어선택 */
.dx-context-menu .dx-menu-items-container {margin-top: 20px;}
.dx-menu-base .dx-menu-item-content .dx-menu-item-text {padding: 0px 25px 5px 23px;}
.dx-menu-base .dx-menu-item-content {padding: 6px 5px 7px;}
/* grid 스크롤 수정 */
.dx-scrollbar-horizontal.dx-scrollbar-hoverable {height: 15px !important;}
.dx-scrollbar-horizontal .dx-scrollable-scroll {height: 15px !important;}
/* .dx-scrollbar-hoverable .dx-scrollable-scroll.dx-state-invisible .dx-scrollable-scroll-content {background-color: rgba(0, 0, 0, 0.3);} */

/* bootstrap 수정 */
.btn.active, .btn:active {-webkit-box-shadow: none;box-shadow: none;}


/* #grid .dx-datagrid .dx-datagrid-content > table > tbody > tr > td:nth-child(7)> .dx-invalid-message .dx-overlay-wrapper .dx-overlay-content 
{
    transform: translate(96px, 24px) !important;
	} */

/*.user .dx-datagrid .dx-datagrid-content >td:nth-child(7)> .dx-invalid-message .dx-overlay-wrapper .dx-overlay-content{transform: translate(96px, 224px) !important;}*/ 


/**
 * [forest] 추가
 *	- Nora 매니저님 수정 요청할 것.
 */

/* callMonitorWindow */
#callMonitorWindow ul.infos {
	padding: 10px;
	font-size: 17px;
}

#callMonitorWindow li {
	padding: 5px 15px;
}

#callMonitorWindow li span.title {
	color: #999999;	
}

#callMonitorWindow li span.content {
	float: right;
	color: #333333;
}


#callMonitorWindow div.spinner-container {
    height: 40px;
    padding: 5px 25px 10px 25px;
}

#callMonitorWindow div.spinner-container span.status {
    position: relative;
	float: right;
	top: 8px;
	color: #4c42c7;
	font-weight: bold;
}

/* audio-spinner */
#callMonitorWindow div.audio-spinner {
	position: relative;
	top: 20px;
}

#callMonitorWindow div.audio-spinner span {
	display: block;
	bottom: 0px;
	width: 9px;
	height: 5px;
	/* background: #9b59b6; */
	background: #4c42c7;
	position: absolute;
	animation: audio-wave 2.5s infinite ease-in-out;
}

#callMonitorWindow div.audio-spinner span:nth-child(2) {
	left: 11px;
	animation-delay: 0.2s;
}

#callMonitorWindow div.audio-spinner span:nth-child(3) {
	left: 22px;
	animation-delay: 0.4s;
}

#callMonitorWindow div.audio-spinner span:nth-child(4) {
	left: 33px;
	animation-delay: 0.6s;
}

#callMonitorWindow div.audio-spinner span:nth-child(5) {
	left: 44px;
	animation-delay: 0.8s;
}

#callMonitorWindow div.audio-spinner span:nth-child(6) {
	left: 55px;
	animation-delay: 1.0s;
}

#callMonitorWindow div.audio-spinner span:nth-child(7) {
	left: 66px;
	animation-delay: 1.2s;
}

#callMonitorWindow div.audio-spinner span:nth-child(8) {
	left: 77px;
	animation-delay: 1.4s;
}

#callMonitorWindow div.audio-spinner span:nth-child(9) {
	left: 88px;
	animation-delay: 1.6s;
}

@keyframes audio-wave {
/*effect is to animate the height of each span from 5px to 30px*/
/*translateY makes Y axis move down to give the effect that it is growing from the center*/
    /* 0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:40px;transform:translateY(20px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;} */

    0% {height:5px;transform:translateY(0px);}
    25% {height:40px;transform:translateY(20px);}
    50% {height:5px;transform:translateY(0px);}
    100% {height:5px;transform:translateY(0px);}
}

/* //spinner */

#callMonitorWindow div.footer {
    background-color: #EDEDED;
    border-top: 1px solid #E0E0E0;
    padding: 15px 20px;
    position: relative;
}

#callMonitorWindow div.footer:after {
	content: "";
	display: block;
	clear: both;
}

#callMonitorWindow div.close-button {
	width: 60px;
    padding: 8px;
    text-align: center;
    background-color: #3F51B5;
    cursor: pointer;
    color: #FFFFFF;
    float: right;
}

#callMonitorWindow div.close-button:hover {
	background-color: #2337A8;
}