.cancelArea {
	width:35px; 
	height:36px; 
	position:relative; 
	left:96%; 
	border-left:solid 0.5px silver; 
	cursor:pointer;
}

.cancelX{
	position:relative; 
	bottom:65%;
	margin: auto;
    display: block;
}

.text-input{
	margin-top: 4px; 
	margin-bottom: 4px;
}

.margin-55{
	margin-top: 5px; 
	margin-bottom: 5px;
}

/* monitoring */
.monitoring-controller {position:relative;}
.monitoring-controller > button {width:36px; height:36px; padding:0; text-indent:-9999px; margin:0; display:block; float:left; border-right:#bbb 1px solid; background-image:url(../images/common/bg-controller.png); background-repeat:no-repeat; background-color:transparent;}
.monitoring-controller > button:first-child {border-radius:3px 0 0 0;}
.monitoring-controller > button.start {background-position:0 0;}
.monitoring-controller > button.stop {background-position:0 -36px;}
.monitoring-controller > button.start:hover, .monitoring-controller > button.start.on {background-position:-36px 0;}
.monitoring-controller > button.stop:hover, .monitoring-controller > button.on {background-position:-36px -36px;}
.monitoring-alarm {list-style:none; padding:0; margin:0;}
.monitoring-alarm > li {float:left;}
.monitoring-alarm > li + li {margin-left:15px;}
.monitoring-alarm > li .status {margin-top:9px; margin-right:10px; padding:0 7px; height:20px; line-height:22px; color:#fff; font-weight:bold; font-size:11px; border-radius:2px; background-color:#333; position:relative; float:left;}
.monitoring-alarm > li .status:after {content: '';  position: absolute; top: 50%; left: 100%;  margin-top: -4px; width: 0; height: 0;  border-left: 4px solid #333; border-right: 4px solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}
.monitoring-alarm > li .status.critical {background-color:#d33;}
.monitoring-alarm > li .status.critical:after {border-left-color:#d33;}
.monitoring-alarm > li .status.major {background-color:#f60;}
.monitoring-alarm > li .status.major:after {border-left-color:#f60;}
.monitoring-alarm > li .status.minor {background-color:#9c3;}
.monitoring-alarm > li .status.minor:after {border-left-color:#9c3;}
.monitoring-alarm > li > span {display:block; float:right;}
.monitoring-controller:after,
.monitoring-alarm:after,
.monitoring-alarm > li:after {content:''; display:block; clear:both;}

/* right-top area */
.rt-area {position:absolute; top:0; right:0; height:38px; vertical-align:top; min-width:36px; line-height:38px;}
.rt-area:after {content:''; display:block; clear:both;}
.rt-area > * {float:left; margin-right:15px !important;}
.rt-area .desc {height:36px; line-height:36px; margin:0;}
.rt-area .tab-btn1 li > * {width:auto; padding:0 20px;}


/* search area */
.search-area {padding:15px 12px; border-bottom:#c9c9c9 1px solid;}
.search-area:after {content:''; display:block; clear:both;}
.search-area > label:first-child + * {margin-left:0 !important;}
.search-area > * {display:inline-block; vertical-align:middle;}
.search-area .msg-box {line-height:30px; color:#878787; font-size:12px; text-align:right; float:right;}
.search-area .btn-box {margin-left:6px;}
.search-area .btn-box a {text-decoration:none;}


/* time area */
.time-area {padding:15px 12px; text-align:center;}
.time-area > div {display:inline-block;}
.time-area > div + div {margin-left:15px;}
.time-area > div > * {display:inline-block; position:relative; padding:15px 0;}
.time-area .time input[type=text] {background:#55c3ce; border-color:#2eacb9;}
.time-area input[type=text] {font-family:Verdana, Geneva, sans-serif; font-size:28px; font-weight:bold; min-width:inherit; height:auto; background-image:none; background-color:transparent; padding:10px 5px; background:#4e6ccf; border-color:#2748b7; color:#fff; text-align:center;}
.time-area button.arrow {position:absolute; left:50%; margin-left:-8px; display:inline-block; background:url(../images/common/btn-updown-arrow.png) no-repeat; width:16px; height:9px; border:none; text-indent:-9999px; opacity:0.2;}
.time-area button.arrow.plus {top:0; background-position:0 0;}
.time-area button.arrow.minus {bottom:0; background-position:0 -9px;}


/* chart area */
.chart-area {text-align:center; padding:15px;}

.chart-color.red {background:#e9573f;}
.chart-color.green {background:#8cc152;}
.chart-color.yellow {background:#f6bb42;}
.chart-color.purple {background:#967adc;}
.chart-color.skyblue {background:#8dcae1;}
.chart-color.pastelyellow {background:#f2ca7b;}
.chart-color.pink {background:#e97480;}
.chart-color.blue {background:#4a89dc;}

.horizon-bar1 {list-style:none; padding:0; margin:0;}
.horizon-bar1:after {content:''; display:block; clear:both;}
.horizon-bar1 li {float:left; position:relative; height:37px; line-height:38px; font-size:11px; font-family:dotum; color:#878787; padding-left:26px;}
.horizon-bar1 li + li {margin-left:15px;}
.horizon-bar1 li span {display:inline-block; height:3px; width:20px; text-indent:-9999px; position:absolute; left:0; top:50%; margin-top:-2px;}

/* ------------------------------------------------- board / table  -------------------------------------------------  */
.board-area + .board-area {border-top:#bbb 1px solid;}
.board-area .scroll-x {overflow-x:auto;}
.board-area .scroll-xx {overflow-x:scroll;}
.board-area .scroll-y {overflow-y:auto;}
.board-area.border {border:#c9c9c9 1px solid;}
.board-area caption {visibility:hidden; height:0; font-size:0; position:absolute; right:9999px;}
.board-area table {table-layout:fixed;}
.board-area table thead th, .board-area table thead td {background:url(../images/common/bg-gradient-25.png) repeat-x left bottom #f9f9f9;}
.board-area table thead tr:first-child > th:first-child {border-left:none;}
.board-area table tbody tr > td:first-child {border-left:none;}
.board-area table tfoot tr > th:first-child, .board-area table tfoot tr > td:first-child {border-left:none;}
.board-area table tr.last > th, .board-area table tr.last > td, .board-area table tbody tr:last-child > th, .board-area table tbody tr:last-child > td {border-bottom:0;}
.board-area table span.desc {vertical-align:middle; margin-left:6px;}
.board-area table p.desc {margin:6px 0 0 0;}
.board-area table .btn-box {display:inline-block; vertical-align:middle;}
.board-area table .key {color:#e4412e; font-weight:bold;}
.board-area table tbody tr:last-child > *:first-child {border-bottom-left-radius:3px;}
.board-area table tbody tr:last-child > *:last-child {border-bottom-right-radius:3px;}
.board-area .txt-cut {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-area .article-view {padding:30px; border-top:#c9c9c9 1px solid; max-width:100%; word-break:break-all;}
.board-area .article-view, .board-area .article-view * {line-height:1.6;}
.none-data {padding:20px; text-align:center;} 
.board-area .word-break {word-break:break-all !important;}
.board-area *[data-target], .board-area *[data-href] {cursor:pointer;}


.tbl-default {width:100%; text-align:center;}
.tbl-default tr > * { padding:9px 5px; text-align:center;}
.tbl-default.bg-on tbody tr:hover td {background:#f8fcfb; border-color:#caded9; -o-transition:.2s ease-in-out; -ms-transition:.2s ease-in-out; -moz-transition:.2s ease-in-out; -webkit-transition:.2s ease-in-out; transition:.2s ease-in-out;}
.tbl-default.bg-on tbody tr:hover th {background:#f2f7f6; border-color:#caded9; -o-transition:.2s ease-in-out; -ms-transition:.2s ease-in-out; -moz-transition:.2s ease-in-out; -webkit-transition:.2s ease-in-out; transition:.2s ease-in-out;}
.tbl-default thead th {border-bottom:#c9c9c9 1px solid; border-left:#c9c9c9 1px solid; vertical-align:middle; line-height:1.2; word-break:keep-all;}
.tbl-default tbody tr:nth-child(even) th {background:#efefef;}
.tbl-default tbody tr:nth-child(even) td {background:#f5f5f5;}
.tbl-default tbody tr > * {border-bottom:#c9c9c9 1px solid; vertical-align:middle; min-height:16px; line-height:1.2;}
.tbl-default tbody th {background:#f4f4f4; font-weight:normal;}
.tbl-default tbody td {background:#f9f9f9; text-align:center; border-left:#c9c9c9 1px solid;}
.tbl-default tfoot th, .tbl-default tfoot td {border-left:#c9c9c9 1px solid; border-top:#c9c9c9 1px solid; vertical-align:middle;}

.tbl-default .icon-file {display:block; margin:0 auto; width:15px;}
.tbl-default .num {padding:0 !important; width:36px !important; min-width:36px !important; border-right:#c9c9c9 1px solid;}
.tbl-default .input-form {padding:0;width:36px;}
.tbl-default .input-form > div {width:36px;}


.tbl-write {width:100%;}
.tbl-write.small th, .tbl-write.small td {padding:8px 15px;}
.tbl-write > tbody > tr > * {padding:10px 15px; border-bottom:#c9c9c9 1px solid; vertical-align:middle; border-left:#c9c9c9 1px solid; line-height:1.4;  text-align: left;}
.tbl-write tbody th {background:#f4f4f4; word-break:keep-all;}
.tbl-write tbody th:first-child {border-left:none;}
.tbl-write tbody td {background:#fafafa; text-align:left;}
.tbl-write tbody tr.bg th {background:#efefef;}
.tbl-write tbody tr.bg td {background:#f5f5f5;}
.tbl-write tfoot td {padding:15px 20px;}
.tbl-write tfoot th, .tbl-write tfoot td {border-top:#d8d8d8 1px solid;}

.tbl-write .innerTbl { width: 100%; table-layout: fixed; border-collapse: collapse; margin: -10px 0 -10px 17px; }

.tbl-view {width:100%;}
.tbl-view.small th, .tbl-view.small td {padding:10px 15px;}
.tbl-view tbody th, .tbl-view tbody td {padding:15px; border-bottom:#c9c9c9 1px solid; vertical-align:middle;  border-left:#c9c9c9 1px solid;}
.tbl-view tbody th { text-align:left; background:#f4f4f4;}
.tbl-view tbody th:first-child {border-left:none;}
.tbl-view tbody td {background:#fafafa; text-align:left; min-height:12px !important; border-left:#c9c9c9 1px solid !important;}
.tbl-view tbody tr.bg th {background:#efefef;}
.tbl-view tbody tr.bg td {background:#f5f5f5;}
.tbl-view tfoot td {padding:15px 20px;}
.tbl-view tfoot th, .tbl-view tfoot td {border-top:#d8d8d8 1px solid;}
.tbl-view .a-center {text-align:center !important;}
.tbl-view .v-top {vertical-align:top !important;}
.tbl-view .div-area > * {display:inline-block; *display:inline; *zoom:1; margin-right:20px;}


/* board bottom */
.board-btm-area {position:relative; padding:13px 15px; background:url(../images/common/bg-gradient-52.png) repeat-x top #eff0ef; min-height:30px; border-top:#cdcdcd 1px solid; border-radius: 0 0 3px 3px;}
.board-btm-area.small {padding:8px 15px;}
.board-btm-area:after {content:''; display:block; clear:both;}
.board-btm-area .paging + .btn-area {margin-top:-28px;}
.board-btm-area .paging {margin-top:3px;}
.board-btm-area .btn-area:after {content:''; display:block; clear:both;}
.board-btm-area:first-child {border-top:none; border-radius:3px;}



/* paging */
ul.paging {margin:auto; text-align:center; width:507px; padding:0;}
ul.paging.small {width:280px;}
ul.paging li {display:inline-block; margin-left:6px; vertical-align:top;}
ul.paging li:first-child {margin-left:0;}
ul.paging a {display:inline-block; border:1px solid #ccc; border-radius:2px; padding:0 8px; min-width:7px; color:#878787; font-size:12px; font-weight:600; height:22px; background:url(../images/common/bg-gradient-25.png) repeat-x top; line-height:22px; text-decoration:none;}
ul.paging li.num a {margin-left:3px;}
ul.paging li.num a:hover {background:#fff;}
ul.paging li.num a:first-child {margin-left:0;}
ul.paging li.num a.on {background:#2e5d9c; border:1px solid #163765; color:#fff;}

ul.paging a.icon {height:24px; width:24px; padding:0; border:0; border-radius:0; text-indent:-9999px; background-image:url(../images/common/btn-paging.png); background-repeat:no-repeat;}
ul.paging a.next {background-position:-24px top;}
ul.paging a.next:hover{background-position:-24px -24px;}
ul.paging a.prev {background-position:left top;}
ul.paging a.prev:hover{background-position:left -24px;}
ul.paging a.first {background-position:-48px top;}
ul.paging a.first:hover{background-position:-48px -24px;}
ul.paging a.last {background-position:-72px top;}
ul.paging a.last:hover{background-position:-72px -24px;}

.no-border-input {
    border: none;
    background-color: transparent;
}