@charset "utf8";

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(../../assets/fonts/material/MaterialIcons-Regular.eot);
    src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../assets/fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../assets/fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../assets/fonts/material/MaterialIcons-Regular.ttf) format("truetype")
}

select {
    display: flex;
    padding-top: 0;
    align-items: center;
    cursor: pointer;
    min-height: 32px;
    font-size: .8125rem;
    padding-right: 28px;
    border: 1px solid #d3d8e0;
    flex: 1;
    border-radius: 4px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper:before {
    color: #999;
    border-color: #999 transparent transparent;
    border-style: solid;
    content: "";
    transition: transform .3s linear;
    border-width: 4px 4px 0;
    top: calc(50% - 2px);
    right: 8px;
    margin: 0;
    position: absolute;
    left: auto;
}

body *:not(.material-icons) {
    font-family: 'Noto Sans KR', 'Apple SD Gothic', sans-serif !important;
}

#wrap {overflow:hidden;}
.mask {display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:#222; opacity:.3; }

.top-nav {position:fixed; left:0; top:0; width:100%; /*min-width:calc(1024px);*/ height:40px; background:#FFF; transition:.3s;}
.logo-header {display:block; width:70px; height:16px; background:url('../images/logo_header.jpg') no-repeat 0 0/100%; overflow:hidden; text-indent:-999px;}

.left-nav {position:fixed; z-index:2; left:0; top:40px; width:50px; height:calc(100% - 40px); background:#FFF; overflow:hidden; transition:.3s;}
.left-nav .tit-left-wrap {position:relative; display:flex; border-width:0;}
.left-nav .bot-wrapper {display:flex; justify-content:flex-start; align-items:center; flex-wrap:nowrap; height:60px;}
.left-nav .tit-left-nav {height:20px;}
.left-nav .tit-left-nav h2 {opacity:0; width:0; margin-left:0;}
.left-nav .lnb {opacity:0; height:calc(100vh - 40px - 70px - 50px);}
.left-nav #toggleMenuLeft {display:none;}

.lnb .-lnb-wrapper nav.-lnb .-btn {height:40px; border-radius:0 !important; justify-content:space-between;}
.lnb .-lnb-wrapper nav.-lnb li.open- > .-btn {font-weight:500;}
.lnb .-lnb-wrapper nav.-lnb li.open- > .-btn .material-icons {transform:rotate(-180deg);}
.lnb .-lnb-wrapper nav.-lnb li.open- > ul {padding-left:0;}
.lnb .-lnb-wrapper nav.-lnb li.open- > ul > li > .-btn {padding-left:28px;}
.lnb .-lnb-wrapper nav.-lnb li.open- > ul > li > ul > li > .-btn {padding-left:48px;}
.lnb .-btn > * + .material-icons {padding-left:0;}
.lnb ul li.-active > .-btn {background:#E2E6EB !important;}

.container {height:calc(100vh - 40px - 70px - 36px); margin-left:50px; margin-top:110px; margin-bottom:36px; overflow:auto; transition:.3s; white-space:nowrap;}
.container-inner {min-width:calc(1024px - 50px); min-height:calc(100vh - 70px - 40px - 36px);}
.container-header {position:fixed; z-index:1; left:0; top:40px; width:calc(100% - 50px); min-width:calc(1024px - 50px); transform:translateX(50px); transition:.3s;}
.bot-nav {position:fixed; left:0; bottom:0; width:calc(100% - 50px); /*min-width:calc(1024px - 50px);*/ height:36px; transform:translateX(50px); transition:.3s;}
.bot-nav .-btn {height:20px;}

.openMenuLeft .left-nav {width:290px;}
.openMenuLeft .left-nav .lnb {opacity:1; transition:.3s .3s;}
.openMenuLeft .left-nav .tit-left-wrap {justify-content:space-between; }
.openMenuLeft .left-nav .tit-left-wrap:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#D3D8E0;}
.openMenuLeft .left-nav .tit-left-nav {}
.openMenuLeft .left-nav .tit-left-nav h2 {opacity:1; width:auto; margin-left:8px; transition:.3s .3s;}
.openMenuLeft .left-nav #toggleMenuLeft {display:block; position:relative; left:auto; top:auto; transform:rotate(-180deg);}
.openMenuLeft .left-nav .bot-wrapper {}

.openMenuLeft .container {margin-left:50px;}
.openMenuLeft .container-header {width:calc(100% - 50px); transform:translateX(50px);}
.openMenuLeft .bot-nav {width:calc(100% - 50px); transform:translateX(50px);}
.openMenuLeft.minWindow .container {margin-left:50px;}
.openMenuLeft.minWindow .container-header {width:calc(100% - 50px); transform:translateX(50px);}
.openMenuLeft.minWindow .bot-nav {width:calc(100% - 50px); transform:translateX(50px);}

.fixedMenuLeft #fixedMenuLeft .material-icons {transform:rotate(-180deg);}
.fixedMenuLeft.openMenuLeft .container {margin-left:290px;}
.fixedMenuLeft.openMenuLeft .container-header {width:calc(100% - 290px); transform:translateX(290px);}
.fixedMenuLeft.openMenuLeft .bot-nav {width:calc(100% - 290px); transform:translateX(290px);}

.slide-left {z-index:10000; position:fixed; left:0; top:0; width:290px; height:100%; background:#FFF; transform:translate(-100%, 0); opacity:0; transition:.3s .1s;}
.slide-left .slide-left-head {height:40px;}
.openSlideLeft {overflow:hidden;}
.openSlideLeft .slide-left {opacity:1; transform:translate(0, 0);}
.openSlideLeft .mask {display:block;}

.ci-icon-book:before {content:''; width:12px; height:12px; background:url('../images/material_custom/book.svg') no-repeat center center/contain;}
.ci-icon-filter:before {content:''; width:12px; height:12px; background:url('../images/material_custom/filter.svg') no-repeat center center/contain;}
.ci-icon-asset:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/Asset Management_24px.svg') no-repeat center center/contain;}
.ci-icon-cost:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/Cost Management_24px.svg') no-repeat center center/contain;}
.ci-icon-governance:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/Governance_24px.svg') no-repeat center center/contain;}
.ci-icon-alertNow:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/AlertNow_24px.svg') no-repeat center center/contain;}
.ci-icon-monitoring:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/Monitoring_24px.svg') no-repeat center center/contain;}
.ci-icon-chatBot:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/Chatbot_24px.svg') no-repeat center center/contain;}
.ci-icon-devOs:before {content:''; width:12px; height:12px; background:url('../images/OpsNow_Product/DevOS_24px.svg') no-repeat center center/contain;}
.ci-icon-check:before {content:''; width:12px; height:12px; background:url('../images/material_custom/check-circle-24-px.svg') no-repeat center center/contain;}
.ci-icon-check-error:before {content:''; width:12px; height:12px; background:url('../images/material_custom/alert-error-24-px.svg') no-repeat center center/contain;}

.-btn {padding: 6px 12px;}
.-btn.start- {justify-content:flex-start;}
.-btn.small- {padding:0 4px;}

.-position-absolute-h-center {left:50%; transform:translateX(-50%)}

.layer-filter {position:absolute; left:50%; top:100%; transform:translateX(-50%); min-width:100%; background:#FFF;}
.layer-filter > div > div:hover {background:rgba(0, 0, 0, 0.08);}
.dropDown-wrap > .-btn {height:24px;}
.dropDown-wrap .dropDown-list {display:none; position:absolute; left:0; top:110%;}
.dropDown-wrap .dropDown-list.up {top:-140px;}

.dropDown-list {border-radius:4px !important; overflow:hidden;}
.dropDown-list .-btn {height:40px !important; border-radius:0 !important; justify-content:center;}

/*table.-table {table-layout:fixed;}*/
table.-table .-btn {min-width:24px;}
table.-table.no-border-top th {border-top:none;}

.img-item {width:200px;}
.img-wrapper {width:100%; height:120px; border-radius:5px;}

.-border-dashed {border-style:dashed; border-width:1px;}

.slide-left .-btn {height:40px; border-radius:0 !important;}
.slide-left .-btn:hover {background:#D3D8E0 !important;}
.slide-left .-active {background-color:#D3D8E0 !important;}

#toggleSlideLeft {height:auto; padding:2px;}
#closeSlideLeft {height:auto; padding:2px;}
#toggleMenuLeft {height:auto; padding:2px;}
#fixedMenuLeft {height:auto; padding:2px;}

.login-logo-wrap {height:50px;}
.login-cont-wrap {height:calc(100% - 50px);}
.login-wrap { align-items:normal; width:470px;}
.login-left {width:360px; background:url('../images/img_login_left.png') no-repeat right 40px bottom 40px/206px;}
.login-wrap.s2 {width:400px;}
.login-wrap.s2 .form-wrap {width:100%;}
.login-wrap.s3 {width:800px;}
.login-wrap.s3 .form-wrap {width:100%;}

.-border-radius-1 {border-radius:4px !important}
.text-left- {text-align:left;}
.text-center- {text-align:center;}
.text-right- {text-align:right;}
.white-space-normal {white-space:normal;}

.pop-wrap {display:none;}
.popOpen {overflow:hidden;}
.popOpen .pop-wrap {position:fixed; z-index:998; left:0; top:0; width:100%; height:100%;}
.popOpen .pop-wrap .pop-mask {position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; background:#222; opacity:.3;}
.popOpen .pop-wrap .pop-cont {position:absolute; z-index:1000; left:50%; top:50%; transform:translate(-50%, -50%); background:#FFF;}

.w-390 {width:390px;}
.w-400 {width:400px;}
.w-500 {width:500px;}
.mw-800 {max-width:800px;}
.-flex-grow-0 {flex-grow:0 !important}
.-flex-grow-1 {flex-grow:1 !important}

.top-left .-btn {height:auto; padding:2px;}
.top-right .-btn {height:auto; padding:2px;}
.top-right .-btn .ci {padding:0;}

.-wrapper-tile .-header {padding:0 20px;}
.-wrapper-tile .-header.no-border- {border:none;}
input[type=checkbox].-toggle:checked + label:hover:before {background-color:#075ECA !important}

.-summary-grid.s2 {width:440px;}

.-height-dashboard-1 {height:190px;}
.-height-dashboard-2 {height:270px;}
.-width-33 {width:33.33%; flex:0 0 33.33%;}

.-btn.borderless- {background:transparent !important;}

.dashboard-top section {flex:0 0 auto; max-width:436px;}

.-container-resizing {min-width:calc(1024px - 50px); max-width:calc(1440px - 50px);}

.dashboard-layout {display:flex; width:100%; justify-content:space-between;}
.dashboard-layout .layout-col {flex:1;}
.dashboard-layout .layout-col + .layout-col {margin-left:20px;}

.custom-layout {display:flex; width:100%; justify-content:space-between; align-items:stretch;}
.custom-layout .layout-col {flex:1;}
.custom-layout .layout-col + .layout-col {margin-left:20px;}

.select-input-layout {display:flex; width:100%; justify-content:space-between; align-items:stretch;}
.select-input-layout .layout-col:first-child {flex:0 0 30%;}
.select-input-layout .layout-col:last-child {flex:0 0 auto; flex-basis:calc(70% - 8px);}

/*
.dashboard-layout.col-3 .layout-col {flex:1;}
.dashboard-layout.col-3 .layout-col + .layout-col {margin-left:20px;}
.dashboard-layout.col-2 .layout-col {flex:1;}
.dashboard-layout.col-2 .layout-col + .layout-col {margin-left:20px;}*/

.-list-item-height-40 {height:40px;}

.-toggle-button button.selected- .material-icons {color:#FFF !important;}
/*
.-wrapper-tile .-header .material-icons {color:#086ce8 !important;}*/
.-wrapper-tile .-header .-btn.primary- .material-icons {color:#FFF !important;}
.-div-table {table-layout:fixed; padding:12px 0 20px;}
.-div-table .-row-header {width:25%;}

.-splitted-wrap .--btn.splitted- {border-left:none !important;}
.-splitted-wrap>.-btn:first-child {flex:1 1 auto; border-right:none;}

.img-upload .img-item {padding:4px;}
.img-upload .img-item:hover {background:#e2e6eb;}

.link:hover {text-decoration:underline !important;}
.error-bg-color {background:#ffeaec;}
.error-font-color {color:#ff2d47; line-height:1.5;}


.-step {border-bottom:none;}
.-step>.focused- {font-size:14px;}
.-step>* {font-size:14px;}

.line-height-20 {line-height:20px !important;}

.-tag {font-weight:500;}

.fixed-bot-menu {position:fixed; z-index:1; left:0; bottom:36px;}

.top-temp {position:fixed; z-index:1; left:0; top:0; width:100%; height:0; background:#C5E554; transition:.3s;}

.toDown .top-temp {height:50px;}
.toDown .slide-left {top:50px;}
.toDown .top-nav {top:50px;}
.toDown .container-header {top:90px;}
.toDown .left-nav {top:90px;}
.toDown .left-nav .lnb {height:calc(100vh - 40px - 70px - 60px - 50px);}

.toDown .container {margin-top:160px; height:calc(100vh - 40px - 70px - 36px - 50px);}
.toDown .container-inner {min-height:calc(100vh - 70px - 40px - 36px - 50px);}
.toDown .agree-scroll-content {height:calc(100vh - 40px - 70px - 36px - 40px - 50px); overflow-y:auto;}

.custom-select {position:relative; cursor:pointer;}
.custom-select:hover:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#d3d8e0 ;}
.-wrapper-tile .-header .custom-select .material-icons {color:#086CE8 !important;}

input[type=checkbox], input[type=radio] {display:none;}

.custom-tooltip {position:relative;}
.custom-tooltip .tooltip_box {visibility:hidden; opacity:0; position:absolute; top:-28px; left:12px; height:24px; padding:2px 8px; background:#7e8793; border-radius:4px; color:#FFF; font-size:12px; line-height:20px; white-space:nowrap; transition:.3s;}
.custom-tooltip:hover .tooltip_box.open {visibility:hidden; opacity:0;}
.custom-tooltip:hover .tooltip_box.close {visibility:visible; opacity:1;}
.fixedMenuLeft .custom-tooltip:hover .tooltip_box.open {visibility:visible; opacity:1;}
.fixedMenuLeft .custom-tooltip:hover .tooltip_box.close {visibility:hidden; opacity:0;}

#overlay{	
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
100% { 
    transform: rotate(360deg); 
}
}
.is-hide{
display:none;
}

.login-buttom-label{
    width: 126px;
    height: 20px;
    margin: 1px 8px 1px 0;
    font-family: NotoSansKR;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #222;
}

.login-buttom-link{
    width: 52px;
    height: 22px;
    font-family: NotoSansKR;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #086ce8;
  }
  
  .line {
    width: 170px;
    height: 1px;
    background-color: #d3d8e0;
  }

  .line-span {
    width: 28px;
    height: 20px;
    font-family: NotoSansKR;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #7e8793;
    margin:0px 7px 0px 7px;
    text-align: center;
  }
.primary-green-{
    margin-right: 0px !important;
}

.terms-service-policy-span {
    width: 400px;
    height: 40px;
    font-family: NotoSansKR;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #222;
}

.terms-service-policy-span-link {
    color: #086ce8;
  }

.previous-button {
    width: 196px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #d3d8e0;
    background-color: #fff;
}

.previous-button-span {
    height: 20px;
    font-family: NotoSansKR;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #7e8793;
}
.previous-button:hover{
    background:#c4f4e1;
}

.next-button {
    width: 196px !important;
}


.done-span {
    width: 400px;
    height: 150px;
    font-family: NotoSansKR;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #222;
  }

.-toggle-visible-password {
    position: absolute;
}

input[type=checkbox].-toggle-visible:checked+label .-visibleOn {
    display: block
}
input[type=checkbox].-toggle-visible:checked+label .-visibleOff {
    display: none
}
input[type=checkbox].-toggle-visible+label {
    cursor: pointer;
    padding: 0!important
}
input[type=checkbox].-toggle-visible+label:after,input[type=checkbox].-toggle-visible+label:before {
    content: none!important
}
input[type=checkbox].-toggle-visible+label .material-icons {
    font-size: 1rem!important
}
input[type=checkbox].-toggle-visible+label .-visibleOn {
    display: none;
    color: #086ce8!important
}

input[type=checkbox].-toggle-visible+label .-visibleOff {
    display: block;
    color: #b0b6bd!important
}

.-description-warning-div {
    background: #fdf2e5
}

.-description-warning {
    font-size: .75rem;
    font-weight: 400;
    color: #795600 !important;
}

.gnb {
    padding: 12px 16px 12px 14px;
    box-shadow: 0 2px 8px 1px rgba(137, 141, 148, 0.2);
    background-color: white;
    text-align: left;
  }
.path {
    font-size: 18px;
    margin: 0 2px 4px;
    color: #0acd7f;
}
.question {
    float:right
}

.-btn.primary-blue-,
.-btn.primary-blue-~.-btn.splitted- {
  background-color: #086ce8 !important;
  color: #fff !important
}

.-btn.primary-blue-:hover,
.-btn.primary-blue-~.-btn.splitted-:hover {
  background-color: #075eca !important
}

-btn.primary-blue-:active,
.-btn.primary-blue-~.-btn.splitted-:active {
  background-color: #0650ad !important
}