Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. @charset "UTF-8";
  2. @font-face {
  3. font-family: "dd-icon";
  4. src:url("dd-icon/dd-icon.eot");
  5. src:url("dd-icon/dd-icon.eot?#iefix") format("embedded-opentype"),
  6. url("dd-icon/dd-icon.woff") format("woff"),
  7. url("dd-icon/dd-icon.ttf") format("truetype"),
  8. url("dd-icon/dd-icon.svg#dd-icon") format("svg");
  9. font-weight: normal;
  10. font-style: normal;
  11. }
  12. [data-icon]:before {
  13. font-family: "dd-icon" !important;
  14. content: attr(data-icon);
  15. font-style: normal !important;
  16. font-weight: normal !important;
  17. font-variant: normal !important;
  18. text-transform: none !important;
  19. speak: none;
  20. line-height: 1;
  21. -webkit-font-smoothing: antialiased;
  22. -moz-osx-font-smoothing: grayscale;
  23. }
  24. [class^="dd-icon-"]:before,
  25. [class*=" dd-icon-"]:before {
  26. font-family: "dd-icon" !important;
  27. font-style: normal !important;
  28. font-weight: normal !important;
  29. font-variant: normal !important;
  30. text-transform: none !important;
  31. speak: none;
  32. line-height: 1;
  33. -webkit-font-smoothing: antialiased;
  34. -moz-osx-font-smoothing: grayscale;
  35. }
  36. .dd-w .dd-icon-right:before {
  37. content: "\62";
  38. }
  39. .dd-w .dd-icon-left:before {
  40. content: "\63";
  41. }
  42. .dd-w .dd-icon-close:before {
  43. content: "\61";
  44. }
  45. .dd-w .dd-icon-check:before {
  46. content: "\65";
  47. }
  48. .dd-w .dd-icon-sign:before {
  49. content: "\64";
  50. }
  51. .dd-w,.dd-w * {
  52. box-sizing:border-box;
  53. -webkit-box-sizing:border-box;
  54. -moz-box-sizing:border-box;
  55. -webkit-tap-highlight-color: rgba(0,0,0,0);
  56. -webkit-user-select: none;
  57. -moz-user-select: none;
  58. -ms-user-select: none;
  59. -o-user-select: none;
  60. user-select: none;
  61. }
  62. .dd-w .dd-trans{
  63. -webkit-transition: all 0.4s cubic-bezier(.7, 0, .175, 1);
  64. -moz-transition: all 0.4s cubic-bezier(.7, 0, .175, 1);
  65. -ms-transition: all 0.4s cubic-bezier(.7, 0, .175, 1);
  66. transition: all 0.4s cubic-bezier(.7, 0, .175, 1);
  67. }
  68. .dd-w .dd-b {
  69. -webkit-transition: all 0.6s cubic-bezier(.175,.885,.32,1.275) 0s;
  70. -moz-transition: all 0.6s cubic-bezier(.175,.885,.32,1.275) 0s;
  71. -ms-transition: all 0.6s cubic-bezier(.175,.885,.32,1.275) 0s;
  72. transition: all 0.6s cubic-bezier(.175,.885,.32,1.275) 0s;
  73. }
  74. .dd-w {
  75. position:absolute;
  76. width:100%;
  77. height:100%;
  78. top:0;
  79. left:0;
  80. font-family: sans-serif;
  81. line-height:0;
  82. font-size:16px;
  83. font-weight:bold;
  84. display:none;
  85. z-index:9999;
  86. }
  87. .dd-w .dd-w-c,.dd-w .dd-ul li,.dd-s-b-ul ul {
  88. width:124px;
  89. }
  90. .dd-w ul {
  91. margin:0;
  92. padding:0;
  93. list-style:none;
  94. }
  95. .dd-w li {
  96. float:left;
  97. cursor:pointer;
  98. }
  99. .dd-w .dd-c .dd-ul ul {
  100. overflow:hidden;
  101. }
  102. .dd-w .dd-c .dd-m ul,
  103. .dd-w .dd-c .dd-y ul,
  104. .dd-w .dd-c .dd-s {
  105. height:46px;
  106. }
  107. .dd-w .dd-c .dd-m,
  108. .dd-w .dd-c .dd-y,
  109. .dd-w .dd-c .dd-sub-y,
  110. .dd-w .dd-c .dd-s,
  111. .dd-w .dd-c .dd-y .dd-n,
  112. .dd-w .dd-c .dd-sub-y .dd-n,
  113. .dd-w .dd-c .dd-m .dd-n{
  114. line-height:46px;
  115. height:46px;
  116. }
  117. .dd-w .dd-y-section {
  118. height:46px;
  119. overflow:hidden;
  120. position:relative;
  121. }
  122. .dd-w .dd-c .dd-m .dd-ul,
  123. .dd-w .dd-c .dd-y .dd-ul,
  124. .dd-w .dd-c .dd-sub-y .dd-ul {
  125. height:66px;
  126. }
  127. .dd-w .dd-c .dd-d,
  128. .dd-w .dd-c .dd-d ul {
  129. height:76px;
  130. line-height:1;
  131. }
  132. .dd-w .dd-c .dd-d .dd-n {
  133. height:76px;
  134. line-height:76px;
  135. }
  136. .dd-w .dd-c .dd-d .dd-ul {
  137. height:96px;
  138. }
  139. .dd-w .dd-c .dd-d {
  140. border-top: 1px solid rgba(0,0,0,0.05);
  141. border-bottom: 1px solid rgba(0,0,0,0.05);
  142. }
  143. .dd-w .dd-c .dd-d ul li {
  144. padding-top: 6px;
  145. }
  146. .dd-w .dd-c .dd-d strong {
  147. font-size:42px;
  148. }
  149. .dd-w .dd-c .dd-d span {
  150. font-size: 14px;
  151. }
  152. .dd-w .dd-c .dd-m {
  153. font-size:20px;
  154. }
  155. .dd-w .dd-o {
  156. position:fixed;
  157. width:100%;
  158. height:100%;
  159. top:0;
  160. left:0;
  161. }
  162. .dd-w .dd-c {
  163. position: absolute;
  164. -webkit-animation-fill-mode: both;
  165. animation-fill-mode: both;
  166. }
  167. .dd-w .dd-c:after {
  168. position: absolute;
  169. content: "";
  170. left: 50%;
  171. width: 16px;
  172. height: 16px;
  173. margin-left: -8px;
  174. }
  175. .dd-w.dd-top .dd-c:after{
  176. bottom: -8px;
  177. transform: rotate(-135deg);
  178. -webkit-transform: rotate(-135deg);
  179. -moz-transform: rotate(-135deg);
  180. }
  181. .dd-w.dd-bottom .dd-c:after{
  182. top: -8px;
  183. transform: rotate(45deg);
  184. -webkit-transform: rotate(45deg);
  185. -moz-transform: rotate(45deg);
  186. }
  187. .dd-w-c {
  188. overflow: hidden;
  189. border-radius: 8px;
  190. -webkit-border-radius: 8px;
  191. -moz-border-radius: 8px;
  192. text-align:center;
  193. position:relative;
  194. }
  195. .dd-w .dd-c .dd-s {
  196. cursor:pointer;
  197. }
  198. .dd-w .dd-b {
  199. position:relative;
  200. overflow:hidden;
  201. z-index:1;
  202. }
  203. .dd-w .dd-b:hover {
  204. transform:scale(1.12);
  205. }
  206. .dd-w .dd-n {
  207. position: absolute;
  208. top: 2px;
  209. font-size: 14px;
  210. color: #08C;
  211. display: none;
  212. cursor: pointer;
  213. text-align: center;
  214. width: 40px;
  215. }
  216. .dd-w .dd-n:hover {
  217. opacity:.8;
  218. }
  219. .dd-w .dd-b:hover .dd-n {
  220. display:block;
  221. }
  222. .dd-w .dd-n-left {
  223. left:0;
  224. }
  225. .dd-w .dd-n-right {
  226. right:0;
  227. }
  228. .dd-w .dd-ul {
  229. overflow-x:scroll;
  230. }
  231. .dd-w .dd-sub-y {
  232. z-index: 6;
  233. position: absolute;
  234. bottom: 0;
  235. width: 100%;
  236. display:none;
  237. }
  238. .dd-w .dd-s-b {
  239. opacity:0;
  240. visibility:hidden;
  241. transform:scale(0);
  242. position: absolute;
  243. top: 0;
  244. left: -1px;
  245. right: -32px;
  246. bottom: 46px;
  247. overflow-x: hidden;
  248. z-index: 2;
  249. }
  250. .dd-w .dd-s-b-s,
  251. .dd-w .dd-s-b-sub-y {
  252. position: absolute;
  253. left: 0;
  254. right: 0;
  255. bottom: 0;
  256. line-height: 46px;
  257. z-index: 2;
  258. display:none;
  259. cursor:pointer;
  260. }
  261. .dd-w .dd-s-b-sub-y i {
  262. display: inline-block;
  263. margin: 0 6px;
  264. font-size: 12px;
  265. }
  266. .dd-w .dd-s-b-sub-y span {
  267. display: inline-block;
  268. margin: 0 12px;
  269. }
  270. .dd-w .dd-s-b.dd-show {
  271. opacity:1;
  272. visibility:visible;
  273. transform:scale(1);
  274. }
  275. .dd-w .dd-s-b-ul ul {
  276. padding: 8px;
  277. }
  278. .dd-w .dd-s-b-ul li {
  279. width: 50%;
  280. font-size: 16px;
  281. border-radius: 0;
  282. margin: 0;
  283. border-bottom: 0;
  284. position: relative;
  285. padding: 14px 0;
  286. line-height: 1;
  287. border-bottom: 1px solid rgba(0,0,0,0.05);
  288. border-radius: 4px;
  289. }
  290. .dd-w .dd-s-b span {
  291. display: block;
  292. line-height: 1;
  293. font-size: 10px;
  294. text-transform: uppercase;
  295. }
  296. .dd-w .dd-s-b-ul li.dd-on:after {
  297. position: absolute;
  298. content: "\64";
  299. font-family: "dd-icon" !important;
  300. top: 50%;
  301. left: 50%;
  302. margin-left: -20px;
  303. margin-top: -20px;
  304. width: 40px;
  305. height: 40px;
  306. font-size: 42px;
  307. font-weight: normal;
  308. }
  309. .dd-w .dd-s-b-d li,.dd-s-b-m li {
  310. font-size: 18px;
  311. }
  312. .dd-w .dd-clear {
  313. clear:both; float:none;
  314. }
  315. /* effects */
  316. @-webkit-keyframes dd-bounce {
  317. 0% {
  318. -webkit-transform: scale3d(1, 1, 1);
  319. transform: scale3d(1, 1, 1);
  320. }
  321. 20% {
  322. -webkit-transform: scale3d(1.25, 0.75, 1);
  323. transform: scale3d(1.25, 0.75, 1);
  324. }
  325. 30% {
  326. -webkit-transform: scale3d(0.75, 1.25, 1);
  327. transform: scale3d(0.75, 1.25, 1);
  328. }
  329. 60% {
  330. -webkit-transform: scale3d(1.15, 0.85, 1);
  331. transform: scale3d(1.15, 0.85, 1);
  332. }
  333. 70% {
  334. -webkit-transform: scale3d(.95, 1.05, 1);
  335. transform: scale3d(.95, 1.05, 1);
  336. }
  337. 80% {
  338. -webkit-transform: scale3d(1.05, .95, 1);
  339. transform: scale3d(1.05, .95, 1);
  340. }
  341. 100% {
  342. -webkit-transform: scale3d(1, 1, 1);
  343. transform: scale3d(1, 1, 1);
  344. }
  345. }
  346. @keyframes dd-bounce {
  347. 0% {
  348. -webkit-transform: scale3d(1, 1, 1);
  349. transform: scale3d(1, 1, 1);
  350. }
  351. 20% {
  352. -webkit-transform: scale3d(1.25, 0.75, 1);
  353. transform: scale3d(1.25, 0.75, 1);
  354. }
  355. 30% {
  356. -webkit-transform: scale3d(0.75, 1.25, 1);
  357. transform: scale3d(0.75, 1.25, 1);
  358. }
  359. 60% {
  360. -webkit-transform: scale3d(1.15, 0.85, 1);
  361. transform: scale3d(1.15, 0.85, 1);
  362. }
  363. 70% {
  364. -webkit-transform: scale3d(.95, 1.05, 1);
  365. transform: scale3d(.95, 1.05, 1);
  366. }
  367. 80% {
  368. -webkit-transform: scale3d(1.05, .95, 1);
  369. transform: scale3d(1.05, .95, 1);
  370. }
  371. 100% {
  372. -webkit-transform: scale3d(1, 1, 1);
  373. transform: scale3d(1, 1, 1);
  374. }
  375. }
  376. .dd-w .dd-bounce {
  377. -webkit-animation-name: dd-bounce;
  378. animation-name: dd-bounce;
  379. -webkit-animation-duration: 1s;
  380. animation-duration: 1s;
  381. }
  382. @-webkit-keyframes dd-fadein {
  383. 0% {opacity: 0;}
  384. 100% {opacity: 1;}
  385. }
  386. @keyframes dd-fadein {
  387. 0% {opacity: 0;}
  388. 100% {opacity: 1;}
  389. }
  390. .dd-w .dd-fadein {
  391. -webkit-animation-name: dd-fadein;
  392. animation-name: dd-fadein;
  393. -webkit-animation-duration: .3s;
  394. animation-duration: .3s;
  395. }
  396. @-webkit-keyframes dd-fadeout {
  397. 0% {opacity: 1;}
  398. 100% {opacity: 0;}
  399. }
  400. @keyframes dd-fadeout {
  401. 0% {opacity: 1;}
  402. 100% {opacity: 0;}
  403. }
  404. .dd-w .dd-fadeout {
  405. -webkit-animation-name: dd-fadeout;
  406. animation-name: dd-fadeout;
  407. -webkit-animation-duration: .3s;
  408. animation-duration: .3s;
  409. }
  410. @-webkit-keyframes dd-dropdown {
  411. 0% {
  412. opacity: 0;
  413. -webkit-transform: translate3d(0, -30%, 0);
  414. transform: translate3d(0, -30%, 0);
  415. }
  416. 100% {
  417. opacity: 1;
  418. -webkit-transform: none;
  419. transform: none;
  420. }
  421. }
  422. @keyframes dd-dropdown {
  423. 0% {
  424. opacity: 0;
  425. -webkit-transform: translate3d(0, -30%, 0);
  426. transform: translate3d(0, -30%, 0);
  427. }
  428. 100% {
  429. opacity: 1;
  430. -webkit-transform: none;
  431. transform: none;
  432. }
  433. }
  434. .dd-w .dd-dropdown {
  435. -webkit-animation-name: dd-dropdown;
  436. animation-name: dd-dropdown;
  437. -webkit-animation-duration: .5s;
  438. animation-duration: .5s;
  439. }
  440. @-webkit-keyframes dd-alert {
  441. 0%, 100% {
  442. -webkit-transform: translate3d(0, 0, 0);
  443. transform: translate3d(0, 0, 0);
  444. }
  445. 10%, 30%, 50%, 70%, 90% {
  446. -webkit-transform: translate3d(-10px, 0, 0);
  447. transform: translate3d(-10px, 0, 0);
  448. }
  449. 20%, 40%, 60%, 80% {
  450. -webkit-transform: translate3d(10px, 0, 0);
  451. transform: translate3d(10px, 0, 0);
  452. }
  453. }
  454. @keyframes dd-alert {
  455. 0%, 100% {
  456. -webkit-transform: translate3d(0, 0, 0);
  457. transform: translate3d(0, 0, 0);
  458. }
  459. 10%, 30%, 50%, 70%, 90% {
  460. -webkit-transform: translate3d(-10px, 0, 0);
  461. transform: translate3d(-10px, 0, 0);
  462. }
  463. 20%, 40%, 60%, 80% {
  464. -webkit-transform: translate3d(10px, 0, 0);
  465. transform: translate3d(10px, 0, 0);
  466. }
  467. }
  468. .dd-w .dd-alert {
  469. -webkit-animation-name: dd-alert;
  470. animation-name: dd-alert;
  471. -webkit-animation-duration: .5s;
  472. animation-duration: .5s;
  473. }
  474. .dd-w .dd-sub-y {
  475. -webkit-transform-origin: bottom;
  476. transform-origin: bottom;
  477. }
  478. /* DEFAULT STYLE */
  479. .dd-w-c {
  480. color:#333;
  481. }
  482. .dd-w-c {
  483. border: 1px solid #0088CC;
  484. box-shadow: 0 0 10px 0 rgba(0, 136, 204, 0.45);
  485. }
  486. .dd-w-c,
  487. .dd-s-b,
  488. .dd-w.dd-bottom .dd-c:after {
  489. background: #FFFFFF;
  490. }
  491. .dd-w.dd-top .dd-c:after{
  492. background: #E3F2FA;
  493. }
  494. .dd-c:after {
  495. background: #FFFFFF;
  496. border-left: 1px solid #08C;
  497. border-top: 1px solid #08C;
  498. }
  499. .dd-n,
  500. .dd-sun {
  501. color: #08C;
  502. }
  503. .dd-c .dd-s,
  504. .dd-s-b-s,
  505. .dd-s-b-sub-y,
  506. .dd-sub-y {
  507. background: #E3F2FA;
  508. color: #0088CC;
  509. }
  510. .dd-s-b-ul li.dd-on {
  511. color: #0088CC;
  512. }