@charset "utf-8";
@import "../font/nanumbarungothic.css";

/* Common */
body,p,h1,h2,h3,h4,h5,h6,menu,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,hr{margin:0;padding:0;}
body,input,textarea,select,button {font-size: 10pt; line-height:16px; vertical-align: middle;}
body,input,textarea,button {font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana; }
select {font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana;}
input, textarea, select {font-size: 10pt;}
textarea {border:1px solid #FFFFFF; resize: none;}
input, select, textarea {outline-style: none;}
img,fieldset{border:0} 
menu,ul,ol{list-style:none}
.ui-widget button {font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana;}

#settingForm fieldset{border: 1px solid #c1c2c3; margin: 10px; padding-bottom: 10px;}
#settingForm legend{margin-left: 12px; font-weight: bold;}

#form1 fieldset {border: 1px solid #c1c2c3; margin:5px -9px 5px -11px; padding:7px 0 6px 0;}
#form1 fieldset .popupLeftTd2 { padding-left:25px;}
#form1 legend {margin-left: 7px; padding-left:3px; padding-right:3px; }

input, textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
input:-ms-input-placeholder {
    color: #ababab;
}

table {border-collapse:collapse; border-spacing: 0; table-layout: fixed;}

html {height: 100%; margin:0; padding:0;}
body {
    text-align: left; height: 100%; margin:0; padding:0; background-color: #ffffff;
}

A:link {color: #505661; text-decoration: none}
A:visited {color: #505661; text-decoration: none}
A:hover {color: #0060ff; text-decoration: none}
A:focus { outline: 0;}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-overflow-mode: ellipsis;
}


/* font 관련 정의 */
.engFont {font-family: Tahoma, verdana;}
.fontSize {font-size: 24px; }
.fontSize8 { font-size:8px; }
.fontSize10 { font-size:10px; }
.fontSize11 { font-size:11px; }
.fontSize12 { font-size:12px; }
.fontSize13 {font-size: 13px; } 
.fontSize14 { font-size:14px; }
.fontSize15 { font-size:15px; }
.fontSize16 { font-size:16px; }
.fontSize22 { font-size :22px; }
.fontSize30 { font-size :30px; }

.fontHelp {font-size: 10pt; color: #9d9d9d;}
.font01 {font-size: 10pt; color: #000;}
.font02 {font-size: 10pt; color: #333;}
.font03 {font-size: 10pt; color: #444;}
.font04 {font-size: 10pt; color: #505661;}
.font05 {font-size: 10pt; color: #fff;}
.font06 {font-size: 10pt; color: #899ab2 !important;}
.font07 {font-size: 10pt; color: #1aabff;}
.font08 {font-size: 10pt; color: #ff0000;}
.font09 {font-size: 10pt; color: #ff6609;} 
.font10 {font-size: 10pt; color: #888;} 

.fontWhite {color:#FFFFFF }
.fontBlueGray {color:#899ab4}
.fontGreen {color: green;} 
.fontRed {color:#ff0000 }
.fontBlack {color:#000000 }
.fontLightBlue {color:#0060FF }
.fontLightRed {color:#ff0000}
.fontLightGreen {color:#48b400}
.fontOrange { color:#ff8400; }
.fontGray { color:#444444; }
.fontGray2 { color:#666666; }
.fontLightGray { color:#979797; }
.fontLightGray2 { color:#a9a9a9; }

.underline {text-decoration:underline}
.blur {-webkit-filter: blur(1px);}
.bold {font-weight: bold;}
.normal {font-weight: normal;}


/* 기능단위별 공통속성 정의 */
.center {text-align: center !important;}
.thCenter {text-align: center !important; text-indent:0px !important; }
.marginAuto { margin:0 auto;}
.left {text-align: left !important;}
.left6 {text-align: left; padding-left: 6px !important; }
.left8 {text-align: left; padding-left: 8px !important; text-indent: 0 !important;}
.left12 {text-align: left; padding-left: 12px;}
.left24 {text-align: left; padding-left: 24px;}
.paddingSide5px {padding-left: 5px; padding-right: 5px; }
.paddingSide8px {padding-left: 8px; padding-right: 8px; }
.right {text-align: right !important;}
.right5 {text-align: right !important; padding-right: 5px !important;}
.pointer {cursor: pointer;}
.pointerEffect {cursor: pointer; color: #0060ff}
.top {vertical-align: top;}
.bottom {vertical-align: bottom;}
.middle {vertical-align: middle;}
.imgTop {margin-top: 0px;}
.poldingIcon, .poldingIcon2, .poldingIcon3, .poldingIcon4 {cursor: pointer;}
.hidden, .hide {display: none;}
.hand { cursor:pointer}
.cursorDefault {cursor:default;}
.cursorNotallow {cursor: not-allowed;}
.clear {clear:both; font-size: 0; line-height: 0; padding: 0; margin: 0}
.readonly {background: #EBEBE4}
.break-all {word-break:break-all}
.link {cursor:pointer; color: #0060ff;}
.objectAddress {cursor:pointer; color: #0060ff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow-mode: ellipsis; }
.objectAddressNone {cursor:default; color: #000}
.objectAddress:hover {}
.warning { color: #ffe4e2; }
.critical { color: red; }
.warningTr { background-color: #ffe4e2 !important; }
.criticalTr { background-color: #ffb7cd !important; }
.relative {position: relative;}
.notSelect {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.highlight {background-color: #FFFF88;}
.disable { background-color: #EBEBE4;}
.tooltip_desc {cursor: pointer;}
.noBorder { border-bottom: 0px !important; border-left: 0px !important; border-right: 0px !important; border-top: 0px !important; }
.borderRight  { border-right: 1px solid #babcc1; }
.outline {  outline: solid #bfd7ff 4px; }
.dashEth { position: absolute;text-align: center;width: 18px; line-height: 12px; margin-left:-1px; }

/* custom */
.totalModify { height:19px !important; }

/* input 관련 */
.inputText {
    border:1px solid #afafaf; width: 100%; padding-left: 5px; color: #333333; height: 21px; line-height: 18px; margin-bottom:2px;
}
select.inputText {
    padding-left: 0px;
}
.inputText:focus {
    border-color: #66afe9; /* TG-13608, TG-14380 */
}
.inputSelect {
    vertical-align: middle;  min-width: 70px; height: 21px; border:1px solid #afafaf; margin-bottom: 2px;
}
.inputSelect:focus {
    border-color: #66afe9;
}
.inputDesc {
    border:1px solid #afafaf; padding: 5px; width: 100%; color: #333333; border-radius: 2px; height: 75px; line-height: 18px;
}
.inputTextarea {
    border:1px solid #afafaf; padding: 5px; width: 100%; color: #333333; border-radius: 2px; height: 75px; line-height: 18px;
}
.selectBox1 {
    height: 21px; border: 1px solid #afafaf;
}
.inputError {
    border:1px solid #ffb7cd; background-color: #ffe4e1; border-radius:0px;
}
.inputError > .chosen-default {  
    background-color: #ffe4e1; 
}
.chosen-single.chosen-default {
    background: transparent; 
}
.inputRequired {
    background-image: url('/files/image/icon/input_arrow_bg.png'); 
    background-repeat: no-repeat; background-position-x: left; background-position-y: top;
}
.placeholder {
    color: #888888;
}
select:disabled { background-color: #EBEBE4; }
div.error{  
    border:1px yellow; 
    background-color: yellow; 
    color:red; 
    display:none;
    position:absolute;
    font-size:12px;
}
.tooltip {cursor:pointer;}
.ui-tooltip {
    min-width: 100px;
    padding: 5px;
}
.ui-tooltipApply {
    width: 500px;
    padding: 5px;
}
.ui-widget {
    font-size: 10pt;
    font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana;
}
.ui-widget-overlay {
    background: url("/files/image/themes/bg_diagonals.png");
    opacity: .3;
    filter: Alpha(Opacity=30);
} 
.ui-widget select, .ui-widget input { font-size:10pt; font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana; }
.ui-menu { width: 150px; }
.ui-dialog {
    -webkit-animation: dialogAnimation 0.1s;
    animation: dialogAnimation 0.1s;
    z-index : 10003;
    padding: 0px;
}
.ui-dialog .ui-dialog-title {font-size: 10pt;}
.ui-dialog-titlebar-close .ui-button-text { height: 5px; }
.ui-dialog.ui-widget.ui-widget-content {word-break: break-all;}
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl { border-top-left-radius: 0px !important; }
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr { border-top-right-radius: 0px !important; }
.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl { border-bottom-left-radius: 0px !important; }
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br { border-bottom-right-radius: 0px !important; }
.ui-dialog-titlebar-close { margin-right: 5px !important; }
.dialogIframe { overflow:hidden !important; }


.relationIco {
    color: #ff0000;
    font-family: helvetica, arial;
}

/* login page */
.loginButton {
    width: 310px;
    height: 47px;
    background-color: #283b59;
    color: #ffffff;
    margin: 0px auto;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    text-indent: 10px;
    background-image: url("/files/image/login/login_arrow.png");
    background-repeat: no-repeat;
    background-position : 273px 16px; 
}
.loginButton:hover {
    background-color: #566275;
}
.loginInput {
    border: 1px solid #afafaf;
    font-size: 13px;
    font-weight: bold;
    width: 310px;
    color: #333333;
    border-radius: 2px;
    height: 35px;
}

/* left menu */
.topMenuWrap {
    position: fixed;
    left:0px; 
    text-align: left;
    width: 100%; 
    height: 69px;
    z-index:100;
    min-width: 1100px;
}
.topInfo {width:100%}
.topLogo {width:880px;height:41px;padding-left:20px}
.topRightInfo {text-align:right;padding-top:0px}
.topRightInfoMenu {height:57px;padding-top:10px;padding-right: 10px;white-space:nowrap;}

.border_left { border-left:1px solid #888; }
.border_right { border-right:1px solid #888; }
.border_bottom { border-bottom:1px solid #888; }
.border_top { border-top:1px solid #888; }
#listTableWrap { position: fixed; left:226px; z-index:1; }
#listTableWrap1 { position: fixed; left: 226px; top:135px; width:100%; height:23px; border-bottom: 1px solid #babcc1; background-color:#ffffff;  z-index:1; }
#listTableHead TR { border-bottom:1px solid #babcc1; }
#listTableHead TH > DIV {border-right:1px solid #babcc1; height: 100%; height: 20px; padding-top: 4px; font-weight: normal; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow-mode: ellipsis;}
#listTableBody { display: none; table-layout:fixed; margin-left: 226px; background-color: #fff;}
#listTableBody TR:not(.subList):not(.subList2):hover { background-color: #d2ebff}
/* #listTableBody TR:nth-child(even) {background: #f5f5f5} */
#listTableBody TD { border-bottom: 1px solid #c5d3e8; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow-mode: ellipsis;}
#listTableBody TD.check { text-overflow: clip;  text-overflow-mode: clip;}
#listTableBodyDummy {width: 10px; height: 159px;}
#listTableBody .subList {display: none;}
.listTableBodyWrap {width: 100%; background-color: #fff;}
.listTableBodyEmpty {text-align: center; color: #888; line-height: 30px;}

#listTableHead TH div.check {padding-left:3px; width:19px; padding-top:2px; height:22px; text-overflow: clip;  text-overflow-mode: clip;}
/* check Label dependency */
#listTableBody TD.check {padding-left:3px;}

.listTable { border: 1px solid #828790; width: 100%; table-layout: fixed;}
.listTable TBODY { display:table-footer-group; width: 100% }
.listTable TR { border-bottom:1px solid #babcc1; }
.listTable THEAD > TR > TH { height: 24px; font-weight: normal; color: #333; border-left:1px solid #babcc1;}
.listTable TBODY TR:hover { background-color: #d2ebff}
.listTable TD { border-bottom: 1px solid #c5d3e8; line-height: 24px; height: 24px;}
/* check Label dependency */
.listTable TD.check, .listTable TH.check { padding-left:3px; }

.popupListTable { border: 1px solid #828790; width: 100%; table-layout: fixed; width: 500px; line-height: 24px;}
.popupListTable caption {text-align: right; padding-right: 10px; color: #555; padding-top:0; margin-top:0;}
.popupListTable TBODY { display:table-footer-group; width: 100% }
.popupListTable TR { border-bottom:1px solid #babcc1; }
.popupListTable THEAD > TR > TH { height: 24px; font-weight: normal; color: #333; border-left:1px solid #babcc1;}
.popupListTable TH {  height: 24px;}
.popupListTable TH > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow-mode: ellipsis;}
.popupListTable TR { border-bottom:1px solid #babcc1; }
.popupListTable TD { border-bottom: 1px solid #c5d3e8; line-height: 24px; height: 24px; border-left: 1px solid #c5d3e8;}
.popupListTable .addressSuggestSelectIcon { top: 3px; }
.popupListTable .divIcon.deleteBlackIcon.addressSuggestDeleteIcon { top: 5px; }

.subListTable { border: 1px solid #a7a8af;  background-color: #ffffff }
.subListTable th { background-color: #f3f4f8; border-bottom: 1px solid #a7a8af; }


.mainNavi {}
.changeLayout { padding-left:10px; padding-right:10px}
.changeLayout .mainBtnLeft {float:left; width:9px; height:17px; }
.changeLayout .mainBtn {float:left;height:18px;color:#696d72; font-weight: bold; line-height: 18px}
.changeLayout .mainBtnRight {float:left; width:8px;height:18px;  }
.changeLayout .mainBtnLeftOver {float:left; width:9px; height:18px;background-image: url('/files/image/dashboard/main_btn_left.png'); }
.changeLayout .mainBtnOver {float:left;height:18px;color:#FFFFFF; font-weight: bold; background-color:#676b71}
.changeLayout .mainBtnRightOver {float:left; width:8px;height:18px; background: url('/files/image/dashboard/main_btn_right2.png') right no-repeat; }
/* 메인 시스템 정보 */
.resourceTr {
    background: rgb(245,246,247); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(245,246,247,1) 0%, rgba(225,226,230,1) 100%, rgba(225,226,230,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(245,246,247,1) 0%,rgba(225,226,230,1) 100%,rgba(225,226,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(245,246,247,1) 0%,rgba(225,226,230,1) 100%,rgba(225,226,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f7', endColorstr='#e1e2e6',GradientType=0 ); /* IE6-9 */
}
.resourceTr.bottomLine { border-bottom:1px solid #bcbcbc; }
.mainBorderRight1 {border-right: 1px solid #aaaaac;}
.mainBorderRight2 {border-right: 1px solid #d0d0d1;}
.mainBorderLeft1 {border-left: 1px solid #f8f8f8;}
.mainBorderTop1 {border-top: 1px solid #d0d0d1;}
.mainBorderTop2 {border-top: 1px solid #f8f8f8;}
.mainBorderBottom1 {border-bottom: 1px solid #d0d0d1;}
.mainBar1 {top:5px;height:8px;background-image: url('/files/image/dashboard/dashboard_bar_bg1.png'); }
.mainBar1:hover, .mainBar2:hover {-webkit-filter: blur(1px);}
.mainBar2 { height:8px;background-image: url('/files/image/dashboard/dashboard_bar_bg2.png'); }
.mainBarLine { position:absolute; width:2px; height:31px;background-color: red; top:0px; }
.mainLightGray { background : #f2f2f3 }
.mainDarkGray { background : #e9eaea }
.mainGraphBg1 { float:left;width:100%;height:31px;background-image: url('/files/image/dashboard/dashboard_01_bg1.png')}
.mainGraphLine1 { width:1px;background-image: url('/files/image/dashboard/dashboard_01_line1.png') }
.mainGraphBg2 { float:left;width:100%;height:31px;background-image: url('/files/image/dashboard/dashboard_01_bg2.png')}
.mainGraphLine2 { width:1px;background-image: url('/files/image/dashboard/dashboard_01_line2.png') }

.chartIcon { width:17px !important; }
.dynamicMemoryTable td { padding:3px; }
    
/* 메인 - 장비,라이선스 정보 */
.deviceInfoTable { width:100%; border-collapse: collapse; }
.deviceInfoTable td { height: 22px; padding: 0 10px; border: 1px solid #DEDFE2; border-right-color: #bcbcbc; border-left-color: #bcbcbc; background-color: #f9f9f9; }
.deviceInfoTable td.first { border-top-color: #bcbcbc; }
.deviceInfoTable td.last { border-bottom: 1px solid #bcbcbc; }
.mainInfoFont1 {color: #444444 }
.mainInfoFont2 {color: #0072ff }

#deviceSlotInfo { width:364px; height:75px; border:1px solid #b5b5b5; margin:0px auto; position:relative; background-color:#f9f9f9; }
#devicePsuFanInfo { width:364px; padding-top:20px; margin:0px auto; }
#psuImageArea { float:left; width:34px; height:34px; background-image:url('/files/image/dashboard/psu_bg.png'); }
.psuImage { width:8px; height:5px;position: relative; left:22px; }
.fanImage { width:34px; height:34px; float:left; margin-left:4px;background-image:url('');}
.fanImage.fanNormal { background-image:url('/files/image/dashboard/fan_bg.png'); background-repeat: no-repeat;  }
.fanImage.fanNormal .cpuIcon { margin: 2px 0 0 2px; }
.fanImage.fanNormal .fanIcon { margin: 5px 0 0 5px; }
.fanImage.fanError { background-image:url('/files/image/dashboard/fan_error.png'); background-repeat: no-repeat; }

/* 세팅 */
#settingWrap {
    padding-left: 226px; min-width: 600px; background-color: #fff; border-bottom: 1px solid #ddd;
}
#settingTitle {
    width: 100%; height: 45px; border-bottom: 1px solid #828790; background-color: #e1e4e9; line-height: 45px; text-indent: 23px; font-weight: bold; font-size: 12pt; color: #000;
}
.settingDepth1 {
    padding:5px 0 5px 0; line-height: 36px; padding-left: 22px; font-size: 10pt; color: #000; clear:both;
}
.settingDepth2 {
    padding:0px 0 0px 0; line-height: 24px; padding-left: 42px; font-size: 10pt; color: #000; clear:both;
}
.settingDepth3 {
    padding:0px 0 0px 0; line-height: 24px; padding-left: 62px; font-size: 10pt; color: #000; clear:both;
}
.settingLeft1 {
    min-width: 180px; line-height: 30px; float:left; padding-right: 10px; white-space: nowrap;
}
.settingLeft2 {
    min-width: 160px; line-height: 30px; float:left; padding-right: 10px;
}
.settingLeft3 {
    min-width: 140px; line-height: 30px; float:left; padding-right: 10px;
}
.settingRight1, .settingRight2, .settingRight3 {
    line-height: 30px; float:left;
}
.settingLine {
    width: 100%; height: 10px; border-bottom:1px solid #c1c2c3; font-size: 0; margin-top: 3px; margin-bottom: 3px; padding: 0; clear: both; line-height: 0;
}
.settingLine2 {
    width: 100%; height: 1px; background-color: #828790; font-size: 0; margin: 0; padding: 0; margin-top: 0px; margin-bottom: 3px;
}
.settingFooter {
    height: 42px; line-height: 42px; position: relative;margin-left:226px; padding-left:30px;
}
.settingFooter.settingFixed {
    position: fixed; bottom: 27px; width: 100%; background-color: #fff; border-top: 1px solid #ddd;
}
#settingHide {
    position: absolute; top: 0px; left: 23px; line-height: 30px; font-size: 10pt; color: #0072ff; cursor: pointer; text-decoration: underline;
}
.customShow, .customHide {
    color: #0072ff; cursor: pointer; text-decoration: underline;
}
.customHide, .customSetting {
    display: none;
}

/* 팝업창 */
#popupTop { width:100%; height:80px;background-color: #1a134a;}
#popupTopSubject { height:30px;padding-top: 10px; padding-left:10px }
#popupTopMenu { padding-left:10px }
#popupBottom { width:100%; height:60px; background-color: #999999; bottom:0px;}

/* 팝업창 로딩바 */
#loading {position: fixed; display: none; left:48%; top:48%;width:30px; height: 30px; z-index: 10; }
#globalProgress {position: fixed; display: none; left:45%; top:48%; width:223px; height:22px; border:0;z-index: 10004; }
#globalProgress > .progressLabel {position: absolute; top: 3px; left: 6px; font-weight: bold; color:#fff}

/* 검색 영역 */
.searchWrap {
    position: fixed; width:100%; top:69px; background-color: #f4f5f7; font-size: 10pt; min-width: 1100px; z-index: 10;
}
.searchTop {
    border-bottom: 1px solid #a7aab0;
}
.searchWrap .leftMargin {
    width: 228px;
}
.searchWrap .searchArea {
    padding-left: 8px;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    position: relative;
}
.searchWrap .normalArea {
}
.searchWrap .expandArea {
    display: none; height: 10px;
}
.searchWrap .expandButton {
    width: 32px; background-position: center bottom; border-left: 1px solid #a7aab0; text-align: center; vertical-align: bottom; z-index: 3;
}
.searchWrap .expandButton IMG {
    margin-bottom: 10px; cursor: pointer;
}
.searchText {
    border:1px solid #afafaf; height: 21px; text-indent: 2px; vertical-align: middle; width: 100px;
}
.searchSelect {
    width:120px; height: 21px; border:1px solid #afafaf; 
}
.expandAreaTable {
    margin-top: 25px; margin-bottom: 25px; width: 100%; text-align: left;
}
.expandAreaTable TH {
    text-indent: 10px; padding-left: 10px; font-weight: normal; height: 30px; text-align: left;
}
.searchAreaEnable {
    line-height:20px;padding-left:20px;float:left;
}




/* 검색 아래 영역 */
.searchBottom {
    border-bottom: 1px solid #828790; background-color: #fdfdfd;
}
.searchBottom > table.toolbarArea {
    height:31px; table-layout: auto; width:100%;
}
.listTopButtonWrap {
    padding: 0 0 0 8px;  text-align: left; min-width: 50px;
}
.listTopButtonWrap2 {
    padding: 0 0 0 8px; text-align: left; min-width: 200px;
}
.listTopTextWrap {
    text-align: left;
}
.searchTotalCount {
    color: #1470ec;
}
.searchMaxCount {
    color: #888888; font-weight: normal;
}

/* 목록 탭 */
.listTabSelected {
    height: 100%; margin-left: 3px; width:112px; line-height: 30px; float:left; color: #333333; background-color: #fff; text-align: center;
}
.listTab {
    height: 100%; margin-left: 3px; width:112px; line-height: 30px; float:left; color: #505661; background-color: #e7eaed; text-align: center; cursor: pointer;
}
.listTab:hover {
    background-color: #e9edf6;
}

/* paging 영역 */
#pagingWrap {
    width: 100%; min-width: 900px; color: #666666; padding-top: 5px; background-color: #fff; border-bottom: 1px solid #ddd;
}
.pagingLeft {
    width: 226px;
}
.pagingArea {
    border-bottom: 1px solid #a9acb2; height: 31px; padding-left: 8px;
}
.pagingText {
    border:1px solid #afafaf; height: 18px; text-align: center; border-radius: 2px; vertical-align: middle; width: 52px; color: #000;
}
.pagingSelect {
    border-radius: 2px; vertical-align: middle; max-width: 150px; min-width: 60px; height: 18px; border:1px solid #afafaf;
}

/* popup multitab 영역 */
.multiTapWrap {
    width: 100%; height: 24px;
}
.multiTap {
    height: 23px; line-height: 22px; padding: 0 20px 0 20px; border: 1px solid #ccc; float:left; border-bottom: 0; background-color: #f0f0ee; margin-left: 5px; cursor: pointer;
}
.multiTap.selected {
    height: 24px; background-color: #fff;
}
.multiTapContentsWrap {
    width: 100%; border: 1px solid #ccc;
}
.multiTapContents {
    padding: 15px;
}

/* bottom */
#bottomWrap {
    width: 100%; min-width: 500px; height: 26px; position: fixed; bottom: 0; background-color: #f3f4f7; z-index: 12; line-height: 26px; border-top: 1px solid #b1b7be;
}
#bottomWrap .bottomLeft {
    float:left; height: 100%;
}
#bottomWrap .bottomRight1 {
    float:right; height: 100%; text-align: right;  width: 160px;
}
#bottomWrap .bottomRight2 {
    float:right; height: 100%; text-align: center;
}


/* width 영역 */
.width22 {
    width: 22px; text-align: center;
}
.width36 {
    width: 42px; text-align: center;
}
.width48 {
    width: 58px; text-align: center;
}
.width60 {
    width: 70px; text-align: center;
}
.width80 {
    width: 90px; text-align: center;
}
.width100 {
    width: 98px; text-align: center;
}
.width120 {
    width: 108px; text-align: left; text-indent: 12px;
}
.width140 {
    width: 128px; text-align: left; text-indent: 12px;
}
.width160 {
    width: 148px; text-align: left; text-indent: 12px;
}
.width170 {
    width: 158px; text-align: left; text-indent: 12px;
}
.width180 {
    width: 168px; text-align: left; text-indent: 12px;
}
.width200 {
    width: 198px; text-align: left; text-indent: 12px;
}
.width240 {
    width: 238px; text-align: left; text-indent: 12px;
}
.width300 {
    width: 248px; text-align: left; text-indent: 12px;
}
.width350 {
    width: 298px; text-align: left; text-indent: 12px;
}
.width400 {
    width: 388px; text-align: left; text-indent: 12px;
}
.width500 {
    width: 488px; text-align: left; text-indent: 12px;
}
.width550 {
    width: 538px; text-align: left; text-indent: 12px;
}
.width600 {
    width: 588px; text-align: left; text-indent: 12px;
}
.widthAuto {
    text-align: left; text-indent: 12px; min-width: 50px;
}

.width_short60 {
    width: 60px;
}
.width_short {
    width: 80px;
}
.width_middle {
    width: 135px;
}
.width_middle2 {
    width: 160px;
}
.width_middle3 {
    width: 200px;
}
.width_long {
    width: 280px;
}
.width_auto {
    width: auto;
}


.buttonBlue {
    background-color:#1a9bf2; width:132px; height: 19px; text-align: center; margin: 0 auto; vertical-align: middle; cursor: pointer; border:0; line-height: 19px; font-weight: bold; color:#fff; border:1px solid #1c8afc;
}
.buttonBlue:hover {
    background-color:#0c74ba;
}
.buttonBlue.disabled {
    background-color:#bbbbbb; border:1px solid #999999; cursor: default;
}
.buttonObjectList { 
    float:left; margin-left:10px; margin-top: 3px;
    background-color:#5ace14; width:132px; height: 19px; text-align: center; vertical-align: middle; cursor: pointer; border:0; line-height: 19px; font-weight: bold; color:#fff; border:1px solid #50c10c;
}
.buttonObjectList:hover {
    background-color:#4da219;
}

.buttonDeviceAssign {
    background-color:#ffffff; width:132px; height: 19px; text-align: center; margin: 0 auto; vertical-align: middle; cursor: pointer; border:0; line-height: 19px; font-weight: bold; border:1px solid #9f9f9f;
}
.buttonDeviceAssign:hover {
    background-color:#1a9bf2; color:#ffffff; border:1px solid #9f9f9f;
}
.buttonDeviceAssign.disabled {
    background-color: #e6e6e6; color:#bcbcbc; border:1px solid #9f9f9f 
}

.buttonNormal {
    background: url('/files/image/btn/normal_btn.png'); width:110px; height: 21px; text-align: center; margin: 0px 4px 0 4px; vertical-align: middle; cursor: pointer; border:0; line-height: 21px; font-weight: bold;
}
.buttonNormal:hover {
    background: url('/files/image/btn/normal_btn_over.png');
}

.buttonRefresh {
    background: url('/files/image/btn/refesh_ico.png'); width: 21px; height: 21px; float:left; margin:0; padding:0; cursor:pointer;
}
.buttonRefresh:hover {
    background: url('/files/image/btn/refesh_ico_over.png');
}

.buttonMore {
    background: url('/files/image/btn/more_btn.png'); width: 18px; height: 17px; float:left; margin:0; padding:0; cursor:pointer;
}
.buttonMore:hover {
    background: url('/files/image/btn/more_btn_over.png');
}
.buttonFolding {  border :1px solid #a9cdf2; background-color: #e7f3ff;  color : #0060ff; padding:0 10px; text-align : center; height: 20px; line-height: 20px; cursor: pointer; }

.buttonLefttAdd { background: url('/files/image/btn/add_left.png'); width: 74px; height: 21px; float:left;  cursor:pointer; text-indent: 31px; line-height: 21px }


/** popup 영역 **/
#popupDivContainer {
    width: 100%; height: 100%;
}
#popupDivHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 42px;
    background-color: #1c2530; color: #fff; line-height: 42px;
}
#popupDivContentArea {
    position: absolute;
    left: 0px;
    top: 42px;
    right: 0px;
    bottom: 0px;
}
#popupDivContent {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 41px;
    overflow: hidden;
    background-color: #fff;
}
#leftAreaDivWrap {
    overflow: auto; height: 100%; float:left; width: 100%; outline:1px solid lightgray; position: relative;
}
#leftAreaDiv {
}

#popupFooter {
    padding-left:10px;height: 40px; background-color: #f4f5f7; position: fixed; bottom: 0; width: 100%; z-index: 0; white-space: nowrap; border-top: 1px solid #b1b5ba;
}
#popupFooter2 {
    height: 40px; position: fixed; bottom: 0; width: 100%; z-index: 0; white-space: nowrap;
}

.popupEmpty {
    height: 15px; font-size: 0; line-height: 0;
}
.popupLine1 {
    width: 100%; height: 1px; font-size:0; margin:0; padding:0; background-color: #d2d4d7;
}
.popupLeftTd1 {
    height: 30px; white-space: nowrap; line-height: 30px;
}
.popupLeftTd2 {
    height: 30px; white-space: nowrap; line-height: 30px; padding-left: 15px;
}
.popupLeftTd3 {
    height: 30px; white-space: nowrap; line-height: 30px; padding-left: 28px;
}
.depth1 {
    padding-left: 12px;
}
.popupRightTd1, .popupRightTd2, .popupRightTd3 {
    padding-left: 15px; line-height: 30px; text-align: left;
}
.popupUnion1 {
}
.popupTabSelected {
    height: 100%; margin-left: 3px; width:112px; line-height: 30px; float:left; color: #333333; background-color: #fff; text-align: center;
}
.popupTab {
    height: 100%; margin-left: 3px; width:112px; line-height: 30px; float:left; color: #505661; background-color: #aaafb4; text-align: center; cursor: pointer;
}
.popupAttackBox {
    border: 1px solid #AFAFAF; height: 80px; text-indent: 10px; overflow-y:auto; margin-top:7px; padding-top:7px;
}
.box1 {
    width: 90%; border: 1px solid #C6C6C6; padding: 5px; line-height: 22px; min-height: 110px; max-height: 217px; overflow-y: auto; min-width: 120px; margin-top: 5px; margin-bottom: 5px;
}
.box2 {
    width: 90%; border: 1px solid #C6C6C6; padding: 7px; line-height: 30px; overflow-y: auto; min-width: 120px; min-height: 50px; background-color: #f5f5f5; margin-top: 5px; margin-bottom: 5px;
}

.detailView {
    display: none;
}
.objectOnceLeft {
    float: left; height: 30px; line-height: 30px; margin-right: 10px;
}
.objectOnceRight {
    float: left; height: 30px; line-height: 30px;
}
.singleButtonAddInput {
    width: 120px;
}

.objectOnceWrap {
    width: 130px; height: 19px; line-height: 19px; margin-top: 5px; border:1px solid #afafaf; 
}

.popupGroupWrap {
    width: 100%; table-layout: auto;
}
.popupGroupItemWrap:focus {
    border:1px solid red;
}
.popupGroupItemWrap2 {
    width: 100%; height: 240px; overflow-y: auto; border:1px solid #afafaf; border-radius: 2px;
}
.popupGroupItemWrap {
    height: 238px;
}
.popupGroupTitle {
    width: 100%; height: 20px; line-height: 20px; text-indent: 5px; margin: 2px 0 2px 0; color:#2766c5;
}
.popupGroupItem {
    width: 100%; height: 20px; line-height: 20px; text-indent: 15px; margin: 2px 0 2px 0;
}

.popupGroupWrap .ui-selecting {
    background: #fff8e7;
}

.popupGroupWrap .ui-selected {
    background: #fff0c9;
}

.buttonPasteWrap {
    padding: 10px 0 0 15px;
    line-height: 24px;
}





#monitorTopWrap {
    width:100%; height: 107px; position: fixed; min-width: 500px; white-space: nowrap; z-index: 1;
}
#monitorTop1 {
    width: 100%; height: 43px; background: url('/files/image/monitoringTopBg1.png') repeat-x;
}
#monitorTop1Bi {
    float:left; width: 44px; height: 43px; background: url('/files/image/icon/monitoringBi.png');
}
#monitorTop1Menu {
    float:left; height: 100%; line-height: 43px; color: #607597; padding-left: 12px;
}
#monitorTop1Menu .menu{
    font-weight: bold; color: #007eff; cursor: pointer; width: 100px; height: 33px; line-height: 33px; margin-top: 4px; text-indent: 10px; float:left;
}
#monitorTop1Menu .menu:hover{
    background: url('/files/image/monitoring_menu_over.png') no-repeat;
}
#monitorTop1Menu .menu.click{
    background: url('/files/image/monitoring_menu_click.png') no-repeat;
}
#monitorTop1Menu .depthText{
    text-indent: 5px;
}
#monitorTop2 {
    width: 100%; height: 30px; background-color: #f4f5f7; border-bottom: 1px solid #a7aab0;
}
#monitorTop2Search {
    padding-left: 12px; height: 30px; line-height: 30px; color: #505661;
}
#monitorTop3 {
    height: 30px; background-color: #fdfdfd; border-bottom: 1px solid #828790; color: #333333; line-height: 30px;  float:left;
}

#monitorMenuWrap {
    width: 420px; height: 645px; background-color: #ffffff; border: 1px solid #a2a2a2; position: fixed; top: 43px; left: 44px; z-index: 10004; border-radius: 5px;
    box-shadow: 0 0 8px #929292; -moz-box-shadow: 0 0 8px #929292; -webkit-box-shadow: 0 0 8px #929292;
}
#monitorMenuLeft {
    width: 149px; height: 100%; float: left; cursor: pointer;
}
#monitorMenuLeft .menuLeft {
    width: 100%; height:32px; line-height: 32px; background-color: #f1f2f5; border-bottom: 1px solid #a2a2a2; border-right: 1px solid #a2a2a2; color: #70809b; font-weight: bold; text-indent: 18px;
}
#monitorMenuLeft .menuLeftOver {
    background-color: #fff; border-right: 1px solid #fff; color: #007eff;
}
.monitorMenuRight {
    float: left; padding-left: 25px; color: #70809b; line-height: 28px; font-weight: bold;
}
.monitorMenuRight a {
    color: #70809b;
}
.monitorMenuRight a:hover {
    color: #007eff;
}

.monitorMenuRight .depth3 {
    line-height: 22px; padding-left: 12px;
}



.pannelTitleWrap {
    height: 50px;
    line-height: 50px;
    padding-left: 22px;
}
.pannelTitle1 {
    font-weight: bold;
    color: #444444;
    font-size: 10pt;
}
.pannelTitle2 {
    font-weight: bold;
    color: #2674a0;
    font-size: 8pt;
}
.chartLegendWrap {
    top: 45px;
    right: 40px;
    position: absolute;
    line-height: 20px;
    color: #888888;
    font-size: 8pt;
}
.pieLegendWrap {
    color: #888888;
    font-size: 8pt;
    line-height: 25px;
}
.pannelConfig {
    cursor: pointer;
}
.pannelConfig:hover {
}
.pannelTable1, .pannelTable2 {
    width: 90%;
    margin: 0 auto;
}
.pannelTable1 thead tr th {
    color: #666666;
    font-size: 10pt;
    font-weight: normal;
    height: 28px;
    line-height: 28px;
}
.pannelTable1 tbody tr td {
    color: #18212d;
    font-size: 10pt;
    height: 22px;
    line-height: 22px;
    border-top: 1px solid #cdcfd1;
}
.pannelTable2 tbody tr td {
    color: #000000;
    font-size: 10pt;
    height: 42px;
    line-height: 16px;
    border-top: 1px solid #cdcfd1;
}
.pannelTable3 {
    width: 93%;
    margin: 0 auto;
}
.pannelTable3 tr {
    height:60px;
}
.pannelTable3.trafficNumberWrap td > div:not(.textValue) {
    float:left;
}

.pannelTable3.trafficNumberWrap .textValue {   
    float:left;
    margin-left:10px;
    padding-top:6px;
}
.mainBorderBottom1 .odd {
    background-color: #e5e5e6;
}
.mainBorderTop2 .odd {
    background-color: #f0f0f1;
}
.pannelLoading {
    position: absolute; top:130px; left:48%; z-index:1;
}
.pannelSelect {
    text-indent: 20px; cursor: pointer;
}
.pannelSelected {
    background: url('/files/image/icon/icon_on.png') no-repeat left;
}



.barChartWrap {
    width: 95%; margin:0 auto;
}
.barChartWrap .chartLine {
    width: 100px; height: 7px; background-color: #adaeb2; float:left; margin-top: 5px;
}
.barChartWrap .chartLine:hover {
    -webkit-filter: blur(1px);
}
.barChartWrap .chartLineValue {
    padding-left: 7px; height: 16px; line-height: 16px; font-weight: bold; font-size: 8pt; float:left;
}
.barChartWrap .legend {
    clear: both; font-size: 8pt; height: 16px; color: #848484;
}
.barChartWrap .highlight1 {
    background-color: #00a2ff;
    background-image: linear-gradient(right , rgb(0,162,255) 27%, rgb(2,124,189) 84%);
    background-image: -o-linear-gradient(right , rgb(0,162,255) 27%, rgb(2,124,189) 84%);
    background-image: -moz-linear-gradient(right , rgb(0,162,255) 27%, rgb(2,124,189) 84%);
    background-image: -webkit-linear-gradient(right , rgb(0,162,255) 27%, rgb(2,124,189) 84%);
    background-image: -ms-linear-gradient(right , rgb(0,162,255) 27%, rgb(2,124,189) 84%);

    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.27, rgb(0,162,255)),
        color-stop(0.84, rgb(2,124,189))
        );
}
.barChartWrap .highlightText1 {
    color: #00a2ff;
}

.barChartWrap .highlight2 {
    background-image: linear-gradient(right , rgb(255,0,0) 27%, rgb(191,0,0) 84%);
    background-image: -o-linear-gradient(right , rgb(255,0,0) 27%, rgb(191,0,0) 84%);
    background-image: -moz-linear-gradient(right , rgb(255,0,0) 27%, rgb(191,0,0) 84%);
    background-image: -webkit-linear-gradient(right , rgb(255,0,0) 27%, rgb(191,0,0) 84%);
    background-image: -ms-linear-gradient(right , rgb(255,0,0) 27%, rgb(191,0,0) 84%);

    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.27, rgb(255,0,0)),
        color-stop(0.84, rgb(191,0,0))
        );
}
.barChartWrap .highlightText2 {
    color: #ff0000;
}

.barChartWrap .highlight3 {
    background-image: linear-gradient(left , rgb(224,3,147) 27%, rgb(255,0,162) 63%);
    background-image: -o-linear-gradient(left , rgb(224,3,147) 27%, rgb(255,0,162) 63%);
    background-image: -moz-linear-gradient(left , rgb(224,3,147) 27%, rgb(255,0,162) 63%);
    background-image: -webkit-linear-gradient(left , rgb(224,3,147) 27%, rgb(255,0,162) 63%);
    background-image: -ms-linear-gradient(left , rgb(224,3,147) 27%, rgb(255,0,162) 63%);

    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.27, rgb(224,3,147)),
        color-stop(0.63, rgb(255,0,162))
        );
}
.barChartWrap .highlightText3 {
    color: #ff00a2;
}

.barChartWrap .highlight4 {
    background-image: linear-gradient(left , rgb(88,0,219) 27%, rgb(102,0,255) 63%);
    background-image: -o-linear-gradient(left , rgb(88,0,219) 27%, rgb(102,0,255) 63%);
    background-image: -moz-linear-gradient(left , rgb(88,0,219) 27%, rgb(102,0,255) 63%);
    background-image: -webkit-linear-gradient(left , rgb(88,0,219) 27%, rgb(102,0,255) 63%);
    background-image: -ms-linear-gradient(left , rgb(88,0,219) 27%, rgb(102,0,255) 63%);

    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.27, rgb(88,0,219)),
        color-stop(0.63, rgb(102,0,255))
        );
}
.barChartWrap .highlightText4 {
    color: #6600ff;
}

.barChartWrap .highlight5 {
    background-image: linear-gradient(left , rgb(227,182,0) 27%, rgb(255,208,0) 63%);
    background-image: -o-linear-gradient(left , rgb(227,182,0) 27%, rgb(255,208,0) 63%);
    background-image: -moz-linear-gradient(left , rgb(227,182,0) 27%, rgb(255,208,0) 63%);
    background-image: -webkit-linear-gradient(left , rgb(227,182,0) 27%, rgb(255,208,0) 63%);
    background-image: -ms-linear-gradient(left , rgb(227,182,0) 27%, rgb(255,208,0) 63%);

    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.27, rgb(227,182,0)),
        color-stop(0.63, rgb(255,208,0))
        );
}
.barChartWrap .highlightText5 {
    color: #d68d00;
}

#reloadConfirm {
    background-color: white;
    left: 35%;
    top: 40%;
    position: fixed;
    width: 390px;
    height: 210px;
    z-index: 10003
}

/* jquery ui 영역 */
.ui-dialog {
    box-shadow: 0 0 8px #929292;
    -moz-box-shadow: 0 0 8px #929292;
    -webkit-box-shadow: 0 0 8px #929292;
    border: 1px solid #6c757f;
}
.ui-dialog .ui-dialog-content {
    padding:5px;
}
.ui-dialog-titlebar {
    border: 0; 
    background: none;
    background-color: #f4f6f8;
    color : #1168d4;
    font-weight: bold;
    font-size: 12pt;
    height: 35px;
    line-height: 30px;
    padding:0;
}
.ui-dialog-buttonpane, .ui-dialog .ui-dialog-buttonpane {
    border: 0; margin: 0;
}
.ui-tooltip {
    background-color: #fff;
    line-height: 20px;
    word-break: break-all;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}
body .ui-tooltip {
    border: 1px solid #8c919f;
    padding: 10px;
    border-radius: 3px;
}
body .ui-tooltip.noPadding {
    padding: 0px;
}
.ui-datepicker-trigger {
    margin-left: 5px; vertical-align: middle; cursor: pointer; border:0; width: 17px; height: 16px;
}
.ui-datepicker {
    font-size: 8pt;
}
.ui-menu {
    box-shadow: 0 0 8px #929292;
    -moz-box-shadow: 0 0 8px #929292;
    -webkit-box-shadow: 0 0 8px #929292;
}

/* etc */
i.circle {
    margin-top: 7px;
    display:inline-block;
    width: 15px;
    height: 15px;
    border-radius: 12px;
}
i.circle.circleSize12 {
    width: 12px;
    height: 12px;
}
i.circle.circleSize10 {
    width: 10px;
    height: 10px;
}
i.circle.circleSize7 {
    width: 7px;
    height: 7px;
}


i.chartIcon {
    margin-top: 3px;
    display:inline-block;
    width: 14px;
    height: 10px;
    border-radius: 12px;
}

.bg_color_gray { background-color: #B0B0B0; }
.bg_color_green { background-color: #2BAA52; }
.bg_color_orange { background-color: #F8AC09; }
.bg_color_red { background-color: #F34747; }
.bg_color_lightblue { background-color : #00acfd; }
.bg_color_purple { background-color : #6600ff; }
.bg_color_lightgreen { background-color : #99d200; }
.bg_color_navy { background-color : #183a52; }
.bg_color_yellow { background-color: #ffde00; }
.bg_color_blue { background-color : #1f82fd; }

/* graph bar */
.graphBarWrap { float: left; }
.graphBar { display: inline-block; height: 11px; margin-top: 5px; }

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@-webkit-keyframes blink {
    0%     { opacity: 1 } 70% { opacity: 1 }
    70.1%     { opacity: 0 } 80% { opacity: 0 }
    80.1% { opacity: 1 } 100% { opacity: 1 }
}

@-webkit-keyframes fade {
    0%     { opacity: 0 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0 }
}

@-webkit-keyframes blur1 {
    0%     { -webkit-filter: blur(8px);} 90% {-webkit-filter: blur(0);}
}

@-moz-keyframes fade {
    0%     { opacity: 0 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0 }
}

@keyframes fade {
    0%     { opacity: 0 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0 }
}

@-webkit-keyframes fade2 {
    0%     { opacity: 0.3 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0.3 }
}

@-webkit-keyframes fade_port {
    0%     { opacity: .3 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: .3 }
}

@-webkit-keyframes fade3 {
    0%     { opacity: 0.3 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0.3 }
}

@-webkit-keyframes fade5 {
    0%     { opacity: 0.5 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0.5 }
}

@-webkit-keyframes fade7 {
    0%     { opacity: 0.7 } 50% { opacity: 1 }
    50.01% { opacity: 1 } 100% { opacity: 0.7 }
}

@-webkit-keyframes fadeIn {
    0%     { opacity: 0 } 100% { opacity: 1 }
}

@-webkit-keyframes fadeOut {
    0%     { opacity: 1 } 100% { opacity: 0 }
}

@-webkit-keyframes dialogAnimation {
    from {transform: scale(1.1)}
    to {transform: scale(1)}
}

@keyframes dialogAnimation {
    from {transform: scale(1.1)}
    to {transform: scale(1)}
}

.rotate_hover {
    cursor: pointer;
}
.rotate_hover:hover {
    -webkit-animation: rotate 3s infinite linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased;
    animation: rotate 2s linear infinite;
}

.rotate {-webkit-animation: rotate 2s infinite linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased; animation: rotate 2s linear infinite;}
.rotate_slow {-webkit-animation: rotate 3s infinite linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased; animation: rotate 3s linear infinite;}
.rotate_fast {-webkit-animation: rotate 1s infinite linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased; animation: rotate 1s linear infinite;}
.blink {-webkit-animation: blink 1s infinite linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased;}
.fade {-webkit-animation: fade 1s infinite linear alternate; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased; -moz-animation: fade 1 infinite linear alternate; animation: fade 1 infinite linear alternate; }
.fade2 {-webkit-animation: fade 1.5s infinite linear alternate; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;}
.fade_port {-webkit-animation: fade_port 1s infinite linear alternate; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased;}
.fade3 {-webkit-animation: fade3 5s infinite linear alternate;}
.fade5 {-webkit-animation: fade5 5s infinite linear alternate;}
.fade7 {-webkit-animation: fade7 5s infinite linear alternate;}
.fadeIn {-webkit-animation: fadeIn 1s 1 linear;}
.fadeOut {-webkit-animation: fadeOut 1s 1 linear;}
.blurIn {-webkit-animation: blur1 2s linear; -webkit-transform-style: preserve-3d; -webkit-font-smoothing: antialiased}



/* 여기부터 Tooltipster css */
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
    border-radius: 5px; 
    border: 1px solid #000;
    background: #fff;
    color: #000;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
    font-family:Tahoma, 'Microsoft YaHei', 'NanumGothic', '굴림', Gulim, verdana;
    font-size: 12px;
    line-height: 16px;
    padding: 8px 10px;
    overflow: hidden;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
    /* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
    cursor: help;
    margin-left: 4px;
}

/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible;
}
.tooltipster-base .tooltipster-content {
    overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
    display: block;
    width: 0; 
    height: 0;
    position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid;
    bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 9px solid;
    bottom: -7px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid;
    top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid;
    top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
    left: 0;
    right: 0;
    margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
    left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    left: 5px;
}
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
    right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important; 
    border-left: 8px solid;
    top: 50%;
    margin-top: -7px;
    right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important; 
    border-left: 9px solid;
    margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important; 
    border-right: 8px solid;
    top: 50%;
    margin-top: -7px;
    left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important; 
    border-right: 9px solid;
    margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}
.tooltipster-fade-show {
    opacity: 1;
}

.tooltipster-grow {
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -o-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
}
.tooltipster-swing-show {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
    -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
    -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
    -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    top: 0;
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    -ms-transition-property: top;
    transition-property: top;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    top: 0px !important;
    opacity: 0;
}

.tooltipster-slide {
    left: -40px;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -o-transition-property: left;
    -ms-transition-property: left;
    transition-property: left;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    left: 0px !important;
    opacity: 0;
}


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
    opacity: 0.5;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.ul-nav li {
    float: left; 
    list-style:none; 
    display: list-item;
    height:100%;
    width:40px;
    text-align:center;
    vertical-align: middle
}

.ul-nav li img.icon {
    margin-top:10px
}

.ul-nav-vertical li {
    float: left; 
    text-indent:11px;
    list-style:none; 
    display: list-item;
    text-align: left;
    line-height:26px;
    height:26px;
    width:100%;
}
.ul-nav-vertical > li > a { display: block;}
.ul-nav-vertical > li:not(.disabled):not(.leftMenuSelected) > a:hover,
.ul-nav-vertical > li:not(.disabled):not(.leftMenuSelected) > a:focus {
    background-color: #d7d9df;
    color : #5f5f61;
}

.ul-nav-vertical li.menuDepth2:not(:first-child) {
    margin-top:10px;
}
.ul-nav-vertical li.menuDepth3 {
    text-indent:30px;
}

.ul-nav-vertical li.menuDepth2:not(.disabled):not(.leftMenuSelected):hover,
.ul-nav-vertical li.menuDepth2:not(.disabled):not(.leftMenuSelected):focus {
    text-decoration: none;
    color: #5f5f61;
    background-color: #d7d9df;
}
.leftMenuSelected2 { background-color: #d7d9df;}
.leftMenu i.divIcon { top: 4px;  position: relative;}


/* menu style */
.dropdown { position: relative; }
.dropdown.btnNormal { height: 19px; }
.dropdown-menu {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 100;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 13px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 3px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
.dropdown-menu  li  {
    width:100%;
    text-align: left;
}
.dropdown-menu  li:hover  {
    border:0px;
}
.dropdown-menu  li > a, .dropdown-menu  li > span {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.5;
    color: #333333;
    white-space: nowrap;
}
.dropdown-menu li:not(.disabled) > span:hover,
.dropdown-menu li:not(.disabled) > span:focus,
.dropdown-menu li:not(.disabled) > a:hover,
.dropdown-menu li:not(.disabled) > a:focus { background-color: #1a9bf2; color:#ffffff }

/* ------------------------------------------ */
/* ##############  MessageBox ############### */
/* ------------------------------------------ */
.div_caution { margin-top:20px; padding:14px 11px; background : #fef6da;}
.divIconL { display : inline-block; background: url(/files/image/icon/icons_big.png) no-repeat; width: 23px; height: 21px; }
.divIconL.cautionIcon { background-position: -46px 0}
.div_caution .divIconL { margin-right: 9px; }
.div_caution p { display : inline-block; width : 93%; line-height:1.9; font-size:12px}


/* topMenu */
#topMenu .menuBorderLeft {border-left: 1px solid #0f2342}
#topMenu .dropdown { min-width: 100px; line-height: 33px; width: auto;}
#topMenu > li { font-size:13px; }
#topMenu .dropdown-menu > li { font-size:13px; text-indent:10px }
#topMenu > li.menuDepth1 { border-right: 1px solid #0f2342;}
#topMenu > li.menuDepth1 > a { color: #899ab4;}
#topMenu > li > a { display: block; }
#topMenu > li > a:hover { color: #ffffff;}
#topMenu > li.selected > a { background-color: #1c2e4b; color:#1a9bf2; }
#topMenu li.menuDepth2 { text-indent: 5px; margin-top:5px; }
#topMenu li.menuDepth3 { text-indent: 13px }
#topMenu  li.menuDepth2.selected,
#topMenu  li.menuDepth3.selected { background-color: #d7d9df;}
#topSubMenu > li:hover { background-color: #1c2e4b;color:#1aabff; }
#topSubMenu > li.selected { color:#1aabff; background-color: #1c2e4b; }
#topSubMenu .selected  { color:#1aabff !important; }
#topSubMenu2 > li:hover { background-color: #dddddd }
#topSubMenu2 img {margin-top:5px}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid #899ab4;
    border-right: 4px solid transparent;
    border-bottom: 0 dotted;
    border-left: 4px solid transparent;
    content: "";
}
.leftMenuWrap {
    position: fixed; left: 0;  top: 69px; z-index: 1; width:226px; bottom:27px; 
    border-right:1px solid #a7aab0;
    background-color: #eeeff2; z-index: 11;
    overflow-y:auto;
}
.leftMenuSelected > a {  color: #ffffff; background-color: #1a9bf2;}
#btnLeftMenuOff { position:absolute; outline:#bcbfc9 solid 1px; width:15px; right:0px; top:4px; right:3px; text-align:center; background : #f7f8fa url('/files/image/icon/icon_menu_toggle_on.png') no-repeat 6px 5px;}
#btnLeftMenuOff.hasScroll { position:fixed; top: 73px; left:180px; }
.btnLeftMenuOffOver, #leftMenuObjectWrapClose:hover, #btnLeftMenuOff:hover { background: #1a9bf2 url('/files/image/icon/icon_menu_toggle_on2.png')  no-repeat 6px 5px !important;}
#btnLeftMenuOn { float:right; margin-right:4px; margin-top:4px }
#btnLeftArea { width:20px; height:100%; position:absolute; background-color:#eeeff2; right: 0px; }

.leftMenuObjectWrap {
    position: fixed; left: 0;  top: 69px; z-index: 1; width:226px; bottom:27px; 
    border-right:1px solid #a7aab0;
    background-color: #eeeff2; z-index: 11;
    overflow-y: hidden;
}

.topMenuBtn { height:26px;padding-top:7px;padding-left:10px;padding-right:10px; float:left; color:#899ab4; border-right:1px solid #0f2342; }
.topArea {
    position: fixed;
    left: 0px;
    text-align: left;
    width: 100%;
    height: 69px;
    z-index: 100;
    min-width: 800px; 
    background-color: #283b59
}

.slideBarOff { left: -210px }
.slideBarOn { left: 0px }

/** Caps Lock 체크 */
.capslockCheckText { z-index:2;position:absolute; }
.capslockCheckText > div {text-indent:12px; text-align:left; height:21PX; line-height:21px; background-color: #767d8a; margin:0px auto; color:#ffffff;}
.capslockCheckText.type2 {margin-top:-4PX; text-indent:12px; text-align:left; height:21PX; line-height:21px; background-color: #767d8a; color:#ffffff;}

/** 검색창 */
#searchBox { width: 610px; float:left; position: relative; line-height: 20px; height: 20px; outline: 1px solid #afafaf; vertical-align: middle; background-color: #fff; margin-top:1px; }
#searchBox #searchStatusWrap { width: 22px; height: 20px; float:left;}
#searchBox #queryStringWrap { width: 462px; height: 20px; float:left;}
#searchBox #queryString { width: 100%; text-align: left; margin: 0; border:0; line-height: 18px; height: 18px; margin-top: -2px; }
#searchBox #queryString::-ms-clear { display: none; }
#searchBox #searchResetWrap { width: 44px; height: 20px; float:left;}
#searchBox .buttonSearchString {display: table; width: 82px; height: 20px; outline: 1px solid #809eb2; text-align: center; float:left; }
#searchBox .buttonSearchString:not(.disabled):hover { background-color: #1a9bf2; color:#ffffff; cursor: pointer; }
#searchBox #searchProgress { top:0; left:0; width:0; height: 20px; z-index: 0; background: #e2f1fa; background: linear-gradient(to right, #e2f1fa 0%,#c8e6fd 570px); }

#buttonSearchStringReset {margin-left: 5px; margin-top: 1px; float:left; width: 82px; line-height: 20px; outline: 1px solid #809eb2; text-align: center; cursor: pointer; background-color: #fff;}
#buttonSearchStringReset:hover { background-color: #1a9bf2; color:#ffffff;  }

.searchAdvanced {margin:1px 5px 0 10px; float:left; line-height: 20px; text-align: center; color: #0060ff; cursor: pointer;}

#linkDirect3Depth { margin-left: 8px;}



/** jquery ui autocomplete */
.ui-menu {padding: 0;}
.ui-autocomplete.ui-menu.ui-widget.ui-widget-content {width: 158px;}
.ui-autocomplete {-webkit-box-shadow: none; border:1px solid #afafaf;}

.ui-autocomplete li {line-height: 20px; word-break:break-all; white-space:normal; border:0;}
.ui-autocomplete li.title {font-weight: bold; text-indent: 5px; padding-top: 5px;}
.ui-autocomplete li.history {text-indent: 12px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden}
.ui-autocomplete li.filter {text-indent: 12px;}
.ui-autocomplete li.enum {text-indent: 12px;}
.ui-autocomplete li.history.last {margin-bottom: 10px;}
.ui-autocomplete li.history.ui-state-focus {color: #fff;}
.ui-autocomplete li.ui-state-focus {font-weight: normal; border:0; background-color: #1a9bf2;}
.ui-autocomplete li.title.ui-state-focus {font-weight: bold;}
.ui-autocomplete li.disabled.ui-state-focus { background:none; line-height: 20px; border:0; color:#000;}
.ui-autocomplete li.example {padding-left: 12px; background-color: #f3f4f7; width:auto; color: #666666;}
.ui-autocomplete li.example.ui-state-focus {background-color: #f3f4f7; width:auto; color: #666666;}
.ui-autocomplete li.title.example {padding-left: 0; background-color: #f3f4f7; width:auto; color: #666666;}

.addressSuggestWrapper input[type='text']::-ms-clear { display: none; }
.addressSuggestWrapper {
    position: relative;
}
.addressSuggestSelectIcon {position: absolute; top: 5px; left: 144px; width: 16px; height: 20px; cursor: pointer; background: url('/files/image/icon/list_sorting_ico.png') no-repeat 4px 8px}
.addressSuggestSelectIcon:hover {background-image: url('/files/image/icon/list_descending_select_ico.png')}
.divIcon.deleteBlackIcon.addressSuggestDeleteIcon {position: absolute; top: 7px; left: 131px; cursor:pointer; display: none;}
.addressSuggest {
    border:1px solid #afafaf; width: 160px; padding-left: 5px; padding-right: 28px; color: #333333; height: 21px; line-height: 18px; margin-bottom:2px;
}
.addressSuggest:focus {
    border-color: #66afe9;
}
.addressSuggestUl {
    max-height: 200px; width: 148px;
}
.ui-autocomplete li.addressSuggestCategory {font-weight: bold; text-indent: 5px; padding-top: 5px;}
.ui-autocomplete li.addressSuggestCategory.ui-state-focus {background-color: #fff; background: none; color: #000;}
.ui-autocomplete li.addressSuggestString {text-indent: 10px;}
.ui-autocomplete li.addressSuggestStringDisable, .ui-autocomplete li.addressSuggestStringDisable.ui-state-focus {text-indent: 5px; color: #999;}
.ui-autocomplete li.addressSuggestMore {text-align: left; color: gray; text-indent: 10px; }
.ui-autocomplete li.addressSuggestMore.ui-state-focus {background-color: #fff; background: none; color: #000;}


/* time picker addon */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 8px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 30%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { border: 1px solid #afafaf; height: 22px; text-indent: 6px;}
.ui-timepicker-div .ui-state-default {border-radius:0;}
.ui-timepicker-div .ui-state-default.ui-state-hover {background-color:#0978eb; border-radius:0;}