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.

j-pro-flat.css 52KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864
  1. /* Font
  2. =============================== */
  3. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
  4. /* Default
  5. =============================== */
  6. .j-wrapper {
  7. margin:0 auto;
  8. outline:none;
  9. padding:40px 15px;
  10. -webkit-box-sizing:content-box;
  11. -moz-box-sizing:content-box;
  12. box-sizing:content-box;
  13. }
  14. .j-wrapper-400 { max-width:400px; }
  15. .j-wrapper-640 { max-width:640px; }
  16. .j-pro {
  17. background-color:#f5f5f5;
  18. border:1px solid #d7d7d7;
  19. -webkit-box-sizing:border-box;
  20. -moz-box-sizing:border-box;
  21. box-sizing:border-box;
  22. color:#777;
  23. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  24. line-height:1;
  25. position:relative;
  26. }
  27. .j-pro .j-input { position:relative; }
  28. .j-pro .j-unit { position:relative; margin-bottom:25px; }
  29. .j-pro .j-link {
  30. border-bottom:1px solid #90caf9;
  31. color:#1e88e5;
  32. font-size:14px;
  33. line-height:inherit;
  34. text-decoration:none;
  35. }
  36. .j-pro .j-link:hover { border-bottom:none; }
  37. .j-pro .j-inline-group { display:inline-block; }
  38. .j-hidden,
  39. .j-pro .j-token,
  40. .j-pro .j-hidden,
  41. .j-pro .j-hidden input,
  42. .j-pro .j-hidden select,
  43. .j-pro .j-hidden textarea,
  44. .j-pro .j-hiddenBtn { display:none !important; }
  45. /* Reset for -webkit / -moz browser
  46. =============================== */
  47. .j-pro input[type="search"]::-webkit-search-decoration,
  48. .j-pro input[type="search"]::-webkit-search-cancel-button,
  49. .j-pro input[type="search"]::-webkit-search-results-button,
  50. .j-pro input[type="search"]::-webkit-search-results-decoration { display:none; }
  51. .j-pro select,
  52. .j-pro input[type="button"],
  53. .j-pro input[type="submit"],
  54. .j-pro input[type="search"] {
  55. -webkit-tap-highlight-color:transparent;
  56. -webkit-tap-highlight-color:rgba(0,0,0,0);
  57. -webkit-appearance:none;
  58. -moz-appearance:none;
  59. appearance:none;
  60. -webkit-border-radius:0px;
  61. border-radius:0px;
  62. }
  63. /* Header
  64. =============================== */
  65. .j-pro .j-header {
  66. background-color:#e6e6e6;
  67. font:600 24px 'Open Sans',Helvetica,Arial,sans-serif;
  68. padding:20px;
  69. color:#c13725;
  70. border-bottom:1px solid #d7d7d7;
  71. height:24px;
  72. line-height:24px;
  73. -webkit-box-sizing:content-box;
  74. -moz-box-sizing:content-box;
  75. box-sizing:content-box;
  76. }
  77. .j-pro .j-header > i { display:none; }
  78. .j-pro .j-header p { margin:0; }
  79. /* Content
  80. =============================== */
  81. .j-pro .j-content { padding:25px 25px 0; }
  82. .j-pro .j-content:after {
  83. clear:both;
  84. content:".";
  85. display:block;
  86. height:0;
  87. visibility:hidden;
  88. }
  89. /* Footer
  90. =============================== */
  91. .j-pro .j-footer { background-color:inherit; display:block; padding:10px 25px; }
  92. .j-pro .j-footer:after {
  93. clear:both;
  94. content:".";
  95. display:block;
  96. height:0;
  97. visibility:hidden;
  98. }
  99. /* Response block
  100. =============================== */
  101. .j-pro .j-response {
  102. opacity:0;
  103. visibility:hidden;
  104. -webkit-transition:padding-top .2s, padding-bottom .2s, opacity .5s;
  105. -moz-transition:padding-top .2s, padding-bottom .2s, opacity .5s;
  106. -ms-transition:padding-top .2s, padding-bottom .2s, opacity .5s;
  107. -o-transition:padding-top .2s, padding-bottom .2s, opacity .5s;
  108. transition:padding-top .2s, padding-bottom .2s, opacity .5s;
  109. }
  110. .j-pro .j-response.j-success-message,
  111. .j-pro .j-response.j-error-message { opacity:1; visibility:visible; }
  112. /* Dividers
  113. =============================== */
  114. .j-pro .j-divider,
  115. .j-pro .j-divider-text { border-top:1px solid #efb1a9; height:0; }
  116. .j-pro .j-divider-text span {
  117. background-color:#f5f5f5;
  118. color:#c13725;
  119. font-size:16px;
  120. padding:2px 15px 2px 0;
  121. position:relative;
  122. top:-9px;
  123. white-space:nowrap;
  124. }
  125. /* Gap-top / gap-bottom classes
  126. =============================== */
  127. .j-pro .j-gap-top-20 { margin-top:20px; } /* text-divider top gap after "content"/"j-row" classes */
  128. .j-pro .j-gap-top-45 { margin-top:45px; } /* text-divider top gap after "unit" class */
  129. .j-pro .j-gap-bottom-45 { margin-bottom:45px; } /* text-divider bottom gap */
  130. .j-pro .j-gap-bottom-25 { margin-bottom:25px; } /* line-divider bottom gap */
  131. /* Labels
  132. =============================== */
  133. .j-pro label {
  134. display:block;
  135. color:inherit;
  136. font-weight:normal;
  137. text-align:left;
  138. margin-bottom:0;
  139. }
  140. .j-pro .j-label { font-size:13px; margin-bottom:6px; line-height:13px; height:13px; }
  141. .j-pro .j-label-center { height:42px; line-height:42px; text-align:center; margin-bottom:0; }
  142. .j-pro .j-row > .j-label{ padding-left:10px; }
  143. /* Radio and checkbox
  144. =============================== */
  145. .j-pro .j-radio,
  146. .j-pro .j-checkbox,
  147. .j-pro .j-radio-toggle,
  148. .j-pro .j-checkbox-toggle {
  149. color:#22224b;
  150. cursor:pointer;
  151. font-size:16px;
  152. height:16px;
  153. margin-bottom:4px;
  154. position:relative;
  155. line-height:16px;
  156. }
  157. .j-pro .j-radio,
  158. .j-pro .j-checkbox,
  159. .j-pro .j-inline-group .j-radio,
  160. .j-pro .j-inline-group .j-checkbox { padding:9px 0 8px 32px; }
  161. .j-pro .j-radio-toggle,
  162. .j-pro .j-checkbox-toggle,
  163. .j-pro .j-inline-group .j-radio-toggle,
  164. .j-pro .j-inline-group .j-checkbox-toggle { padding:9px 0 8px 58px; }
  165. .j-pro .j-radio:last-child,
  166. .j-pro .j-checkbox:last-child,
  167. .j-pro .j-radio-toggle:last-child,
  168. .j-pro .j-checkbox-toggle:last-child { margin-bottom:0; }
  169. .j-pro .j-inline-group .j-radio,
  170. .j-pro .j-inline-group .j-checkbox,
  171. .j-pro .j-inline-group .j-radio-toggle,
  172. .j-pro .j-inline-group .j-checkbox-toggle { display:inline-block; margin-right:25px; }
  173. .j-pro .j-radio input,
  174. .j-pro .j-checkbox input,
  175. .j-pro .j-radio-toggle input,
  176. .j-pro .j-checkbox-toggle input { position:absolute; left:-9999px; }
  177. .j-pro .j-radio i,
  178. .j-pro .j-checkbox i,
  179. .j-pro .j-checkbox-toggle i,
  180. .j-pro .j-radio-toggle i {
  181. background-color:#fff;
  182. border:1px solid #6f6f6f;
  183. display:block;
  184. height:18px;
  185. left:0;
  186. outline:none;
  187. position:absolute;
  188. top:7px;
  189. -webkit-transition:border-color.2s;
  190. -moz-transition:border-color.2s;
  191. -ms-transition:border-color.2s;
  192. -o-transition:border-color.2s;
  193. transition:border-color.2s;
  194. }
  195. .j-pro .j-radio i,
  196. .j-pro .j-checkbox i { width:18px; }
  197. .j-pro .j-checkbox-toggle i,
  198. .j-pro .j-radio-toggle i { width:44px; }
  199. .j-pro .j-radio i,
  200. .j-pro .j-radio i:after,
  201. .j-pro .j-radio-toggle i:before {
  202. -webkit-border-radius:50%;
  203. -moz-border-radius:50%;
  204. -o-border-radius:50%;
  205. border-radius:50%;
  206. }
  207. .j-pro .j-radio-toggle i {
  208. -webkit-border-radius:13px;
  209. -moz-border-radius:13px;
  210. -o-border-radius:13px;
  211. border-radius:13px;
  212. }
  213. .j-pro .j-radio i:after {
  214. background-color:#444;
  215. content:"";
  216. height:8px;
  217. top:5px;
  218. left:5px;
  219. opacity:0;
  220. position:absolute;
  221. width:8px;
  222. }
  223. .j-pro .j-checkbox i:after {
  224. border-bottom:2px solid #444;
  225. border-left:2px solid #444;
  226. content:"";
  227. height:5px;
  228. top:3px;
  229. -webkit-transform:rotate(-45deg);
  230. -moz-transform:rotate(-45deg);
  231. -ms-transform:rotate(-45deg);
  232. -o-transform:rotate(-45deg);
  233. transform:rotate(-45deg);
  234. left:3px;
  235. opacity:0;
  236. position:absolute;
  237. width:10px;
  238. }
  239. .j-pro .j-radio input:checked + i:after,
  240. .j-pro .j-checkbox input:checked + i:after { opacity:1; }
  241. .j-pro .j-checkbox-toggle i:before,
  242. .j-pro .j-radio-toggle i:before {
  243. border:none;
  244. background-color:#444;
  245. content:"";
  246. display:block;
  247. height:12px;
  248. left:4px;
  249. position:absolute;
  250. top:3px;
  251. width:12px;
  252. }
  253. .j-pro .j-checkbox-toggle input:checked + i:before,
  254. .j-pro .j-radio-toggle input:checked + i:before { left:28px; }
  255. .j-pro .j-checkbox-toggle i:after,
  256. .j-pro .j-radio-toggle i:after,
  257. .j-pro .j-checkbox-toggle input:checked + i:after,
  258. .j-pro .j-radio-toggle input:checked + i:after {
  259. font-size:10px;
  260. font-style:normal;
  261. font-weight:bold;
  262. line-height:10px;
  263. position:absolute;
  264. top:4px;
  265. }
  266. .j-pro .j-checkbox-toggle i:after,
  267. .j-pro .j-radio-toggle i:after { content:"NO"; left:22px; color:#777; }
  268. .j-pro .j-checkbox-toggle input:checked + i:after,
  269. .j-pro .j-radio-toggle input:checked + i:after { content:"YES"; left:6px; color:#333;}
  270. .j-pro .j-checkbox:hover i,
  271. .j-pro .j-radio:hover i,
  272. .j-pro .j-checkbox-toggle:hover i,
  273. .j-pro .j-radio-toggle:hover i,
  274. .j-pro .j-radio input:checked + i,
  275. .j-pro .j-checkbox input:checked + i,
  276. .j-pro .j-radio-toggle input:checked + i,
  277. .j-pro .j-checkbox-toggle input:checked + i { border:1px solid #333; }
  278. .j-pro .j-radio input:checked + i,
  279. .j-pro .j-checkbox input:checked + i { color:#333; }
  280. /* Widget
  281. =============================== */
  282. .j-pro .j-widget { position: relative; }
  283. .j-pro .j-widget .j-addon,
  284. .j-pro .j-widget .j-addon-btn {
  285. background:#da503e;
  286. border:none;
  287. color:#fff;
  288. display:block;
  289. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  290. height:42px;
  291. line-height:42px;
  292. padding:0;
  293. position:absolute;
  294. outline:none;
  295. overflow:hidden;
  296. text-align:center;
  297. top:0;
  298. z-index:5;
  299. }
  300. .j-pro .j-widget .j-addon-btn,
  301. .j-pro .j-widget .j-addon-btn i {
  302. cursor:pointer;
  303. -webkit-transition:all.2s;
  304. -moz-transition:all.2s;
  305. -ms-transition:all.2s;
  306. -o-transition:all.2s;
  307. transition:all.2s;
  308. }
  309. .j-pro .j-widget .j-addon-btn:hover,
  310. .j-pro .j-widget .j-addon-btn:focus { background-color:#c13725; }
  311. .j-pro .j-widget .j-adn-left { left:0; }
  312. .j-pro .j-widget .j-adn-right { right:0; }
  313. .j-pro .j-widget .j-addon i,
  314. .j-pro .j-widget .j-addon-btn i { color:#fff; font-size:17px; z-index:2; }
  315. .j-pro .j-widget .j-adn-50 { width:50px; }
  316. .j-pro .j-widget .j-adn-130 { width:130px; }
  317. .j-pro .j-widget.j-right-50 .j-input { padding-right:50px; }
  318. .j-pro .j-widget.j-left-50 .j-input { padding-left:50px; }
  319. .j-pro .j-widget.j-right-130 .j-input { padding-right:130px; }
  320. .j-pro .j-widget.j-left-130 .j-input { padding-left:130px; }
  321. .j-pro .j-widget.j-left-50.j-right-50 .j-input input,
  322. .j-pro .j-widget.j-left-50.j-right-130 .j-input input,
  323. .j-pro .j-widget.j-left-130.j-right-50 .j-input input,
  324. .j-pro .j-widget.j-left-130.j-right-130 .j-input input {
  325. -webkit-border-radius:0;
  326. -moz-border-radius:0;
  327. -o-border-radius:0;
  328. border-radius:0;
  329. }
  330. /* Inputs
  331. =============================== */
  332. .j-pro input[type="text"],
  333. .j-pro input[type="password"],
  334. .j-pro input[type="email"],
  335. .j-pro input[type="search"],
  336. .j-pro input[type="url"],
  337. .j-pro textarea,
  338. .j-pro select {
  339. background:#fff;
  340. border:1px solid #6f6f6f;
  341. -webkit-border-radius:0;
  342. -moz-border-radius:0;
  343. -o-border-radius:0;
  344. border-radius:0;
  345. color:#181835;
  346. display:block;
  347. font-family:inherit;
  348. font-size:16px;
  349. height:42px;
  350. padding:5px 10px;
  351. width:100%;
  352. outline:none;
  353. -webkit-appearance:none;
  354. -moz-appearance:none;
  355. appearance:none;
  356. -webkit-box-sizing:border-box;
  357. -moz-box-sizing:border-box;
  358. box-sizing:border-box;
  359. -webkit-transition:all.4s;
  360. -moz-transition:all.4s;
  361. -ms-transition:all.4s;
  362. -o-transition:all.4s;
  363. transition:all.4s;
  364. }
  365. .j-pro input[type="text"]:hover,
  366. .j-pro input[type="password"]:hover,
  367. .j-pro input[type="email"]:hover,
  368. .j-pro input[type="search"]:hover,
  369. .j-pro input[type="url"]:hover,
  370. .j-pro textarea:hover,
  371. .j-pro select:hover,
  372. .j-pro input[type="text"]:focus,
  373. .j-pro input[type="password"]:focus,
  374. .j-pro input[type="email"]:focus,
  375. .j-pro input[type="search"]:focus,
  376. .j-pro input[type="url"]:focus,
  377. .j-pro textarea:focus,
  378. .j-pro select:focus { border:1px solid #333; }
  379. .j-pro .j-input textarea {
  380. height:112px;
  381. overflow:auto;
  382. min-height:52px;
  383. resize:vertical;
  384. }
  385. .j-pro .j-input textarea:focus { height:128px; }
  386. /* Placeholders
  387. =============================== */
  388. .j-pro input::-webkit-input-placeholder,
  389. .j-pro textarea::-webkit-input-placeholder {
  390. color:rgba(0,0,0,.54);
  391. font-size:14px;
  392. -webkit-transition:color.4s;
  393. -moz-transition:color.4s;
  394. -ms-transition:color.4s;
  395. -o-transition:color.4s;
  396. transition:color.4s;
  397. }
  398. .j-pro input::-moz-placeholder,
  399. .j-pro textarea::-moz-placeholder {
  400. color:rgba(0,0,0,.54);
  401. font-size:14px;
  402. -webkit-transition:color.4s;
  403. -moz-transition:color.4s;
  404. -ms-transition:color.4s;
  405. -o-transition:color.4s;
  406. transition:color.4s;
  407. }
  408. .j-pro input:-moz-placeholder,
  409. .j-pro textarea:-moz-placeholder {
  410. color:rgba(0,0,0,.54);
  411. font-size:14px;
  412. -webkit-transition:color.4s;
  413. -moz-transition:color.4s;
  414. -ms-transition:color.4s;
  415. -o-transition:color.4s;
  416. transition:color.4s;
  417. }
  418. .j-pro input:-ms-input-placeholder,
  419. .j-pro textarea:-ms-input-placeholder {
  420. color:rgba(0,0,0,.54);
  421. font-size:14px;
  422. -webkit-transition:color.4s;
  423. -moz-transition:color.4s;
  424. -ms-transition:color.4s;
  425. -o-transition:color.4s;
  426. transition:color.4s;
  427. }
  428. .j-pro input:focus::-webkit-input-placeholder,
  429. .j-pro textarea:focus::-webkit-input-placeholder { color:rgba(0,0,0,.36); font-size: 14px;}
  430. .j-pro input:focus::-moz-placeholder,
  431. .j-pro textarea:focus::-moz-placeholder { color:rgba(0,0,0,.36); font-size: 14px;}
  432. .j-pro input:focus:-moz-placeholder,
  433. .j-pro textarea:focus:-moz-placeholder { color:rgba(0,0,0,.36); font-size: 14px;}
  434. .j-pro input:focus:-ms-input-placeholder,
  435. .j-pro textarea:focus:-ms-input-placeholder { color:rgba(0,0,0,.36); font-size: 14px;}
  436. /* Select
  437. =============================== */
  438. .j-pro select { padding-left:13px; }
  439. .j-pro .j-multiple-select select { height:auto; }
  440. .j-pro .j-select i {
  441. background:#fff;
  442. -webkit-box-shadow:0 0 0 8px #fff;
  443. -moz-box-shadow:0 0 0 8px #fff;
  444. -o-box-shadow:0 0 0 8px #fff;
  445. box-shadow:0 0 0 8px #fff;
  446. height:20px;
  447. position:absolute;
  448. pointer-events:none;
  449. top:11px;
  450. right:11px;
  451. width:14px;
  452. }
  453. .j-pro .j-select i:after,
  454. .j-pro .j-select i:before {
  455. border-right:4px solid transparent;
  456. border-left:4px solid transparent;
  457. content:'';
  458. position:absolute;
  459. right:3px;
  460. }
  461. .j-pro .j-select i:after { border-top:5px solid rgba(0,0,0,.4); bottom:1px; }
  462. .j-pro .j-select i:before { border-bottom:5px solid rgba(0,0,0,.4); top:3px; }
  463. .j-pro .j-select { position:relative; }
  464. /* Icons
  465. =============================== */
  466. .j-pro .j-icon-left,
  467. .j-pro .j-icon-right {
  468. color:#a6a6a6;
  469. font-size:17px;
  470. height:38px;
  471. line-height:38px !important;
  472. position:absolute;
  473. text-align:center;
  474. top:2px;
  475. width:40px;
  476. z-index:2;
  477. }
  478. .j-pro .j-icon-left { left:3px; }
  479. .j-pro .j-icon-right { right:1px; }
  480. .j-pro .j-icon-left ~ input,
  481. .j-pro .j-icon-left ~ textarea { padding-left:40px; }
  482. .j-pro .j-icon-right ~ input,
  483. .j-pro .j-icon-right ~ textarea { padding-right:40px; }
  484. /* File for upload
  485. =============================== */
  486. .j-pro .j-file-button input {
  487. bottom:-1px;
  488. font-size:34px;
  489. opacity:0;
  490. position:absolute;
  491. width:108px;
  492. z-index:0;
  493. }
  494. .j-pro .j-prepend-small-btn .j-file-button input,
  495. .j-pro .j-prepend-big-btn .j-file-button input { left:0; }
  496. .j-pro .j-append-small-btn .j-file-button input,
  497. .j-pro .j-append-big-btn .j-file-button input { right:0; }
  498. .j-pro .j-prepend-small-btn .j-file-button,
  499. .j-pro .j-append-small-btn .j-file-button { width:64px; }
  500. .j-pro .j-prepend-big-btn .j-file-button,
  501. .j-pro .j-append-big-btn .j-file-button { width:100px; }
  502. .j-pro .j-prepend-small-btn .j-file-button,
  503. .j-pro .j-prepend-big-btn .j-file-button { left:5px; }
  504. .j-pro .j-append-small-btn .j-file-button,
  505. .j-pro .j-append-big-btn .j-file-button { right:5px; }
  506. .j-pro .j-prepend-big-btn input[type="text"] { padding-left:117px; }
  507. .j-pro .j-append-big-btn input[type="text"] { padding-right:117px; }
  508. .j-pro .j-prepend-small-btn input[type="text"] { padding-left:81px; }
  509. .j-pro .j-append-small-btn input[type="text"] { padding-right:81px; }
  510. .j-pro .j-input input[type="file"] { cursor:pointer; }
  511. .j-pro .j-file-button {
  512. color:#fff;
  513. display:block;
  514. font-family:'Open Sans',Helvetica,Arial,sans-serif;
  515. font-size:13px;
  516. height:32px;
  517. line-height:32px;
  518. outline:none;
  519. overflow:hidden;
  520. position:absolute;
  521. text-align:center;
  522. top:5px;
  523. z-index:1;
  524. }
  525. .j-pro .j-file-button {
  526. background:#6f6f6f;
  527. -webkit-transition:background.2s;
  528. -moz-transition:background.2s;
  529. -ms-transition:background.2s;
  530. -o-transition:background.2s;
  531. transition:background.2s;
  532. }
  533. .j-pro .j-file-button:hover { background:#444; }
  534. .j-pro .j-file-button:hover + input { border:1px solid #333; }
  535. /* Buttons
  536. =============================== */
  537. .j-pro .j-primary-btn,
  538. .j-pro .j-secondary-btn {
  539. border:none;
  540. color:#fff;
  541. display:block;
  542. cursor:pointer;
  543. float:right;
  544. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  545. height:42px;
  546. margin:15px 0 10px 25px;
  547. outline:none;
  548. padding:0 35px;
  549. white-space:nowrap;
  550. }
  551. .j-pro .j-primary-btn { position:relative; }
  552. .j-pro .j-content .j-primary-btn,
  553. .j-pro .j-content .j-secondary-btn { margin:0 0 20px 25px; }
  554. .j-pro .j-primary-btn,
  555. .j-pro .j-secondary-btn {
  556. background:#da503e;
  557. -webkit-transition:background.2s;
  558. -moz-transition:background.2s;
  559. -ms-transition:background.2s;
  560. -o-transition:background.2s;
  561. transition:background.2s;
  562. }
  563. .j-pro .j-primary-btn:hover,
  564. .j-pro .j-secondary-btn:hover { background:#c13725; }
  565. .j-pro .j-primary-btn:hover.j-processing { background:#c13725; cursor:wait; }
  566. .j-pro .j-secondary-btn,
  567. .j-pro .j-secondary-btn:hover,
  568. .j-pro .j-secondary-btn:active { opacity:.5; }
  569. .j-pro .j-primary-btn.j-processing:before {
  570. background:rgba(255,255,255,.4);
  571. content:'';
  572. height:100%;
  573. position:absolute;
  574. top:0;
  575. left:0;
  576. width:100%;
  577. -webkit-animation:processing 3s ease-in-out infinite;
  578. -moz-animation:processing 3s ease-in-out infinite;;
  579. -ms-animation:processing 3s ease-in-out infinite;
  580. -o-animation:processing 3s ease-in-out infinite;
  581. animation:processing 3s ease-in-out infinite;
  582. }
  583. @-webkit-keyframes processing {
  584. 0% { width:0; }
  585. 100% { width:100%; }
  586. }
  587. @-moz-keyframes processing {
  588. 0% { width:0; }
  589. 100% { width:100%; }
  590. }
  591. @-ms-keyframes processing {
  592. 0% { width:0; }
  593. 100% { width:100%; }
  594. }
  595. @-o-keyframes processing {
  596. 0% { width:0; }
  597. 100% { width:100%; }
  598. }
  599. @keyframes processing {
  600. 0% { width:0; }
  601. 100% { width:100%; }
  602. }
  603. /* Tooltip
  604. =============================== */
  605. .j-pro .j-tooltip,
  606. .j-pro .j-tooltip-image {
  607. background-color:#da503e;
  608. display:block;
  609. left:-9999px;
  610. opacity:0;
  611. position:absolute;
  612. z-index:0;
  613. }
  614. .j-pro .j-tooltip {
  615. color:#fff;
  616. font:600 13px 'Open Sans',Helvetica,Arial,sans-serif;
  617. line-height:20px;
  618. padding:5px 10px;
  619. }
  620. .j-pro .j-tooltip-image { padding:2px 2px 1px; }
  621. .j-pro .j-input input:focus + .j-tooltip,
  622. .j-pro .j-input textarea:focus + .j-tooltip,
  623. .j-pro .j-select select:focus + .j-tooltip,
  624. .j-pro .j-input input:focus + .j-tooltip-image,
  625. .j-pro .j-input textarea:focus + .j-tooltip-image,
  626. .j-pro .j-select select:focus + .j-tooltip-image { opacity:1; z-index:5; }
  627. .j-pro .j-tooltip-left-top { bottom:100%; margin-bottom:8px; }
  628. .j-pro .j-tooltip-left-top:before {
  629. border-color:#da503e transparent;
  630. border-style:solid;
  631. border-width:8px 7px 0;
  632. bottom:-6px;
  633. content:"";
  634. left:15px;
  635. position:absolute;
  636. }
  637. .j-pro .j-input input:focus + .j-tooltip-left-top,
  638. .j-pro .j-input textarea:focus + .j-tooltip-left-top,
  639. .j-pro .j-select select:focus + .j-tooltip-left-top { left:0; right:auto; }
  640. .j-pro .j-tooltip-right-top { bottom:100%; margin-bottom:8px; }
  641. .j-pro .j-tooltip-right-top:before {
  642. border-color:#da503e transparent;
  643. border-style:solid;
  644. border-width:8px 7px 0;
  645. bottom:-6px;
  646. content:"";
  647. position:absolute;
  648. right:15px;
  649. }
  650. .j-pro .j-input input:focus + .j-tooltip-right-top,
  651. .j-pro .j-input textarea:focus + .j-tooltip-right-top,
  652. .j-pro .j-select select:focus + .j-tooltip-right-top { left:auto; right:0; }
  653. .j-pro .j-tooltip-left-bottom { margin-top:8px; top:100%; }
  654. .j-pro .j-tooltip-left-bottom:before {
  655. border-color:#da503e transparent;
  656. border-style:solid;
  657. border-width:0 7px 8px;
  658. top:-6px;
  659. content:"";
  660. left:15px;
  661. position:absolute;
  662. }
  663. .j-pro .j-input input:focus + .j-tooltip-left-bottom,
  664. .j-pro .j-input textarea:focus + .j-tooltip-left-bottom,
  665. .j-pro .j-select select:focus + .j-tooltip-left-bottom { left:0; right:auto; }
  666. .j-pro .j-tooltip-right-bottom { margin-top:8px; top:100%; }
  667. .j-pro .j-tooltip-right-bottom:before {
  668. border-color:#da503e transparent;
  669. border-style:solid;
  670. border-width:0 7px 8px;
  671. top:-6px;
  672. content:"";
  673. right:15px;
  674. position:absolute;
  675. }
  676. .j-pro .j-input input:focus + .j-tooltip-right-bottom,
  677. .j-pro .j-input textarea:focus + .j-tooltip-right-bottom,
  678. .j-pro .j-select select:focus + .j-tooltip-right-bottom { left:auto; right:0; }
  679. .j-pro .j-tooltip-right-side { margin-left:8px; top:6px; white-space:nowrap; }
  680. .j-pro .j-tooltip-right-side:before {
  681. border-color:transparent #da503e;
  682. border-style:solid;
  683. border-width:7px 8px 7px 0;
  684. content:"";
  685. left:-6px;
  686. position:absolute;
  687. top:8px;
  688. }
  689. .j-pro .j-input input:focus + .j-tooltip-right-side,
  690. .j-pro .j-input textarea:focus + .j-tooltip-right-side,
  691. .j-pro .j-select select:focus + .j-tooltip-right-side { left:100%; }
  692. .j-pro .j-tooltip-left-side { margin-right:8px; top:6px; white-space:nowrap; }
  693. .j-pro .j-tooltip-left-side:before {
  694. border-color:transparent #da503e;
  695. border-style:solid;
  696. border-width:7px 0 7px 8px;
  697. content:"";
  698. right:-6px;
  699. position:absolute;
  700. top:8px;
  701. }
  702. .j-pro .j-input input:focus + .j-tooltip-left-side,
  703. .j-pro .j-input textarea:focus + .j-tooltip-left-side,
  704. .j-pro .j-select select:focus + .j-tooltip-left-side { left:auto; right:100%; }
  705. /* Status message
  706. =============================== */
  707. .j-pro .j-error-message,
  708. .j-pro .j-success-message,
  709. .j-pro .j-info-message,
  710. .j-pro .j-warning-message {
  711. border:1px solid;
  712. display:block;
  713. font:16px/24px 'Open Sans',Helvetica,Arial,sans-serif;
  714. padding:15px;
  715. }
  716. .j-pro .j-error-message i,
  717. .j-pro .j-success-message i,
  718. .j-pro .j-info-message i,
  719. .j-pro .j-warning-message i {
  720. font-size:18px;
  721. float:left;
  722. height:24px;
  723. line-height:24px;
  724. padding-right:10px;
  725. }
  726. .j-pro .j-error-message ul,
  727. .j-pro .j-success-message ul,
  728. .j-pro .j-info-message ul,
  729. .j-pro .j-warning-message ul { margin:0; }
  730. .j-pro span.j-error-view,
  731. .j-pro span.j-success-view,
  732. .j-pro span.j-warning-view,
  733. .j-pro span.j-info-view {
  734. display:block;
  735. font-size:14px;
  736. height:14px;
  737. line-height:14px;
  738. margin-top:5px;
  739. padding:0 2px;
  740. }
  741. .j-pro span.j-hint {
  742. display:block;
  743. font-size:13px;
  744. color:inherit;
  745. height:13px;
  746. line-height:13px;
  747. margin-top:5px;
  748. padding:0 2px;
  749. }
  750. /* Disabled state
  751. =============================== */
  752. .j-pro .j-widget.j-disabled-view,
  753. .j-pro .j-input.j-disabled-view,
  754. .j-pro .j-select.j-disabled-view,
  755. .j-pro .j-checkbox.j-disabled-view,
  756. .j-pro .j-radio.j-disabled-view,
  757. .j-pro .j-checkbox-toggle.j-disabled-view,
  758. .j-pro .j-radio-toggle.j-disabled-view,
  759. .j-pro .j-primary-btn.j-disabled-view,
  760. .j-pro .j-secondary-btn.j-disabled-view,
  761. .j-pro .j-file-button.j-disabled-view { cursor:default; opacity:.5; }
  762. .j-pro .j-input.j-disabled-view input[type="file"] { cursor:default; }
  763. .j-pro .j-widget.j-disabled-view input,
  764. .j-pro .j-input.j-disabled-view input,
  765. .j-pro .j-input.j-disabled-view textarea,
  766. .j-pro .j-select.j-disabled-view select ,
  767. .j-pro .j-checkbox.j-disabled-view i,
  768. .j-pro .j-radio.j-disabled-view i,
  769. .j-pro .j-checkbox-toggle.j-disabled-view i,
  770. .j-pro .j-radio-toggle.j-disabled-view i { border-color:#6f6f6f !important; }
  771. .j-pro .j-primary-btn.j-disabled-view,
  772. .j-pro .j-secondary-btn.j-disabled-view { background-color:#da503e; }
  773. .j-pro .j-disabled-view .j-file-button:hover,
  774. .j-pro .j-disabled-view .j-file-button:focus { background-color:#6f6f6f; cursor:default; }
  775. .j-pro .j-widget.j-disabled-view .j-addon-btn:hover,
  776. .j-pro .j-widget.j-disabled-view .j-addon-btn:focus { background-color:#da503e; cursor:default; }
  777. /* Error state
  778. =============================== */
  779. .j-pro .j-error-view .j-checkbox i,
  780. .j-pro .j-error-view .j-radio i,
  781. .j-pro .j-error-view .j-checkbox-toggle i,
  782. .j-pro .j-error-view .j-radio-toggle i,
  783. .j-pro .j-error-view input,
  784. .j-pro .j-error-view select,
  785. .j-pro .j-error-view textarea { background:#ffebee; border:1px solid #b71c1c; }
  786. .j-pro .j-error-view input[type="text"]:hover,
  787. .j-pro .j-error-view input[type="password"]:hover,
  788. .j-pro .j-error-view input[type="email"]:hover,
  789. .j-pro .j-error-view input[type="search"]:hover,
  790. .j-pro .j-error-view input[type="url"]:hover,
  791. .j-pro .j-error-view textarea:hover,
  792. .j-pro .j-error-view select:hover { border:1px solid #b71c1c; }
  793. .j-pro .j-error-view .j-checkbox input:checked + i,
  794. .j-pro .j-error-view .j-radio input:checked + i,
  795. .j-pro .j-error-view .j-checkbox-toggle input:checked + i,
  796. .j-pro .j-error-view .j-radio-toggle input:checked + i,
  797. .j-pro .j-error-view input[type="text"]:focus,
  798. .j-pro .j-error-view input[type="password"]:focus,
  799. .j-pro .j-error-view input[type="email"]:focus,
  800. .j-pro .j-error-view input[type="search"]:focus,
  801. .j-pro .j-error-view input[type="url"]:focus,
  802. .j-pro .j-error-view textarea:focus,
  803. .j-pro .j-error-view select:focus { border:1px solid #b71c1c; background:#fff; }
  804. .j-pro .j-select.j-error-view i {
  805. background-color:#ffebee;
  806. -webkit-box-shadow:0 0 0 8px #ffebee;
  807. -moz-box-shadow:0 0 0 8px #ffebee;
  808. -o-box-shadow:0 0 0 8px #ffebee;
  809. box-shadow:0 0 0 8px #ffebee;
  810. -webkit-transition:all.4s;
  811. -moz-transition:all.4s;
  812. -ms-transition:all.4s;
  813. -o-transition:all.4s;
  814. transition:all.4s;
  815. }
  816. .j-pro .j-select.j-error-view select:focus + i {
  817. background-color:#fff;
  818. -webkit-box-shadow:0 0 0 8px #fff;
  819. -moz-box-shadow:0 0 0 8px #fff;
  820. -o-box-shadow:0 0 0 8px #fff;
  821. box-shadow:0 0 0 8px #fff;
  822. }
  823. .j-pro .j-error-view .j-icon-left,
  824. .j-pro .j-error-view .j-icon-right,
  825. .j-pro span.j-error-view,
  826. .j-pro .j-error-message i { color:#b71c1c; }
  827. .j-pro .j-error-message { background:#ffebee; border-color:#b71c1c; color:#b71c1c; }
  828. .j-pro .j-tooltip.j-error-view {
  829. background:#ffebee !important;
  830. border:1px solid #b71c1c;
  831. color:#b71c1c;
  832. font:400 13px 'Open Sans',Helvetica,Arial,sans-serif;
  833. opacity:1;
  834. height: auto;
  835. padding:5px 10px;
  836. z-index:5;
  837. }
  838. .j-pro .j-error-view.j-tooltip-left-top { bottom:100%; margin-bottom:8px; left:0; right:auto; }
  839. .j-pro .j-error-view.j-tooltip-left-top:before { border-color:#b71c1c transparent !important; bottom:-8px; left:13px; }
  840. .j-pro .j-error-view.j-tooltip-right-top { bottom:100%; margin-bottom:8px; left:auto; right:0; }
  841. .j-pro .j-error-view.j-tooltip-right-top:before { border-color:#b71c1c transparent !important; bottom:-8px; }
  842. .j-pro .j-error-view.j-tooltip-left-bottom { margin-top:8px; top:100%; left:0; right:auto; }
  843. .j-pro .j-error-view.j-tooltip-left-bottom:before { border-color:#b71c1c transparent !important; top:-8px; left:13px; }
  844. .j-pro .j-error-view.j-tooltip-right-bottom { margin-top:8px; top:100%; left:auto; right:0; }
  845. .j-pro .j-error-view.j-tooltip-right-bottom:before { border-color:#b71c1c transparent !important; top:-8px; }
  846. .j-pro .j-error-view.j-tooltip-right-side { margin-left:8px; top:1px; left:100%; white-space:nowrap; }
  847. .j-pro .j-error-view.j-tooltip-right-side:before { border-color:transparent #b71c1c !important; top:6px; left:-8px; }
  848. .j-pro .j-error-view.j-tooltip-left-side { margin-right:8px; top:1px; left:auto; right:100%; white-space:nowrap; }
  849. .j-pro .j-error-view.j-tooltip-left-side:before { border-color:transparent #b71c1c !important; top:6px; right:-8px; }
  850. /* Success state
  851. =============================== */
  852. .j-pro .j-success-view .j-checkbox i,
  853. .j-pro .j-success-view .j-radio i,
  854. .j-pro .j-success-view .j-checkbox-toggle i,
  855. .j-pro .j-success-view .j-radio-toggle i,
  856. .j-pro .j-success-view input,
  857. .j-pro .j-success-view select,
  858. .j-pro .j-success-view textarea { background:#e8f5e9; border:1px solid #1b5e20; }
  859. .j-pro .j-success-view input[type="text"]:hover,
  860. .j-pro .j-success-view input[type="password"]:hover,
  861. .j-pro .j-success-view input[type="email"]:hover,
  862. .j-pro .j-success-view input[type="search"]:hover,
  863. .j-pro .j-success-view input[type="url"]:hover,
  864. .j-pro .j-success-view textarea:hover,
  865. .j-pro .j-success-view select:hover { border:1px solid #1b5e20; }
  866. .j-pro .j-success-view .j-checkbox input:checked + i,
  867. .j-pro .j-success-view .j-radio input:checked + i,
  868. .j-pro .j-success-view .j-checkbox-toggle input:checked + i,
  869. .j-pro .j-success-view .j-radio-toggle input:checked + i,
  870. .j-pro .j-success-view input[type="text"]:focus,
  871. .j-pro .j-success-view input[type="password"]:focus,
  872. .j-pro .j-success-view input[type="email"]:focus,
  873. .j-pro .j-success-view input[type="search"]:focus,
  874. .j-pro .j-success-view input[type="url"]:focus,
  875. .j-pro .j-success-view textarea:focus,
  876. .j-pro .j-success-view select:focus { border:1px solid #1b5e20; background:#fff; }
  877. .j-pro .j-select.j-success-view i {
  878. background-color:#e8f5e9;
  879. -webkit-box-shadow:0 0 0 8px #e8f5e9;
  880. -moz-box-shadow:0 0 0 8px #e8f5e9;
  881. -o-box-shadow:0 0 0 8px #e8f5e9;
  882. box-shadow:0 0 0 8px #e8f5e9;
  883. -webkit-transition:all.4s;
  884. -moz-transition:all.4s;
  885. -ms-transition:all.4s;
  886. -o-transition:all.4s;
  887. transition:all.4s;
  888. }
  889. .j-pro .j-select.j-success-view select:focus + i {
  890. background-color:#fff;
  891. -webkit-box-shadow:0 0 0 8px #fff;
  892. -moz-box-shadow:0 0 0 8px #fff;
  893. -o-box-shadow:0 0 0 8px #fff;
  894. box-shadow:0 0 0 8px #fff;
  895. }
  896. .j-pro .j-success-view .j-icon-left,
  897. .j-pro .j-success-view .j-icon-right,
  898. .j-pro span.j-success-view,
  899. .j-pro .j-success-message i { color:#1b5e20; }
  900. .j-pro .j-success-message { background:#e8f5e9; border-color:#1b5e20; color:#1b5e20; }
  901. /* Warning state
  902. =============================== */
  903. .j-pro .j-warning-view .j-checkbox i,
  904. .j-pro .j-warning-view .j-radio i,
  905. .j-pro .j-warning-view .j-checkbox-toggle i,
  906. .j-pro .j-warning-view .j-radio-toggle i,
  907. .j-pro .j-warning-view input,
  908. .j-pro .j-warning-view select,
  909. .j-pro .j-warning-view textarea { background:#fff8e1; border:1px solid #f57f17; }
  910. .j-pro .j-warning-view input[type="text"]:hover,
  911. .j-pro .j-warning-view input[type="password"]:hover,
  912. .j-pro .j-warning-view input[type="email"]:hover,
  913. .j-pro .j-warning-view input[type="search"]:hover,
  914. .j-pro .j-warning-view input[type="url"]:hover,
  915. .j-pro .j-warning-view textarea:hover,
  916. .j-pro .j-warning-view select:hover { border:1px solid #f57f17; }
  917. .j-pro .j-warning-view .j-checkbox input:checked + i,
  918. .j-pro .j-warning-view .j-radio input:checked + i,
  919. .j-pro .j-warning-view .j-checkbox-toggle input:checked + i,
  920. .j-pro .j-warning-view .j-radio-toggle input:checked + i,
  921. .j-pro .j-warning-view input[type="text"]:focus,
  922. .j-pro .j-warning-view input[type="password"]:focus,
  923. .j-pro .j-warning-view input[type="email"]:focus,
  924. .j-pro .j-warning-view input[type="search"]:focus,
  925. .j-pro .j-warning-view input[type="url"]:focus,
  926. .j-pro .j-warning-view textarea:focus,
  927. .j-pro .j-warning-view select:focus { border:1px solid #f57f17; background:#fff; }
  928. .j-pro .j-select.j-warning-view i {
  929. background-color:#fff8e1;
  930. -webkit-box-shadow:0 0 0 8px #fff8e1;
  931. -moz-box-shadow:0 0 0 8px #fff8e1;
  932. -o-box-shadow:0 0 0 8px #fff8e1;
  933. box-shadow:0 0 0 8px #fff8e1;
  934. -webkit-transition:all.4s;
  935. -moz-transition:all.4s;
  936. -ms-transition:all.4s;
  937. -o-transition:all.4s;
  938. transition:all.4s;
  939. }
  940. .j-pro .j-select.j-warning-view select:focus + i {
  941. background-color:#fff;
  942. -webkit-box-shadow:0 0 0 8px #fff;
  943. -moz-box-shadow:0 0 0 8px #fff;
  944. -o-box-shadow:0 0 0 8px #fff;
  945. box-shadow:0 0 0 8px #fff;
  946. }
  947. .j-pro .j-warning-view .j-icon-left,
  948. .j-pro .j-warning-view .j-icon-right,
  949. .j-pro span.j-warning-view,
  950. .j-pro .j-warning-message i { color:#f57f17; }
  951. .j-pro .j-warning-message { background:#fff8e1; border-color:#f57f17; color:#f57f17; }
  952. /* Info state
  953. =============================== */
  954. .j-pro .j-info-view .j-checkbox i,
  955. .j-pro .j-info-view .j-radio i,
  956. .j-pro .j-info-view .j-checkbox-toggle i,
  957. .j-pro .j-info-view .j-radio-toggle i,
  958. .j-pro .j-info-view input,
  959. .j-pro .j-info-view select,
  960. .j-pro .j-info-view textarea { background:#e1f5fe; border:1px solid #01579b; }
  961. .j-pro .j-info-view input[type="text"]:hover,
  962. .j-pro .j-info-view input[type="password"]:hover,
  963. .j-pro .j-info-view input[type="email"]:hover,
  964. .j-pro .j-info-view input[type="search"]:hover,
  965. .j-pro .j-info-view input[type="url"]:hover,
  966. .j-pro .j-info-view textarea:hover,
  967. .j-pro .j-info-view select:hover { border:1px solid #01579b; }
  968. .j-pro .j-info-view .j-checkbox input:checked + i,
  969. .j-pro .j-info-view .j-radio input:checked + i,
  970. .j-pro .j-info-view .j-checkbox-toggle input:checked + i,
  971. .j-pro .j-info-view .j-radio-toggle input:checked + i,
  972. .j-pro .j-info-view input[type="text"]:focus,
  973. .j-pro .j-info-view input[type="password"]:focus,
  974. .j-pro .j-info-view input[type="email"]:focus,
  975. .j-pro .j-info-view input[type="search"]:focus,
  976. .j-pro .j-info-view input[type="url"]:focus,
  977. .j-pro .j-info-view textarea:focus,
  978. .j-pro .j-info-view select:focus { border:1px solid #01579b; background:#fff; }
  979. .j-pro .j-select.j-info-view i {
  980. background-color:#e1f5fe;
  981. -webkit-box-shadow:0 0 0 8px #e1f5fe;
  982. -moz-box-shadow:0 0 0 8px #e1f5fe;
  983. -o-box-shadow:0 0 0 8px #e1f5fe;
  984. box-shadow:0 0 0 8px #e1f5fe;
  985. -webkit-transition:all.4s;
  986. -moz-transition:all.4s;
  987. -ms-transition:all.4s;
  988. -o-transition:all.4s;
  989. transition:all.4s;
  990. }
  991. .j-pro .j-select.j-info-view select:focus + i {
  992. background-color:#fff;
  993. -webkit-box-shadow:0 0 0 8px #fff;
  994. -moz-box-shadow:0 0 0 8px #fff;
  995. -o-box-shadow:0 0 0 8px #fff;
  996. box-shadow:0 0 0 8px #fff;
  997. }
  998. .j-pro .j-info-view .j-icon-left,
  999. .j-pro .j-info-view .j-icon-right,
  1000. .j-pro span.j-info-view,
  1001. .j-pro .j-info-message i { color:#01579b; }
  1002. .j-pro .j-info-message { background:#e1f5fe; border-color:#01579b; color:#01579b; }
  1003. /* Ratings
  1004. ==================================== */
  1005. .j-pro .j-rating-group { color:#22224b; height:30px; line-height:30px; margin-bottom:4px; }
  1006. .j-pro .j-rating-group:last-child { margin-bottom:0; }
  1007. .j-pro .j-rating-group .j-label { float:left; font-size:16px; height:30px; line-height:30px; margin-bottom:0; }
  1008. .j-pro .j-rating-group .j-ratings { float:right; height:30px; line-height:30px; }
  1009. .j-pro .j-ratings input { left:-9999px; position:absolute; }
  1010. .j-pro .j-ratings input + label {
  1011. color:rgba(0,0,0,.26);
  1012. cursor:pointer;
  1013. font-size:20px;
  1014. float:right;
  1015. padding:0 2px;
  1016. -webkit-transition:color.2s;
  1017. -moz-transition:color.2s;
  1018. -ms-transition:color.2s;
  1019. -o-transition:color.2s;
  1020. transition:color.2s;
  1021. }
  1022. .j-pro .j-ratings input + label:hover,
  1023. .j-pro .j-ratings input + label:hover ~ label,
  1024. .j-pro .j-ratings input:checked + label,
  1025. .j-pro .j-ratings input:checked + label ~ label { color:#da503e; }
  1026. /* Datapicker and Timepicker
  1027. =============================== */
  1028. .ui-datepicker {
  1029. background-color:#fff;
  1030. border:1px solid #6f6f6f;
  1031. color:#181835;
  1032. display:none;
  1033. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1034. text-align:center;
  1035. padding:10px 0;
  1036. width:240px;
  1037. z-index:1100 !important;
  1038. }
  1039. .ui-datepicker-header {
  1040. background-color:#e7a299;
  1041. color:#fff;
  1042. line-height:1.5;
  1043. margin:-2px 0 12px;
  1044. padding:10px;
  1045. position:relative;
  1046. }
  1047. .ui-datepicker-prev,
  1048. .ui-datepicker-next {
  1049. cursor:pointer;
  1050. display:block;
  1051. font-size:18px;
  1052. height:30px;
  1053. position:absolute;
  1054. text-decoration:none;
  1055. top:6px;
  1056. width:30px;
  1057. }
  1058. .ui-datepicker-prev { border-right:1px solid; left:0; }
  1059. .ui-datepicker-next { border-left:1px solid; right:0; }
  1060. .ui-datepicker-prev.ui-state-disabled { border-right:none; display: none; }
  1061. .ui-datepicker-next.ui-state-disabled { border-left:none; display: none; }
  1062. .ui-datepicker-calendar { border-collapse:collapse; line-height:1.5; width:100%; }
  1063. .ui-datepicker-calendar th span { color:rgba(0,0,0,.26); font-weight:lighter; }
  1064. .ui-datepicker-calendar a,
  1065. .ui-datepicker-calendar span {
  1066. color:rgba(0,0,0,.54);
  1067. display:block;
  1068. font-size:16px;
  1069. margin:0 auto;
  1070. text-decoration:none;
  1071. width:28px;
  1072. }
  1073. .ui-datepicker-calendar a:hover,
  1074. .ui-datepicker-calendar .ui-state-active { background-color:#e7a299; }
  1075. .ui-datepicker-today a { outline:1px solid rgba(0,0,0,.54); }
  1076. .ui-datepicker-inline {
  1077. -webkit-box-sizing:border-box;
  1078. -moz-box-sizing:border-box;
  1079. box-sizing:border-box;
  1080. border:1px solid #6f6f6f;
  1081. -webkit-box-shadow:none;
  1082. -moz-box-shadow:none;
  1083. -o-box-shadow:none;
  1084. box-shadow:none;
  1085. width:100%;
  1086. }
  1087. .ui-state-disabled span { color:rgba(0,0,0,.26); }
  1088. .ui-datepicker-buttonpane { border-top:1px solid rgba(0,0,0,.26); }
  1089. .ui-datepicker-buttonpane button {
  1090. background:#da503e;
  1091. border:none;
  1092. color:#fff;
  1093. cursor:pointer;
  1094. font:14px 'Open Sans',Helvetica,Arial,sans-serif;
  1095. padding:5px 10px;
  1096. margin:10px 5px 0;
  1097. -webkit-transition:all.15s;
  1098. -moz-transition:all.15s;
  1099. -ms-transition:all.15s;
  1100. -o-transition:all.15s;
  1101. transition:all.15s;
  1102. outline:none;
  1103. }
  1104. .ui-datepicker-buttonpane button:hover { background:#c13725; }
  1105. .ui-timepicker-div .ui-widget-header { background-color:#f0f0f0; margin-bottom:8px; padding:10px 0; }
  1106. .ui-timepicker-div dl { text-align:left; }
  1107. .ui-timepicker-div dl dt { float:left; clear:left; padding:0 0 0 5px; }
  1108. .ui-timepicker-div td { font-size:90%; }
  1109. .ui-tpicker-grid-label { background:none; border:none; margin:0; padding:0; }
  1110. .ui-timepicker-rtl{ direction:rtl; }
  1111. .ui-timepicker-rtl dl { text-align:right; padding:0 5px 0 0; }
  1112. .ui-timepicker-rtl dl dt{ float:right; clear:right; }
  1113. .ui-timepicker-rtl dl dd { margin:0 40% 10px 10px; }
  1114. .ui-timepicker-div { font-size:15px; }
  1115. .ui-timepicker-div dl {
  1116. -webkit-box-sizing:border-box;
  1117. -moz-box-sizing:border-box;
  1118. box-sizing:border-box;
  1119. border-top:1px solid rgba(0,0,0,.26);
  1120. padding:16px 5px;
  1121. margin:16px 0 0;
  1122. }
  1123. .ui-timepicker-div .ui_tpicker_time { margin:0 10px 10px 40%; }
  1124. .ui-timepicker-div .ui_tpicker_hour,
  1125. .ui-timepicker-div .ui_tpicker_minute { margin:16px 10px 10px 40%; }
  1126. /* jQuery Slider
  1127. =============================== */
  1128. .ui-slider { position:relative; }
  1129. .ui-slider .ui-slider-range {
  1130. border:none;
  1131. display:block;
  1132. font-size:11px;
  1133. position:absolute;
  1134. overflow:hidden;
  1135. z-index:1;
  1136. }
  1137. .ui-slider .ui-slider-handle {
  1138. background-color:#6f6f6f;
  1139. border:1px solid #6f6f6f;
  1140. cursor:pointer;
  1141. height:16px;
  1142. position:absolute;
  1143. outline:none;
  1144. left:-5px;
  1145. width:16px;
  1146. z-index:2;
  1147. }
  1148. .ui-slider-horizontal { height:7px; }
  1149. .ui-slider-vertical { height:100px; width:7px; }
  1150. .ui-slider-horizontal .ui-slider-handle { top:-5px; margin-left:-10px; }
  1151. .ui-slider-horizontal .ui-slider-range { top:0; height:100%; }
  1152. .ui-slider-horizontal .ui-slider-range-min { left:0; }
  1153. .ui-slider-horizontal .ui-slider-range-max { right:0; }
  1154. .ui-slider-vertical .ui-slider-range-min { bottom:0; }
  1155. .ui-slider-vertical .ui-slider-range { left:0; width:100%; }
  1156. .ui-slider.ui-widget-content { background-color:#fff; border:1px solid #6f6f6f; }
  1157. .ui-slider-vertical .ui-widget-header,
  1158. .ui-slider-horizontal .ui-widget-header { background-color:#e6e6e6; }
  1159. .j-pro .j-slider-group {
  1160. font:16px/42px 'Open Sans',Helvetica,Arial,sans-serif;
  1161. padding:0 2px;
  1162. margin-bottom:5px;
  1163. white-space:nowrap;
  1164. }
  1165. .j-pro .j-slider-group label { display:inline-block; color:#181835; padding:0 4px; }
  1166. /* Multistep form
  1167. =============================== */
  1168. .j-pro fieldset {
  1169. border:none;
  1170. outline:none;
  1171. margin:0;
  1172. padding:0;
  1173. position:absolute;
  1174. opacity:0;
  1175. left:-9999px;
  1176. top:0;
  1177. -webkit-transform:translateY(-4%);
  1178. -moz-transform:translateY(-4%);
  1179. -ms-transform:translateY(-4%);
  1180. -o-transform:translateY(-4%);
  1181. transform:translateY(-4%);
  1182. -webkit-transition:opacity.3s, -webkit-transform.3s;
  1183. -moz-transition:opacity.3s, -moz-transform.3s;
  1184. -ms-transition:opacity.3s, -ms-transform.3s;
  1185. -o-transition:opacity.3s, -o-transform.3s;
  1186. transition:opacity.3s, transform.3s;
  1187. }
  1188. .j-pro .j-steps {
  1189. border:1px solid #a6a6a6;
  1190. margin-bottom:25px;
  1191. text-align:center;
  1192. -webkit-transition:all.3s;
  1193. -moz-transition:all.3s;
  1194. -ms-transition:all.3s;
  1195. -o-transition:all.3s;
  1196. transition:all.3s;
  1197. }
  1198. .j-pro .j-active-fieldset {
  1199. left:0;
  1200. position:relative;
  1201. opacity:1;
  1202. -webkit-transform:translateY(0);
  1203. -moz-transform:translateY(0);
  1204. -ms-transform:translateY(0);
  1205. -o-transform:translateY(0);
  1206. transform:translateY(0);
  1207. }
  1208. .j-pro fieldset .j-unit,
  1209. .j-pro fieldset .j-row { display:none; }
  1210. .j-pro .j-active-fieldset .j-unit,
  1211. .j-pro .j-active-fieldset .j-row { display:block; }
  1212. .j-pro .j-steps p { color:#777; font-size:16px; height:36px; line-height:36px; margin:0; padding:0; }
  1213. .j-pro .j-steps span { color:#777; font-size:13px; height:13px; line-height:13px; }
  1214. .j-pro .j-active-step .j-steps p { color:#22224b; }
  1215. .j-pro .j-active-step .j-steps { border:1px solid #c13725; }
  1216. .j-pro .j-passed-step .j-steps { border:1px solid #333; }
  1217. .j-pro.j-multistep .j-input textarea:focus { height:112px; }
  1218. /* Modal form
  1219. =============================== */
  1220. .j-modal-form {
  1221. background-color:rgba(103,119,129,.5);
  1222. bottom:0;
  1223. height:100%;
  1224. left:0;
  1225. opacity:0;
  1226. overflow-y:scroll;
  1227. position:fixed;
  1228. right:0;
  1229. top:0;
  1230. visibility:hidden;
  1231. width:100%;
  1232. z-index:1040;
  1233. -webkit-transition:opacity.2s;
  1234. -moz-transition:opacity.2s;
  1235. -ms-transition:opacity.2s;
  1236. -o-transition:opacity.2s;
  1237. transition:opacity.2s;
  1238. }
  1239. .j-modal-form.j-modal-visible { opacity:1; visibility:visible; }
  1240. .j-modal-scroll { overflow:hidden; }
  1241. .j-pro .j-modal-close {
  1242. -webkit-border-radius:2px;
  1243. -moz-border-radius:2px;
  1244. -o-border-radius:2px;
  1245. border-radius:2px;
  1246. cursor:pointer;
  1247. position:absolute;
  1248. right:8px;
  1249. top:11px;
  1250. -webkit-transition:background-color.15s;
  1251. -moz-transition:background-color.15s;
  1252. -ms-transition:background-color.15s;
  1253. -o-transition:background-color.15s;
  1254. transition:background-color.15s;
  1255. }
  1256. .j-pro .j-modal-close i { display:block; height:22px; width:23px; }
  1257. .j-pro .j-modal-close i:before,
  1258. .j-pro .j-modal-close i:after {
  1259. background-color:#000;
  1260. content:'';
  1261. height:2px;
  1262. position:absolute;
  1263. right:1px;
  1264. top:10px;
  1265. width:23px;
  1266. }
  1267. .j-pro .j-modal-close i:before{
  1268. -webkit-transform:rotate(45deg);
  1269. -moz-transform:rotate(45deg);
  1270. -ms-transform:rotate(45deg);
  1271. -o-transform:rotate(45deg);
  1272. transform:rotate(45deg);
  1273. }
  1274. .j-pro .j-modal-close i:after{
  1275. -webkit-transform:rotate(-45deg);
  1276. -moz-transform:rotate(-45deg);
  1277. -ms-transform:rotate(-45deg);
  1278. -o-transform:rotate(-45deg);
  1279. transform:rotate(-45deg);
  1280. }
  1281. /* Grid layout
  1282. ==================================== */
  1283. .j-pro [class*="j-span"] {
  1284. -webkit-box-sizing:border-box;
  1285. -moz-box-sizing:border-box;
  1286. box-sizing:border-box;
  1287. float:left;
  1288. padding-left:10px;
  1289. padding-right:10px;
  1290. position:relative;
  1291. }
  1292. .j-pro .j-span1 { width:8.3333%; }
  1293. .j-pro .j-span2 { width:16.6666%; }
  1294. .j-pro .j-span3 { width:25%; }
  1295. .j-pro .j-span4 { width:33.3333%; }
  1296. .j-pro .j-span5 { width:41.6666%; }
  1297. .j-pro .j-span6 { width:50%; }
  1298. .j-pro .j-span7 { width:58.3333%; }
  1299. .j-pro .j-span8 { width:66.6666%; }
  1300. .j-pro .j-span9 { width:75%; }
  1301. .j-pro .j-span10 { width:83.3333%; }
  1302. .j-pro .j-span11 { width:91.6666%; }
  1303. .j-pro .j-span12 { width:100%; }
  1304. .j-pro .j-offset1 { margin-left:8.3333%; }
  1305. .j-pro .j-offset2 { margin-left:16.6666%; }
  1306. .j-pro .j-offset3 { margin-left:25%; }
  1307. .j-pro .j-offset4 { margin-left:33.3333%; }
  1308. .j-pro .j-offset5 { margin-left:41.6666%; }
  1309. .j-pro .j-offset6 { margin-left:50%; }
  1310. .j-pro .j-offset7 { margin-left:58.3333%; }
  1311. .j-pro .j-offset8 { margin-left:66.6666%; }
  1312. .j-pro .j-offset9 { margin-left:75%; }
  1313. .j-pro .j-offset10 { margin-left:83.3333%; }
  1314. .j-pro .j-offset11 { margin-left:91.6666%; }
  1315. .j-pro .j-offset12 { margin-left:100%; }
  1316. .j-pro .j-row{ margin:0 -10px; }
  1317. .j-pro .j-row:after {
  1318. clear:both;
  1319. content:".";
  1320. display:block;
  1321. height:0;
  1322. visibility:hidden;
  1323. }
  1324. /* Responsiveness
  1325. ==================================== */
  1326. /* Wrapper-640 */
  1327. @media all and (max-width:620px) {
  1328. .j-wrapper-640 .j-pro [class*="j-span"] { margin-right:0; width:100%; }
  1329. .j-wrapper-640 .j-pro [class*="j-offset"] { margin-left:0; }
  1330. .j-wrapper-640 .j-pro .j-label-center { height:13px; line-height:13px; text-align:left; padding-bottom:3px; }
  1331. .j-wrapper-640 .j-pro .j-radio:last-child,
  1332. .j-wrapper-640 .j-pro .j-checkbox:last-child,
  1333. .j-wrapper-640 .j-pro .j-radio-toggle:last-child,
  1334. .j-wrapper-640 .j-pro .j-checkbox-toggle:last-child { margin-bottom:4px; }
  1335. }
  1336. /* Wrapper-400 */
  1337. @media all and (max-width:380px) {
  1338. .j-wrapper-400 .j-pro [class*="j-span"] { margin-right:0; width:100%; }
  1339. .j-wrapper-400 [class*="j-offset"] { margin-left:0; }
  1340. .j-wrapper-400 .j-pro .j-label-center { height:13px; line-height:13px; text-align:left; padding-bottom:3px; }
  1341. .j-wrapper-400 .j-pro .j-radio:last-child,
  1342. .j-wrapper-400 .j-pro .j-checkbox:last-child,
  1343. .j-wrapper-400 .j-pro .j-radio-toggle:last-child,
  1344. .j-wrapper-400 .j-pro .j-checkbox-toggle:last-child { margin-bottom:4px; }
  1345. }
  1346. /* jQuery UI Autocomplete
  1347. =============================== */
  1348. .ui-autocomplete {
  1349. background:#fff;
  1350. border-color:#6f6f6f;
  1351. border-style:none solid solid;
  1352. border-width:0 1px 1px;
  1353. cursor:default;
  1354. display:block;
  1355. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1356. left:0;
  1357. list-style:none;
  1358. margin:0;
  1359. max-height:110px;
  1360. outline:none;
  1361. overflow-x:hidden;
  1362. overflow-y:auto;
  1363. padding:0;
  1364. position:absolute;
  1365. top:0;
  1366. z-index:10000;
  1367. }
  1368. .ui-autocomplete .ui-menu { position:absolute; }
  1369. .ui-autocomplete .ui-menu-item {
  1370. background:#fff;
  1371. border-bottom:1px solid #efb1a9;
  1372. cursor:pointer;
  1373. margin:0;
  1374. min-height:0;
  1375. padding:8px 15px;
  1376. position:relative;
  1377. }
  1378. .ui-autocomplete .ui-menu-item:hover { background:rgba(0,0,0,.06); }
  1379. .ui-helper-hidden-accessible { position:absolute; left:-999em; }
  1380. /* Tabs
  1381. =============================== */
  1382. .j-tabs-section,
  1383. .j-tabs-container input[type="radio"] { display:none; }
  1384. #tab1:checked ~ #tabs-section-1,
  1385. #tab2:checked ~ #tabs-section-2,
  1386. #tab3:checked ~ #tabs-section-3 { display:block; }
  1387. .j-tabs-container .j-tabs-label {
  1388. background:#fff;
  1389. border-top:2px solid rgba(218,80,62,.5);
  1390. display:inline-block;
  1391. margin:0 0 -3px;
  1392. font:14px 'Open Sans',Helvetica,Arial,sans-serif;
  1393. padding:11px 13px 13px;
  1394. opacity:.95;
  1395. -webkit-transition:border-top.2s;
  1396. -moz-transition:border-top.2s;
  1397. -ms-transition:border-top.2s;
  1398. -o-transition:border-top.2s;
  1399. transition:border-top.2s;
  1400. }
  1401. .j-tabs-container .j-tabs-label i,
  1402. .j-tabs-container .j-tabs-label span { padding:1px; }
  1403. .j-tabs-container .j-tabs-label i { font-size:16px; }
  1404. .j-tabs-container .j-tabs-label i,
  1405. .j-tabs-container .j-tabs-label span { color:#6f6f6f; }
  1406. .j-tabs-container input[type="radio"]:checked + .j-tabs-label i,
  1407. .j-tabs-container input[type="radio"]:checked + .j-tabs-label span { color:#444; }
  1408. .j-tabs-container .j-tabs-label:hover { cursor:pointer; }
  1409. .j-tabs-container input[type="radio"]:checked + .j-tabs-label { border-top:2px solid #da503e; opacity:1; }
  1410. @media all and (max-width: 430px) {
  1411. .j-tabs-container .j-tabs-label { font-size:0; }
  1412. .j-tabs-container .j-tabs-label i { font-size:16px; height:18px; }
  1413. }
  1414. /* Image checkbox & Image radio
  1415. =============================== */
  1416. .j-pro .j-radio-block,
  1417. .j-pro .j-checkbox-block {
  1418. color:#22224b;
  1419. cursor:pointer;
  1420. font-size:15px;
  1421. margin-bottom:8px;
  1422. position:relative;
  1423. }
  1424. .j-pro .j-radio-block:last-child,
  1425. .j-pro .j-checkbox-block:last-child { margin-bottom:0; }
  1426. .j-pro .j-radio-block input,
  1427. .j-pro .j-checkbox-block input { position:absolute; left:-9999px; }
  1428. .j-pro .j-radio-block i,
  1429. .j-pro .j-checkbox-block i {
  1430. display:block;
  1431. height:18px;
  1432. outline:none;
  1433. position:absolute;
  1434. top:5px;
  1435. left:5px;
  1436. width:18px;
  1437. z-index:10;
  1438. }
  1439. .j-pro .j-checkbox-block i:after {
  1440. border-bottom:2px solid #444;
  1441. border-left:2px solid #444;
  1442. content:"";
  1443. height:5px;
  1444. top:3px;
  1445. -webkit-transform:rotate(-45deg);
  1446. -moz-transform:rotate(-45deg);
  1447. -ms-transform:rotate(-45deg);
  1448. -o-transform:rotate(-45deg);
  1449. transform:rotate(-45deg);
  1450. left:3px;
  1451. opacity:0;
  1452. position:absolute;
  1453. width:10px;
  1454. }
  1455. .j-pro .j-radio-block i,
  1456. .j-pro .j-radio-block i:after {
  1457. -webkit-border-radius:50%;
  1458. -moz-border-radius:50%;
  1459. -o-border-radius:50%;
  1460. border-radius:50%;
  1461. }
  1462. .j-pro .j-radio-block i:after {
  1463. background-color:#444;
  1464. content:"";
  1465. height:8px;
  1466. top:5px;
  1467. left:5px;
  1468. opacity:0;
  1469. position:absolute;
  1470. width:8px;
  1471. }
  1472. .j-pro .j-radio-block input:checked + i,
  1473. .j-pro .j-checkbox-block input:checked + i { color:#333; border:1px solid #333; }
  1474. .j-pro .j-radio-block input:checked + i:after,
  1475. .j-pro .j-checkbox-block input:checked + i:after { opacity:1; }
  1476. .j-pro .j-checkbox-block span,
  1477. .j-pro .j-radio-block span { display:block; }
  1478. .j-pro .j-checkbox-block .j-block-image,
  1479. .j-pro .j-radio-block .j-block-image { position:relative; border:0;}
  1480. .j-pro .j-checkbox-block .j-block-content img,
  1481. .j-pro .j-radio-block .j-block-content img { height:auto; display:block; width:100%; }
  1482. .j-pro .j-checkbox-block .j-block-content:hover,
  1483. .j-pro .j-radio-block .j-block-content:hover,
  1484. .j-pro .j-checkbox-block input:checked ~ .j-block-content,
  1485. .j-pro .j-radio-block input:checked ~ .j-block-content { background:#e6e6e6; }
  1486. .j-pro .j-checkbox-block .j-block-text-title,
  1487. .j-pro .j-radio-block .j-block-text-title { color:#181835; font-size:17px; margin:5px 0; }
  1488. .j-pro .j-checkbox-block .j-block-text-desc,
  1489. .j-pro .j-radio-block .j-block-text-desc {
  1490. color:#777;
  1491. font-size:13px;
  1492. padding-right:5px;
  1493. line-height:1.2;
  1494. margin:5px 0 10px;
  1495. word-spacing:3px;
  1496. }
  1497. .j-pro .j-checkbox-block .j-block-image-title,
  1498. .j-pro .j-radio-block .j-block-image-title,
  1499. .j-pro .j-checkbox-block .j-block-content,
  1500. .j-pro .j-radio-block .j-block-content {
  1501. -webkit-transition:background .2s;
  1502. -moz-transition:background .2s;
  1503. -ms-transition:background .2s;
  1504. -o-transition:background .2s;
  1505. transition:background .2s;
  1506. }
  1507. .j-pro .j-checkbox-block .j-block-image-title,
  1508. .j-pro .j-radio-block .j-block-image-title {
  1509. background:rgba(111,111,111,.5);
  1510. bottom:0;
  1511. color:#fff;
  1512. font-size:13px;
  1513. padding:10px;
  1514. position:absolute;
  1515. left:0;
  1516. width:100%;
  1517. z-index:20;
  1518. -webkit-box-sizing:border-box;
  1519. -moz-box-sizing:border-box;
  1520. box-sizing:border-box;
  1521. }
  1522. .j-pro .j-checkbox-block .j-block-content:hover .j-block-image-title,
  1523. .j-pro .j-radio-block .j-block-content:hover .j-block-image-title,
  1524. .j-pro .j-checkbox-block input:checked ~ .j-block-content .j-block-image-title,
  1525. .j-pro .j-radio-block input:checked ~ .j-block-content .j-block-image-title { background:rgba(68,68,68,.77); }
  1526. /* "Thank you" block
  1527. =============================*/
  1528. .j-final-block {
  1529. background-color:#f5f5f5;
  1530. border:1px solid #d7d7d7;
  1531. -webkit-box-sizing:border-box;
  1532. -moz-box-sizing:border-box;
  1533. box-sizing:border-box;
  1534. color:#181835;
  1535. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1536. line-height:1;
  1537. position:relative;
  1538. padding:25px 20px;
  1539. }
  1540. .j-final-block .j-close {
  1541. cursor:pointer;
  1542. position:absolute;
  1543. right:8px;
  1544. top:11px;
  1545. -webkit-transition:background-color.15s;
  1546. -moz-transition:background-color.15s;
  1547. -ms-transition:background-color.15s;
  1548. -o-transition:background-color.15s;
  1549. transition:background-color.15s;
  1550. }
  1551. .j-final-block .j-close i { display:block; height:22px; width:23px; }
  1552. .j-final-block .j-close i:before,
  1553. .j-final-block .j-close i:after {
  1554. background-color:#000;
  1555. content:'';
  1556. height:2px;
  1557. position:absolute;
  1558. right:1px;
  1559. top:10px;
  1560. width:23px;
  1561. }
  1562. .j-final-block .j-close i:before{
  1563. -webkit-transform:rotate(45deg);
  1564. -moz-transform:rotate(45deg);
  1565. -ms-transform:rotate(45deg);
  1566. -o-transform:rotate(45deg);
  1567. transform:rotate(45deg);
  1568. }
  1569. .j-final-block .j-close i:after{
  1570. -webkit-transform:rotate(-45deg);
  1571. -moz-transform:rotate(-45deg);
  1572. -ms-transform:rotate(-45deg);
  1573. -o-transform:rotate(-45deg);
  1574. transform:rotate(-45deg);
  1575. }
  1576. /* Form details & total price
  1577. =============================== */
  1578. .j-pro .j-total-data,
  1579. .j-pro .j-calculation-data { font:14px/20px 'Open Sans', Helvetica, Arial, sans-serif; }
  1580. .j-pro .j-total-data p { display:block; margin:0; padding:5px 0; }
  1581. .j-pro .j-total-data span,
  1582. .j-pro .j-calculation-data span { color:#22224b; padding:0 4px; font-size:16px; }
  1583. .j-pro .j-calculation-data p { display:block; margin:0; padding:0; }
  1584. .j-pro .j-calculation-data { background:#c4df9b; text-align:center; padding:8px 0; }
  1585. /* Bootstrap compatibility
  1586. =============================== */
  1587. .j-pro .j-radio,
  1588. .j-pro .j-checkbox,
  1589. .j-pro .j-radio-toggle,
  1590. .j-pro .j-checkbox-toggle { margin-top:0; }
  1591. .j-pro .j-label {
  1592. padding:0;
  1593. -webkit-border-radius:0;
  1594. -moz-border-radius:0;
  1595. -o-border-radius:0;
  1596. border-radius:0;
  1597. }
  1598. .j-pro .j-radio,
  1599. .j-pro .j-checkbox,
  1600. .j-pro .j-radio-toggle,
  1601. .j-pro .j-checkbox-toggle,
  1602. .j-pro .j-radio *,
  1603. .j-pro .j-checkbox *,
  1604. .j-pro .j-radio-toggle *,
  1605. .j-pro .j-checkbox-toggle *,
  1606. .j-pro .j-radio i:after,
  1607. .j-pro .j-checkbox i:after,
  1608. .j-pro .j-radio-toggle i:after,
  1609. .j-pro .j-checkbox-toggle i:after,
  1610. .j-pro .j-radio i:before,
  1611. .j-pro .j-checkbox i:before,
  1612. .j-pro .j-radio-toggle i:before,
  1613. .j-pro .j-checkbox-toggle i:before {
  1614. -webkit-box-sizing:content-box;
  1615. -moz-box-sizing:content-box;
  1616. box-sizing:content-box;
  1617. }