dx.light.custom.css 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827
  1. @charset "utf-8";
  2. /* CSS Document */
  3. /************** S : 공통사항 **************/
  4. .dx-fieldset {
  5. margin-bottom: 8px !important;
  6. padding: 20px !important;
  7. }
  8. /************** E : 공통사항 **************/
  9. /* toolbar 타이틀리스트 */
  10. li.none_select_title, li.select_title {
  11. float: left;
  12. background: url(../images/custom/ibems_light/toolbar_title_arrow.gif) 10px center no-repeat;
  13. padding: 0 10px 0 30px;
  14. }
  15. li.none_select_title h1 {
  16. font-size: 16px !important;
  17. line-height: 47px;
  18. font-weight: 600;
  19. color: #666;
  20. }
  21. li.select_title h1 {
  22. font-size: 18px !important;
  23. line-height: 47px;
  24. color: #3060a2;
  25. font-weight: 600;
  26. }
  27. .desktop-layout .dx-toolbar .dx-toolbar-after {
  28. padding-top: 10px;
  29. }
  30. .dx-toolbar-items-container {
  31. overflow: visible !important;
  32. }
  33. .toolba_left_cut {
  34. background: url(../images/custom/ibems_light/toolba_cut_bg.png) no-repeat;
  35. width: 4px;
  36. height: 20px;
  37. position: absolute;
  38. top: 15px;
  39. left: -15px;
  40. }
  41. .toolba_right_cut {
  42. background: url(../images/custom/ibems_light/toolba_cut_bg.png) no-repeat;
  43. width: 4px;
  44. height: 20px;
  45. position: absolute;
  46. top: 15px;
  47. right: -15px;
  48. }
  49. /* 버튼 롤오버 */
  50. .dx-button.dx-state-hover-enabled:hover {
  51. background: #669de8; /* Old browsers */
  52. background: -moz-linear-gradient(top, #669de8 0%, #507bb6 100%); /* FF3.6+ */
  53. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669de8), color-stop(100%,#507bb6)); /* Chrome,Safari4+ */
  54. background: -webkit-linear-gradient(top, #669de8 0%,#507bb6 100%); /* Chrome10+,Safari5.1+ */
  55. background: -o-linear-gradient(top, #669de8 0%,#507bb6 100%); /* Opera 11.10+ */
  56. background: -ms-linear-gradient(top, #669de8 0%,#507bb6 100%); /* IE10+ */
  57. background: linear-gradient(to bottom, #669de8 0%,#507bb6 100%); /* W3C */
  58. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669de8', endColorstr='#507bb6',GradientType=0 ); /* IE6-9 */
  59. }
  60. .dx-button.dx-button-danger:hover {
  61. background-color: #f19ba0;
  62. background-repeat: no-repeat;
  63. background-image: -webkit-linear-gradient(-90deg, #f19ba0 0%, #ef9095 100%);
  64. background-image: -moz-linear-gradient(-90deg, #f19ba0 0%, #ef9095 100%);
  65. background-image: -ms-linear-gradient(-90deg, #f19ba0 0%, #ef9095 100%);
  66. background-image: -o-linear-gradient(-90deg, #f19ba0 0%, #ef9095 100%);
  67. background-image: linear-gradient(180deg, #f19ba0 0%, #ef9095 100%);
  68. }
  69. /* 바디 타이틀 */
  70. .body_sub_title {
  71. font-size: 16px;
  72. font-weight: bold;
  73. display: block !important;
  74. margin-bottom: 10px;
  75. background: url(../images/custom/ibems_light/body_sub_title_bullet.png) left center no-repeat;
  76. padding-left: 18px;
  77. }
  78. .body_sub_title_2depth {
  79. font-size: 12px;
  80. font-weight: bold;
  81. display: block !important;
  82. margin-bottom: 10px;
  83. background: url(../images/custom/ibems_light/arrow01.png) left center no-repeat;
  84. padding-left: 10px;
  85. }
  86. /* 우측 검색 black round box */
  87. ul.search-row-layout li.form-field .dx-texteditor-input {
  88. margin: 0;
  89. padding: 5px 5px;
  90. /*background: #fafafa;
  91. color: #2b2b2b;*/
  92. font-size: 11px;
  93. line-height: 13px;
  94. background: #515558; /* Old browsers */
  95. background: -moz-linear-gradient(top, #515558 58%, #404446 100%); /* FF3.6+ */
  96. background: -webkit-gradient(linear, left top, left bottom, color-stop(58%,#515558), color-stop(100%,#404446)); /* Chrome,Safari4+ */
  97. background: -webkit-linear-gradient(top, #515558 58%,#404446 100%); /* Chrome10+,Safari5.1+ */
  98. background: -o-linear-gradient(top, #515558 58%,#404446 100%); /* Opera 11.10+ */
  99. background: -ms-linear-gradient(top, #515558 58%,#404446 100%); /* IE10+ */
  100. background: linear-gradient(to bottom, #515558 58%,#404446 100%); /* W3C */
  101. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515558', endColorstr='#404446',GradientType=0 ); /* IE6-9 */
  102. -webkit-border-radius: 3px 3px 3px 3px;
  103. border-radius: 3px 3px 3px 3px;
  104. -webkit-box-shadow: 1px 1px 2px 1px rgba(100,100,100,0.6);
  105. box-shadow: 1px 1px 2px 1px rgba(100,100,100,0.6);
  106. color: #fff;
  107. margin-bottom: 2px;
  108. }
  109. ul.search-row-layout li.form-field .dx-placeholder {
  110. font-size: 12px;
  111. }
  112. /* 우측 검색 button */
  113. #searchViewCondition .right-search-wrap {
  114. padding: 0;
  115. min-height: 10px;
  116. border-bottom: none !important;
  117. }
  118. #searchViewCondition .dx-button {
  119. -webkit-border-radius: 5px;
  120. -moz-border-radius: 5px;
  121. -ms-border-radius: 5px;
  122. -o-border-radius: 5px;
  123. border-radius: 5px;
  124. -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0px 1px 2px rgba(0, 0, 0, 0.15);
  125. -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0px 1px 2px rgba(0, 0, 0, 0.15);
  126. /*box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0px 1px 2px rgba(0, 0, 0, 0.15);*/
  127. background-color: #eae9e9;
  128. background-repeat: no-repeat;
  129. background-image: -webkit-linear-gradient(-90deg, #eae9e9 0%, #e0e0df 100%);
  130. background-image: -moz-linear-gradient(-90deg, #eae9e9 0%, #e0e0df 100%);
  131. background-image: -ms-linear-gradient(-90deg, #eae9e9 0%, #e0e0df 100%);
  132. background-image: -o-linear-gradient(-90deg, #eae9e9 0%, #e0e0df 100%);
  133. background-image: linear-gradient(180deg, #eae9e9 0%, #e0e0df 100%);
  134. border: 1px solid rgba(0, 0, 0, 0.15);
  135. padding: 0px 10px;
  136. background: #385882; /* Old browsers */
  137. background: -moz-linear-gradient(top, #385882 0%, #2c4566 100%); /* FF3.6+ */
  138. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#385882), color-stop(100%,#2c4566)); /* Chrome,Safari4+ */
  139. background: -webkit-linear-gradient(top, #385882 0%,#2c4566 100%); /* Chrome10+,Safari5.1+ */
  140. background: -o-linear-gradient(top, #385882 0%,#2c4566 100%); /* Opera 11.10+ */
  141. background: -ms-linear-gradient(top, #385882 0%,#2c4566 100%); /* IE10+ */
  142. background: linear-gradient(to bottom, #385882 0%,#2c4566 100%); /* W3C */
  143. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#385882', endColorstr='#2c4566',GradientType=0 ); /* IE6-9 */
  144. }
  145. #searchViewCondition .dx-button.dx-state-hover-enabled:hover {
  146. background: #669de8; /* Old browsers */
  147. background: -moz-linear-gradient(top, #669de8 0%, #507bb6 100%); /* FF3.6+ */
  148. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669de8), color-stop(100%,#507bb6)); /* Chrome,Safari4+ */
  149. background: -webkit-linear-gradient(top, #669de8 0%,#507bb6 100%); /* Chrome10+,Safari5.1+ */
  150. background: -o-linear-gradient(top, #669de8 0%,#507bb6 100%); /* Opera 11.10+ */
  151. background: -ms-linear-gradient(top, #669de8 0%,#507bb6 100%); /* IE10+ */
  152. background: linear-gradient(to bottom, #669de8 0%,#507bb6 100%); /* W3C */
  153. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669de8', endColorstr='#507bb6',GradientType=0 ); /* IE6-9 */
  154. }
  155. #searchViewCondition .dx-button .dx-button-text {
  156. color: #fff;
  157. font-weight: bold;
  158. font-size: 12px;
  159. }
  160. #searchViewCondition .dx-state-active.dx-button {
  161. background: #0b1c35;
  162. -webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1);
  163. -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1);
  164. box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1);
  165. border: 1px solid rgba(0, 0, 0, 0.2);
  166. }
  167. ul.search-row-layout .dx-state-focused.dx-texteditor {
  168. /*border: 1px solid #3f82b5;*/
  169. -webkit-box-shadow: 0 0 0 1px #3f82b5;
  170. -moz-box-shadow: 0 0 0 1px #3f82b5;
  171. box-shadow: none !important;
  172. }
  173. /***************** 팝업 ****************/
  174. .dx-popup-title .dx-toolbar-label > div {
  175. color: #FFF;
  176. font-size: 16px;
  177. font-weight: 600;
  178. line-height: 35px !important;
  179. }
  180. .dx-multiview {
  181. padding: 20px;
  182. }
  183. /* 팝업 데이터 정렬 */
  184. .dx-field {
  185. padding: 0px 0px !important;
  186. padding-top: 0px !important;
  187. min-height: inherit !important;
  188. color: #2b2b2b;
  189. font-weight: normal;
  190. font-size: 14px;
  191. font-family: "Nanum Gothic";
  192. border-bottom: 1px solid #fff;
  193. }
  194. .cw-multi-field {
  195. border-bottom: 1px solid #fff;
  196. background: #ecf7ff;
  197. }
  198. .cw-multi-field-merge {
  199. border-bottom: 1px solid #fff;
  200. background: #ecf7ff;
  201. }
  202. .dx-theme-generic-typography .dx-field-label {
  203. color: #003;
  204. /*width:35%!important;*/
  205. width: 115px !important;
  206. cursor: default;
  207. background: #d5ecfd url(../images/custom/ibems_light/arrow01.png) 5px center no-repeat;
  208. padding-left: 15px;
  209. /*min-height:24px;*/
  210. /*line-height:24px;*/
  211. }
  212. .cw-multi-field-merge .cw-multi-field-label, .cw-multi-field-merge .dx-field-label, .dx-scrollview-content .dx-field-label {
  213. width: 115px !important;
  214. min-height: 15px;
  215. }
  216. /* 머지 레이블 위드값 */
  217. .cw-multi-field-left .dx-field-value, .cw-multi-field-right .dx-field-value, .cw-multi-field-merge .dx-field-value {
  218. text-overflow: ellipsis;
  219. overflow: hidden;
  220. margin-left: 5px;
  221. float: left;
  222. }
  223. /* 데이터 값 */
  224. .user_bind_input input {
  225. width: 90px;
  226. }
  227. .facility_image_wrap {
  228. background: url(../images/custom/ibems_light/facility_img_bg.gif) !important;
  229. padding: 10px;
  230. height: 197px;
  231. width: 50%;
  232. }
  233. .facility_image {
  234. width: 318px;
  235. height: 187px;
  236. overflow: hidden;
  237. margin: 5px 0 0 5px;
  238. background: #fff;
  239. }
  240. .construction_image_wrap {
  241. background: url(../images/custom/ibems_light/facility_img_bg.gif) !important;
  242. padding: 10px;
  243. height: 197px;
  244. width: 50%;
  245. }
  246. .construction_image {
  247. width: 325px;
  248. height: 100px;
  249. overflow: hidden;
  250. margin: 5px 0 0 5px;
  251. background: #fff;
  252. }
  253. /* 정보 팝업 레이아웃 */
  254. #popupDetail .dx-fieldset .dx-field {
  255. background: #ecf7ff;
  256. }
  257. /*hcLee 팝업입력창내 입력필드 배경색상*/
  258. #popupDetail .dx-fieldset .dx-field div:first-child {
  259. float: left;
  260. min-height: 15px;
  261. line-height: 15px; /*width:100%;*/
  262. }
  263. #popupDetail .dx-fieldset .dx-field div:nth-child(2) {
  264. float: left;
  265. }
  266. #popupDetail .dx-fieldset .dx-field div:nth-child(2) input {
  267. border: 1px solid #ccc;
  268. }
  269. #popupDetail .dx-fieldset .dx-field div:nth-child(3) {
  270. float: left;
  271. }
  272. #popupDetail .dx-fieldset .dx-field div:nth-child(3) input {
  273. border: 1px solid #ccc;
  274. }
  275. #popupDetail .dx-fieldset .dx-field div:nth-child(4) {
  276. float: left;
  277. }
  278. #popupDetail .dx-fieldset .dx-field div:nth-child(4) input {
  279. border: 1px solid #ccc;
  280. }
  281. .dx-scrollview-content .dx-field div {
  282. float: left;
  283. min-height: 15px;
  284. line-height: 15px; /*width:100%;*/
  285. }
  286. /*************** 테이블 *****************/
  287. /* header */
  288. .dx-datagrid-headers .dx-row {
  289. border-bottom: 1px solid #D2D2D2;
  290. /*background:url(../images/custom/ibems_light/table_header_bg.png) left bottom repeat-x;*/
  291. height: 37px;
  292. border: 1px solid #98a3ae !important;
  293. background: #b9c9d8; /* Old browsers */
  294. background: -moz-linear-gradient(top, #b9c9d8 0%, #c5d1dd 95%, #dae5ef 98%, #9aafc3 100%); /* FF3.6+ */
  295. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9c9d8), color-stop(95%,#c5d1dd), color-stop(98%,#dae5ef), color-stop(100%,#9aafc3)); /* Chrome,Safari4+ */
  296. background: -webkit-linear-gradient(top, #b9c9d8 0%,#c5d1dd 95%,#dae5ef 98%,#9aafc3 100%); /* Chrome10+,Safari5.1+ */
  297. background: -o-linear-gradient(top, #b9c9d8 0%,#c5d1dd 95%,#dae5ef 98%,#9aafc3 100%); /* Opera 11.10+ */
  298. background: -ms-linear-gradient(top, #b9c9d8 0%,#c5d1dd 95%,#dae5ef 98%,#9aafc3 100%); /* IE10+ */
  299. background: linear-gradient(to bottom, #b9c9d8 0%,#c5d1dd 95%,#dae5ef 98%,#9aafc3 100%); /* W3C */
  300. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9c9d8', endColorstr='#9aafc3',GradientType=0 ); /* IE6-9 */
  301. }
  302. .dx-datagrid-headers .dx-row td {
  303. vertical-align: middle;
  304. color: #000000;
  305. text-shadow: 1px 1px 0 #DBDBDB;
  306. }
  307. .dx-header-row td {
  308. border-left: 0 !important;
  309. background: url(../images/custom/ibems_light/header_bar.png) left center no-repeat;
  310. }
  311. .dx-datagrid-table .dx-row > td:first-child {
  312. border-left: 0; /*background:none !important;*/
  313. }
  314. .dx-datagrid .dx-column-lines > td {
  315. border-bottom: 1px solid #eaeaea;
  316. }
  317. /*********** 인풋 폼 ********************/
  318. .dx-texteditor-input {
  319. padding-top: 7px !important;
  320. padding-bottom: 7px !important;
  321. }
  322. .dx-autocomplete .dx-texteditor-input {
  323. font-size: 14px !important;
  324. }
  325. .dx-field .dx-textarea {
  326. width: 100%;
  327. border: 1px solid #ccc;
  328. }
  329. .dx-datagrid-checkbox-size {
  330. height: 19px !important;
  331. width: 19px !important;
  332. }
  333. .dx-datagrid .dx-row .dx-editor-cell .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
  334. background-position: 1px -50px !important;
  335. background-image: url(../images/custom/ibems_light/checkbox.png) !important;
  336. }
  337. .dx-calendar-picker .dx-dropdowneditor-button .dx-dropdowneditor-icon {
  338. background-image: url(../images/custom/ibems_light/icon_calendar.png) !important;
  339. width: 100%;
  340. }
  341. .dx-datebox-with-calendar .dx-dropdowneditor-button .dx-dropdowneditor-icon {
  342. background-image: url(../images/custom/ibems_light/icon_calendar.png) !important;
  343. width: 100%;
  344. }
  345. .dx-dropdowneditor-icon {
  346. background-image: url(../images/custom/ibems_light/selectbox_icon.png) !important;
  347. width: 100% !important;
  348. }
  349. .cw-multi-field-label {
  350. width: 96px;
  351. padding-top: 8px !important;
  352. padding-bottom: 9px !important;
  353. }
  354. .input_form div input {
  355. box-shadow: none !important;
  356. height: 26px;
  357. background: #0d1819 !important; /* Old browsers */
  358. background: -moz-linear-gradient(top, #0d1819 0%, #5e5e5e 100%) !important; /* FF3.6+ */
  359. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d1819), color-stop(100%,#5e5e5e)) !important; /* Chrome,Safari4+ */
  360. background: -webkit-linear-gradient(top, #0d1819 0%,#5e5e5e 100%) !important; /* Chrome10+,Safari5.1+ */
  361. background: -o-linear-gradient(top, #0d1819 0%,#5e5e5e 100%) !important; /* Opera 11.10+ */
  362. background: -ms-linear-gradient(top, #0d1819 0%,#5e5e5e 100%) !important; /* IE10+ */
  363. background: linear-gradient(to bottom, #0d1819 0%,#5e5e5e 100%) !important; /* W3C */
  364. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d1819', endColorstr='#5e5e5e',GradientType=0 ) !important; /* IE6-9 */
  365. }
  366. .dx-switch-container {
  367. background: #164b7d; /* Old browsers */
  368. background: -moz-linear-gradient(top, #164b7d 0%, #587b96 100%); /* FF3.6+ */
  369. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#164b7d), color-stop(100%,#587b96)); /* Chrome,Safari4+ */
  370. background: -webkit-linear-gradient(top, #164b7d 0%,#587b96 100%); /* Chrome10+,Safari5.1+ */
  371. background: -o-linear-gradient(top, #164b7d 0%,#587b96 100%); /* Opera 11.10+ */
  372. background: -ms-linear-gradient(top, #164b7d 0%,#587b96 100%); /* IE10+ */
  373. background: linear-gradient(to bottom, #164b7d 0%,#587b96 100%); /* W3C */
  374. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#164b7d', endColorstr='#587b96',GradientType=0 ); /* IE6-9 */
  375. }
  376. /************* 공용텝 *****************/
  377. .purbic_tab div {
  378. height: 35px;
  379. }
  380. .custom_tabs_wrap {
  381. height: 48px;
  382. padding: 10px 10px 0 10px;
  383. background: url(../images/custom/ibems_light/popup_tab_bg.gif) repeat-x;
  384. }
  385. .custom_tabs_wrap_small {
  386. height: 36px;
  387. padding: 10px 10px 0 10px;
  388. background: url(../images/custom/ibems_light/popup_tab_bg.gif) repeat-x;
  389. }
  390. /********* 차트 **********/
  391. .chart_wrap_box {
  392. background: #fafafa;
  393. border: 1px solid #eaeaea;
  394. padding: 15px;
  395. overflow: hidden;
  396. -webkit-border-radius: 5px 5px 5px 5px;
  397. border-radius: 5px 5px 5px 5px;
  398. -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
  399. box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
  400. -moz-box-sizing: border-box;
  401. -webkit-box-sizing: border-box;
  402. box-sizing: border-box;
  403. }
  404. .chart_wrap_box2 {
  405. background: #fafafa;
  406. border: 1px solid #eaeaea;
  407. padding: 5px;
  408. overflow: hidden;
  409. -webkit-border-radius: 5px 5px 5px 5px;
  410. border-radius: 5px 5px 5px 5px;
  411. -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
  412. box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
  413. -moz-box-sizing: border-box;
  414. -webkit-box-sizing: border-box;
  415. box-sizing: border-box;
  416. }
  417. /********* 카렌다 **********/
  418. /* 2015 07 15 hcLee 이것 때문에 너무 고생함..... 이것이 dx-datagrid.dx-link의 글자 색상에 영향을 줌. 여기는 막고
  419. 대신 달력에 글자색은 fullcalendar.js에서 직접 HTML생성시 글자색을 흰색으로 지정하게 수정함.
  420. .dx-theme-generic-typography a {
  421. color:rgb(255, 255, 255) !important;
  422. }*/
  423. /********** 아이콘 *************/
  424. .dx-button .dx-icon {
  425. -webkit-background-size: 18px 18px !important;
  426. -moz-background-size: 18px 18px !important;
  427. background-size: 18px 18px !important;
  428. }
  429. .dx-icon-key {
  430. background-image: url(../images/custom/ibems_light/dx-icon-key.png) !important;
  431. }
  432. .dx-icon-search {
  433. background-image: url(../images/custom/ibems_light/dx-icon-search.png) !important;
  434. }
  435. .dx-icon-edit {
  436. background-image: url(../images/custom/ibems_light/dx-icon-edit.png) !important;
  437. }
  438. .dx-icon-remove {
  439. background-image: url(../images/custom/ibems_light/dx-icon-remove.png) !important;
  440. }
  441. .dx-icon-close {
  442. background-image: url(../images/custom/ibems_light/dx-icon-close.png) !important;
  443. }
  444. .search-view-button .search-view-button-image {
  445. background-image: url(../images/custom/ibems_light/search-view-button.png) !important;
  446. }
  447. .search-view-button .search-view-button-image-on {
  448. background-image: url(../images/custom/ibems_light/dx-icon-search.png) !important;
  449. }
  450. /* hcLee 2016 03 30
  451. .dx-icon-arrowleft {
  452. background-image: url(../images/custom/ibems_light/dx-icon-arrowleft.png)!important;
  453. }
  454. */
  455. .dx-icon-cancel {
  456. background-image: url(../images/custom/ibems_light/dx-icon-cancel.png) !important;
  457. }
  458. .dx-icon-save {
  459. background-image: url(../images/custom/ibems_light/dx-icon-save.png) !important;
  460. }
  461. .dx-icon-excel {
  462. background-image: url(../images/custom/ibems_light/dx-icon-excel.png) !important;
  463. }
  464. .dx-icon-fixed {
  465. background-image: url(../images/custom/ibems_light/dx-icon-fixed.png) !important;
  466. }
  467. .dx-icon-fixedcancel {
  468. background-image: url(../images/custom/ibems_light/dx-icon-fixedcancel.png) !important;
  469. }
  470. .dx-icon-entry {
  471. background-image: url(../images/custom/ibems_light/dx-icon-entry.png) !important;
  472. }
  473. .dx-icon-weekend {
  474. background-image: url(../images/custom/ibems_light/dx-icon-weekend.png) !important;
  475. }
  476. .dx-icon-control {
  477. background-image: url(../images/custom/ibems_light/dx-icon-control.png) !important;
  478. }
  479. /********* 정보테이블 *******/
  480. .info_data_grid table {
  481. border-collapse: collapse;
  482. }
  483. .info_data_grid table td {
  484. padding: 8px 10px 5px 10px;
  485. border-bottom: 1px solid #eaeaea;
  486. }
  487. .info_data_grid table td.info_item {
  488. text-align: right;
  489. color: #478ee0;
  490. font-weight: 600;
  491. background: #eff6ff;
  492. }
  493. .info_data_grid table td.info_content {
  494. font-weight: 600;
  495. }
  496. .info_data_grid table td.last {
  497. border: none;
  498. }
  499. .info_data_grid table td.red_strong {
  500. color: #F00;
  501. }
  502. /********* 에너지누적사용량 ***********/
  503. .energy_use_data_date li {
  504. float: left;
  505. margin-right: 15px;
  506. border-left: 1px solid #eaeaea;
  507. padding-left: 10px;
  508. letter-spacing: -1px;
  509. }
  510. .energy_use_data_date li.last {
  511. margin-right: 0;
  512. }
  513. .energy_use_data_date li span {
  514. display: block;
  515. }
  516. .energy_use_data_date li span.date_type {
  517. margin-bottom: 10px;
  518. color: #666;
  519. font-size: 11px;
  520. }
  521. .energy_use_data_date li span.energy_unit {
  522. font-size: 16px;
  523. font-weight: 600;
  524. }
  525. .graph_button_set li {
  526. float: left;
  527. margin-right: 5px;
  528. }
  529. .graph_button_set li a {
  530. display: block;
  531. height: 30px;
  532. line-height: 30px;
  533. padding: 0 10px;
  534. color: #fff;
  535. font-weight: 600;
  536. -webkit-border-radius: 3px 3px 3px 3px;
  537. border-radius: 3px 3px 3px 3px;
  538. -webkit-box-shadow: 0 2px 0 0 #bb3f25;
  539. box-shadow: 0 2px 0 0 #bb3f25;
  540. }
  541. .graph_button_set li a.graph_button_text {
  542. background: #f66141;
  543. }
  544. .graph_button_set li a.graph_button_text:hover {
  545. background: #fa957f;
  546. }
  547. .graph_button_set li a.graph_button_text:active {
  548. background: #f66141;
  549. }
  550. .graph_button_set li a.on {
  551. background: #ae304c;
  552. -webkit-box-shadow: 0 2px 0 0 #75071f;
  553. box-shadow: 0 2px 0 0 #75071f;
  554. }
  555. .graph_button_set li a.on:hover {
  556. background: #d45672;
  557. }
  558. .graph_button_set li a.on:active {
  559. background: #6e0e23;
  560. }
  561. .graph_button_set li a.graph_button_back, .graph_button_set li a.graph_button_next {
  562. width: 25px;
  563. }
  564. .graph_button_set li a.graph_button_back {
  565. background: #f66141 url(../images/custom/ibems_light/graph_icon_back.png) center center no-repeat;
  566. }
  567. .graph_button_set li a.graph_button_back:hover {
  568. background: #fa957f url(../images/custom/ibems_light/graph_icon_back.png) center center no-repeat;
  569. }
  570. .graph_button_set li a.graph_button_back:active {
  571. background: #be452b url(../images/custom/ibems_light/graph_icon_back.png) center center no-repeat;
  572. }
  573. .graph_button_set li a.graph_button_next {
  574. background: #f66141 url(../images/custom/ibems_light/graph_icon_next.png) center center no-repeat;
  575. }
  576. .graph_button_set li a.graph_button_next:hover {
  577. background: #fa957f url(../images/custom/ibems_light/graph_icon_next.png) center center no-repeat;
  578. }
  579. .graph_button_set li a.graph_button_next:active {
  580. background: #be452b url(../images/custom/ibems_light/graph_icon_next.png) center center no-repeat;
  581. }
  582. /*-----추가게이지------*/
  583. .graph_box_wrap {
  584. background: #fafafa;
  585. border: 1px solid #ccc;
  586. padding: 0px;
  587. overflow: hidden;
  588. min-width: 214px;
  589. -webkit-border-radius: 5px 5px 5px 5px;
  590. border-radius: 5px 5px 5px 5px;
  591. -webkit-box-shadow: 0px 2px 3px 0 rgba(0,0,0,0.3);
  592. box-shadow: 0px 2px 3px 0 rgba(0,0,0,0.3);
  593. -moz-box-sizing: border-box;
  594. -webkit-box-sizing: border-box;
  595. box-sizing: border-box;
  596. }
  597. .horizontal_graph_title {
  598. height: 25px;
  599. line-height: 25px;
  600. color: #dcdada;
  601. font-weight: 600;
  602. text-align: center;
  603. font-size: 14px;
  604. background: #5e5e5f; /* Old browsers */
  605. background: -moz-linear-gradient(top, #949494 0%, #5e5e5f 100%); /* FF3.6+ */
  606. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(100%,#5e5e5f)); /* Chrome,Safari4+ */
  607. background: -webkit-linear-gradient(top, #949494 0%,#5e5e5f 100%); /* Chrome10+,Safari5.1+ */
  608. background: -o-linear-gradient(top, #949494 0%,#5e5e5f 100%); /* Opera 11.10+ */
  609. background: -ms-linear-gradient(top, #949494 0%,#5e5e5f 100%); /* IE10+ */
  610. background: linear-gradient(to bottom, #949494 0%,#5e5e5f 100%); /* W3C */
  611. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949494', endColorstr='#5e5e5f',GradientType=0 ); /* IE6-9 */
  612. }
  613. .unit_account {
  614. height: 39px;
  615. line-height: 39px;
  616. border: 2px solid #cacaca;
  617. font-size: 26px;
  618. font-weight: 600;
  619. color: #fff;
  620. text-shadow: 0 2px 0 #525252;
  621. text-align: center;
  622. width: 80%;
  623. margin: auto;
  624. margin-top: 14px;
  625. margin-bottom: 5px;
  626. background: #173d60; /* Old browsers */
  627. background: -moz-linear-gradient(top, #173d60 24%, #2869a5 54%, #2d79be 92%, #2d79be 98%, #4b95d9 100%); /* FF3.6+ */
  628. background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#173d60), color-stop(54%,#2869a5), color-stop(92%,#2d79be), color-stop(98%,#2d79be), color-stop(100%,#4b95d9)); /* Chrome,Safari4+ */
  629. background: -webkit-linear-gradient(top, #173d60 24%,#2869a5 54%,#2d79be 92%,#2d79be 98%,#4b95d9 100%); /* Chrome10+,Safari5.1+ */
  630. background: -o-linear-gradient(top, #173d60 24%,#2869a5 54%,#2d79be 92%,#2d79be 98%,#4b95d9 100%); /* Opera 11.10+ */
  631. background: -ms-linear-gradient(top, #173d60 24%,#2869a5 54%,#2d79be 92%,#2d79be 98%,#4b95d9 100%); /* IE10+ */
  632. background: linear-gradient(to bottom, #173d60 24%,#2869a5 54%,#2d79be 92%,#2d79be 98%,#4b95d9 100%); /* W3C */
  633. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173d60', endColorstr='#4b95d9',GradientType=0 ); /* IE6-9 */
  634. -moz-box-sizing: border-box;
  635. -webkit-box-sizing: border-box;
  636. box-sizing: border-box;
  637. -webkit-border-radius: 25px 25px 25px 25px;
  638. border-radius: 25px 25px 25px 25px;
  639. }
  640. .unit_account2 {
  641. height: 39px;
  642. line-height: 39px;
  643. border: 2px solid #cacaca;
  644. font-size: 26px;
  645. font-weight: 600;
  646. color: #fff;
  647. text-shadow: 0 2px 0 #525252;
  648. text-align: center;
  649. width: 80%;
  650. margin: auto;
  651. margin-top: 14px;
  652. margin-bottom: 5px;
  653. background: #484078; /* Old browsers */
  654. background: -moz-linear-gradient(top, #484078 1%, #7063bb 50%, #8d7deb 98%, #b0a5f4 100%); /* FF3.6+ */
  655. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#484078), color-stop(50%,#7063bb), color-stop(98%,#8d7deb), color-stop(100%,#b0a5f4)); /* Chrome,Safari4+ */
  656. background: -webkit-linear-gradient(top, #484078 1%,#7063bb 50%,#8d7deb 98%,#b0a5f4 100%); /* Chrome10+,Safari5.1+ */
  657. background: -o-linear-gradient(top, #484078 1%,#7063bb 50%,#8d7deb 98%,#b0a5f4 100%); /* Opera 11.10+ */
  658. background: -ms-linear-gradient(top, #484078 1%,#7063bb 50%,#8d7deb 98%,#b0a5f4 100%); /* IE10+ */
  659. background: linear-gradient(to bottom, #484078 1%,#7063bb 50%,#8d7deb 98%,#b0a5f4 100%); /* W3C */
  660. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484078', endColorstr='#b0a5f4',GradientType=0 ); /* IE6-9 */
  661. -moz-box-sizing: border-box;
  662. -webkit-box-sizing: border-box;
  663. box-sizing: border-box;
  664. -webkit-border-radius: 25px 25px 25px 25px;
  665. border-radius: 25px 25px 25px 25px;
  666. }
  667. .unit_account3 {
  668. height: 39px;
  669. line-height: 39px;
  670. border: 2px solid #cacaca;
  671. font-size: 26px;
  672. font-weight: 600;
  673. color: #fff;
  674. text-shadow: 0 2px 0 #525252;
  675. text-align: center;
  676. width: 80%;
  677. margin: auto;
  678. margin-top: 14px;
  679. margin-bottom: 5px;
  680. background: #2a5d16; /* Old browsers */
  681. background: -moz-linear-gradient(top, #2a5d16 1%, #2a5d16 50%, #56be2d 98%, #80e25a 100%); /* FF3.6+ */
  682. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#2a5d16), color-stop(50%,#2a5d16), color-stop(98%,#56be2d), color-stop(100%,#80e25a)); /* Chrome,Safari4+ */
  683. background: -webkit-linear-gradient(top, #2a5d16 1%,#2a5d16 50%,#56be2d 98%,#80e25a 100%); /* Chrome10+,Safari5.1+ */
  684. background: -o-linear-gradient(top, #2a5d16 1%,#2a5d16 50%,#56be2d 98%,#80e25a 100%); /* Opera 11.10+ */
  685. background: -ms-linear-gradient(top, #2a5d16 1%,#2a5d16 50%,#56be2d 98%,#80e25a 100%); /* IE10+ */
  686. background: linear-gradient(to bottom, #2a5d16 1%,#2a5d16 50%,#56be2d 98%,#80e25a 100%); /* W3C */
  687. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5d16', endColorstr='#80e25a',GradientType=0 ); /* IE6-9 */
  688. -moz-box-sizing: border-box;
  689. -webkit-box-sizing: border-box;
  690. box-sizing: border-box;
  691. -webkit-border-radius: 25px 25px 25px 25px;
  692. border-radius: 25px 25px 25px 25px;
  693. }
  694. .unit {
  695. text-align: center;
  696. color: #999;
  697. font-size: 10px;
  698. }
  699. .horizontal_graph_wrap {
  700. position: relative;
  701. background: url(../images/custom/ibems_light/horizontal_grahp_bar.png) left top no-repeat;
  702. width: 204px;
  703. height: 29px;
  704. margin: auto;
  705. margin-top: 25px;
  706. margin-bottom: 10px;
  707. }
  708. .horizontal_graph_gage {
  709. position: absolute;
  710. bottom: 12px;
  711. background: url(../images/custom/ibems_light/horizontal_grahp_bar_gage.png) center bottom;
  712. width: 32px;
  713. height: 32px;
  714. }