Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

j-pro-minimal.css 43KB

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