@charset "utf-8"; /* ------------------------- SKT NFV PROJRCT ------------------------- CONTENTS: 1. RESET 2. LAYOUT 2.1 HEADER 2.2 CONTENTS 2.3 FOOTER 3. UI BASE 3.1 TEXT STYLES 3.2 FORM ELEMENTS STYLES 3.3 BUTTON STYLES 4. TAB 4.1 PAGE TAB 4.2 DETAILS TAB 4.3 SECTION TAB 5. CONTENTS 5.1 SEARCH FORM 5.2 GENERAL INFO 6. JQGRID 7. TOPLOGY MAP 8. POPUP UI 9. SELECT POPUP ------------------------- */ @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700); /*------- 1. RESET -------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,input,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,button{ border:0; margin:0; padding:0; font:inherit; vertical-align:baseline; line-height:inherit; } ul,ol,li { list-style:none; } table { border-collapse:collapse; border-spacing:0; } em, i, cite { font-style:normal; } a img { border:none; } button { cursor:pointer; } a, a:visited, a:hover, a:active, a:focus { color:inherit; text-decoration:none; } input, select, button { background:transparent; border:0; margin:0; padding:0; color:#555; vertical-align:middle; box-sizing:border-box; } input[type="text"]::-webkit-input-placehorder { font-size:11px; color:#b1aabc; } input[type="text"]:-ms-input-placehorder { font-size:11px; color:#b1aabc; } input[type="text"]:-moz-input-placehorder { font-size:11px; color:#b1aabc; } textarea { color:#555; box-sizing:border-box; } :focus { outline:none; } /*------- 2. LAYOUT -------*/ html, textarea { font-family:"Roboto", "Tahoma", "Lucida Grande", "Lucida Sans Unicode","Dotum", '돋움', sans-serif; font-weight:400; } body { color:#4e4e4e; } #wrapper { min-width:1640px; background-color:#eef1f4; } #mainContentBody { min-width:1640px; min-height:500px; } #body { width:1620px; margin:0 auto; } #childBody { width:1620px; margin:0 auto; } /*#body.layout { width:1720px;}*/ #header { position:relative; z-index:2; height:40px; background-color:#363d3e; margin-bottom:53px; } #header:after { content:''; display:block; clear:both; } #header h1 { position:absolute; top:2px; left:50%; width:170px; height:20px; background:url('../images/page_logo7.png') no-repeat 9px 0; background-size:19px 19px; margin:7px 0 0 -820px; padding:4px 0 0 37px; font-size:14px; line-height:14px; color:#0dadf1; overflow:hidden; cursor:pointer; } #header h2 { position:absolute; top:0; left:45%; width:180px; height:20px; margin:8px 0 0 -303px; padding:6px 0 0 37px; font-size:13px; line-height:14px; color:#0dadf1; overflow:hidden; } #header .sideWrap { position:absolute; top:0; left:50%; width:209px; margin-left:600px; padding:3px 10px 0 0; font-size:11px; } #header .member { text-align:right; } #header .member a, #header .member span { height:12px; border-right:1px solid #4a5152; line-height:12px; display:inline-block} #header .member .sign { width:84px; height:22px; background:url('../images/btn_singOut.gif') no-repeat; padding-right:16px; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; cursor:pointer; } #header .member .company { width:70px; height:24px; background:url('../images/page_comp.gif') no-repeat; margin:4px 0 0 12px; font-size:0; line-height:0; text-indent:-9999px; display:inline-block; overflow:hidden; cursor:pointer; } #header .mylog { position:relative; height:34px; display:inline-block; } #header .mylog .passReset { position:absolute; z-index:2; top:30px; left:-15px; width:110px; background-color:#363d3e; border:solid 1px #fff; margin-top:1px; padding:5px 0 5px 2px; font-size:11px; color:#fff; text-align:center; display:none; } #header .mylog:hover .passReset { display:block; } #header .status { float:right; margin-top:15px; } #header .status * { vertical-align:middle; } #header .status .time { margin-right:10px; } #header .status .status_link { position:relative; margin-left:10px; display:inline-block; } #header .status .status_link em { position:absolute; right:-7px; bottom:-5px; width:15px; height:15px; background:#e51937; border-radius:15px; color:#fff; line-height:15px; text-align:center; display:inline-block; } #header .status .status_link span { width:23px; height:19px; text-indent:-99999px; display:inline-block; } #header .status .status_link span.trouble { background:url('../images/btn_ico_trouble.gif') left top no-repeat; } #header .status .status_link span.critical { background:url('../images/btn_ico_critical.gif') left top no-repeat; } #header .status .status_link.dashBoard { background-image:url('../images/btn_ico_bg_dashBoard.gif'); } #header .status .status_link.dashBoard span { background:url('../images/btn_ico_dashBoard.gif') left top no-repeat; font-weight:700; color:#494949; } #gnb { width:1045px; height:40px; margin:0 auto; overflow:hidden; } #gnb li { float:left; min-width:50px; height:40px; padding:0 0 5px 0; text-align:center; } #gnb li a { height:40px; padding:0 25px 0 25px; color:#707e80; line-height:37px; display:block; } #gnb li a em { font-family:Roboto; font-size:13px; font-weight:700; color:#707e80; display:block; } #gnb li > div { position:absolute; z-index:6; left:0; right:0; top:40px; width:100%; min-width:1640px; height:50px; background:#fff; border-bottom:1px solid #c2c5c7; display:none; overflow:hidden; box-shadow:0 2px 0 #e3e6e9; } #gnb li > div > ul { width:1640px; margin:0 auto; } #gnb li > div > ul > li { width:auto; height:32px; padding-top:18px; } #gnb li > div > ul > li > a { height:50px; padding:0; } #gnb li > div > ul > li > a em { height:14px; border-left:solid 1px #cfcfcf; padding:0 23px 0 23px; font-size:16px; font-weight:400; color:#777e85; line-height:14px; } #gnb li:hover > div { z-index:10; display:block; } #gnb li:first-child > a, #gnb li:first-child > a em { border-left:0; } /* #gnb > ul > li.on */ #gnb > ul > li.on, #gnb > ul > li:hover { background:url('../images/gnb_bullet.gif') center -9px no-repeat; } #gnb > ul > li:hover > a { border-left-color:none; } #gnb li:hover > a em { color:#80b9c1; } #gnb li.on > a em { color:#fff; } #gnb li.on > a em::before { content:''; width:11px; height:6px; background:url('../images/gnb_bullet.gif') left top no-repeat; margin:-3px 0 0 -11px; vertical-align:middle; display:inline-block; } #gnb li.on > div { display:block; } #gnb div li.on a em { font-weight:700; color:#000; } #gnb div li:hover > a em { color:#000; } #gnb li.dashboard > div ul li:first-child { margin-left:280px; } #gnb li.dashboard.on, #gnb li.dashboard:hover { background:none; } #gnb li.catalog > div ul li:first-child { margin-left:314px; } #gnb li.instance > div ul li:first-child { margin-left:571px; } #gnb li.nfvManage > div ul li:first-child { margin-left:268px; } #gnb li.assurManage > div ul li:first-child { margin-left:762px; } #gnb li.portalManage > div ul li:first-child { margin-left:676px; } #body { position:relative; padding:21px 0 45px 0; } #body::after { content:''; display:block; clear:both; } #body .contents { position:relative; width:1160px; min-height:650px; margin-left:230px; clear:both; } #body[role="full"] .contents { width:1620px; margin:0 auto; } #childBody { position:relative; padding:21px 0 45px 0; } #childBody::after { content:''; display:block; clear:both; } #childBody .contents { position:relative; width:1160px; min-height:650px; margin-left:230px; clear:both; } #childBody[role="full"] .contents { width:1620px; margin:0 auto; } #footer { height:36px; background:#f8f9fb; border-top:solid 1px #dfe2e5; } #footer .copyright { border-bottom:solid 1px #dfe2e5; margin-bottom:-1px; font-family:Roboto; font-size:11px; color:#898d90; line-height:36px; letter-spacing:0.5px; text-align:center; } /*------- 3. UI Base -------*/ a *, button * { cursor:default; pointer-events:none; } select { height:28px; border:1px solid #bcbcbc; border-radius:3px; padding:0 3px; font-size:13px; transition:border-color ease-in-out .15s; } textarea, input[type="text"], input[type="password"] { background:#fff; border:1px solid #bcbcbc; border-radius:3px; padding:5px 7px 6px 7px; font-size:13px; resize:none; transition:border-color ease-in-out .15s; } select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus { border-color:#555; } select:disabled, textarea:disabled, input[type="text"]:disabled, input[type="password"]:disabled, input[type="button"]:disabled { background:#eee !important; border-radius:3px; cursor:no-drop; } /* 필수체크 */ input[required=required], select[required=required],textarea[required=required] { background:#ffffff url('../images/required.gif') 0 0 no-repeat; clear:both; } /* Page title */ .title_area { float:left; width:197px; padding:0 20px 0 13px; } .title_area h1 { margin-top:-7px; font-size:34px; font-weight:300; color:#787c80; text-shadow:1px 1px 0 #fff; letter-spacing:-0.5px; } .text_description { margin-top:3px; font-size:11px; color:#a0a0a0; } #body .title_area + .contents { float:left; margin-left:0; clear:none; } #body .title_area + .pageViewTab { float:left; margin-left:203px; margin-bottom:15px; } #body[role="full"] .title_area { width:403px; } #body[role="full"] .title_area + .pageViewTab { margin:0 !important; } #childBody[role="full"] .title_area { width:403px; } #childBody[role="full"] .title_area + .pageViewTab { float:left; margin:0 !important; } /* Contents section */ .contents h2.contents_title { height:28px; background:url('../images/contents_title_bg.gif') repeat-x 0 bottom; margin-bottom:18px; font-size:16px; font-weight:700; color:#4e4e4e; } .contents h3.sub_title { height:28px; border-bottom:1px solid #d7d7d7; margin-bottom:18px; font-size:14px; font-weight:700; color:#4e4e4e; } .contents .section { position:relative; min-height:350px; background-color:#fff; border:1px solid #c3c9ce; padding:15px; box-sizing:border-box; box-shadow:4px 4px 0 #e0e3e6; } .contents .section:after { content:''; display:block; clear:both; } .contents .section h3.section_title { height:35px; border-bottom:1px solid #dedede; font-size:14px; font-weight:700; line-height:35px; } .contents .section h3.section_title label input { margin-top:-2px; margin-right:10px; } /* Button */ .btn { padding:0 15px; text-align:center; text-decoration:none; display:inline-block; cursor:pointer; box-sizing:border-box; } .btn:disabled { opacity:0.6; cursor:no-drop; } /* Icon Button */ .btn.ico { background-position:0 0; padding:0; font-size:0; line-height:0; overflow:hidden; } .btn.ico.hide { visibility:hidden; } /*Contents Inner Button Style*/ .btn.inner { min-width:130px; height:35px; background-color:#0096d6; border:1px solid #007cb1; border-radius:2px; font-size:13px; color:#ffffff; line-height:33px; letter-spacing:1px; } .btn.small { min-width:auto; height:35px; background-color:#0096d6; border:1px solid #007cb1; border-radius:2px; margin-left:10px; padding:0 25px; font-size:13px; color:#fff; line-height:33px; letter-spacing:0.5px; } /*Page하단 전체 Button Style*/ .contents_btn .btn { position:relative; min-width:130px; height:35px; background-color:#6b787a; border:solid 1px #505c5e; border-radius:2px; font-size:13px; font-weight:400; color:#fff; line-height:33px; letter-spacing:1px; } .contents_btn .btn.dim { background-color:#c7cccc; border:solid 1px #bcc1c2; cursor:default; } .contents_btn .btn.func { background-color:#0096d6; border:solid 1px #007cb1; } .contents_btn .btn.func:disabled { background-color:#c7cccc; border:solid 1px #bcc1c2; cursor:no-drop; } /*이전-다음*/ .contents_btn .btn.ico { width:41px; min-width:41px; height:30px; font-size:0; line-height:0; } .contents_btn .btn.ico:before { display:none; } .btn.ico.prev { background-image:url('../images/btn_page_prev.gif'); } .btn.ico.next { background-image:url('../images/btn_page_next.gif'); } /* Button area */ .contents_btn { position:relative; height:45px; margin-top:25px; text-align:center; overflow:hidden; } .contents_btn * { vertical-align:top; } .contents_btn .edit { display:inline-block; } .contents_btn .edit .btn { margin:0 5px; } .contents_btn .linked { position:absolute; right:0; top:0; } /*right position*/ .contents_btn .linked .btn { margin-left:10px; } .contents_btn .settings { position:absolute; z-index:10; width:200px; height:28px; border:1px solid #aeaeae; border-radius:3px; overflow:hidden; box-sizing:border-box; box-shadow:1px 2px 1px #d4d4d4; } .contents_btn .settings .btn { position:absolute; width:200px; height:30px; border-radius:3px; margin:0; padding:8px 0; font-size:12px; line-height:10px; display:block; cursor:pointer; box-sizing:border-box; transform:translate(0,0); transition:transform 0.5s; } .contents_btn .settings .btn:before { width:100px; height:30px; background:#fff; } .contents_btn .settings .btn:first-child { background:#08c; border-right:1px solid #ebebeb; padding-right:100px; color:#fff; } .contents_btn .settings .btn:first-child:before { left:auto; right:0; } .contents_btn .settings .btn:last-child { background:#919293; border-left:1px solid #ebebeb; padding-left:100px; } .contents_btn .settings .btn:last-child:before { left:0; right:auto; } .contents_btn .settings .btn:first-child.dim { transform:translate(-200px,0); } .contents_btn .settings .btn:last-child.dim { transform:translate(200px,0); } .contents_btn.center { text-align:center; } .contents_btn.center .btn { margin:0 5px; } .wrap_btn { position:relative; overflow:hidden; clear:both; } .wrap_btn > .btn { float:right; } .wrap_btn #addStatus { position:absolute; right:205px; bottom:8px; } /* Information Input Button */ .input_btn { float:right; width:48px; height:25px; background-color:#fff; border:solid 1px #cfcfcf; border-radius:3px; margin:-31px -5px 0 0; padding:0; font-size:12px; font-weight:800; color:#777 !important; line-height:25px; text-align:center; display:block; } .input_btn.close { display:none; } .edit_btn { position:absolute; top:0; right:0; width:48px; height:25px; background-color:#fff; border:solid 1px #cfcfcf; border-radius:3px; margin:-31px -5px 0 0; padding:0; font-size:12px; font-weight:800; color:#777 !important; line-height:25px; text-align:center; display:block; } /* Choice Of Select */ .checkSelect { position:relative; height:26px; border:solid 1px #bcbcbc; border-radius:3px; margin-right:2px; } .checkSelect .tit { height:26px; background:url('../images/ico_option.gif') right center no-repeat; padding-left:11px; line-height:26px; text-align:left; display:block; cursor:default; } .checkSelect .itemList { position:absolute; z-index:90; top:29px; left:-1px; width:100%; background-color:#fff; border:solid 1px #bcbcbc; border-radius:3px; display:none; overflow:hidden; } .checkSelect .itemList ul { height:152px; text-align:left; overflow:auto; } .checkSelect .itemList ul li { position:relative; padding:3px 0 5px 7px; } .checkSelect .itemList ul li:hover { background-color:#f1f1f1; } .checkSelect .itemList label { padding-left:18px; display:block; } .checkSelect .itemList input[type="checkbox"] { position:absolute; top:5px; left:7px; width:13px; height:13px; vertical-align:middle; } .checkSelect .itemList .btnbox { padding:5px 0; text-align:center; } .checkSelect .itemList .btnbox button { width:43%; height:21px; background-color:#aaa; border:solid 1px #999; border-radius:3px; margin:0 1px; padding-bottom:1px; color:#fff; line-height:16px; display:inline-block; } .checkSelect.active { border-color:#555; } .checkSelect.active .itemList { display:block; } /* grid table bottom button */ .grid { position:relative; overflow:hidden; } .grid .wrap_btn { margin-top:10px; } .grid.pager .wrap_btn { position:absolute; right:0; bottom:25px; } /*------- 4. TAB -------*/ /* Page TAB */ .pageNavigation { position:relative; float:left; width:1020px; } .pageNavigation ul { position:relative; z-index:10; text-align:center; display:table; } .pageNavigation ul li { width:6%; font-size:12px; font-weight:700; color:#8e9094; display:table-cell; transition:all 700ms ease-in-out; } .pageNavigation ul li em { width:8px; height:8px; background:#ebebeb; border-radius:50px; margin:0 auto; line-height:8px; text-indent:-99999px; display:block; transition:all 700ms ease-in-out; } .pageNavigation ul li span { margin-top:12px; display:block; } .pageNavigation ul li.prev em { background:#4c4c4c; } .pageNavigation ul li.current { color:#838383; } .pageNavigation ul li.current em { background:#4c4c4c; box-shadow:0 0 0 5px #4c4c4c; } .pageNavigation .progress_bar { position:absolute; left:65px; top:3px; width:895px; height:2px; background:#ddd; } .pageNavigation .progress_bar span { width:0; height:2px; background:#4e4e4e; text-indent:-99999px; display:block; transition:all 700ms ease-in-out; } .layout .pageNavigation { width:auto; } .layout .pageNavigation .progress_bar { position:absolute; left:75px; top:3px; width:900px; height:2px; background:#ddd; } /* Contents List TAB */ .listTab ul { width:1158px; border:solid 1px #c3c9ce; display:table; box-shadow:4px 4px 0 #e0e3e6; } .listTab ul li { width:11%; border-left:solid 1px #363d3e; text-align:center; vertical-align:middle; display:table-cell; } .listTab ul li:first-child { border-left:0; } .listTab ul li a { height:33px; background:none; font-size:14px; color:#363d3e; line-height:31px; display:block; box-sizing:border-box; transition:all .15s linear; } .listTab ul li a:hover { } .listTab ul li:first-child a { margin-left:0; } .listTab ul li.on a { background:#3b6886; color:#fff; } .listTab + .contents { float:left; margin-top:-44px; } /* Contents Details TAB */ .pageViewTab ul { width:750px; border:solid 1px #363d3e; border-radius:2px; margin:-3px 0 5px 0; display:table; } .pageViewTab ul li { width:11%; border-left:solid 1px #363d3e; text-align:center; vertical-align:middle; display:table-cell; } .pageViewTab ul li:first-child { border-left:0; } .pageViewTab ul li a { height:33px; background:none; font-size:14px; color:#363d3e; line-height:31px; display:block; box-sizing:border-box; transition:all .15s linear; } .pageViewTab ul li a:hover { } .pageViewTab ul li:first-child a { margin-left:0; } .pageViewTab ul li.on a { background:#3b6886; color:#fff; } .pageViewTab ul li.dim { cursor:no-drop; } .pageViewTab ul li.dim a { background:#ddd; opacity:0.5; pointer-events:none; } .pageViewTab ul li.type2 a { padding-top:10px; } .pageViewTab.vim ul { width:400px; } .pageViewTab.navi ul li.on a { border:1px solid #4e4e4e; } .pageViewTab + .contents .section[role="full"] { margin:52px 15px 0 15px; } /* Contents Mode TAB */ .pageMode { position:absolute; z-index:10; right:525px; top:16px; text-align:center; display:block; } .pageMode li { position:relative; z-index:1; float:left; min-width:75px; height:30px; border-left:1px solid #dedede; margin-left:-1px; font-size:12px; color:#777e85; line-height:30px; display:block; box-sizing:border-box; } .pageMode li a { display:block; } .pageMode li a { padding:0 15px; } .pageMode li:first-child { margin-left:0; } .pageMode li.on { z-index:2; height:32px; background:#686e6e; border:0; margin:-1px 0; color:#f5f5f5; } .pageMode.create { right:375px; } /* NS Category Contents TAB */ .nsTopologyTab { position:absolute; top:10px; left:15px; height:25px; display:block; overflow:hidden; } .nsTopologyTab li { float:left; height:23px; display:block; } .nsTopologyTab li a { height:23px; background:#f0f0f0; border:1px solid #dedede; margin-left:-1px; padding:0 20px; font-size:10px; font-weight:700; color:#717171; line-height:23px; text-align:center; display:block; } .nsTopologyTab li a.on { background:#4e4e4e; border:solid 1px #4e4e4e; color:#fff; } .nsTopologyTab li:first-child a { border-left:0; border-top-left-radius:3px; margin-left:0; } .nsTopologyTab li:last-child a { border-top-right-radius:3px; } /*------- 5. CONTENTS -------*/ /* Search Form */ .form_search { height:43px; padding-top:2px; font-size:12px; text-align:right; overflow:hidden; } .form_search label { margin-right:6px; } .form_search label span { display:none; } .form_search label input[type="text"] { padding-bottom:7px; } .form_search button { width:29px; height:29px; background:#fcfcfc url('../images/ico_srch.png') no-repeat center center; border:1px solid #bcbcbc; border-radius:3px; text-indent:-99999px; } .form_search dl { display:inline-block; } .form_search dl dt { font-weight:700; } .form_search dl dt, .form_search dl dd { vertical-align:middle; display:inline-block; } .form_search dl dd input { float:left; border-radius:3px 0 0 3px; } .form_search dl dd input + button { width:29px; height:29px; background:#f3f3f3; border:1px solid #ebebeb; border-left:0; border-radius:0 3px 3px 0; text-indent:-99999px; } .form_file label { position:relative; float:right; width:26px; min-width:26px; height:26px; background:#4e4e4e url('../images/upload2.png') no-repeat center center; text-indent:-99999px; } .form_file label:hover { background-color:#4c4c4c; border-color:#4c4c4c; cursor:pointer; } .form_file label input { position:absolute; right:-25px; width:25px; height:25px; visibility:visible; opacity:0; } .form_file .fileValue { float:left; width:150px; min-width:30px; height:29px; margin-right:10px; font-size:12px; color:#949494; line-height:29px; text-overflow:ellipsis; white-space:nowrap; display:block; overflow:hidden; } #configureFileUpload { position:absolute; top:0; right:0; height:auto; } /* Num Of List */ .listNum { width:400px; height:31px; margin-top:-31px; font-size:13px; color:#474d52; } .listNum a { color:#ee4c21; } .listNum .bar { padding:0 3px 0 4px; color:#777; } /* General Info data type - dl */ .infoList { overflow:hidden; } .infoList > .wrap_btn { margin-right:15px; } .infoList dl { position:relative; float:left; width:33.3%; padding:0 15px 15px; box-sizing:border-box; } .infoList dl dt { margin-bottom:5px; font-size:12px; color:#888; } .infoList dl dt::before { content:'-'; width:11px; display:inline-block; } .infoList dl dt em { padding-left:3px; font-weight:700; color:#e83852; } .infoList dl dd { position:relative; font-size:12px; color:#4e4e4e; } .infoList dl dd ol { margin-left:11px; clear:both; } .infoList dl dd input[type="text"], .infoList dl dd select { width:100%; border-radius:3px; } .infoList dl dd textarea { width:100%; height:60px; } .infoList dl dd span { font-size:12px; color:#4e4e4e; display:inline-block; } .infoList dl dd span.unit { position:absolute; right:20px; top:8px; } .infoList dl dd label { margin-right:35px; display:inline-block; } .infoList dl dd label:last-child { margin-right:0; } .infoList dl dd .iconImg { float:left; width:40px; height:40px; margin-right:5px; overflow:hidden; } .infoList dl dd .iconImg img { width:40px; height:40px; } .infoList dl dd .iconImg + select { width:234px; } .infoList dl dd .iconImg .txt { width:35px; height:33px; background-color:#f7f7f7; border:solid 1px #dedede; padding:5px 0 0 3px; font-size:11px; color:#aaa; letter-spacing:1px; text-align:center; display:block; } .infoList dl dd.err_box span.error { position:absolute; right:0; top:-20px; font-size:12px; font-weight:400; color:#cc2424; } .infoList dl dd.err_box select, .infoList dl dd.err_box textarea, .infoList dl dd.err_box input[type="text"] { border-color:#cc2424; } .infoList dl.workflow, .infoList dl.description { float:none !important; width:auto !important; clear:both; } .infoList table { width:99%; border:solid 1px #dedede; } .infoList table th, .infoList table td { border:solid 1px #dedede; } .infoList table th { background-color:#f7f7f7; padding:4px 0 5px 0; } .infoList table td { padding:4px 10px 5px 10px; } .infoList table td input, .infoList table td select { width:100% !important; } .infoList table td input[type="text"] { margin:3px 0 2px 0; } .infoList table td.tit { text-align:center; } .infoList table td.rowadd { padding:0 0 0 7px; text-align:left; vertical-align:middle; } .infoList table td.rowadd a { width:22px; height:24px; background-color:#bcbcbc; border:solid 1px #bcbcbc; border-radius:3px; margin:0 1px; padding-right:1px; font-size:25px; color:#fff !important; line-height:20px; text-align:center; display:inline-block; } /* General Info data type - ul */ .infoData { font-size:14px; color:#888; overflow:hidden; } .infoData li { float:left; width:50%; padding:10px 0; } .infoData li.monitoringArea { width:100%; } .infoData span { display:inline-block; } .infoData span.key { margin-right:5px; } .infoData span.key:after { content:':'; margin-left:5px; display:inline-block; } /* Node List */ .nodeList { position:relative; margin-top:10px; } .nodeList:first-child { margin-top:0; } .nodeList h3 { position:relative; height:19px; margin-bottom:10px; font-size:12px; font-weight:700; color:#4e4e4e; } .nodeList ul { width:195px; min-height:62px; border:1px solid #dedede; padding:1px; overflow:hidden; box-sizing:border-box; } .nodeList ul li { position:relative; float:left; width:100%; background:transparent; padding:10px; font-size:12px; overflow:hidden; cursor:pointer; box-sizing:border-box; } .nodeList ul li:hover { background-image:url('../images/grid_on.gif'), url('../images/grid_on.gif'), url('../images/grid_on.gif'), url('../images/grid_on.gif'); background-position:left top, right top, left bottom, left top; background-repeat:repeat-x, repeat-y; cursor:pointer; } .nodeList ul li.dim:hover { background:none; cursor:no-drop; } .nodeList ul li.dim::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#4e4e4e; display:block; opacity:0.6; } .nodeList ul li.check .thumb_data { background:url('../images/ico_nodeList_checked.png') no-repeat right 8px; background-size:20px 20px; } /* popup에 nodeList와 section Topology 영역의 nodeList 와 공통 스타일 적용 가능 */ .nodeList ul li.check .thumb_data span.name { max-width:85px; } .nodeList div.wrap_btn { width:160px; height:20px; border:1px solid #dedede; padding:5px 10px; } .nodeList div.wrap_btn .btn { width:18px; height:18px; text-indent:-99999px; display:block; overflow:hidden; } .nodeList div.wrap_btn .btn.add { float:right; background-image:url('../images/ico_plus.gif'); } .nodeList div.wrap_btn .btn.delete { float:left; background-image:url('../images/ico_minus.gif'); } .nodeList div.wrap_btn + ul { width:182px; border-top:0; } /* Node List Thumbnail */ .thumb_data::after { content:''; display:block; clear:both; } .thumb_data p { position:relative; width:38px; height:38px; font-size:0; display:table-cell; } .thumb_data p img { width:100%; height:100%; } .thumb_data p .function { position:absolute; left:0; bottom:0; width:38px; font-size:10px; color:#fff; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .thumb_data span.name { max-width:110px; padding-left:10px; font-size:12px; color:#959595; vertical-align:middle; white-space:nowrap; text-overflow:ellipsis; display:table-cell; overflow:hidden; } .thumb_data span.instance { position:absolute; right:-7px; bottom:-5px; width:20px; height:20px; background:#21a9e1; border:2px solid #fff; border-radius:20px; font-size:11px; color:#fff; line-height:16px; text-align:center; box-sizing:border-box; } /* data Table */ .dataTable, .dataTable table { width:100%; } .dataTable th, .dataTable td { padding:11px 8px; text-align:center; vertical-align:middle; } .dataTable td { border:1px solid #e4e7e9; font-size:14px; } .dataTable td p.inner { margin-top:4px; } .dataTable td p.inner:first-child { margin-top:0; } .dataTable td em { color:#000; } .dataTable td input[type="text"] { width:90%; margin:0 6px; box-sizing:border-box; } .dataTable td textarea { width:90%; margin:6px; } .dataTable td .txtOrange { color:#ff5a00; } .dataTable thead th { background:#f4f4f4; border-top:solid 1px #e1e4e7; border-bottom:solid 1px #717b7d; font-size:13px; font-weight:bold; color:#000; letter-spacing:1px; } .dataTable thead th:first-child { border-left:solid 1px #e1e4e7; } .dataTable thead th:last-child { border-right:solid 1px #e1e4e7; } .dataTable tbody tr:hover td { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom; background-repeat:repeat-x; background-color:#fff; } .dataTable tbody tr:hover td:first-child { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom, left top; background-repeat:repeat-x, repeat-x, repeat-y; } .dataTable tbody tr:hover td:last-child { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom, right top; background-repeat:repeat-x, repeat-x, repeat-y; } .dataTable thead tr.subtit th { background-color:#7f7f7f; } .dataTable td .grade { position:relative; margin:0 auto; } .dataTable td .grade a { width:25px; height:24px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin:1px 2px 0 2px; font-size:19px; color:#fff !important; line-height:20px; text-align:center; display:inline-block; } .dataTable.reverse td { padding:0; } .dataTable.reverse td p.inner { height:40px; border-top:1px solid #d7d7d7; margin-top:0; padding:0 6px; line-height:36px; } .dataTable.reverse td p.inner:first-child { border-top:0; } .dataTable.reverse td p.inner input { width:90%; margin:0; line-height:12px; } .dataTable.threshold td { position:relative; } .dataTable.threshold td .slider_vertical { position:relative; width:10px; background:#d7d7d7; border-radius:3px; } .dataTable.threshold td .slider_vertical .ui-slider-range { position:absolute; bottom:0; width:inherit; background:#21a9e1; border-radius:3px; } .dataTable.threshold td .slider_vertical .ui-slider-handle { position:absolute; width:20px; height:20px; background:#21a9e1; border:2px solid #fff; border-radius:20px; margin-left:-10px; margin-bottom:-10px; box-sizing:border-box; } .dataTable.threshold td .tooltip_box { position:absolute; z-index:10; right:105px; top:-50px; background:#2b303a; border-radius:10px; padding:20px 30px; display:none; } .dataTable.threshold td .tooltip_box::after { content:''; position:absolute; left:-24px; top:50%; border-style:solid; border-width:15px 12px 15px; border-color:transparent #2b303a transparent transparent; margin-top:-15px; display:block; } .dataTable + .wrap_btn { margin-top:10px; } /* Section > infoList */ .infoList[role="view"] { padding-top:15px; } .infoList[role="view"] dl { padding-bottom:50px; } .infoList[role="view"] dl dt { font-weight:bold; } .infoList[role="view"] dl dd { padding-left:11px; } .infoList[role="view"] dl:last-child { padding-bottom:15px; } .infoList[role="view"] dl input[type="text"], .infoList[role="view"] dl input[type="password"], .infoList[role="view"] dl select { width:97%; } .infoList[role="view"] dl.subnet, .infoList[role="view"] dl.iconInfo, .infoList[role="view"] dl.interface, .infoList[role="view"] dl.connectPint { float:none !important; width:auto !important; clear:both; } .infoList[role="view"] dl.url input, .infoList[role="view"] dl.description textarea { width:98.9%; } .infoList[role="view"] dl.enabled, .infoList[role="view"] dl.auth_id, .infoList[role="view"] dl.access_id, .infoList[role="view"] dl.login_id, .infoList[role="view"] dl.function{ clear:both; } .section[role="topology"] #topologyArea .dataInfo .infoList dl dd select, .section[role="topology"] #topologyArea .dataInfo .infoList dl dd input[type="text"] { width:100%; } .section[role="topologyManage"] .infoList dl.category { width:60%; clear:none; } .section[role="topologyManage"] .infoList dl.iconInfo dd { margin-bottom:10px; } .section[role="topologyManage"] .infoList table { width:auto; } .section[role="topologyManage"] .infoList table th { width:233px; } .section[role="topologyManage"] .infoList table td { text-align:center !important; vertical-align:middle; } .section[role="topologyManage"] .infoList table td .iconImg { float:none; width:40px; height:auto; margin:6px auto 5px auto; font-size:0; line-height:0; display:block; } .section[role="topologyManage"] .infoList table td .iconImg img { width:auto; max-width:40px; height:auto; max-height:40px; } .section[role="topologyManage"] .infoList table td input[type="file"] { width:222px !important; border:solid 1px #cacaca; border-radius:3px; margin:1px -5px; padding:3px; font-size:11px; } /* Section > List */ .section[role="list"] { padding:15px 25px; } .section[role="list"] .grid + .wrap_btn { position:absolute; right:25px; bottom:25px; } /* Severity - Color */ .severity1 {background-color:#ff0000 !important; } .severity2 {background-color:#ffc000 !important; } .severity3 {background-color:#fffc00 !important; } .severity4 {background-color:#00a8ff !important; } .severity5 {background-color:#00c400 !important; } .severity6 {background-color:#e9e9e9 !important; } /* Event List - Life Cycle, Fault Management */ .eventList { position:relative; background-color:#fff; border:solid 1px #c3c9ce; margin:75px 15px 0 15px; padding:40px 15px 15px 15px; box-shadow:4px 4px 0 #e0e3e6; } .eventList h2 { position:absolute; top:-50px; left:0; height:25px; font-size:30px; font-weight:300; color:#787c80; text-shadow:1px 1px 0 #fff; letter-spacing:-0.5px; } .eventList h2 + .choice { left:100px !important; } .eventList .caption { height:25px; font-size:16px; font-weight:500; color:#3b6886; text-align:center; } .eventList .caption + .choice { left:85px !important; } .eventList .update { position:absolute; top:15px; left:15px; } .eventList .update button { width:75px; height:20px; background-color:#f58026; border:solid 1px #e96500; border-radius:3px; font-size:11px; color:#fff; line-height:12px; display:block; box-shadow:0 1px 0 #d4d4d4; } .eventList .update button:disabled { background-color:#aaa; border:solid 1px #a2a2a2; opacity:0.6; cursor:no-drop; } .eventList .choice { position:absolute; top:19px; left:0; font-size:12px; } .eventList .choice label { margin-right:7px; } .eventList .choice input { vertical-align:top; } .eventList .grid { margin-top:0; overflow:hidden; } .eventList .grid table { background-color:#fff; } .eventList .grid table td { position:relative; height:14px; font-size:13px !important; vertical-align:middle; overflow:hidden; } .eventList .grid .severity1, .eventList .grid .severity2, .eventList .grid .severity3, .eventList .grid .severity4, .eventList .grid .severity5, .eventList .grid .severity6 { position:absolute; top:0; left:0; width:100%; height:100%; padding-top:11px; text-indent:0; text-align:center !important; display:block; } .eventList .grid .severity1 em, .eventList .grid .severity2 em, .eventList .grid .severity3 em, .eventList .grid .severity4 em, .eventList .grid .severity5 em, .eventList .grid .severity6 em { position:absolute; top:50%; width:100%; margin-top:-11px; text-align:center; display:block; } .eventList .severityType { position:absolute; top:18px; right:18px; } .eventList .severityType:after { content:''; display:block; clear:both; } .eventList .severityType li { float:left; margin-left:10px; font-size:13px; } .eventList .severityType li .tit { width:13px; height:13px; border-radius:8px; margin:-3px -1px 0 0; font-size:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .eventList .severityType li.type1 .tit { background-color:#ff0000; } .eventList .severityType li.type2 .tit { background-color:#ffc000; } .eventList .severityType li.type3 .tit { background-color:#fffc00; } .eventList .severityType li.type4 .tit { background-color:#00a8ff; } .eventList .severityType li.type5 .tit { background-color:#00c400; } .eventList .severityType li.type6 .tit { background-color:#e9e9e9; } .eventList .severityType2 { position:absolute; top:-28px; right:100px; } .eventList .severityType2:after { content:''; display:block; clear:both; } .eventList .severityType2 li { float:left; margin-left:10px; font-size:13px; } .eventList .severityType2 li .tit { width:13px; height:13px; border-radius:8px; margin:-3px -1px 0 0; font-size:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .eventList .severityType2 li.type1 .tit { background-color:#ff0000; } .eventList .severityType2 li.type2 .tit { background-color:#ffc000; } .eventList .severityType2 li.type3 .tit { background-color:#fffc00; } .eventList .severityType2 li.type4 .tit { background-color:#00a8ff; } .eventList .severityType2 li.type5 .tit { background-color:#00c400; } .eventList .severityType2 li.type6 .tit { background-color:#e9e9e9; } .eventList .instype1 { padding-left:0; } .eventList .instype2 { background:url('../images/ico_depth.png') 4px 1px no-repeat; padding-left:15px; } .eventList .instype3 { background:url('../images/ico_depth.png') 11px 1px no-repeat; padding-left:22px; } .eventList .instype4 { background:url('../images/ico_depth.png') 18px 1px no-repeat; padding-left:29px; } .eventList .instype5 { background:url('../images/ico_depth.png') 25px 1px no-repeat; padding-left:36px; } .eventList .txtShort { height:13px; text-overflow:ellipsis; white-space:nowrap; text-indent:0; display:inline-block; overflow:hidden; } .eventList .ui-jqgrid-bdiv { max-height:560px !important; overflow:hidden; overflow-y:scroll; } .eventList .ui-jqgrid-hdiv { background-color:#f4f4f4; } .eventList .ui-jqgrid-hbox { margin-right:18px; } .eventList .ui-jqgrid-btable tr:nth-child(odd) td { background-color:#f8fafc; } .eventList .ui-jqgrid-btable tr:hover td { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom; background-repeat:repeat-x; background-color:#f9f9f9; } .eventList .ui-jqgrid-btable tr:hover td:first-child { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom, left top; background-repeat:repeat-x, repeat-x, repeat-y; } .eventList .ui-jqgrid-btable tr:hover td:last-child { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom, right top; background-repeat:repeat-x, repeat-x, repeat-y; } .eventList[role="fault"] { border:0; margin:0; padding:0; box-shadow:none; } .eventList[role="fault"] .update { top:0; left:0; } .eventList[role="fault"] .choice { top:4px; left:0; } .eventList[role="fault"] .severityType { top:3px; right:3px; } .eventList[role="fault"] .severityType2 { top:3px; right:3px; } /* Create Assurance, Auto Scaling Setting */ .paramName { position:relative; z-index:2; float:left; width:25%; margin-bottom:20px; text-align:center; display:block; } .paramName dt { background:#f4f4f4; border:solid 1px #e1e4e7; border-bottom:solid 1px #717b7d; padding:11px 20px; font-size:13px; font-weight:bold; color:#000; letter-spacing:1px; } .paramName dd { border:solid 1px #d7d7d7; border-top:0; padding:11px 10px; font-size:14px; color:#000; } .paramName dd select, .paramName dd input[type="text"] { width:100%; } .paramInfo { float:right; width:75%; padding-bottom:20px; } .paramInfo .dataTable { width:auto; padding-left:15px; } .paramInfo .dataTable table { margin-top:-1px; } .paramInfo .dataTable table:first-child { margin-top:0; } .paramInfo .dataTable select, .paramInfo .dataTable input[type="text"] { width:100%; margin:0; color:#000; } .paramInfo .dataTable .rowadd { text-align:center; } .paramInfo .dataTable .rowadd a { width:23px; height:24px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin:0 2px; font-size:25px; color:#fff !important; line-height:20px; text-indent:0; text-align:center; vertical-align:middle; display:inline-block; } .paramInfo .dataTable .rowadd a:first-child { line-height:24px; } .paramBtnbox { padding:10px 0 30px 0; text-align:center; clear:both; } .paramBtnbox:after { content:''; display:block; clear:both; } .paramBtnbox .btn { min-width:190px; height:30px; background-color:#ffeee4; border:solid 1px #ffb386; border-radius:3px; margin:0 auto; font-size:13px; font-weight:700; color:#ff6000; line-height:26px; text-align:center; display:inline-block; box-shadow:1px 2px 1px #e2e2e2; } .paramList { width:100%; clear:both; } .paramList .dataTable a.name { text-decoration:underline; } .paramList .dataTable a.name:hover { color:#ff6f00; } .paramList .dataTable select, .paramList .dataTable input[type="text"] { width:100%; margin:0; } .paramList .dataTable .nodata span { background:url('../images/ico_noData.png') left center no-repeat; padding:30px 0 30px 30px; font-weight:bold; color:#888; line-height:100px; display:inlin-block; } .paramList .dataTable tr:hover td.nodata { background:none; } .paramList .dataTable ul { margin:0 -8px; } .paramList .dataTable ul li { border-top:solid 1px #ddd; padding:8px; } .paramList .dataTable ul li:first-child { border-top:0; padding-top:0; } .paramList .dataTable ul li:last-child { padding-bottom:0; } .paramList .btn_delete { min-width:36px; height:26px; background-color:#f6f6f6; border:solid 1px #ccc; border-radius:3px; padding:0 10px; line-height:26px; display:block; } .paramList .capacityInfo { text-align:left; } .paramList .capacityInfo li { border-top:0 !important; padding:3px 8px 0 8px !important; } .paramList .capacityInfo li::before { content:'-'; width:9px; display:inline-block; } .paramList .capacityInfo li:first-child { padding-top:0 !important; } .paramList .capacityInfo li .tit { color:#888; } .paramList .capacityInfo li .tit::after { content:':'; padding-left:4px; display:inline-block; } .section[role="assurance"] { margin:52px 15px 0 15px !important; } .section[role="assurance"] .paramName { margin-bottom:60px; } .section[role="assurance"] .paramName dl { float:left; width:33%; margin-right:-1px; } .section[role="assurance"] .paramName dl:first-child { width:67%; } .section[role="assurance"] .paramInfo .dataTable table:nth-child(2) tbody tr:first-child:hover td:last-child { background:none; } .section[role="assurance"] .paramInfo .dataTable table:nth-child(2) tbody tr:first-child:hover td:nth-last-of-type(2) { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-repeat:repeat-x, repeat-x, repeat-y; background-position:left top, left bottom, right top; } .section[role="assurance"] .paramInfo .dataTable table:nth-child(2) tbody.whole tr:hover td { background:none !important; } .section[role="assurance"] .paramBtnbox { position:absolute; z-index:2; top:112px; left:15px; width:388px; padding:0; } .section[role="assurance"] .paramBtnbox .btn { min-width:0; width:100%; } .section[role="assurance"] .paramBtnbox .btn span { background:url('../images/btn_ico_threshold.png') left center no-repeat; padding-left:18px; } .section[role="assurance"] .paramBtnbox .btn.update { float:left; width:66%; } .section[role="assurance"] .paramBtnbox .btn.reset { float:right; width:32%; background-color:#efefef; border:solid 1px #cacaca; color:#888; } .section[role="assurance"] .paramList { border-top:dashed 1px #cacaca; padding-top:20px; } .section[role="assuranceVNF"] { margin:52px 15px 0 15px !important; } .section[role="assuranceVNF"] .notify { margin-bottom:15px; } .section[role="assuranceVNF"] .notify li { margin-bottom:5px; font-size:12px; color:#777; } .section[role="assuranceVNF"] .notify li::before { content:'-'; width:11px; display:inline-block; } .section[role="assuranceVNF"] .dataTable select, .section[role="assuranceVNF"] .dataTable input[type="text"] { width:100%; margin:0; } .section[role="assuranceVNF"] .dataTable .rowadd { text-align:left; } .section[role="assuranceVNF"] .dataTable .rowadd a { width:23px; height:24px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin:1px 2px 0 2px; font-size:25px; color:#fff !important; line-height:20px; text-align:center; display:inline-block; } .section[role="scaling"] { background:url('../images/scaling_txt.gif') 15px -77px no-repeat #fff; margin:52px 15px 0 15px !important; } .section[role="scaling"] .paramName { left:6%; width:20%; margin-bottom:60px; } .section[role="scaling"] .paramInfo { width:74%; } .section[role="scaling"] .paramList .dataTable table tbody tr:first-child:hover td:first-child, .section[role="scaling"] .paramList .dataTable table tbody tr:first-child:hover td:nth-child(2) { background:none; } .section[role="scaling"] .paramList .dataTable table tbody tr:first-child:hover td:nth-child(3) { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-repeat:repeat-x, repeat-x, repeat-y; background-position:left top, left bottom, left top; } .section[role="scaling"] .paramList .dataTable table tbody.whole tr:hover td { background:none !important; } .section[role="scaling"] .paramBtnbox { background:url('../images/scaling_txt.gif') left 24px no-repeat; border-top:dashed 1px #cacaca; border-bottom:dashed 1px #cacaca; margin-bottom:20px; padding:20px 0; } .section[role="scaling"] .paramBtnbox .btn { height:37px; margin:0 5px; font-size:16px; } .section[role="scaling"] .paramBtnbox .btn:disabled { background-color:#eaeaea; border:solid 1px #aaa; color:#555; cursor:no-drop; } .section[role="scaling"] .paramReset { position:absolute; left:6%; top:112px; width:312px; margin-left:12px; } .section[role="scaling"] .paramReset .btn { width:100%; height:30px; background-color:#f7f7f7; border:solid 1px #cacaca; border-radius:3px; font-size:13px; font-weight:700; color:#999; line-height:26px; text-align:center; display:inline-block; } .section[data-type="view"] input[type="text"] { height:28px; border:0; font-size:14px; color:#000; text-align:center; } .section[data-type="view"] input[type="text"]:disabled { background-color:#fff !important; cursor:text; } /* VIM Management */ .section[role="vimManageWrite"] .infoList[role="view"] dl { padding-bottom:33px; } .section[role="vimManageWrite"] .infoList[role="view"] dl dd { padding-left:0; } .section[role="vimManageWrite"] .infoList[role="view"] dl.enabled { float:left; clear:none; } .section[role="vimManageWrite"] .infoList[role="view"] dl.category { width:66.6%; } .section[role="vimManageWrite"] .infoList[role="view"] dl.category input[type="text"] { width:63.1%; margin-left:7px; } .section[role="vimManageWrite"] .infoList[role="view"] dl.category select { width:34%; } .section[role="vimManageWrite"] .infoList[role="view"] dl.category .checkSelect { float:left; width:34%; } .vimInfoBox { position:relative; min-height:30px; border-top:dashed 1px #dedede; margin:0 10px; padding:30px 0 10px 0; } .vimInfoBox h2 { display:none; } .vimInfoBox .btn { position:absolute; top:30px; right:0; width:150px; height:27px; background-color:#fff4ed; border:solid 1px #feb68a; border-radius:3px; font-size:12px; font-weight:700; color:#ff6000; line-height:25px; text-align:center; display:block; } .vimInfoBox .text { position:absolute; top:30px; margin: 0 0 0 590px; width:350px; height:27px; font-size:12px; font-weight:700; line-height:25px; text-align:center; display:block; } .vimInfoBox .tabMenu {} .vimInfoBox .tabMenu:after { content:''; display:block; clear:both; } .vimInfoBox .tabMenu li { float:left; margin-left:5px; } .vimInfoBox .tabMenu li:first-child { margin-left:0; } .vimInfoBox .tabMenu li a { width:100px; height:25px; background-color:#f7f7f7; border:solid 1px #cfcfcf; border-radius:3px; font-size:12px; color:#777; line-height:25px; text-align:center; display:block; } .vimInfoBox .tabMenu li[aria-selected="true"] a { background-color:#777; font-weight:700; color:#fff; } .vimInfoBox .contbox { display:none; overflow:hidden; } .vimInfoBox .contbox:after { content:''; display:block; clear:both; } .vimInfoBox .contbox .grid { margin-top:5px; } .vimInfoBox .contbox .grid .ui-jqgrid, .vimInfoBox .contbox .grid .ui-jqgrid-view { width:1108px; } .vimInfoBox .contbox .grid .ui-jqgrid-hdiv { position:relative; z-index:2; margin-bottom:-2px; border:0; border-bottom:solid 1px #717b7d; } .vimNetworkNode { border:solid 1px #cfcfcf; margin-top:5px; } .vimNetworkNode:after { content:''; display:block; clear:both; } .vimNetworkNode .nodeList { float:left; } .vimNetworkNode .nodeList ul { border:0; border-right:dashed 1px #cacaca; } .vimNetworkNode .nodeData { position:relative; z-index:2; float:left; width:860px; background-color:#fff; border-left:dashed 1px #cacaca; margin-left:-1px; padding:10px 25px; } .vimNetworkNode .nodeData h3 { height:27px; border-bottom:solid 1px #dedede; margin:30px 0 15px 0; font-size:14px; font-weight:700; color:#666; } .vimNetworkNode .nodeData h3:first-child { margin-top:10px; } .vimNetworkNode .nodeData dl { width:50%; padding:0 14px 25px 10px; } .vimNetworkNode .nodeData dd table th { vertical-align:middle; } .vimNetworkNode .nodeData dd table td { padding:4px 5px 5px 5px; text-align:center; vertical-align:middle; } .utilization { position:relative; border:solid 1px #cfcfcf; margin-top:5px; padding:50px 0; text-align:center; } .utilization span { background:url('../images/utilization_col_line.gif') no-repeat 75px 50px; padding-top:30px; padding-left:95px; display:inline-block; } .utilization span em { width:150px; height:41px; background:#fcfcfc; border:1px solid #dedede; font-size:12px; font-weight:700; color:#4e4e4e; line-height:41px; text-align:center; text-overflow:ellipsis; white-space:nowrap; display:block; overflow:hidden; } .utilization span small { font-size:12px; font-weight:normal; color:#999; vertical-align:top; display:inline-block; } .utilization span small::before { content:':'; width:11px; margin-left:5px; display:inline-block; } .utilization > ul { border-top:dashed 1px #cacaca; margin-top:50px; padding:50px 0 0 75px; display:block; } .utilization > ul:first-child { border-top:0; margin-top:0; padding-top:0; } .utilization ul { overflow:hidden; } .utilization ul > li { background:url('../images/utilization_row_line.gif') repeat-y 0 0; overflow:hidden; } .utilization ul > li > span { float:left; display:block; } .utilization ul > li:first-child > span, .utilization ul > li:first-child > h2 > span { background:url('../images/utilization_line_first.gif') repeat-x 0 -28px !important; } .utilization ul > li:last-child { background:none; } .utilization ul > li:last-child > span, .utilization ul > li:last-child > h2 > span { background:url('../images/utilization_line_last.gif') no-repeat 75px -28px; } .utilization ul.depth1 > li { padding-left:0; } .utilization ul.depth1 > li > span { background:none; padding:0; } .utilization ul.depth1 > li > span em { background:#4e4e4e; border:1px solid #4e4e4e; color:#f3f3f3; } .utilization ul.depth1 > li > span em { width:103px; height:103px; border-radius:100px; font-weight:900; line-height:103px; } .utilization ul.depth2 > li > span em { background-color:#9fd361; border-color:#8cc745; border-radius:20px; color:#335d00; } .utilization ul.depth3 > li > span em { width:auto; min-width:170px; padding:0 20px; font-size:14px; text-align:left; } /* VNFM Management */ .section[role="vnfmManageWrite"] .infoList[role="view"] dl { padding-bottom:33px; } .section[role="vnfmManageWrite"] .infoList[role="view"] dl dd { padding-left:0; } .section[role="vnfmManageWrite"] .infoList[role="view"] dl.category { width:66.6%; } .section[role="vnfmManageWrite"] .infoList[role="view"] dl.category input[type="text"] { width:63.1%; margin-left:5px; } .section[role="vnfmManageWrite"] .infoList[role="view"] dl.category select { width:34%; } .section[role="vnfmManageWrite"] .infoList[role="view"] dl.category .checkSelect { float:left; width:34%; } /* Network Management */ .networkName { padding:8px 10px 25px 10px; font-size:12px; } .networkName:after { content:''; display:block; clear:both; } .networkName dl { float:left; width:50%; padding-left:25px; box-sizing:border-box; } .networkName dl:after { content:''; display:block; clear:both; } .networkName dl:first-child { padding-left:0; padding-right:25px; } .networkName dt { font-weight:700; color:#888; } .networkName dt::before { content:'-'; width:11px; display:inline-block; } .networkName dd { margin-top:5px; } .networkName dd select, .networkName dd input[type="text"] { width:100%; } .section[role="networkManage"] .paramBtnbox { border-top:dashed 1px #cacaca; margin-bottom:10px; padding-top:15px; } .section[role="networkManage"] .paramBtnbox .btn span { background:url('../images/btn_ico_threshold.png') left center no-repeat; padding-left:18px; } .section[role="networkManage"] .dataTable .rowadd { text-align:left; } .section[role="networkManage"] .dataTable .rowadd a { width:23px; height:24px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin:1px 2px 0 2px; font-size:25px; line-height:20px; color:#fff !important; text-align:center; display:inline-block; } .section[role="networkManage"] .dataTable .sublist { margin:-8px; } .section[role="networkManage"] .dataTable .sublist li { border-top:solid 1px #dedede; padding:8px 5px; } .section[role="networkManage"] .dataTable .sublist li:first-child { border-top:0; } .section[role="networkManage"] .dataTable .sublist li input[type="text"] { width:63%; vertical-align:middle; } .section[role="networkManage"] .dataTable .sublist li .add { width:58px; padding-left:4px; text-align:left; display:inline-block; } .section[role="networkManage"] .dataTable .sublist li .add a { width:23px; height:24px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin-left:2px; font-size:25px; line-height:20px; color:#fff !important; text-align:center; vertical-align:middle; display:inline-block; } .section[role="networkManage"] .dataTable .nodata { background:none; } .section[role="networkManage"] .dataTable .nodata span { background:url('../images/ico_noData.png') left center no-repeat; padding:30px 0 30px 30px; font-weight:bold; color:#888; line-height:100px; display:inlin-block; } /* NFVO Management */ .section[role="nfvoManage"] .infoList[role="view"] dl.ip, .section[role="nfvoManageWrite"] .infoList[role="view"] dl.ip { clear:both; } .section[role="nfvoManage"] .infoList[role="view"] dl.url_prefix, .section[role="nfvoManageWrite"] .infoList[role="view"] dl.url_prefix { width:66.6%; } .section[role="nfvoManageWrite"] .infoList[role="view"] dl.url_prefix input[type="text"] { width:98.6%; } .section[role="nfvoManageWrite"] .infoList[role="view"] dl { padding-bottom:33px; } .section[role="nfvoManageWrite"] .infoList[role="view"] dl dd { padding-left:0; } /* Interworking System */ .section[role="interworking"] .infoList[role="view"] dl.url_prefix, .section[role="interworkingWrite"] .infoList[role="view"] dl.url_prefix { width:66.6%; } .section[role="interworkingWrite"] .infoList[role="view"] dl.url_prefix input[type="text"] { width:98.6%; } .section[role="interworkingWrite"] .infoList[role="view"] dl { padding-bottom:33px; } .section[role="interworkingWrite"] .infoList[role="view"] dl dd { padding-left:0; } /* Assurance Management */ /* .currentSearch { position:relative; z-index:10; height:76px; margin:0 -20px; padding-bottom:42px; overflow:hidden; transition:height 0.1s ease-in; } .currentSearch :after { content:''; display:block; clear:both; } .currentSearch select, .currentSearch input[type="text"] { width:100%; } .currentSearch dl { float:left; width:22%; margin-top:15px; font-size:12px; } .currentSearch dl dt, .currentSearch dl dd { margin:0 15px 0 15px; } .currentSearch dl dt { color:#777; } .currentSearch dl dt::before { content:'-'; width:11px; display:inline-block; } .currentSearch dl dd { padding-top:5px; } .currentSearch .note { padding-left:15px; font-size:13px; font-weight:700; } .currentSearch .btn { position:absolute; right:20px; bottom:42px; width:120px; height:28px; background-color:#f9f9f9; border:solid 1px #dcdcdc; border-radius:3px; font-size:12px; font-weight:700; } .currentSearch + .eventList { border-top:dashed 1px #cacaca; margin-top:-22px; padding-top:20px;} .currentSearch + .eventList h2 { top:-157px; } .currentSearch + .eventList .severityType { margin-top:15px;} .currentSearch + .eventList .update {margin-top:15px;} .currentSearch + .eventList .grid {margin-top:20px;} */ .faultSearch { position:relative; z-index:10; height:76px; margin:0 -20px; padding-bottom:42px; overflow:hidden; transition:height 0.1s ease-in; } .faultSearch:after { content:''; display:block; clear:both; } .faultSearch select, .faultSearch input[type="text"] { width:100%; } .faultSearch dl { float:left; width:25%; margin-top:15px; font-size:12px; visibility:hidden; opacity:0; transition:opacity 0.3s ease-in; } .faultSearch dl dt, .faultSearch dl dd { margin:0 20px 0 20px; } .faultSearch dl dt { color:#777; } .faultSearch dl dt::before { content:'-'; width:11px; display:inline-block; } .faultSearch dl dd { padding-top:5px; } .faultSearch dl.eventTime span { width:4%; margin-right:-1px; text-align:center; display:inline-block; } .faultSearch dl.eventTime input { width:47%; } .faultSearch dl.insType, .faultSearch dl.eventType, .faultSearch dl.eventTime { visibility:visible; opacity:1; } .faultSearch .note { padding-left:20px; font-size:13px; font-weight:700; } .faultSearch .btn { position:absolute; right:20px; bottom:42px; width:120px; height:28px; background-color:#f9f9f9; border:solid 1px #dcdcdc; border-radius:3px; font-size:12px; font-weight:700; } .faultSearch .expand { position:absolute; left:50%; bottom:0; width:57px; height:22px; background:url('../images/btn_expand.png') left bottom no-repeat; margin-left:-28px; display:block; cursor:pointer; } .faultSearch.open { height:200px; } .faultSearch.open dl { visibility:visible; opacity:1; } .faultSearch.open .expand { background-position:left top; } .faultSearch + .eventList { border-top:dashed 1px #cacaca; margin-top:-22px; padding-top:60px; } .faultSearch + .eventList .choice, .faultSearch + .eventList .severityType { margin-top:35px; } .performTab { height:35px; background-color:#fafafa; border-bottom:solid 1px #dedede; margin:-15px -15px 10px -15px; } .performTab:after { content:''; display:block; clear:both; } .performTab li { float:left; width:160px; border-right:solid 1px #dedede; } .performTab li a { padding:10px 0 11px 0; font-size:12px; color:#999; text-align:center; display:block; } .performTab li.on { height:36px; background-color:#fff; } .performTab li.on a { font-weight:700; color:#4f4f4f; } .performSearch { position:relative; border-bottom:dashed 1px #dedede; padding-bottom:20px; } .performSearch:after { content:''; display:block; clear:both; } .performSearch select, .performSearch input[type="text"] { width:100%; } .performSearch dl { float:left; width:18%; margin-top:20px; padding-right:40px; font-size:12px; } .performSearch dl dt::before { content:'-'; width:11px; display:inline-block; } .performSearch dl dd { padding-top:5px; } .performSearch dl.period { width:350px !important; } .performSearch dl.period span { margin:0 2px 0 3px; display:inline-block; } .performSearch dl.period input { width:45%; } .performSearch .note { padding-top:10px; font-size:12px; font-weight:700; } .performSearch .btn { position:absolute; right:0; bottom:20px; width:120px; height:28px; background-color:#f9f9f9; border:solid 1px #dcdcdc; border-radius:3px; font-size:12px; font-weight:700; } .performSearch[role="analysis"] dl { width:12%; } .performSearch[role="analysis"] dl.period { width:530px !important; } .performSearch[role="analysis"] dl.period input { width:27%; } .performSearch[role="analysis"] dl.period select { width:50px; } .performSearch[role="analysis"] dl.period .add { margin:0 5px 0 7px; } .performList { padding-top:20px; } .performList .grid td { position:relative; height:14px; overflow:hidden; } .performList .grid td.vim, .performList .grid td.zone { background-color:#fff !important; } .performList .grid tr.host td { background-color:#f7f7f7; } .performList .grid .severity1, .performList .grid .severity2, .performList .grid .severity3, .performList .grid .severity4, .performList .grid .severity5, .performList .grid .severity6 { position:absolute; top:0; left:0; width:100%; height:100%; padding-top:11px; text-align:center; text-indent:0 !important; display:block; } .performList .dataTable .txtleft { width:100%; text-align:left; display:inline-block; } .performList .currentValueGraph { position:absolute; top:0; left:0; width:100%; height:100%; height:30px; padding:0; } .performList .currentValueGraph .graph { position:relative; z-index:2; height:20px; background-color:#dfdfdf; margin:9px 7px 0 7px; padding:0; display:block; overflow:visible; } .performList .currentValueGraph .graph em { text-align:center; display:block; } .performList .currentValueGraph .graph span { position:relative; width:0; height:20px; margin:0; display:block; } .performList .currentValueGraph .division { display:none; } .performList .currentValueGraph .severity1, .performList .currentValueGraph .severity2, .performList .currentValueGraph .severity3, .performList .currentValueGraph .severity4, .performList .currentValueGraph .severity5, .performList .currentValueGraph .severity6 { position:relative; padding:0; font-size:12px; color:#fff; line-height:20px; } .performList .currentValueGraph .severity3, .performList .currentValueGraph .severity5, .performList .currentValueGraph .severity6 { color:#777; } .performList .utilizationGraph { height:20px; background-color:#dfdfdf; margin:-3px 0; display:block; overflow:hidden; } .performList .utilizationGraph em { width:0; height:100%; background-color:#e24f4c; padding-top:2px; color:#fff; display:block; } .performChart .itembox { position:relative; background-color:#fafafa; border:solid 1px #cacaca; margin-top:70px; padding:17px; } .performChart .itembox .name { position:absolute; top:-30px; left:0; font-size:18px; font-weight:700; color:#ff9204; } .performChart .itembox .name + .chartBox { margin-top:0; } .performChart .chartBox { margin-top:20px; background-color:#fff; border:solid 1px #dedede; overflow:hidden; } .performChart .chartBox:after { content:''; display:block; clear:both; } .performChart .chartBox .title { position:relative; z-index:2; height:18px; background-color:#4c4c4c; padding:10px 0 10px 13px; font-size:16px; font-weight:700; color:#fff; line-height:16px; text-align:center; } .performChart .chartBox .title:after { content:''; display:block; clear:both; } .performChart .chartBox .title .btn { position:absolute; top:50%; right:6px; height:26px; background-color:#fff; border:solid 1px #dedede; border-radius:3px; margin-top:-13px; padding-top:4px; font-size:11px; color:#999; display:block; } .performChart .chartBox .cont { position:relative; z-index:1; float:left; width:50%; height:350px; border-right:solid 1px #dedede; border-bottom:solid 1px #dedede; margin:0 -1px -1px 0; overflow:hidden; } .performChart .chartBox .cont .view { position:absolute; z-index:10; top:20px; right:18px; width:30px; height:30px; background:url('../images/ico_detail.png') center center no-repeat #ffa304; background-size:95%; border:solid 1px #ff9804; border-radius:3px; font-size:0; text-indent:-9999px; overflow:hidden; } .performChart .chartBox .cont .view:hover { background-color:#ff7a04; } .performChart .chartBox .numbox { position:absolute; z-index:2; top:39px; right:60px; } .performChart .chartBox .numbox li { float:left; margin-left:8px; font-size:10px; color:#777; } .performChart .chartBox .numbox li em { font-weight:bold; font-size:11px; } .performChart .chartBox .numbox li::before { content:'|'; width:4px; padding-right:9px; color:#cacaca; } .performChart .chartBox .numbox li:first-child::before { content:''; } .performChart .chartBox .numbox li:nth-child(1) { color:#f00; } .performChart .chartBox .numbox li:nth-child(2) { color:#00f; } .performChart .chartBox .numbox li:nth-child(3) { color:#0f9901; } .performChart .graphBox { position:relative; z-index:1; width:97%; height:97%; margin:2% auto 0 auto; } .performChart .highcharts-title { font-size:14px !important; } .performChart[role="port"], .performChart[role="resource"] { margin-top:-20px; } .performChart[role="service"] .cont { width:50% !important; } .performAnalysis { padding-top:25px; } .performAnalysis .chartBox { margin-top:25px; } .performAnalysis .highcharts-legend text { font-weight:normal !important; } /* Menu Management */ .menuList { float:left; width:35%; height:480px; border:solid 1px #dedede; padding:10px 0; overflow:auto; } .menuList ol { margin:5px 0 0 17px; } .menuList ol li { margin-bottom:5px; font-size:12px; } .menuList ol ol { display:none; } .menuList .txt { padding:2px 1px 4px 1px; line-height:12px; display:inline-block; } .menuList .txt.now { background-color:#666; color:#fff; } .menuList .add { width:14px; height:14px; background:url('../images/ico_sub.png') left top no-repeat #f7f7f7; border:solid 1px #cacaca; border-radius:3px; margin:-2px 0 0 1px; font-size:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .menuList .add:hover { background-color:#ffeee4; background-position:left bottom; border:solid 1px #ffb386; } .menuList .open { width:9px; height:9px; background:url('../images/ico_open.gif') left top no-repeat; ; margin-top:-2px; font-size:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .menuList .open.active { background-position:left bottom; } .menuInfo { float:right; width:63%; height:500px; border:solid 1px #dedede; } .menuInfo dt { height:20px; margin-top:15px; padding-left:20px; font-size:12px; color:#888; } .menuInfo dt:first-child { margin-top:30px; } .menuInfo dd { min-height:20px; margin-top:-26px; padding:0 20px 0 120px; } .menuInfo dd textarea, .menuInfo dd input[type="text"] { width:100%; color:#222; } .menuInfo dd textarea { height:150px; overflow:auto; } /* User Password Reset */ .newPassword { position:relative; } .newPassword .titleBox h1 { position:relative; z-index:10; width:100%; height:100px; background:#4e4e4e; padding:70px 0; font-size:14px; color:#fff; text-align:center; } .newPassword .titleBox h1 em { font-size:48px; font-weight:700; color:#fff; display:block; } .newPassword .titleBox h1 .stxt { margin-top:7px; font-size:21px; display:block; } .newPassword .titleBox::after { content:''; position:absolute; top:240px; left:50%; border-style:solid; border-width:13px 12.5px 0; border-color:#4e4e4e transparent transparent transparent; margin-left:-12px; display:block; } .newPassword .content { width:320px; margin:55px auto 30px auto; text-align:center; } .newPassword .content * { box-sizing:border-box; } .newPassword .content li { position:relative; border:1px solid #dedede; border-radius:3px; margin-top:10px; padding:8px 5px; transition:all .2s ease-in-out; } .newPassword .content li:first-child { margin-bottom:30px; } .newPassword .content li label { width:10%; background:url('../images/ico_pw.gif') no-repeat 5px 2px; background-size:18px; border-right:1px solid #dedede; vertical-align: middle; text-indent: -999999px; display:inline-block; } .newPassword .content li input { width:90%; background:transparent; border:0; color:#888; } .newPassword .content li.focus { border-color:#495262; } .newPassword .content li .message { position:absolute; z-index:1; top:-19px; left:2px; width:100%; height:16px; background:url('../images/ico_message.png') left 1px no-repeat; padding-left:20px; font-size:11px; color:#f00; text-align:left; display:block; } .newPassword .content button { width:153px; height:40px; background:#aaa; border:1px solid #999; border-radius:3px; margin-top:30px; font-size:16px; color:#fff; line-height:36px; transition:background .15s ease-in-out; box-shadow:1px 3px 1px #d4d4d4; display:inline-block; } .newPassword .content button.reset { background:#f58026; border:1px solid #e96500; margin-right:9px; } .newPassword .content button.reset:hover { background: #e96500; } .newPassword .content button.cancel { background-color:#aaa; border:1px solid #999; } .newPassword .content button.cancel:hover { background:#999; } .newPassword .content .notify { margin-top:30px; font-size:12px; } /* dashboard */ .section[role="dashboard"] { width:1300px; margin:-35px 0 0 -70px; padding:10px; } .section[role="dashboard"]:after { content:''; display:block; clear:both; } .dbBox { float:left; width:48%; border:solid 1px #dedede; border-radius:5px; margin:10px 1%; overflow:hidden; box-sizing:border-box; } .dbBox h2 { height:40px; background-color:#f7f7f7; border-bottom:solid 1px #dedede; padding-left:12px; font-size:15px; font-weight:bold; color:#000; line-height:40px; display:block; } .dbBox.full { width:98%; } .dbBox .tabMenu { height:40px; background-color:#f7f7f7; border-bottom:solid 1px #dedede; padding-left:12px; display:block; } .dbBox .tabMenu li { float:left; height:15px; background:none !important; border-left:solid 1px #cacaca; margin:12px 0 0 10px; padding-left:10px; font-size:15px; font-weight:bold; color:#bfbfbf; line-height:15px; } .dbBox .tabMenu li a { color:#bfbfbf !important; } .dbBox .tabMenu li:first-child { border-left:0; margin-left:0; padding-left:0; } .dbBox .tabMenu li[aria-selected="true"] a { color:#000 !important; } .dbBox .contbox { position:relative; height:190px; margin-right:-1px; } .dbBox .contbox table { border:0; } .dbBox .contbox table th, .dbBox .contbox table td { border:0; border-left:solid 1px #dedede; padding:7px 0 7px 0; vertical-align:middle; } .dbBox .contbox table th { padding-bottom:8px; } .dbBox .contbox table td { border-bottom:solid 1px #dedede; text-align:center; } .dbBox .contbox table tr th:first-child, .dbBox .contbox table tr td:first-child { border-left:0; } .dbBox .contbox table tbody tr:first-child td { border-top:0; } .dbBox .contbox table.ui-jqgrid-htable { border-bottom:0; } .dbBox .contbox table.ui-jqgrid-btable { border-top:0; } .dbBox .contbox table .txtLeft { padding-left:7px; text-align:left; display:block; } .dbBox .contbox table .txtOper { color:#009a07; } .dbBox .contbox .graph { position:relative; height:18px; background-color:#dadada; margin:-3px 6px; display:block; } .dbBox .contbox .graph em { width:0; height:100%; background-color:#e24f4c; font-size:11px; color:#fff; line-height:17px; display:block; -webkit-animation:graphmotion 1s; -moz-animation:graphmotion 1s; -ms-animation:graphmotion 1s; -o-animation:graphmotion 1s; animation:graphmotion 1s; } .dbBox .contbox .graph em30 { width:0; height:100%; background-color:#00c400; font-size:11px; color:#fff; line-height:17px; display:block; -webkit-animation:graphmotion 1s; -moz-animation:graphmotion 1s; -ms-animation:graphmotion 1s; -o-animation:graphmotion 1s; animation:graphmotion 1s; } .dbBox .contbox .graph em50 { width:0; height:100%; background-color:#ffc000; font-size:11px; color:#fff; line-height:17px; display:block; -webkit-animation:graphmotion 1s; -moz-animation:graphmotion 1s; -ms-animation:graphmotion 1s; -o-animation:graphmotion 1s; animation:graphmotion 1s; } .dbBox .contbox .graph em70 { width:0; height:100%; background-color:#ff0000; font-size:11px; color:#fff; line-height:17px; display:block; -webkit-animation:graphmotion 1s; -moz-animation:graphmotion 1s; -ms-animation:graphmotion 1s; -o-animation:graphmotion 1s; animation:graphmotion 1s; } .dbBox .contbox .health { width:15px; height:15px; border-radius:8px; margin:0 auto; display:block; overflow:hidden; } .dbBox .contbox .health em { width:100%; height:100%; font-size:0; text-indent:-9999px; display:block; overflow:hidden; } .dbBox .contbox .ui-jqgrid { width:100% !important; margin-bottom:-1px !important; } .dbBox .contbox .ui-jqgrid-view, .dbBox .contbox .ui-jqgrid-hdiv, .dbBox .contbox .ui-jqgrid-bdiv { width:100% !important; } .dbBox .contbox .ui-jqgrid-bdiv { max-height:160px !important; overflow:hidden; overflow-y:scroll; } .dbBox .contbox .ui-jqgrid-hdiv { background-color:#f4f4f4; border:0; border-bottom:solid 1px #dedede; } .dbBox .contbox .ui-jqgrid-hbox { margin-right:17px; } .dbBox .contbox.eventList { border:0; margin:0; padding:0; box-shadow:none; } .dbBox .contbox.eventList table tr th { padding:13px 0; } .dbBox .contbox.eventList table tr td:first-child { text-align:left; text-indent:7px; } .dbBox .contbox.eventList table tr td { position:relative !important; height:14px; padding:11px 0 11px 0; font-size:13px; text-align:left; vertical-align:middle; overflow:hidden; } .dbBox .contbox.eventList .severity1, .dbBox .contbox.eventList .severity2, .dbBox .contbox.eventList .severity3, .dbBox .contbox.eventList .severity4, .dbBox .contbox.eventList .severity5, .dbBox .contbox.eventList .severity6 { position:absolute; top:0; left:0; width:100%; height:100%; padding-top:11px; text-align:center; text-indent:0; display:block; } .dbBox .contbox.eventList .choice { top:-23px; left:auto; right:87px; border-right:solid 1px #cacaca; padding-right:2px; } .dbBox .contbox.eventList .update { top:-30px; left:auto; right:5px; } .dbBox #nfvoList tr:hover, .dbBox #serviceList tr:hover { cursor:pointer; } .dbBox #vimList tr:hover, .dbBox #vimList tr:hover td, .dbBox #nfvoJobList tr:hover, .dbBox #nfvoJobList tr:hover td { background:none !important; } .dbBox:nth-child(6) .contbox { height:392px; } .dbBox:nth-child(6) .contbox .ui-jqgrid-bdiv { max-height:351px !important; } .dbBox2 { float:left; width:31%; border:solid 1px #dedede; border-radius:5px; margin:10px 1.1675%; overflow:hidden; box-sizing:border-box; } .dbBox2 h2 { height:40px; background-color:#f7f7f7; border-bottom:solid 1px #dedede; padding-left:12px; font-size:15px; font-weight:bold; color:#000; line-height:40px; display:block; } .dbBox2 .contbox { position:relative; height:190px; margin-right:-1px; } .dbBox2 .contbox table { border:0; } .dbBox2 .contbox table th, .dbBox2 .contbox table td { border:0; border-left:solid 1px #dedede; padding:7px 0 7px 0; vertical-align:middle; } .dbBox2 .contbox table th { padding-bottom:8px; } .dbBox2 .contbox table td { border-bottom:solid 1px #dedede; text-align:center; } .dbBox2 .contbox table tr th:first-child, .dbBox2 .contbox table tr td:first-child { border-left:0; } .dbBox2 .contbox table tbody tr:first-child td { border-top:0; } .dbBox2 .contbox table.ui-jqgrid-htable { border-bottom:0; } .dbBox2 .contbox table.ui-jqgrid-btable { border-top:0; } .dbBox2 .contbox table .txtLeft { padding-left:7px; text-align:left; display:block; } .dbBox2 .contbox table .txtOper { color:#009a07; } .dbBox2 .contbox .graph { position:relative; height:18px; background-color:#dadada; margin:-3px 6px; display:block; } .dbBox2 .contbox .graph em { width:0; height:100%; background-color:#e24f4c; font-size:11px; color:#fff; line-height:17px; display:block; -webkit-animation:graphmotion 1s; -moz-animation:graphmotion 1s; -ms-animation:graphmotion 1s; -o-animation:graphmotion 1s; animation:graphmotion 1s; } .dbBox2 .contbox .health { width:15px; height:15px; border-radius:8px; margin:0 auto; display:block; overflow:hidden; } .dbBox2 .contbox .health em { width:100%; height:100%; font-size:0; text-indent:-9999px; display:block; overflow:hidden; } .dbBox2 .contbox .ui-jqgrid { width:100% !important; margin-bottom:-1px !important; } .dbBox2 .contbox .ui-jqgrid-view, .dbBox2 .contbox .ui-jqgrid-hdiv, .dbBox2 .contbox .ui-jqgrid-bdiv { width:100% !important; } .dbBox2 .contbox .ui-jqgrid-bdiv { max-height:160px !important; overflow:hidden; overflow-y:scroll; } .dbBox2 .contbox .ui-jqgrid-hdiv { background-color:#f4f4f4; border:0; border-bottom:solid 1px #dedede; } .dbBox2 .contbox .ui-jqgrid-hbox { margin-right:17px; } .dbService { } .dbService h2 { position:relative !important; top:0 !important; width:auto !important; background:none !important; border:0 !important; border-bottom:solid 1px #e4e7e9 !important; padding-left:10px !important; box-shadow:none !important; } .dbService h3 { padding:10px 0 0 10px; font-weight:bold; color:#ff9204; display:block; } .dbService .nodeArea { width:274px; min-height:622px; background:none; border:0; } .dbService .graph { width:58%; height:17px; background-color:#dfdfdf; vertical-align:middle; display:inline-block; overflow:hidden; } .dbService .graph em { width:0; height:100%; background-color:#e24f4c; font-size:11px; font-weight:600; color:#fff !important; line-height:17px; text-align:center; display:block; transition:width 1s ease-in; } .dbService .graph .severity3, .dbService .graph .severity5, .dbService .graph .severity6 { color:#888; } .dbService .state { float:right; width:15px; height:15px; border-radius:99px; display:block; overflow:hidden; } .dbService .state em { width:100%; height:100%; text-indent:-9999px; display:block; } .dbService .info { padding:10px 10px 2px 10px; } .dbService .info dt { float:left; margin-bottom:3px; color:#888; } .dbService .info dt::after { content:':'; padding:0 8px 0 3px; display:inline-block; } .dbService .info dt::before { content:"-"; width:11px; color:#888; display:inline-block; } .dbService .info dd { margin:1px 0 7px 0; padding-left:11px; font-size:11px; font-weight:700; word-break:break-all; } .dbService .info dd:after { content:''; display:block; clear:both; } .dbService .info dd.param { margin-bottom:0; padding-top:4px; display:block; clear:both; } .dbService .info dd.param .tit { width:40%; margin:3px 0 0 0; line-height:10px; vertical-align:middle; word-break:break-all; display:inline-block; } .dbService .nsBox { background-color:#fff; border:solid 1px #c3c9ce; font-size:12px; box-shadow:3px 4px 0 #e0e3e6; } .dbService .vnfBox { background-color:#fff; border:solid 1px #c3c9ce; margin-top:10px; font-size:12px; box-shadow:3px 4px 0 #e0e3e6; } .dbService .vnfBox hr { height:0; border:0; border-top:dashed 1px #d4d7d9; margin:0; padding:0; } .dbService .vnfBox h3 { color:#888; } .dbService .vnfBox .info { padding-bottom:11px; } .dbService .vnfBox .scrollBox { height:100%; overflow:auto; } .dbService .mapArea { width:1304px !important; background:none !important; margin-left:10px !important; } .dbService .mapArea > div { position:relative; display:none; } .dbService .mapArea .topology { width:100% !important; margin-top:19px !important; border:solid 1px #c3c9ce !important; } .dbService .mapArea .tabMenu { position:absolute; z-index:1; top:0; left:0; } .dbService .mapArea .tabMenu:after { content:''; display:block; clear:both; } .dbService .mapArea .tabMenu li { float:left; width:130px; height:18px; background-color:#f1f1f1; border:solid 1px #dedede; border-bottom:0; margin-right:-1px; font-size:11px; color:#999; line-height:18px; text-align:center; border-radius:6px 6px 0 0; overflow:hidden; } .dbService .mapArea .tabMenu li a { display:block; } .dbService .mapArea .tabMenu li[aria-selected="true"] a { background-color:#3b6886; font-weight:bold; color:#fff; } .dbService .vnfResource { position:relative; margin:10px; width:120px; background-color:#dedede; border:solid 1px #cacaca; border-radius:5px; padding:7px 10px; font-size:11px; } .dbService .vnfResource .info { margin-top:3px; font-weight:bold; } .dbService .vnfResource .info span { font-weight:normal; } .dbService .vnfResource .info span:after { content:':'; width:4px; margin-left:3px; font-weight:normal; display:inline-block; } .dbService .vnfResource .item { margin-top:3px; text-align:right; } .dbService .vnfResource .item .tit { width:23px; text-align:left; vertical-align:middle; display:inline-block; } .dbService .vnfResource .type { border-bottom:solid 1px #dedede; margin-bottom:5px; padding:6px 0 5px 0; } .dbService .vnfResource .type span { background-color:#444; margin-right:3px; padding:1px 4px 2px 4px; color:#fff; display:inline-block; } .dbService .vnfResource .name { font-size:12px; font-weight:bold; } .dbService .vnfResource .graph { width:75%; } .dbService .vnfResource .graph em { background-color:#e24f4c; box-shadow:none; } .dbService .vnfResource .graphbox { background-color:#fff; border:solid 1px #cacaca; border-radius:5px; margin:5px -5px; padding:0 7px 5px 7px; } .dbService .btn_back { position:absolute; z-index:99; top:28px; right:7px; width:60px; height:25px; background-color:#eee; border:solid 1px #dedede; border-radius:3px; font-size:12px; line-height:25px; text-align:center; display:block; } .dbService .btn_back i { font-size:13px; margin-left:-3px; display:inline-block; } .dbService .diagram { position:relative; width:1292px; height:615px; background-color:#fff; border:solid 1px #c3c9ce; margin-top:19px; overflow:auto; box-shadow:3px 4px 0 #e0e3e6; } .dbService .diagram ul { width:auto; display:block; } .dbService .diagram ul > li { width:auto; background:url('../images/utilization_row_line.gif') repeat-y -40px 0; padding-left:55px; } .dbService .diagram ul > li:after { content:''; display:block; clear:both; } .dbService .diagram ul > li::before { content:''; width:55px; height:70px; background:url('../images/utilization_col_line.gif') no-repeat 35px 50px; margin:0 0 -70px -55px; display:block; } .dbService .diagram ul > li:first-child::before { background:url('../images/utilization_line_first.gif') repeat-x -40px -29px !important; } .dbService .diagram ul > li:last-child { background:none; } .dbService .diagram ul > li:last-child::before { background:url('../images/utilization_line_last.gif') no-repeat 35px -29px; } .dbService .diagram > ul { border-top:dashed 1px #cacaca; padding:50px 0 50px 55px; display:block; } .dbService .diagram > ul:first-child { border-top:0; } .dbService .diagram ol { margin:0 5px 0 7px; font-size:11px; } .dbService .diagram ol li { margin-top:5px; display:block !important; } .dbService .diagram ol .stit, .dbService .diagram ol .num { margin:-1px 3px; font-size:11px; vertical-align:middle; display:inline-block; } .dbService .diagram ol .stit { width:23px; } .dbService .diagram ol .graph { width:53%; } .dbService .diagram ol .graph em { background-color:#e24f4c; box-shadow:none; } .dbService .diagram .tit { background:url('../images/utilization_col_line.gif') no-repeat 75px 50px; padding-top:30px; display:inline-block; } .dbService .diagram .tit em { width:150px; height:41px; background:#fcfcfc; border:1px solid #dedede; font-size:12px; font-weight:700; color:#4e4e4e; line-height:41px; text-align:center; text-overflow:ellipsis; white-space:nowrap; display:block; overflow:hidden; } .dbService .diagram .depthVim > li { padding-left:0; } .dbService .diagram .depthVim > li::before { display:none; } .dbService .diagram .depthVim > li > .tit { background:none; padding:0; } .dbService .diagram .depthVim > li > .tit em { width:103px; height:103px; background:#4e4e4e; border:1px solid #4e4e4e; border-radius:100px; font-weight:900; color:#f3f3f3; line-height:103px; } .dbService .diagram .depthCluster { margin:-106px 0 0 105px; } .dbService .diagram .depthCluster > li > .tit em { background-color:#9fd361; border-color:#8cc745; border-radius:20px; color:#335d00; } .dbService .diagram .depthHost { margin:-76px 0 0 152px; display:block; } .dbService .diagram .hostGraph { width:170px; height:100px; background-color:#f7f7f7; border:solid 1px #cacaca; border-radius:5px; margin:30px 0 0 0; font-size:12px; display:block; } .dbService .diagram .hostGraph .name { padding:8px 10px; } .dbService .diagram .hostGraph .name b { font-weight:bold; } .dbService .diagram .hostGraph .name b::before { content:':'; width:9px; font-weight:normal; display:inline-block; } .dbService .diagram .hostGraph ol { margin-top:12px; } .dbService .diagram .depthVm { margin:-102px 0 0 175px; display:table; clear:both; } .dbService .diagram .depthVm:after { content:''; display:block; clear:both; } .dbService .diagram .depthVm li { background:none; padding:0; display:table-cell; } .dbService .diagram .depthVm li::before { display:none; } .dbService .diagram .depthVm li .graphbox { width:170px; height:100px; border:solid 1px #dedede; border-radius:5px; margin:0 0 0 5px; } .dbService .diagram .depthVm li .name { padding:8px 10px; font-size:12px; } .dbService .diagram .depthVm li .name b { font-weight:bold; } .dbService .diagram .depthVm li .name b::before { content:':'; width:9px; font-weight:normal; display:inline-block; } .dbService .diagram .depthVm li .type { margin-top:-2px; padding:0 0 0 10px; font-size:11px; } .dbService .diagram .depthVm li .type span { width:27px; height:17px; background-color:#4a4a4a; margin-right:3px; font-weight:bold; color:#fff; line-height:17px; text-align:center; vertical-align:middle; display:inline-block; } .dbService .diagram_zoom { position:absolute; z-index:10; top:6px; left:6px; width:80px; height:27px; background:url('../images/zoom_bg.png'); overflow:hidden; } .dbService .diagram_zoom a { position:absolute; z-index:2; top:5px; width:17px; height:17px; background:url('../images/zoom_btn.png'); text-indent:-9999px; display:block; overflow:hidden; } .dbService .diagram_zoom .zoomIn { left:5px; background-position:left top; } .dbService .diagram_zoom .zoomOut { right:5px; background-position:right top; } .dbService .diagram_zoom .zoomNum { font-size:12px; line-height:28px; letter-spacing:1px; text-align:center; display:block; } .dbNetworkSearch { position:relative; height:98px; background-color:#fff; border:solid 1px #c3c9ce; border-bottom:0; margin:65px 15px 0 15px; padding:15px 0 0 0; overflow:hidden; box-shadow:4px 4px 0 #e0e3e6; } .dbNetworkSearch:after { content:''; margin:0 15px; padding-top:20px; border-bottom:dashed 1px #dadada; display:block; clear:both; } .dbNetworkSearch select, .dbNetworkSearch input[type="text"] { width:100%; } .dbNetworkSearch dl { float:left; width:22%; margin-top:15px; font-size:12px; } .dbNetworkSearch dl dt, .dbNetworkSearch dl dd { margin:0 15px 0 15px; } .dbNetworkSearch dl dt { color:#777; } .dbNetworkSearch dl dt::before { content:'-'; width:11px; display:inline-block; } .dbNetworkSearch dl dd { padding-top:5px; } .dbNetworkSearch .note { padding-left:15px; font-size:13px; font-weight:700; } .dbNetworkSearch .btn { position:absolute; right:15px; bottom:21px; width:120px; height:28px; background-color:#f9f9f9; border:solid 1px #dcdcdc; border-radius:3px; font-size:12px; font-weight:700; } .dbNetworkSearch + .eventList { border-top:0; margin-top:0; } .dbNetworkSearch + .eventList h2 { top:-157px; } .contents_btn.dbService { border-bottom:dashed 1px #b2b2b2; margin:15px 15px 0 15px; padding-bottom:20px; } .contents_btn.dbService .btn { margin:0 5px; padding-right:20px; } .contents_btn.dbService .icon { margin-top:-1px; font-size:21px; vertical-align:top; display:inline-block; } .contents_btn.dbService .func { padding-left:20px; padding-right:15px; } .contents_btn.dbService .func .icon { margin-top:0px; } /* animation */ @keyframes "graphmotion" { from { width:0; } to { transition:width ease-in; } } @-moz-keyframes graphmotion { from { width:0; } to { transition:width ease-in; } } @-webkit-keyframes "graphmotion" { from { width:0; } to { transition:width ease-in; } } @-ms-keyframes "graphmotion" { from { width:0; } to { transition:width ease-in; } } @-o-keyframes "graphmotion" { from { width:0; } to { transition:width ease-in; } } /*------- 6. JQGRID -------*/ .grid table { width:100% !important; } .grid #dataPager { height:32px; margin:25px 0; } .ui-jqgrid { position:relative; } .ui-jqgrid .ui-state-disabled { opacity:.35; } .ui-jqgrid .ui-icon { width:16px; height:16px; background-image:url('../images/ui-icons.png'); } .ui-jqgrid .jqgrid-overlay { z-index:100; background-color:#000; display:none; opacity:0.5; } .ui-jqgrid .loading { position:absolute; z-index:101; top:45%; left:45%; width:auto; border-width:2px !important; margin:5px; padding:6px; font-size:11px; font-weight:bold; color:#e17009; text-align:center; display:none; } /* table layout */ .ui-jqgrid-htable thead th .ui-jqgrid-sortable { position:relative; } .ui-jqgrid-htable thead th .ui-jqgrid-sortable .s-ico { position:absolute; right:15px; top:2px; } /*.ui-jqgrid .s-ico { float:right; margin:2px 15px 0 0;}*/ .ui-jqgrid .ui-grid-ico-sort { position:absolute; height:12px; overflow:hidden !important; cursor:pointer !important; } .ui-jqgrid .ui-grid-ico-sort.ui-icon-asc { background-position:0 -15px; margin-top:-3px; } .ui-jqgrid .ui-grid-ico-sort.ui-icon-desc { background-position:-65px -15px; margin-top:3px; } /* pager */ .ui-jqgrid .ui-jqgrid-resize-mark { line-height:0; font-size:0; } .ui-jqgrid .ui-jqgrid-pager { margin:36px 0 26px 0; } .ui-jqgrid .ui-pg-table { position:relative; } .ui-jqgrid .ui-pg-table td { padding:1px !important; font-size:12px; font-weight:400; text-align:center; vertical-align:middle; } .ui-jqgrid .ui-pg-table .ui-pg-input { height:29px; } .ui-jqgrid .ui-pg-button { height:19px !important; } .ui-jqgrid .ui-pg-button span { float:left; width:30px; height:29px; background:url('../images/ui_icon.gif') left top no-repeat; margin:0 !important; display:block; } .ui-jqgrid .ui-pg-button .ui-separator { display:none; } .ui-jqgrid .ui-pg-button .ui-icon-seek-first { background-position:0 0; } .ui-jqgrid .ui-pg-button .ui-icon-seek-prev { background-position:-35px 0; } .ui-jqgrid .ui-pg-button .ui-icon-seek-next { background-position:-70px 0; } .ui-jqgrid .ui-pg-button .ui-icon-seek-end { background-position:-105px 0; } .ui-jqgrid .ui-separator { height:18px; border-left:1px solid #ccc; border-right:1px solid #ccc; } .ui-jqgrid-bdiv { height:auto !important; } .ui-jqgrid-bdiv tbody td { border-bottom:1px solid #e4e7e9; border-right:1px solid #e4e7e9; padding:11px 0; font-size:14px; text-indent:7px; } .ui-jqgrid-bdiv tbody td:first-child { border-left:1px solid #e4e7e9; } .ui-jqgrid-bdiv tbody td div { padding:0 8px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box; } .ui-jqgrid-bdiv tbody td input[type="checkbox"] { margin-left:-6px; } .ui-jqgrid-bdiv tbody tr:first-child td { padding:0 !important; } .ui-jqgrid-bdiv tbody tr.jqgfirstrow td { border-bottom:0; padding:0; } .ui-jqgrid-hdiv { border:1px solid #e1e4e7; border-bottom:solid 1px #717b7d; box-sizing:border-box; } .ui-jqgrid-htable thead th { background:#f4f4f4 !important; padding:11px 0; font-size:13px !important; font-weight:bold !important; color:#000 !important; letter-spacing:1px; vertical-align:middle; } .ui-jqgrid-htable thead th .ui-jqgrid-resize { display:none; } .ui-jqgrid-htable, .ui-jqgrid-btable { width:100% !important; table-layout:fixed; } .ui-jqgrid-btable td .btnbox { position:relative; width:100%; margin:-5px 0; text-align:center; } .ui-jqgrid-btable td .btnbox::after { content:''; display:block; clear:both; } .ui-jqgrid-btable td .btnbox .btn_edit, .ui-jqgrid-btable td .btnbox .btn_view, .ui-jqgrid-btable td .btnbox .btn_delete, .ui-jqgrid-btable td .btnbox .btn_disabled, .ui-jqgrid-btable td .btnbox .btn_onbarding { min-width:36px; height:18px; border-radius:3px; padding:0 10px; font-size:12px; line-height:18px; text-indent:0; display:block; } .ui-jqgrid-btable td .btnbox .btn_delete { float:right; background-color:#f6f6f6; border:solid 1px #ccc; } .ui-jqgrid-btable td .btnbox .btn_edit, .ui-jqgrid-btable td .btnbox .btn_onbarding { float:left; background-color:#fff4ed; border:solid 1px #feb68a; color:#ff6000; } .ui-jqgrid-btable td .btnbox .btn_view, .ui-jqgrid-btable td .btnbox .btn_disabled { background-color:#fff4ed; border:solid 1px #feb68a; color:#ff6000; } .ui-jqgrid-btable td .status { position:relative; margin:-5px auto; padding:0; text-align:center; display:block; } .ui-jqgrid-btable td .status a { width:43%; height:18px; background-color:#f6f6f6; border:solid 1px #ccc; border-radius:3px; margin:0 1px; line-height:18px; text-align:center; display:inline-block; } .ui-jqgrid-btable td .status a.active { background-color:#fff4ed; border:solid 1px #feb68a; color:#ff6000; } .ui-jqgrid-btable td span.txtCenter { width:100%; text-align:center; display:inline-block; } /* grid Hover */ .ui-jqgrid-bdiv tbody tr:hover { background-image:url('../images/grid_line.gif'), url('../images/grid_line.gif'); background-position:left top, left bottom; background-repeat:repeat-x; background-color:#f9f9f9; } .ui-jqgrid-bdiv tbody tr:hover td:first-child { background:url('../images/grid_line.gif') repeat-y left top; } .ui-jqgrid-bdiv tbody tr:hover td:last-child { background:url('../images/grid_line.gif') repeat-y right top; } .section[role="list"] .grid table tr:hover { cursor:pointer; } /* jQuery UI - SPINNER */ .ui-spinner { position:relative; display:inline-block; } .ui-spinner .ui-spinner-button { position:absolute; right:5px; display:block; } .ui-spinner .ui-spinner-button.ui-spinner-up { top:0; } .ui-spinner .ui-spinner-button.ui-spinner-down { bottom:0; } /*------- 7. TOPLOGY MAP -------*/ .section[role="topology"] { background:none; border:none; box-shadow:none; } #topologyArea { min-height:550px; } #topologyArea:after { content:''; display:block; clear:both; } #topologyArea h2 { position:absolute; top:15px; width:1061px; height:30px; background-color:#fff; border:solid 1px #c3c9ce; border-bottom:0; padding-left:17px; font-size:12px; font-weight:700; color:#4e4e4e; line-height:30px; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .nodeList { background-color:#fff; border:solid 1px #c3c9ce; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .nodeList h3 { height:30px; margin-bottom:0; padding-left:10px; font-size:12px; line-height:30px; } #topologyArea .nodeList ul { width:272px; height:237px/*178px*/; border:0; border-top:solid 1px #e4e7e9; overflow-y:auto; } #topologyArea .nodeList ul li .thumb_data span.name { max-width:155px; } #topologyArea .nodeList dl { width:272px; border-top:1px solid #dedede; padding:12px 11px 6px 11px; font-size:12px; overflow:hidden; box-sizing:border-box; } #topologyArea .nodeList dl dt { float:left; margin-bottom:3px; color:#888; } #topologyArea .nodeList dl dt::after { content:':'; padding:0 8px 0 3px; display:inline-block; } #topologyArea .nodeList dl dt::before { content:"-"; width:11px; color:#888; display:inline-block; } #topologyArea .nodeList dl dd { margin:1px 0 7px 0; padding-left:11px; font-size:11px; font-weight:700; word-break:break-all; } #topologyArea .nodeList dl dd:after { content:''; display:block; clear:both; } #topologyArea .nodeList dl dd.time { clear:both; } #topologyArea .nodeList div.wrap_btn { width:250px; } #topologyArea .nodeList .schbox { background-color:#f1f1f1; border:solid 1px #dedede; margin-bottom:-1px; padding:5px; } #topologyArea .nodeList .schbox input { width:100%; height:23px; } #topologyArea .nodeList .addList { position:absolute; z-index:10; top:7px; right:10px; height:17px; font-size:11px; color:#ff9204; text-decoration:underline; display:block; } #topologyArea .nodeList .addList::before { content:'+'; margin-right:3px; display:inline-block; } #topologyArea .nodeArea { float:left; } #topologyArea .nodeArea + .topology { width:998px; min-height:550px; margin-left:22px; /*margin-left:294px;*/ margin-top:19px; } #topologyArea .nodeArea + .topology + button#forwarding { left:309px; } #topologyArea .performaceBox { width:272px; height:378px; border:1px solid #dedede; padding:11px; overflow:auto; box-sizing:border-box; } #topologyArea .performaceBox h4 { margin:20px 0 5px 0; font-size:11px; color:#888; } #topologyArea .performaceBox h4:first-child { margin-top:0; } #topologyArea .performaceBox .graphBox { height:150px; border:solid 3px #efefef; padding:10px 5px; } #topologyArea .dataInfo { position:relative; width:500px; min-height:350px; padding-top:30px; background-color:#fff; border:1px solid #c3c9ce; box-sizing:border-box; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .dataInfo dl { width:100%; padding-bottom:5px; overflow:hidden; } #topologyArea .dataInfo dl dt { float:left; } #topologyArea .dataInfo dl dt::after { content:':'; padding-left:3px; display:inline-block; } #topologyArea .dataInfo dl dd::before { display:none; } #topologyArea .dataInfo dl dd span { padding-left:11px; } #topologyArea .dataInfo dl.description dt { float:none; } #topologyArea .infoWrite { background-color:#fff; border:1px solid #c3c9ce; margin-bottom:10px; box-sizing:border-box; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .infoWrite h3 { position:relative; height:30px; padding-left:10px; font-size:12px; font-weight:700; color:#4e4e4e; line-height:30px; } #topologyArea .infoWrite dl { width:272px; min-height:337px; border-top:solid 1px #e4e7e9; padding:5px 1px 6px 1px; box-sizing:border-box; overflow:hidden; } #topologyArea .infoWrite dl dt { padding:7px 10px 0 10px; font-size:12px; font-weight:700; color:#999; display:block; } #topologyArea .infoWrite dl dt::before { content:'-'; width:11px; display:inline-block; } #topologyArea .infoWrite dl dd { padding:4px 10px; display:block; } #topologyArea .infoWrite dl select, #topologyArea .infoWrite dl input[type="text"] { width:248px; } #topologyArea .infoWrite dl .btn { padding-top:6px; } #topologyArea .infoWrite dl .btn_save { width:100%; height:28px; background-color:#f1f1f1; border:1px solid #dcdcdc; border-radius:3px; font-size:12px; font-weight:bold; color:#777; line-height:18px; } #topologyArea .topology { position:relative; z-index:1; float:left; width:1078px; min-height:530px; background:#fff; border:1px solid #c3c9ce; border-top:solid 1px #e4e7e9; margin-top:31px; overflow:hidden; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .topology [id$=Topology] { height:616px; margin:-1px 0 0 -1px; } #topologyArea .topology_zoom { position:absolute; z-index:10; top:55px; left:24px; width:80px; height:27px; background:url('../images/zoom_bg.png'); overflow:hidden; } #topologyArea .topology_zoom a { position:absolute; z-index:2; top:5px; width:17px; height:17px; background:url('../images/zoom_btn.png'); text-indent:-9999px; display:block; overflow:hidden; } #topologyArea .topology_zoom .zoomIn { left:5px; background-position:left top; } #topologyArea .topology_zoom .zoomOut { right:5px; background-position:right top; } #topologyArea .topology_zoom .zoomNum { font-size:12px; line-height:28px; letter-spacing:1px; text-align:center; display:block; } #topologyArea .inactivation { position:absolute; z-index:999; top:0; left:0; width:100%; height:100%; } #topologyArea .inactivation .mask { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.7; } #topologyArea .inactivation .notice { position:relative; z-index:10; width:500px; margin:295px auto 350px; font-size:16px; font-weight:700; line-height:21px; color:#fff; text-align:center; text-shadow:2px 2px 2px #000; } #topologyArea .inactivation .progress { position:relative; z-index:10; width:350px; background:url('../images/load2.gif') 30px 32px no-repeat #fff; margin:250px auto 350px auto; padding:30px 30px 30px 85px; font-size:14px; font-weight:700; line-height:21px; } #topologyArea .createMap { position:relative; float:left; width:945px; margin-left:10px; } #topologyArea .createMap h3 { position:absolute; top:0; width:927px; height:30px; background-color:#fff; border:solid 1px #c3c9ce; padding-left:17px; font-size:12px; font-weight:700; color:#4e4e4e; line-height:30px; box-shadow:3px 4px 0 #e0e3e6; } #topologyArea .createMap .topology { width:944px; min-height:615px; overflow:hidden; } #topologyArea .createMap .topology_zoom { top:38px; left:8px; } #topologyArea .createMap + .dataInfo { width:350px; } #topologyArea .createMap + .dataInfo .infoList { width:348px !important; } #topologyArea .mapArea { position:relative; float:left; width:998px; margin-left:22px; } #topologyArea .mapArea h3 { position:absolute; top:0; height:19px; font-size:12px; color:#4e4e4e; font-weight:700; } #topologyArea .mapArea .topology { width:998px; min-height:615px; } #topologyArea .mapArea .topology_zoom { top:25px; left:6px; } #topologyArea .mapArea .pageMode { top:1px; right:1px; } #topologyArea .graphSelection { position:absolute; z-index:10; right:7px; top:28px; font-size:11px; } #topologyArea .graphSelection > span { height: 20px; line-height:20px; vertical-align:top; display:inline-block; } #topologyArea .graphSelection .title { margin-left:30px; } #topologyArea .graphSelection .selectBox { position:relative; width:130px; display:inline-block; } #topologyArea .graphSelection .selectBox > span { width:130px; height:20px; background:#d7d7d7; border-radius:3px; padding:0 10px; line-height:20px; text-align:center; white-space:nowrap; text-overflow:ellipsis; display:inline-block; overflow:hidden; cursor:pointer; box-sizing: border-box; } #topologyArea .graphSelection .selectBox.disable > span { pointer-events:none; cursor:default; background: #eee; color: #999;} #topologyArea .graphSelection .selectBox > span { transition :background 0.2s; } #topologyArea .graphSelection .selectBox:not(.disable):hover > span, #topologyArea .graphSelection .selectBox.on > span{ background: #414141; color: #fff;} #topologyArea .graphSelection .selectBox .option { display:none; position:absolute; border:1px solid #414141; border-top:0; width:100%; box-sizing:border-box; margin-top:-3px; padding-top:3px; border-radius:0 0 3px 3px; } #topologyArea .graphSelection .selectBox .option li { cursor:pointer; padding:0 10px; height:20px; line-height:20px; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #topologyArea .graphSelection .selectBox .option li:hover { background:#d7d7d7; } #topologyArea .graphSelection .selectBox.on .option { display:block; } [id$=Topology] { position:relative; left:0; top:0; width:100%; height:615px; overflow:auto !important; } #forward { position:absolute; left:0; top:0; width:998px; height:615px; background:rgba(255,255,255,.6); display:none; } #forward .draw2d_shape_note_PostIt { fill:transparent; stroke:none; } #forward.dashboard { background:none; } #forward.dashboard .draw2d_shape_node_Fulcrum { fill:transparent !important; stroke:none !important; } #forwardNote { position:absolute; top:16px; right:170px; font-size:12px; color:#444; } #topologyGraphBar { position:absolute; top:10px; right:20px; width:150px; height:auto; text-align:right; } #topologyGraphBar button { width:140px; height:28px; background:#faf9f9; border:1px solid #dcdcdc; border-radius:3px; margin-left:10px; margin-bottom:5px; font-size:11px; font-weight:700; color:#707070; line-height:28px; text-align:center; } #topologyGraphBar button:hover { color:#4e4e4e; } #topologyGraphSelect { position:absolute; width:1292px; height:30px; transform:translate3d(0,0,0); transition:transform 0.2s ease; overflow:hidden; } #topologyGraphSelect.on { transform:translate3d(0,-30px,0); } #topologyArea .nodeArea + .topology #topologyGraphSelect { width:998px; } #topologyGraphSelect button { width:80px; height:20px; margin-right:5px; font-size:11px; white-space:nowrap; text-align:left; text-overflow:ellipsis; overflow:hidden; } #topologyGraphSelect button[data-role="path"] { height:14px; background:url('../images/ico_radio.gif') 0 0 no-repeat; padding-left:18px; margin-top:3px; line-height:14px; } #topologyGraphSelect button[data-role="path"].on { background-position:0 -14px; } #topologyGraphSelect button[data-role="graph"] { background:#fc5228; padding:0 10px; margin-right:10px; color:#fff; box-sizing:border-box; } #topologyGraphSelect button[data-role="graph"].on { background:#ec0024; } #topologyGraphSelect li { position:relative; float:right; padding:5px; vertical-align:top; } #topologyGraphSelect li button[data-role="path"] { display:none; } #topologyGraphSelect li.on {float:left; } #topologyGraphSelect li.on button[data-role="path"] { display:inline-block; } .section[role="topology"] .pageViewTab { position:absolute; right:309px; top:9px; text-align:center; } .section[role="topology"] .pageViewTab li { position:relative; float:left; width:105px; height:25px; border:1px solid #4e4e4e; margin-left:3px; font-size:11px; color:#a0a0a0; line-height:25px; box-sizing:border-box; } .section[role="topology"] .pageViewTab li { width:auto; } .section[role="topology"] .pageViewTab li:first-child { margin-left:0; } .section[role="topology"] .pageViewTab li.on { background:#4e4e4e; border-color:#4e4e4e; color:#fff; } .section[role="topology"] .pageViewTab li.dim::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#4e4e4e; display:block; opacity:0.6; cursor:no-drop; } .section[role="topology"] .pageViewTab li.dim a { pointer-events:none; } .section[role="topology"] .pageViewTab li a { padding:0 10px; display:block; } .vnfTopology[role="topology"] #topologyArea .nodeList ul { height:404px; } .vnfTopology[role="topology"] #topologyArea .nodeList[role="connectivity"] ul { height:180px; } .nscTopology[role="topology"] #topologyArea .nodeList ul { height:170px; } .nscTopology[role="topology"] #topologyArea .nodeList[role="connectivity"] ul { height:180px; } #topologyArea.nsCatalog .nodeList ul { height:143px; } #topologyArea.nsCatalog .nodeList:last-child ul { height:178px; } #topologyArea.nsCatalog .topology { overflow:hidden; } #topologyArea.nsCatalog .topology [id$=Topology] { height:616px; margin:-1px 0 0 -1px; } #topologyArea.forwardGraph h3 { width:1061px; } #topologyArea.forwardGraph #forward { position:absolute; top:0; left:0; width:100%; height:615px; background:rgba(255,255,255,.7); } #topologyArea.forwardGraph .createMap { width:1078px; margin-left:0; } #topologyArea.forwardGraph .createMap .topology { width:100%; } #topologyArea.forwardGraph .graphSelection { top:45px; left:15px; right:auto; width:1272px; padding-right:20px; text-align:right; } #topologyArea.forwardGraph .dataInfo { width:500px; } #topologyArea.forwardGraph .dataInfo h3 { width:auto; } #topologyArea.forwardGraph .dataInfo .infoList { width:498px !important; } #topologyArea.lifeCycle .infoList h4 { height:25px; background:none; border:0; margin:0 0 -7px 0; padding:0; font-size:13px; font-weight:normal; display:block; clear:both; } /* TOPOLOGY 오른쪽 메뉴 */ #topologyArea .dataInfo > .infoList { position:relative; height:616px; border-top:solid 1px #e4e7e9; display:none; overflow-y:auto; } .dataInfo { float:right; } .dataInfo h3 { position:absolute; top:0; left:12px; height:30px; font-size:13px; font-weight:700; color:#474d52; line-height:30px; } .dataInfo h3 span { color:#ff9204; } .dataInfo .infoList { width:498px; border:0; padding:0 10px 0 10px; box-sizing:border-box; } .dataInfo .infoList h4 { height:35px; background-color:#f5f6f7; border-top:1px solid #dedede; border-bottom:1px solid #dedede; margin:0 -10px -1px -10px; padding:0 10px; font-size:14px; font-weight:700; line-height:35px; overflow:hidden; clear:both; } .dataInfo .infoList h4:first-child { margin-top:-1px; } .dataInfo .infoList h4 + dl { margin-top:15px; } .dataInfo .infoList h5 { height:25px; border-bottom:1px solid #dedede; margin:15px 0 10px 0; font-size:13px; display:block; clear:both; } .dataInfo .infoList dl { padding:0 0 15px 0; } .dataInfo .infoList dl dd { font-size:11px; } .dataInfo .infoList dl dd::before { content:''; width:11px; display:inline-block; } .dataInfo .infoList dl dd span { font-size:11px; font-weight:700; } .dataInfo .infoList dl dd select, .dataInfo .infoList dl dd input[type="text"] { width:95%; } .dataInfo .infoList dl.last { margin-bottom:35px; display:block; } .dataInfo .infoList dl.description { margin-bottom:35px; display:block; } .dataInfo .infoList dl.description dt, .dataInfo .infoList dl.description dd { vertical-align:top; display:inline-block; } .dataInfo .infoList dl.description dt { margin-right:-5px; } .dataInfo .infoList dl.description dd textarea { width:100%; min-width:478px; } .dataInfo .infoList dl.description + .wrap_btn { margin-top:-30px; } .dataInfo .infoList .wrap_btn { margin-right:0; } .dataInfo .infoList .wrap_btn .btn.inner { width:100%; min-width:50px; background-color:#efefef; border:solid 1px #c1c1c1; margin-bottom:20px; color:#777; box-shadow:1px 1px 1px #e2e2e2; cursor:pointer; } .dataInfo .infoList .notice { margin-top:15px; font-size:12px; color:#7f7f7f; line-height:16px; text-align:center; display:none; } .dataInfo .infoList .notice .btn { width:100%; background-color:#faf9f9; border:1px solid #dcdcdc; border-radius:3px; margin-top:15px; font-size:11px; font-weight:800; line-height:28px; display:block; } .dataInfo .infoList .notice.open { display:block; } .dataInfo .infoList .notify { position:absolute; left:0; bottom:0; background-color:#fafafa; border-top:dashed 1px #dedede; margin:0; padding:8px 10px 12px 10px; } .dataInfo .infoList .notify li { margin-top:5px; padding-left:11px; font-size:11px; color:#888; } .dataInfo .infoList .notify li::before { content:'*'; width:11px; margin-left:-11px; display:inline-block; } .dataInfo .infoList .notify li em { font-size:12px; font-weight:700; } .dataInfo .infoList .notify ul li::before { content:'-'; width:9px; margin-left:-11px; display:inline-block; } .dataInfo .infoList .notice { margin:15px 0 40px 0; font-size:12px; color:#7f7f7f; line-height:16px; text-align:center; display:none; } .dataInfo .infoList .notice select { width:100%; margin-top:15px; padding-right:5px; } .dataInfo .infoList .notice .btn { width:100%; background-color:#faf9f9; border:1px solid #dcdcdc; border-radius:3px; margin-top:15px; font-size:11px; font-weight:800; line-height:28px; display:block; } .dataInfo .infoList .notice.open { display:block; } .dataInfo .infoList .notice:last-child { margin-bottom:15px; } .dataInfo .vnfbtn { width:100%; height:28px; background-color:#ffeee4; border:solid 1px #ffb386; border-radius:3px; margin:14px 0; font-size:13px; font-weight:700; color:#ff6000; line-height:26px; text-align:center; display:block; box-shadow:1px 2px 1px #dedede; } .dataInfo .vnfbtn span { background:url('../images/btn_ico_important.png') left center no-repeat; margin-top:1px; padding-left:22px; display:inline-block; } .dataInfo .onboardbtn { width:100%; height:30px; background-color:#ffeee4; border:solid 1px #ffb386; border-radius:3px; margin:14px 0; font-size:13px; font-weight:700; color:#ff6000; line-height:21px; text-align:center; display:block; box-shadow:1px 2px 1px #dedede; } .dataInfo .onboardbtn span { background:url('../images/btn_ico_important.png') left center no-repeat; margin-top:1px; padding-left:22px; display:inline-block; } .dataInfo h4 + .onboardbtn { margin-bottom:23px; } .dataInfo .infoTbl { width:100%; margin:-11px 0 45px 0; } .dataInfo .infoTbl:last-child { margin-bottom:14px !important; } .dataInfo .infoTbl select { width:93%; background-color:#fff; padding:0 0 0 3px; } .dataInfo .infoTbl th { background-color:#efefef; border:solid 1px #cbcbcb; padding:5px 0; font-size:12px; font-weight:bold; color:#777; vertical-align:middle; } .dataInfo .infoTbl td { border:solid 1px #cbcbcb; padding:5px 0; font-size:12px; text-align:center; vertical-align:middle; } .dataInfo .infoTbl td select { margin-bottom:-7px; } .dataInfo .infoTbl tr.stitle th { font-size:12px; } .dataInfo h4 + .infoTbl { margin-top:15px; } .dataInfo .infoTbl.network { margin-bottom:20px; } .dataInfo .infoTbl.network td { font-size:11px; } .dataInfo .infoTbl.network ol { margin-top:-5px; padding:3px 0 3px 12px; text-align:left; } .dataInfo .infoTbl.network ol li { margin-top:5px; font-size:11px; line-height:14px; text-align:left; } .dataInfo .infoTbl.network ol li::before { content:"-"; width:7px; margin-left:-7px; color:#888; display:inline-block; } .dataInfo .infoTbl.network ol li .tit { color:#888; } .dataInfo .infoTbl.network ol li .tit:after { content:':'; display:inline-block; padding-left:3px; } .dataInfo .elementAdd { margin-bottom:45px; padding-top:15px; } .dataInfo .elementAdd .btnbox { text-align:center; } .dataInfo .elementAdd .btnbox a { height:26px; background-color:#e2e2e2; border:solid 1px #c1c1c1; border-radius:3px; margin:0 1px; padding:0 10px; font-size:13px; font-weight:700; color:#888; line-height:26px; text-align:center; display:inline-block; box-shadow:1px 1px 1px #e2e2e2; } .dataInfo .elementAdd .btnbox a:hover { background-color:#f58026; border:solid 1px #e96500; color:#fff; } .dataInfo .elementAdd .note { margin:13px 5px; font-size:11px; color:#888; } .dataInfo .elementAdd .note em { margin:1px 0 5px 0; font-weight:bold; color:#f58026; display:inline-block; } .dataInfo .elementAdd .note .tit { font-size:12px; font-weight:700; color:#444; display:block; } /* TOPOLOGY 오른쪽 메뉴 - tab */ .dataInfo .infoList.infoTab { overflow:hidden; } .dataInfo .infoTab hr { border:0; border-top:dashed 1px #ccc; margin:-30px 0 12px 0; padding:0; display:block; } .dataInfo .infoTab hr:last-child { border-top:solid 1px #dedede; } .dataInfo .infoTab h5 { padding-top:35px; } .dataInfo .infoTab > div > h5:first-child { padding-top:5px; } .dataInfo .infoTab ul.tabMenu { position:relative; z-index:2; margin:-1px -10px 0 -10px; overflow:hidden; } .dataInfo .infoTab ul.tabMenu:after { content:''; display:block; clear:both; } .dataInfo .infoTab ul.tabMenu li { float:left; background-repeat:no-repeat; } .dataInfo .infoTab ul.tabMenu li a { width:67px; height:44px; background-color:#faf9f9; background-position:11px 0; background-repeat:no-repeat; border:1px solid #dedede; margin-left:-1px; text-indent:-99999px; display:block; } .dataInfo .infoTab ul.tabMenu li:first-child a { width:66px;} .dataInfo .infoTab ul.tabMenu li:last-child a { border-right:0; } .dataInfo .infoTab ul.tabMenu li[aria-selected="true"] a { background-color:#fff; border-bottom:0; } .dataInfo .infoTab ul.tabMenu li a.general { background-image:url('../images/infoTab_general.png'); } .dataInfo .infoTab ul.tabMenu li a.software { background-image:url('../images/infoTab_software.png'); } .dataInfo .infoTab ul.tabMenu li a.interface { background-image:url('../images/infoTab_interface.png'); } .dataInfo .infoTab ul.tabMenu li a.parameter { background-image:url('../images/infoTab_parameter.png'); } .dataInfo .infoTab .ui-tabs-panel { height:534px; margin:0 -10px; padding:0 10px; overflow-x:hidden; overflow-y:auto; } .dataInfo .infoTab #general, .dataInfo .infoTab #software, .dataInfo .infoTab #interface, .dataInfo .infoTab #parameter { display:none; } .dataInfo .infoTab #interface > div, .dataInfo .infoTab #parameter > div { border-top:1px dashed #dedede; clear:both; } .dataInfo .infoTab #interface > div::after, .dataInfo .infoTab #parameter > div::after { content:''; display:block; clear:both; } .dataInfo .infoTab #interface > ul li:first-child, .dataInfo .infoTab #interface .wrap_btn { border-top:0; } /* Topology Information Input Data */ .dataBox { position:relative; z-index:10; display:none; clear:both; } .dataBox:after { content:''; display:block; clear:both; } .dataBox:last-child { padding-bottom:10px; } .dataBox hr { border:0; border-top:dashed 1px #ccc; margin:5px 0 14px 0; padding:0; display:block; clear:both; } .dataBox h5 { padding-top:35px; clear:both; } .dataBox h5:first-child { margin-top:0 !important; padding-top:0 !important; } .dataBox h5 + table { margin-top:-11px; } .dataBox dl table { width:95%; margin:0 0 5px 10px; } .dataBox dl.description { margin-bottom:0px !important; } .dataBox table { width:100%; margin-bottom:10px; } .dataBox table select { width:93%; background-color:#fff; padding:0 0 0 3px; } .dataBox table select.full { width:95%; } .dataBox table th { background-color:#efefef; border:solid 1px #cbcbcb; padding:5px 0; font-size:11px; font-weight:bold; color:#777; vertical-align:middle; } .dataBox table td { border:solid 1px #cbcbcb; padding:5px 0; font-size:12px; text-align:center; vertical-align:middle; } .dataBox table td select { margin-bottom:-7px; } .dataBox table td input[type="text"] { width:93%; } .dataBox table tr.stitle th { font-size:10px; } .dataBox.open { padding:15px 0 36px 0; display:block; } .dataBox.network { padding-bottom:0; display:block; } .dataBox.network td { font-size:11px; } .dataBox.network ol { margin-top:-5px; padding:3px 7px 2px 12px; text-align:left; } .dataBox.network ol li { margin-top:4px; font-size:11px; line-height:14px; text-align:left; } .dataBox.network ol li::before { content:"-"; width:7px; margin-left:-7px; color:#888; display:inline-block; } .dataBox.network ol li .tit { color:#888; } .dataBox.network ol li .tit:after { content:':'; display:inline-block; padding-left:3px; } .dataBox.network ol li input.size1 { width:100% !important; } .dataBox.network ol li input.size2 { width:66% !important; } .dataBox.network ol li input.size3 { width:57% !important; } .dataBox.network ol li input[type="text"] { height:18px; margin-top:0; padding:0; font-size:11px; line-height:18px; text-align:center; } .dataBox.network .mark { width:22px; vertical-align:middle; display:inline-block; } .dataBox.network .mark a { width:9px; height:9px; background-image:url('../images/ico_add.gif'); background-repeat:no-repeat; font-size:0; text-align:left; text-indent:-9999px; display:inline-block; overflow:hidden; } .dataBox.network .mark a.add { background-position:left top; } .dataBox.network .mark a.delete { background-position:left bottom; } /* Forwarding Graph 오른쪽 메뉴 */ .forwardGraph .dataInfo dl.description { margin-bottom:0; } .forwardGraph .dataInfo dl.description + h4, .forwardGraph .dataInfo .createbtn + h4 { margin-top:40px; } .dataInfo .createbtn { width:100%; height:30px; background-color:#ffeee4; border:solid 1px #ffb386; border-radius:3px; margin:14px 0; font-size:13px; font-weight:700; color:#ff6000; line-height:21px; text-align:center; display:block; box-shadow:1px 2px 1px #dedede; } .dataInfo .forwardBtn { margin:1px 0 -6px 0; display:block; } .dataInfo .forwardBtn:after { content:''; display:block; clear:both; } .dataInfo .forwardBtn .btn { float:right; width:48.5%; background-color:#efefef; border:solid 1px #c1c1c1; border-radius:3px; padding:0; font-size:11px; font-weight:800; line-height:28px; display:inline-block; } .dataInfo .forwardBtn .btn:first-child { float:left; } .pathInfo { position:relative; border-bottom:dashed 1px #dedede; margin-bottom:-1px; padding:16px 0 5px 0; } .pathInfo:after { content:''; display:block; clear:both; } .pathInfo dl.path_name dd { margin-right:22px; } .pathInfo .check { position:absolute; z-index:2; top:0; right:0; padding:7px 0; } .pathInfo .check input { width:17px; height:17px; } .pathInfo .forwardBtn { margin-bottom:10px; } .path_color { position:relative; z-index:99; overflow:visible !important; } .path_color dd { display:block; } .path_color .choice { position:relative; z-index:99; width:100%; height:28px; background:url('../images/ico_option.gif') right center no-repeat; border:solid 1px #bcbcbc; border-radius:3px; overflow:hidden; clear:both; box-sizing:border-box; } .path_color .choice ul { position:absolute; top:27px; left:-1px; width:100%; background-color:#fff; border:solid 1px #bcbcbc; border-radius:3px; padding:2px 0; } .path_color .choice ul li { margin:-2px 0; padding:3px 10px; font-size:12px !important; cursor:pointer; } .path_color .choice ul li:hover { background-color:#f1f1f1; } .path_color .choice ul li span { height:5px; margin:5px 0; padding:0 !important; font-size:0; font-weight:normal; text-indent:-9999px; display:block; overflow:hidden; } .path_color .choice ul li span.color1 { background-color:#ff0000; } .path_color .choice ul li span.color2 { background-color:#ffba00; } .path_color .choice ul li span.color3 { background-color:#da823b; } .path_color .choice ul li span.color4 { background-color:#009ef9; } .path_color .choice ul li span.color5 { background-color:#00dc2f; } .path_color .choice ul li span.color6 { background-color:#ee00eb; } .path_color .choice ul li.on { position:absolute; z-index:99; top:-24px; left:0; width:93%; background:none; } .path_color .choice.active { border:solid 1px #555; overflow:visible; } /* Topology Context Menu */ .context-menu-list { position:absolute; background:#fff; border-radius:2px; box-shadow:0 0 1px 1px #bbb; } .context-menu-list li { border-top:1px solid #d7d7d7; padding:5px 10px; font-size:11px; white-space:nowrap; cursor:pointer; } .context-menu-list li:first-child { border-top:0; } .tooltip { position:absolute; background:#f0f0f0; border:1px solid #ddd; border-radius:3px; padding:10px; box-shadow:0 1px 1px #999; } .tooltip:after, .tooltip:before { content:' '; position:absolute; bottom:100%; width:0; height:0; border:solid transparent; pointer-events:none; } .tooltip .portData * { font-size:12px; } .tooltip .portData li { margin:5px 0; overflow:hidden; } .tooltip .portData li .title { font-weight:bold; } .tooltip .portData li .title:after { content:':'; margin:0 3px; display:inline; } .tooltip .portData li.desc .title { display:block; } /* Detail - iframe */ .detailFrameBox { width:100%; height:800px; border:0; } .detailTopology { width:auto; min-width:1180px !important; background:none !important; } .detailTopology #body, .detailTopology #body[role="full"] .contents { width:1420px; } .detailTopology #body { padding-top:10px; } .detailTopology #body .section { padding-left:0; } .detailTopology .title_area { display:none; } .detailTopology .pageMode { right:392px; } .detailTopology .pageViewTab { width:1403px; margin-left:0 !important; } .detailTopology .pageViewTab ul { width:100%; margin-bottom:5px; } .detailTopology .dataTable { width:99% !important; } .detailTopology #topologyArea h2, .detailTopology #topologyArea .dataInfo, .detailTopology #topologyArea .topology { box-shadow:none; } .detailTopology #topologyArea h2 { width:1009px; } .detailTopology #topologyArea .dataInfo { width:367px; } .detailTopology #topologyArea .dataInfo .infoList { width:365px; } .detailTopology #topologyArea .topology { width:1026px !important; height:615px; } .detailTopology #popupArea { top:0; right:0; display:block; } .detailTopology #popupArea .popup { margin:0 auto; display:block; transform:translateY(0) scale(1); opacity:1; } /*------- 8. POPUP UI -------*/ .ui-widget { font-family:Tahoma !important; } .ui-widget-overlay { background:none; background-color:#000; opacity:0.8 !important; } .ui-dialog { border-radius:0 !important; padding:0; } .ui-dialog-titlebar { height:44px; background:#808283; border-radius:0 !important; padding:0 0 0 15px !important; font-size:14px; color:#fff; line-height:44px; } .ui-dialog-titlebar .ui-dialog-title { margin:0; font-size:16px; font-weight:normal; } .ui-dialog-titlebar .ui-dialog-titlebar-close { top:16px; right:16px; width:13px; height:13px; background:none; border:0; margin-top:0 !important; } .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon { background:url('../images/ico_close_pop.png') center top no-repeat; } .ui-dialog-content { min-height:50px !important; margin-top:0; font-size:12px; } .ui-dialog-buttonset { float:none !important; margin-left:11px; padding:10px 0 5px 0; text-align:center; } .ui-dialog-buttonset .ui-button { min-width:70px; height:32px; background-image:url('../images/btn_page_right.gif'); background-position:right top; background-repeat:no-repeat; padding:0 10px; font-size:12px; font-weight:700; color:#fff; line-height:21px; } .ui-dialog-buttonset .ui-button:before { content:''; position:absolute; left:0; top:0; width:16px; height:32px; background-image:url('../images/btn_page_left.gif'); background-position:left top; background-repeat:no-repeat; display:block; } .ui-dialog .subTitle { width:652px; border-bottom:solid 1px #cdcdcd; margin:50px 20px 0 20px; margin-bottom:0; padding-bottom:8px; font-size:16px; font-weight:700; color:#333 !important; letter-spacing:-1px; display:block; } .ui-dialog .subTitle:first-child { margin-top:10px; } .ui-dialog .subTitle + .infoWrite { padding-top:0; } .ui-dialog .subTitle_check { width:652px; height:27px; margin:-27px 20px 0 20px; text-align:right; } .ui-dialog .subTitle_check input[type="checkbox"] { width:19px; height:19px; } .ui-dialog .subTitle_check + .infoWrite { padding-top:0; } .ui-dialog .form_search { padding:25px 19px 0; } .ui-dialog .form_search label input, .ui-dialog .form_search label .wrap_btn { vertical-align:middle; display:inline-block; } .ui-dialog .form_search label .wrap_btn .btn { margin-top:0; } .ui-dialog .form_search .wrap_btn { float:right; clear:none; } .ui-dialog .notify { width:94%; margin:20px auto 0 auto; display:block; clear:both; } .ui-dialog .notify li { margin-bottom:5px; font-size:12px; font-weight:700; text-align:left; } .ui-dialog .notify li::before { content:'-'; width:11px; display:inline-block; } .ui-dialog .notify + .form_search { padding-top:0; } .ui-dialog .dataTable { width:95%; margin:10px auto 0 auto; } .ui-dialog .dataTable select, .ui-dialog .dataTable input[type="text"] { width:93%; margin:0; padding-left:5px; } .ui-dialog .dataTable select { padding:0 0 0 5px; } .ui-dialog .dataTable .rowadd { width:80px !important; text-align:left; } .ui-dialog .dataTable .rowadd a { width:23px; height:23px; background-color:#bcbcbc; border:solid 1px #aaa; border-radius:3px; margin:0 2px; font-size:25px; color:#fff !important; line-height:19px; text-align:center; display:inline-block; cursor:pointer; } .ui-dialog .dataTable .btn_filelist { width:100px; height:23px; background-color:#f1f1f1; border:solid 1px #dedede; border-radius:3px; line-height:23px; display:inline-block; } .ui-dialog .infoWrite { padding:20px; padding-bottom:0; display:block; } .ui-dialog .infoWrite dt { width:120px; height:21px; margin-top:10px; padding-top:6px; font-size:12px; font-weight:700; display:block; } .ui-dialog .infoWrite dd { min-height:27px; margin-top:-27px; padding-left:120px; display:block; } .ui-dialog .infoWrite dd span { margin-top:7px; font-size:12px; display:inline-block; } .ui-dialog .infoWrite dd label { font-size:12px; } .ui-dialog .infoWrite dd select, .ui-dialog .infoWrite dd input[type="text"] { width:532px; } .ui-dialog .infoWrite dd input[type="password"] { width:260px; } .ui-dialog .infoWrite dd input.id, .ui-dialog .infoWrite dd select.ip, .ui-dialog .infoWrite dd select.VLtype, .ui-dialog .infoWrite dd select.HAmodel { width:260px; } .ui-dialog .infoWrite dd select + table { margin-top:10px; } .ui-dialog .infoWrite dd input.version { width:161px !important; } .ui-dialog .infoWrite dd input.imgName { width:231px !important; } .ui-dialog .infoWrite dd select.imgName { width:297px !important; } .ui-dialog .infoWrite dd textarea { width:532px; height:75px; overflow:auto; } .ui-dialog .infoWrite table { width:532px; } .ui-dialog .infoWrite th, .ui-dialog .infoWrite td { padding:8px; border:1px solid #ddd; font-size:12px; text-align:center; vertical-align:middle; } .ui-dialog .infoWrite thead th { background:#4c4c4c; color:#fff; border-color:#d7d7d7; } .ui-dialog .infoWrite td select, .ui-dialog .infoWrite td input[type="text"] { width:90%; margin:0 6px; box-sizing:border-box; } .ui-dialog .infoWrite .note { margin-top:5px; font-size:11px; color:#666; } .ui-dialog .infoWrite .subInfo { height:28px; margin-top:10px; display:block; } .ui-dialog .infoWrite .subInfo li { float:left; margin-left:37px; } .ui-dialog .infoWrite .subInfo li:first-child { margin-left:0; } .ui-dialog .infoWrite .subInfo li span { font-size:11px; font-weight:700; color:#888 !important; } .ui-dialog .infoWrite .subInfo li input[type="text"] { width:210px; margin-left:5px; } .ui-dialog .infoWrite .subData { width:550px; border-collapse:collapse; border-spacing:0; margin-top:10px; display:table; box-sizing:border-box; } .ui-dialog .infoWrite .subData li { border:solid 1px #ddd; padding:0 0 8px 0; font-size:12px; text-align:center; display:table-cell; } .ui-dialog .infoWrite .subData li .tit { background-color:#4c4c4c; border-bottom:solid 1px #ddd; margin:0 0 7px 0; padding:7px 0 8px 0; color:#fff; display:block; } .ui-dialog .infoWrite .roleList { width:98%; } .ui-dialog .infoWrite .roleList:after { content:''; display:block; clear:both; } .ui-dialog .infoWrite .roleList li { float:left; min-width:25%; margin-top:5px; } .ui-dialog .errorBox { margin:30px; color:#ff6f00; } .ui-dialog .errorBox .message { margin-top:10px; font-size:13px; color:#4e4e4e !important; } .ui-dialog .createSave { margin:30px; font-size:14px; } .ui-dialog .createSave .note { padding-top:10px; } .ui-dialog .createSave .note li { margin-top:15px; } .ui-dialog .createSave .note em { font-weight:700; } .ui-dialog .createImage { height:250px; background-color:#efefef; margin-top:20px; } .ui-dialog .messageTxt { width:90%; margin:30px auto 0 auto; font-size:13px; line-height:18px; text-align:left; } .ui-dialog .messageTxt em { font-weight:bold; color:#ff8400; } .ui-dialog .progressText { margin:30px 20px 10px 20px; } .ui-dialog .progressOnly { width:360px; background:url('../images/load2.gif') 50px 52px no-repeat #fff; margin:200px 0 0 -25px; padding:50px 30px 50px 110px; font-size:14px; font-weight:700; line-height:21px; box-shadow:3px 1px 10px #000; } /* Input Infomation Layer */ .inputInfoArea { position:absolute; z-index:100; top:0; left:0; width:100%; height:100%; display:none; overflow:hidden; } .inputInfoArea table { background-color:#fff; } .inputInfoArea .bgBox { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background-color:#fff; } .inputInfoArea .contBox { position:relative; z-index:10; width:100%; height:100%; overflow:auto; } .inputInfoArea .dataTable { padding-top:15px; } .inputInfoArea .dataTable.small { width:70% !important; margin:0 auto; } .inputInfoArea .contents_btn .btn { margin:0 5px; padding:0 30px; } /* Select option to create VNF catalog */ .vnfCatalog { padding:35px 50px 10px 50px; font-size:12px; } .vnfCatalog .note { border-bottom:dashed 1px #cacaca; padding-bottom:10px; font-size:13px; font-weight:bold; } .vnfCatalog .choice { } .vnfCatalog .choice li { margin-top:17px; } .vnfCatalog .choice input[type="radio"] { margin-top:1px; vertical-align:top; } .vnfCatalog .choice .schfile { position:relative; height:23px; border:solid 1px #cacaca; border-radius:3px; margin:7px 0 0 15px; } .vnfCatalog .choice .schfile span { font-size:11px; color:#999; line-height:23px; text-align:center; display:block; } .vnfCatalog .choice .schfile input[type="file"] { position:absolute; top:0; left:0; width:100%; height:23px; margin:0; display:block; opacity:0; cursor:pointer; } .vnfCatalog .choice .schfile.disabled { background-color:#ddd; } .vnfCatalog .choice .schfile.disabled input[type="file"] { display:none; } /* VNF I/F information Role */ .ifRole { position:relative; height:28px; border:solid 1px #bcbcbc; border-radius:3px; } .ifRole .tit { height:28px; background:url('../images/ico_option.gif') right center no-repeat; padding-left:11px; line-height:28px; text-align:left; display:block; cursor:default; } .ifRole .itemList { position:absolute; z-index:90; top:29px; left:-1px; width:100%; background-color:#fff; border:solid 1px #bcbcbc; border-radius:3px; display:none; overflow:hidden; } .ifRole .itemList ul { text-align:left; } .ifRole .itemList ul li { position:relative; padding:3px 0 5px 7px; } .ifRole .itemList ul li:hover { background-color:#f1f1f1; } .ifRole .itemList label { padding-left:18px; display:block; } .ifRole .itemList input[type="checkbox"] { position:absolute; top:5px; left:7px; width:13px; height:13px; vertical-align:middle; } .ifRole .itemList .btnbox { padding:5px 0; text-align:center; } .ifRole .itemList .btnbox button { width:43%; height:21px; background-color:#aaa; border:solid 1px #999; border-radius:3px; margin:0 1px; padding-bottom:1px; color:#fff; line-height:16px; display:inline-block; } .ifRole.active { border-color:#555; } .ifRole.active .itemList { display:block; } /* On Boarding */ .onboarding { padding:25px 30px 0 30px; font-size:12px; line-height:18px; } .onboarding .passbox { position:relative; background-color:#fafafa; border-top:dashed 1px #d2d2d2; border-bottom:dashed 1px #d2d2d2; margin:15px 0; padding:40px 0; text-align:center; } .onboarding .passbox input[type="password"] { width:270px; text-align:center; } .onboarding .passbox .btn { width:100px; height:32px; background-color:#f58026; border:solid 1px #e96500; border-radius:3px; margin-left:3px; font-weight:bold; color:#fff; line-height:28px; vertical-align:middle; box-shadow:0 2px 0 #d4d4d4; } .onboarding .passbox .note { position:absolute; top:18px; left:145px; height:18px; background:url('../images/ico_message.png') left 3px no-repeat; padding-left:19px; font-size:11px; color:#ff553c; display:block; } /* Select VNF Info */ .vnfDataInfo { position:relative; height:615px; padding-top:30px; margin-left:5px; } .vnfDataInfo:after { content:''; display:block; clear:both; } .vnfDataInfo h2 { position:absolute; top:12px; left:0; font-size:11px; font-weight:bold; } .vnfDataInfo h3 { display:none; } .vnfDataInfo h4 { height:20px; border-bottom:solid 1px #ddd; margin:37px 0 -1px 0; font-size:12px; font-weight:bold; color:#333; display:block; } .vnfDataInfo h5 { height:18px; padding:8px 0 0 0; font-size:12px; color:#222; display:block; } .vnfDataInfo h5::before { content:'['; margin-right:2px; display:inline-block; } .vnfDataInfo h5:after { content:']'; margin-left:2px; display:inline-block; } .vnfDataInfo h5:first-child { padding-top:10px !important; } .vnfDataInfo h5 + dl { margin-top:-8px; } .vnfDataInfo .topology { float:left; width:1026px; height:615px; border:solid 1px #dedede; overflow:hidden; } .vnfDataInfo .topology [id$=Topology] { height:100%; margin:-1px 0 0 -1px; } .vnfDataInfo .topology_zoom { position:absolute; z-index:10; top:36px; left:6px; width:80px; height:27px; background:url('../images/zoom_bg.png'); overflow:hidden; } .vnfDataInfo .topology_zoom a { position:absolute; z-index:2; top:5px; width:17px; height:17px; background:url('../images/zoom_btn.png'); display:block; text-indent:-9999px; overflow:hiden; } .vnfDataInfo .topology_zoom .zoomIn { left:5px; background-position:left top; } .vnfDataInfo .topology_zoom .zoomOut { right:5px; background-position:right top; } .vnfDataInfo .topology_zoom .zoomNum { font-size:12px; line-height:25px; letter-spacing:1px; text-align:center; display:block; } .vnfDataInfo .infoBox { position:relative; float:right; width:380px; height:100%; border:solid 1px #dedede; margin-left:10px !important; } .vnfDataInfo .tabMenu { position:absolute; z-index:2; top:-26px; left:0; width:100%; } .vnfDataInfo .tabMenu:after { content:''; display:block; clear:both; } .vnfDataInfo .tabMenu li { float:left; width:50%; height:25px; border:solid 1px #dedede; margin:0 -1px; } .vnfDataInfo .tabMenu li a { height:24px; background-color:#faf9f9; font-size:11px; color:#a2a2a2; line-height:23px; text-align:center; display:block; } .vnfDataInfo .tabMenu li[aria-selected="true"] { border-bottom:0; } .vnfDataInfo .tabMenu li[aria-selected="true"] a { height:25px; background-color:#fff; font-size:12px; font-weight:bold; color:#8f8f8f; line-height:27px; } .vnfDataInfo .dataBox { position:relative; z-index:1; height:100%; padding:0 10px; overflow:auto; display:none; } .vnfDataInfo .dataBox h4:first-child { margin-top:19px; } .vnfDataInfo .dataBox hr { margin:10px 0 0 0; } .vnfDataInfo .dataBox dl { padding:10px 0 0 1px; display:block; } .vnfDataInfo .dataBox dl:after { content:''; display:block; clear:both; } .vnfDataInfo .dataBox dl dt { float:left; margin-right:-2px; font-size:11px; color:#888; } .vnfDataInfo .dataBox dl dt::after { content:':'; display:inline-block; padding-left:3px; } .vnfDataInfo .dataBox dl dt::before { content:"-"; display:inline-block; width:11px; } .vnfDataInfo .dataBox dl dd { float:left; padding-left:11px; font-size:11px; font-weight:700; color:#4e4e4e; } .vnfDataInfo .dataBox dl.write { padding-top:0; } .vnfDataInfo .dataBox dl.write dd { margin-top:-5px; } .vnfDataInfo .dataBox dl.write span { width:320px; padding:10px 0 7px 0; font-weight:normal; display:block; } .vnfDataInfo .dataBox dl.write select, .vnfDataInfo .dataBox dl.write input[type="text"] { height:25px; line-height:18px; } .vnfDataInfo .dataBox dl.write select { width:100%; } .vnfDataInfo .dataBox dl.write input[type="text"].size1 { width:286px; } .vnfDataInfo .dataBox dl.write input[type="text"].size2 { width:240px; } .vnfDataInfo .dataBox dl.write input[type="text"].size3 { width:216px; } .vnfDataInfo .dataBox dl.write.full { margin-top:10px !important; } .vnfDataInfo .dataBox dl.write.name { margin-top:13px; } .vnfDataInfo .dataBox dl.write.location { margin-top:15px; } .vnfDataInfo .dataBox dl + table { margin-top:7px; } .vnfDataInfo .dataBox table { margin-top:0; } .vnfDataInfo .dataBox table td { font-size:11px; } .vnfDataInfo .dataBox table select { width:90%; height:25px; margin-bottom:0; } .vnfDataInfo .dataBox table select:disabled { background-color:#eee; } .vnfDataInfo .dataBox table + dl { margin-top:-5px; padding-top:0; } .vnfDataInfo .dataBox .note { width:245px; margin:10px auto 0 auto; font-size:11px; color:#888; line-height:16px; text-align:center; } .vnfDataInfo .dataBox .note.close { display:none; } .vnfDataInfo .dataBox .input_btn { float:right; width:45px; height:18px; background-color:#aaa; border:solid 1px #888; border-radius:3px; margin:-24px 0 0 0; padding:0; font-size:11px; font-weight:bold; color:#fff !important; line-height:18px; text-align:center; } .vnfDataInfo .dataItem { padding-bottom:15px; display:none; } .vnfDataInfo .itemBox { position:relative; } .vnfDataInfo .itemBox .btn { position:absolute; top:-24px; right:0; width:47px; height:20px; background-color:#aaa; border:solid 1px #888; border-radius:3px; padding:0; font-size:11px; font-weight:bold; color:#fff !important; line-height:18px; text-align:center; display:inline-block; } .vnfDataInfo .itemBox .btn.side { right:50px; } .vnfDataInfo .itemBox .btn.side2 { right:100px; } .vnfDataInfo .itemBox.modelSetting { padding-top:10px; font-size:12px; color:#777; } .vnfDataInfo .itemBox.modelSetting span { font-weight:bold; color:#333; } .vnfDataInfo .itemBox.modelSetting select { width:105px; margin-left:5px; text-align:center; vertical-align:middle; } .vnfDataInfo .networkInfo { margin-top:-5px; padding:3px 0 3px 12px; } .vnfDataInfo .networkInfo li { margin-top:5px; font-size:11px; line-height:14px; text-align:left; } .vnfDataInfo .networkInfo li::before { content:"-"; width:7px; margin-left:-7px; color:#888; display:inline-block; } .vnfDataInfo .networkInfo li .tit { color:#888; } .vnfDataInfo .networkInfo li .tit:after { content:':'; display:inline-block; padding-left:3px; } .vnfDataInfo .networkInfo input.size1 { width:95%; } .vnfDataInfo .networkInfo input.size2 { width:101px; } .vnfDataInfo .networkInfo input.size3 { width:88px; } .vnfDataInfo .networkInfo input[type="text"] { height:18px; line-height:18px; padding-left:5px; } .vnfDataInfo .networkInfo .mark { width:22px; vertical-align:middle; display:inline-block; } .vnfDataInfo .networkInfo .mark a { width:9px; height:9px; background-image:url('../images/ico_add.gif'); background-repeat:no-repeat; font-size:0; text-align:left; text-indent:-9999px; display:inline-block; overflow:hidden; } .vnfDataInfo .networkInfo .mark a.add { background-position:left top; } .vnfDataInfo .networkInfo .mark a.delete { background-position:left bottom; } /* Run Instantiation */ .instantiationInfo { padding:25px 25px 0 25px; } .instantiationInfo .tit { font-size:13px; font-weight:bold; } .instantiationInfo .wbox { border-top:solid 1px #dedede; border-bottom:solid 1px #dedede; margin:10px 0 30px 0; padding:3px 15px 10px 15px; font-size:12px; } .instantiationInfo .wbox:after { content:''; display:block; clear:both; } .instantiationInfo .wbox dt { float:left; width:230px; height:20px; margin-top:7px; padding-top:6px; clear:both; } .instantiationInfo .wbox dd { float:left; margin-top:7px; } .instantiationInfo .wbox dd.error { width:235px; margin:8px 0 0 9px; font-size:11px; color:#f00; } .instantiationInfo .wbox input, .instantiationInfo .wbox select { width:150px; text-align:center; } .instantiationInfo .dataTable { width:100% !important; margin-top:-7px; } .instantiationInfo .dataTable table { margin-top:7px; } .runInstantiate { position:relative; width:95%; height:530px; margin:0 auto; padding:50px 0 0 0; } .runInstantiate:after { content:''; display:block; clear:both; } .runInstantiate h2 { position:absolute; top:32px; left:0; font-size:11px; font-weight:bold; } .runInstantiate h2.log { left:auto; right:0; width:250px; } .runInstantiate .state { position:absolute; top:26px; right:0; } .runInstantiate .state:after { content:''; display:block; clear:both; } .runInstantiate .state span { float:left; height:23px; background-color:#4e4e4e; border:solid 1px #dedede; padding:0 10px; margin-left:-1px; font-size:11px; color:#fff; line-height:22px; display:block; } .runInstantiate .state span.error { background-color:#f00; } .runInstantiate .state span.finish { background-color:#00f; } .runInstantiate .topology { position:relative; float:left; width:100% !important; height:100%; border:solid 1px #dedede; box-sizing:border-box; } .runInstantiate .topology #topology, .runInstantiate .topology #runTopology { height:100%; margin:-1px 0 0 0; } .runInstantiate + .contents_btn { margin-bottom:0; } .runProgress { position:absolute; min-height:30px; background-color:#fff; border:solid 1px #cacaca; border-radius:5px; padding:7px; margin:5px; font-size:12px; box-shadow:1px 2px 0 #efefef; } .runProgress .num { margin:1px 0 0 37px; font-weight:bold; color:#fc532a; } .runProgress .load { position:absolute; top:7px; left:7px; width:30px; height:30px; padding-left:1px; font-size:0; line-height:0; overflow:hidden; } .runProgress .load img { width:100%; height:100%; } .runProgress .name { margin:0 0 0 37px; } /* Fault Detail */ .faultInfoTab { height:30px; background-color:#fafafa; border-bottom:solid 1px #dedede; } .faultInfoTab:after { content:''; display:block; clear:both; } .faultInfoTab li { float:left; width:85px; height:22px; border-right:solid 1px #dedede; padding-top:8px; font-size:12px; color:#bababa; text-align:center; } .faultInfoTab li a { height:100%; display:block; } .faultInfoTab li[aria-selected=true] { height:22px; background-color:#fff; padding-top:8px; } .faultInfoTab li[aria-selected=true] a { height:23px; background-color:#fff; font-weight:bold; color:#333; } .faultDetail { padding:10px 20px 0 20px; } .faultDetail:after { content:''; display:block; clear:both; } .faultDetail dl { float:left; width:33%; min-height:28px; margin-top:10px; font-size:12px; line-height:18px; } .faultDetail dl dt { margin-right:-15px; padding-top:3px; font-weight:bold; color:#666; vertical-align:top; display:inline-block; } .faultDetail dl dt::before { content:'-'; width:11px; display:inline-block; } .faultDetail dl dt::after { content:':'; width:11px; margin-left:6px; display:inline-block; } .faultDetail dl dd { padding-left:11px; padding-top:3px; color:#000; vertical-align:top; display:inline-block; } .faultDetail dl dd input[type="checkbox"] { margin-top:7px; vertical-align:middle; } .faultDetail dl.full { width:100%; clear:both; } .faultDetail dl.write dd { margin-top:-1px; padding-top:0; } .faultDetail dl.write textarea { width:750px; height:75px; margin-bottom:-3px; } .faultDepthList { margin:20px 20px 0 20px; } .faultDepthList .instype { width:125px; } .faultDepthList .name { width:7%; } .faultDepthList .evttime { width:110px; } .faultDepthList .evttype { width:10%; } .faultDepthList .evtstate { width:8%; } .faultDepthList .severity { width:7%; } .faultDepthList .cause { width:10%; } .faultDepthList .specific { width:15%; } .faultDepthList .additional { width:auto; } .faultDepthList .cleared { width:5%; text-align:center; } .faultDepthList .note { width:7%; } .faultDepthList .titbox { width:100%; background-color:#4c4c4c; border:solid 1px #d7d7d7; padding-right:17px; display:table; table-layout:fixed; box-sizing:border-box; } .faultDepthList .titbox li { position:relative; height:37px; border-left:solid 1px #d7d7d7; font-size:11px; color:#fff; text-align:center; vertical-align:middle; word-break:break-all; display:table-cell; } .faultDepthList .titbox li:first-child { border-left:0; } .faultDepthList .listbox { max-height:500px; margin-top:-1px; padding:0; overflow:hidden; overflow-y:scroll; } .faultDepthList .listbox > .depthbox { display:block !important; } .faultDepthList .depthbox { position:relative; width:100%; display:none; } .faultDepthList .rowbox { width:100%; border-left:solid 1px #d7d7d7; border-right:solid 1px #d7d7d7; display:table; table-layout:fixed; box-sizing:border-box; } .faultDepthList .rowbox > div { position:relative; border-left:solid 1px #d7d7d7; border-bottom:solid 1px #d7d7d7; font-size:11px; text-align:left; vertical-align:middle; word-break:break-all; display:table-cell; overflow:hidden; } .faultDepthList .rowbox > div:first-child { border-left:0; } .faultDepthList .rowbox > div p { padding:5px 2px; display:block; } .faultDepthList .rowbox .instype { } .faultDepthList .rowbox .instype p { position:absolute; top:0; left:0; width:100%; height:100%; padding:0; display:block; } .faultDepthList .rowbox .instype span { height:100%; background-image:url('../images/fault_typeline.gif'); background-repeat:repeat-y; display:block; } .faultDepthList .rowbox .instype span b { position:absolute; top:50%; height:20px; margin-top:-7px; text-overflow:ellipsis; white-space:nowrap; } .faultDepthList .rowbox .instype .wide { width:11px; height:11px; background:url('../images/fault_wide.gif') 3px top no-repeat; margin:1px 3px 0 0; vertical-align:top; display:inline-block; cursor:pointer; } .faultDepthList .rowbox .instype .wide.active { background-position:0 -14px; } .faultDepthList .rowbox .instype .type1 { background:none; padding-left:5px; } .faultDepthList .rowbox .instype .type2 { background-position:-65px top; padding-left:17px; } .faultDepthList .rowbox .instype .type3 { background-position:-52px top; padding-left:30px; } .faultDepthList .rowbox .instype .type4 { background-position:-39px top; padding-left:43px; } .faultDepthList .rowbox .instype .type5 { background-position:-26px top; padding-left:60px; } .faultDepthList .rowbox .name { text-align:center; } .faultDepthList .rowbox .evttime { text-align:center; } .faultDepthList .rowbox .evttime p { padding:5px 0; } .faultDepthList .rowbox .evttime span { display:block; } .faultDepthList .rowbox .severity { margin:0; text-align:center; } .faultDepthList .rowbox .severity p { position:absolute; top:0; left:0; width:100%; height:100%; padding:0; } .faultDepthList .rowbox .severity span { width:100%; height:100%; vertical-align:middle; display:block; } .faultDepthList .rowbox .severity span b { position:absolute; top:50%; left:0; width:100%; height:20px; margin-top:-7px; } .faultDepthList .rowbox .txtShort { width:100%; height:13px; text-overflow:ellipsis; white-space:nowrap; text-indent:0; display:inline-block; overflow:hidden; } .faultBatchUpdate { padding:15px 20px 0 20px; } .faultBatchUpdate .grid { width:100% !important; overflow:auto; } .faultBatchUpdate .grid .severity1, .faultBatchUpdate .grid .severity2, .faultBatchUpdate .grid .severity3, .faultBatchUpdate .grid .severity4, .faultBatchUpdate .grid .severity5, .faultBatchUpdate .grid .severity6 { padding-top:15px; } .faultBatchUpdate .schbox { border-top:dashed 1px #cfcfcf; border-bottom:dashed 1px #cfcfcf; margin-bottom:-20px; padding:15px 19px 13px 19px; display:block; } .faultBatchUpdate .schbox:after { content:''; display:block; clear:both; } .faultBatchUpdate .schbox dt, .faultBatchUpdate .schbox dd { float:left; min-height:28px; font-size:12px; vertical-align:top; } .faultBatchUpdate .schbox dt { width:100px; margin-top:5px; clear:both; } .faultBatchUpdate .schbox input[type="checkbox"] { margin-top:6px; } .faultBatchUpdate .schbox textarea { width:780px; } .faultBatchUpdate .schbox dt:nth-child(3) { margin:-28px 0 0 300px; } .faultBatchUpdate .schbox dd:nth-child(4) { margin:-32px 0 0 365px; } /* Performance Chart Detail */ .chartDetail { position:relative; padding:10px 25px 0 25px; } .chartDetail .schbox { position:relative; border-bottom:dashed 1px #dfdfdf; padding-bottom:20px; font-size:12px; } .chartDetail .schbox:after { content:''; display:block; clear:both; } .chartDetail .schbox dl { float:left; width:23%; margin-top:15px; } .chartDetail .schbox dt { font-weight:bold; } .chartDetail .schbox dt::before { content:"-"; width:10px; display:inline-block; } .chartDetail .schbox dd { margin-top:4px; padding-right:20px; } .chartDetail .schbox dl.period { width:34% !important; } .chartDetail .schbox dl.period input[type="text"] { width:46%; } .chartDetail .schbox dl.period span { margin:0 2px 0 3px; display:inline-block; } .chartDetail .schbox select, .chartDetail .schbox input[type="text"] { width:100%; } .chartDetail .schbox .btn { position:absolute; right:0; bottom:20px; width:120px; height:28px; background-color:#f9f9f9; border:solid 1px #dcdcdc; border-radius:3px; font-size:12px; font-weight:700; } .chartDetail .schbox.other dl { width:18%; } .chartDetail .spreadlist { margin-top:25px; } .chartDetail .spreadlist .cell1, .chartDetail .spreadlist .cell2, .chartDetail .spreadlist .cell3, .chartDetail .spreadlist .cell4, .chartDetail .spreadlist .cell5, .chartDetail .spreadlist .cell6 { position:relative; float:left; border-left:dashed 1px #dfdfdf; margin-left:-1px; font-size:12px; text-align:center; display:block; table-layout:fixed; overflow:hidden; } .chartDetail .spreadlist .cell1 { width:322px; border-left:0; text-align:left; } .chartDetail .spreadlist .cell2 { width:550px; } .chartDetail .spreadlist .cell3 { width:335px; } .chartDetail .spreadlist .cell4 { width:100%; } .chartDetail .spreadlist .cell5 { width:100%; } .chartDetail .spreadlist .cell6 { width:100%; } .chartDetail .spreadlist .titbox { background-color:#4c4c4c; border:solid 1px #dedede; color:#fff; } .chartDetail .spreadlist .titbox:after { content:''; display:block; clear:both; } .chartDetail .spreadlist .titbox span { padding:7px 0 8px 0; text-align:center !important; } .chartDetail .spreadlist .titbox .cell4, .chartDetail .spreadlist .titbox .cell6 { display:none; } .chartDetail .spreadlist .listbox { max-height:450px; border:solid 1px #dedede; border-top:0; margin-top:-1px; overflow:hidden; overflow-y:scroll; } .chartDetail .spreadlist .rowbox { position:relative; height:29px; border-top:solid 1px #dedede; overflow:hidden; } .chartDetail .spreadlist .rowbox:after { content:''; display:block; clear:both; } .chartDetail .spreadlist .rowbox:nth-child(2n) { background-color:#ffffff; } .chartDetail .spreadlist .rowbox > div { height:23px; padding-top:7px; } .chartDetail .spreadlist .rowbox .cell1 { width:300px; padding-left:22px; } .chartDetail .spreadlist .rowbox .cell4, .chartDetail .spreadlist .rowbox .cell6 { height:385px; border-top:dashed 1px #dfdfdf; border-left:0; } .chartDetail .spreadlist .rowbox .wide { position:absolute; z-index:1; top:9px; left:7px; width:11px; height:11px; background:url('../images/fault_wide.gif') 2px top no-repeat; padding:0; text-indent:-9999px; display:block; overflow:hidden; cursor:pointer; } .chartDetail .spreadlist .rowbox .view { position:absolute; z-index:10; bottom:86px; right:8px; width:30px; height:30px; background:url('../images/ico_detail.png') center center no-repeat #ffa304; background-size:95%; border:solid 1px #ff9804; border-radius:3px; font-size:0; text-indent:-9999px; display:none; } .chartDetail .spreadlist .rowbox .view:hover { background-color:#ff7a04; } .chartDetail .spreadlist .rowbox .same { color:#cfcfcf; } .chartDetail .spreadlist .rowbox .name { padding:5px 0 0 6px; } .chartDetail .spreadlist .rowbox .name li { margin-top:7px; padding-left:9px; font-size:11px; color:#999; text-align:left; } .chartDetail .spreadlist .rowbox .name li::before { content:'-'; width:9px; margin-left:-9px; display:inline-block; } .chartDetail .spreadlist .rowbox .name li span { font-weight:bold; display:inline-block; } .chartDetail .spreadlist .rowbox .setting { position:absolute; z-index:1; bottom:5px; right:7px; width:20px; height:19px; background:url('../images/chart_setting.png') center center no-repeat #fff; border:solid 1px #b2b2b2; border-radius:3px; font-size:0; text-indent:-9999px; display:block; overflow:hidden; box-shadow:1px 2px 0 #e5e5e5; } .chartDetail .spreadlist .rowbox .numbox { position:absolute; z-index:1; bottom:15px; right:8px; width:85px; background-color:#fff; border:solid 1px #cfcfcf; border-radius:3px; padding:4px 5px 5px 5px; display:none; } .chartDetail .spreadlist .rowbox .numbox li { border-top:solid 1px #dfdfdf; margin:4px 0 0 0; padding:3px 0 0 4px; font-size:11px; color:#999; text-align:left; } .chartDetail .spreadlist .rowbox .numbox li em::before { content:':'; width:7px; display:inline-block; } .chartDetail .spreadlist .rowbox .numbox li:first-child { border:0; margin:0; padding-top:0; } .chartDetail .spreadlist .rowbox .graphBox { height:380px; margin:35px 120px 0 5px; } .chartDetail .spreadlist .rowbox.depth .cell1 { width:285px; background:url('../images/ico_depth.png') 11px 8px no-repeat; padding-left:37px; } .chartDetail .spreadlist .rowbox.depth .wide { left:23px !important; } .chartDetail .spreadlist .rowbox.open { height:419px; } .chartDetail .spreadlist .rowbox.open .wide { background-position:0 -14px; } .chartDetail .spreadlist .rowbox.open .view, .chartDetail .spreadlist .rowbox.open .numbox { display:block; } .chartDetail .spreadlist .rowbox.open .graphBox { margin-top:0; } .chartDetail .dataTable { width:100% !important; } .chartDetail .dataTable td { position:relative; background:none !important; overflow:hidden; } .chartDetail .dataTable .severity1, .chartDetail .dataTable .severity2, .chartDetail .dataTable .severity3, .chartDetail .dataTable .severity4, .chartDetail .dataTable .severity5 { position:absolute; top:0; left:0; width:100%; height:100%; padding-top:8px; } .chartDetail .byChart { position:relative; height:330px; margin:35px 0 -10px 0; } .chartDetail .byChart .tit { position:relative; z-index:1; height:29px; margin-left:-2px; font-size:28px; font-weight:600; color:#dedede; } .chartDetail .byChart .choice { padding:0 0 2px 7px; display:inline-block; } .chartDetail .byChart .choice:after { content:''; display:block; clear:both; } .chartDetail .byChart .choice li { float:left; margin-right:10px; font-size:12px; font-weight:normal; color:#666; } .chartDetail .byChart .choice li:nth-child(1) { font-weight:bold; color:#7cb5ec; } .chartDetail .byChart .choice li:nth-child(2) { font-weight:bold; color:#4f4f4f; } .chartDetail .byChart .choice input { margin:1px -2px 0 0; vertical-align:top; } .chartDetail .byChart .numbox { position:absolute; z-index:1; top:14px; right:-5px; } .chartDetail .byChart .numbox:after { content:''; display:block; clear:both; } .chartDetail .byChart .numbox li { float:left; height:10px; border-left:solid 1px #aaa; padding:0 8px; font-size:10px; line-height:10px; } .chartDetail .byChart .numbox li em { font-size:11px; font-weight:bold; } .chartDetail .byChart .numbox li:first-child { border-left:0; color:#f00; } .chartDetail .byChart .numbox li:nth-child(2) { color:#00f; } .chartDetail .byChart .numbox li:nth-child(3) { color:#0f9901; } .chartDetail .byChart .graphbox { position:relative; z-index:2; height:275px; border:solid 1px #aaa; padding:15px 10px 5px 10px; } .chartDetail .byChart .highcharts-container { height:305px !important; margin-top:-35px; } .chartDetail[role="resource"] .schbox dl { width:35%; } .chartDetail[role="resource"] .schbox dl:nth-child(2) { width:35%; } .chartDetail[role="resource"] .schbox dl:nth-child(3) { width:30%; } .chartDetail[role="resource"] .schbox dl:nth-child(3) dd { padding-right:0; } .chartDetail[role="resource"] .schbox dl.period { width:36.4% !important; } .chartDetail[role="resource"] .schbox.selfperform dl { width:18%; } .chartDetail[role="resource"] .schbox.selfperform dl dd { padding-right:20px; } .chartDetail[role="resource"] .schbox.selfperform dl.period { width:34% !important; } .chartDetail[role="resource"] .spreadlist .cell1 { width:130px; } .chartDetail[role="resource"] .spreadlist .cell2 { width:130px; } .chartDetail[role="resource"] .spreadlist .cell3, .chartDetail[role="resource"] .spreadlist .cell4, .chartDetail[role="resource"] .spreadlist .cell5 { position:relative; float:left !important; width:820px; border-top:dashed 1px #dfdfdf; border-left:dashed 1px #dfdfdf; } .chartDetail[role="resource"] .spreadlist .titbox .cell3 { border-top:0 !important; } .chartDetail[role="resource"] .spreadlist .rowbox { height:300px; } .chartDetail[role="resource"] .spreadlist .rowbox > div { height:} .chartDetail[role="resource"] .spreadlist .rowbox .cell1 { padding-left:0; text-align:center; } .chartDetail[role="resource"] .spreadlist .rowbox .cell2 { height:300px; } .chartDetail[role="resource"] .spreadlist .rowbox .cell3 { border-top:0 !important; } .chartDetail[role="resource"] .spreadlist .rowbox .cell3, .chartDetail[role="resource"] .spreadlist .rowbox .cell4, .chartDetail[role="resource"] .spreadlist .rowbox .cell5 { height:295px; padding-top:5px; } .chartDetail[role="resource"] .spreadlist .rowbox .view { display:block; } .chartDetail[role="resource"] .spreadlist .rowbox .numbox { bottom:10px; display:block; } .chartDetail[role="resource"] .spreadlist .rowbox .graphBox { height:300px; margin:0 115px 0 5px; } .chartDetail[role="resource"] .spreadlist .rowbox.depth { border-left:dashed 1px #dfdfdf; margin-left:128px; } .chartDetail[role="port"] .schbox dl { width:26%; } .chartDetail[role="port"] .schbox dl:nth-child(4) { width:22%; } .chartDetail[role="port"] .schbox dl:nth-child(4) dd { padding-right:0; } .chartDetail[role="port"] .schbox dl.period { width:35% !important; } .chartDetail[role="port"] .spreadlist .cell2 { width:255px; } .chartDetail[role="port"] .spreadlist .cell3 { width:335px; } .chartDetail[role="port"] .schbox.other dl { width:35%; } .chartDetail[role="port"] .schbox.other dl:nth-child(3) { width:30%; } .chartDetail[role="port"] .schbox.other dl:nth-child(3) dd { padding-right:0; } .chartDetail[role="port"] .schbox.other dl:nth-child(4) dd { padding-right:20px; } .chartDetail[role="port"] .schbox.other dl.period { width:36.5% !important; } .chartDetail[role="port"] .schbox.selfperform dl { width:18%; } .chartDetail[role="port"] .schbox.selfperform dl dd { padding-right:20px; } .chartDetail[role="port"] .spreadlist .view { top:15px; bottom:auto; } .chartDetail[role="port"] .spreadlist .graphBox { margin-right:10px; } /* Add Role */ .addRoleList { width:98%; height:250px; border:solid 1px #bebebe; border-radius:3px; padding:7px 0 10px 0; overflow:auto; } .addRoleList ol { margin:3px 0 0 17px; } .addRoleList ol li { margin-bottom:3px; } .addRoleList ol ol { display:none; } .addRoleList .open { width:9px; height:9px; background:url('../images/ico_open.gif') left top no-repeat; ; margin-top:-1px; font-size:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .addRoleList .open.active { background-position:left bottom; } /* Reset Password */ .resetPass { width:370px; margin:0 auto; padding-top:35px; text-align:center; } .resetPass * { box-sizing:border-box; } .resetPass li { position:relative; border:1px solid #dedede; border-radius:3px; margin-top:10px; padding:8px 5px; transition:all .2s ease-in-out; } .resetPass li:first-child { margin-bottom:30px; } .resetPass li label { width:10%; background:url('../images/ico_pw.gif') no-repeat 5px 2px; background-size:18px; border-right:1px solid #dedede; vertical-align: middle; text-indent: -999999px; display:inline-block; } .resetPass li input { width:90%; background:transparent; border:0; color:#888; } .resetPass li.focus { border-color:#495262; } .resetPass li .message { position:absolute; z-index:1; top:-19px; left:2px; width:100%; height:16px; background:url('../images/ico_message.png') left 1px no-repeat; padding-left:20px; font-size:11px; color:#f00; text-align:left; display:block; } .resetPass .note { margin-top:30px; font-size:12px; } /* Calendar */ #datepicker { margin:25px 35px; } #datepicker .ui-datepicker { width:100%; margin:0; padding:0; text-align:center; vertical-align:middle; } #datepicker .ui-datepicker-header { position:relative; background:none !important; padding:0; } #datepicker .ui-datepicker-header .ui-icon { position:relative; top:0; left:0; height:20px; margin:0; font-size:16px; color:#4e4e4e !important; line-height:17px; text-indent:0 !important; } #datepicker .ui-datepicker-header .ui-datepicker-title { font-weight:800; color:#4e4e4e; } #datepicker .ui-datepicker-header .ui-datepicker-title span { font-size:23px !important; line-height:23px; } #datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month:after { content:','; width:11px; display:inline-block; } #datepicker .ui-datepicker-header .ui-datepicker-prev { position:absolute; left:90px; top:3px; } #datepicker .ui-datepicker-header .ui-datepicker-next { position:absolute; right:90px; top:3px; } #datepicker .ui-datepicker-calendar { width:100%; margin-top:10px; } #datepicker .ui-datepicker-calendar th { height:35px; padding:0; font-size:11px; font-weight:normal; color:#4e4e4e; vertical-align:middle; } #datepicker .ui-datepicker-calendar th span { background-color:#f9f9f9; margin:10px 1px; padding:7px 0; display:block; } #datepicker .ui-datepicker-calendar td { width:55px; padding:0; } #datepicker .ui-datepicker-calendar td a { width:43px; height:43px; border:0; border-radius:99px; margin:0; padding:0; font-size:19px; font-weight:700; color:#4e4e4e; line-height:43px; text-align:center; display:inline-block; } #datepicker .ui-datepicker-calendar td span { text-align:center; } #datepicker .ui-datepicker-calendar td.ui-datepicker-week-end a { color:#808283; } #datepicker .ui-datepicker-calendar td.ui-datepicker-week-end:first-child a { color:#fe0000; } #datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span { color:#666; font-size:19px; font-weight:700; } #datepicker .ui-datepicker-calendar .ui-state-active { background:#ff7e00 !important; color:#fff !important; } #datepicker .ui-datepicker-calendar .ui-state-highlight { background:none; } .choiceDate { border-top:dashed 1px #dcdcdc; border-bottom:dashed 1px #dcdcdc; margin:-10px 35px; padding:5px 0 10px 0; } .choiceDate:after { content:''; display:block; clear:both; } .choiceDate dt, .choiceDate dd { float:left; padding-top:5px; font-size:12px; color:#777; } .choiceDate dt { width:75px; margin:6px 0 0 15px; font-size:12px; font-weight:700; color:#777; clear:both; } .choiceDate dd::before { content:':'; width:13px; display:inline-block; } .choiceDate select { width:95px; margin-right:1px; } .choiceDate input.dateVlaue { width:95px; margin-left:4px; } /*//////////////////////////////////////////////////////////////// */ .infoList[role=edit] div.inner { box-sizing:border-box; padding:15px 0; border:1px solid #cbcbcb; position:relative; margin:10px 15px 25px 15px; float:left; /*width:888px;*/} .infoList[role=edit] div.inner .section_title { margin:0 15px 20px; } .infoList[role=edit] div.inner .grid { padding:0 15px; } .infoList[role=edit] div.inner > .wrap_btn { position:absolute; right:15px; top:15px; } dl.subnetList, dl.nsInstanceGeneral, dl.monitoringParameter { clear:both; float:none !important; width:auto; margin-bottom:15px; } dl.subnetList > dd, dl.nsInstanceGeneral > dd, dl.monitoringParameter > dd { border:1px solid #e5e5e5; padding:20px 15px; } dl.subnetList > dd > .wrap_btn, dl.nsInstanceGeneral > dd > .wrap_btn, dl.monitoringParameter > dd > .wrap_btn { padding:0 15px; } dl.subnetList > dd > dt, dl.nsInstanceGeneral > dd > dt, dl.monitoringParameter > dd > dt { font-size:11px; } dl.subnetList > dd::before, dl.nsInstanceGeneral > dd::before, dl.monitoringParameter > dd::before { display:none; } .grid .noData { height:100px; background:#fdfdfd; border-color:#636363; font-size:12px; line-height:100px; text-align:center !important; vertical-align:middle; pointer-events:none; } .grid .noData span { background:url('../images/ico_noData.png') no-repeat center 30px; padding-top:12px; font-weight:700; color:#888888; display:inline-block; } #saveStatus { height:16px; font-size:14px; font-weight:700; line-height:16px; display:block; } #topologyStatus { position:static !important; margin-top:10px; font-size:12px !important; text-align:center; display:block; } #pnfCatalog_details ul { width:400px; } @media (max-width:1640px){ #body { margin-left:10px; } #childBody { margin-left:10px; } #gnb li.dashboard > div ul li:first-child { margin-left:280px; } #gnb li.catalog > div ul li:first-child { margin-left:314px; } #gnb li.instance > div ul li:first-child { margin-left:571px; } #gnb li.nfvManage > div ul li:first-child { margin-left:268px; } #gnb li.assurManage > div ul li:first-child { margin-left:762px; } #gnb li.portalManage > div ul li:first-child { margin-left:476px; } } body.ie select { width:80px; padding-right:0; } .section[role="icoUpload"] .nodeArea { float:left; } .section[role="icoUpload"] .nodeArea ul { height:425px; max-height:425px; overflow-y:auto; } .section[role="icoUpload"] .infoList dl { width:100%; border:1px solid #d7d7d7; padding:20px; } .section[role="icoUpload"] .infoList dl dd { padding:10px; } .section[role="icoUpload"] .infoList .wrap_btn { margin:0; padding-top:20px; } .section[role="icoUpload"] .contents_btn { clear:both; } .scaleGraph text[text-anchor="end"] { display:none; } .slash { background-image: url(../images/speaker.png); background-size: 100% 100%; text-align: left; } .slash_black { background-image: url(../images/speaker_black.png); background-size: 100% 100%; text-align: left; } select option.category{color:#cc0000; font-weight: bold} ul li label.category {color:#cc0000; font-weight: bold} ul li label[depth="2"] {padding-left:30px !important;} ul li label[depth="3"] {padding-left:50px !important;}