Dashboard sipadu mbip
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

j-forms.css 65KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459
  1. /* Font
  2. =============================== */
  3. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
  4. /*=================================================================*/
  5. /* Main */
  6. /*=================================================================*/
  7. /* Default
  8. =============================== */
  9. .wrapper {
  10. margin:0 auto;
  11. outline:none;
  12. padding:40px 15px;
  13. -webkit-box-sizing:content-box;
  14. -moz-box-sizing:content-box;
  15. box-sizing:content-box;
  16. }
  17. .wrapper-400 { max-width:400px; }
  18. .wrapper-640 { max-width:640px; }
  19. .j-forms {
  20. background-color:#f9fafd;
  21. -webkit-border-radius:3px;
  22. -moz-border-radius:3px;
  23. -o-border-radius:3px;
  24. border-radius:3px;
  25. -webkit-box-shadow:0 2px 5px rgba(0,0,0,.6);
  26. -moz-box-shadow:0 2px 5px rgba(0,0,0,.6);
  27. -o-box-shadow:0 2px 5px rgba(0,0,0,.6);
  28. box-shadow:0 2px 5px rgba(0,0,0,.6);
  29. -webkit-box-sizing:border-box;
  30. -moz-box-sizing:border-box;
  31. box-sizing:border-box;
  32. color:rgba(0,0,0,.54);
  33. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  34. line-height:1;
  35. position:relative;
  36. }
  37. .j-forms .input { position:relative; }
  38. .j-forms .unit { position:relative; margin-bottom:25px; }
  39. .j-forms .link {
  40. border-bottom:1px solid #90caf9;
  41. color:#1e88e5;
  42. font-size:14px;
  43. line-height:inherit;
  44. text-decoration:none;
  45. }
  46. .j-forms .link:hover { border-bottom:none; }
  47. .j-forms .inline-group { display:inline-block; }
  48. .j-forms .token,
  49. .j-forms .hidden { display:none; }
  50. /* Reset for -webkit / -moz browser
  51. =============================== */
  52. .j-forms input[type="search"]::-webkit-search-decoration,
  53. .j-forms input[type="search"]::-webkit-search-cancel-button,
  54. .j-forms input[type="search"]::-webkit-search-results-button,
  55. .j-forms input[type="search"]::-webkit-search-results-decoration { display:none; }
  56. .j-forms select,
  57. .j-forms input[type="button"],
  58. .j-forms input[type="submit"],
  59. .j-forms input[type="search"] {
  60. -webkit-tap-highlight-color:transparent;
  61. -webkit-tap-highlight-color:rgba(0,0,0,0);
  62. -webkit-appearance:none;
  63. -moz-appearance:none;
  64. appearance:none;
  65. -webkit-border-radius:0px;
  66. border-radius:0px;
  67. }
  68. /* Header
  69. =============================== */
  70. .j-forms .header {
  71. background-color:#3f51b5;
  72. border-top:1px solid #7986cb;
  73. -webkit-border-radius:3px 3px 0 0;
  74. -moz-border-radius:3px 3px 0 0;
  75. -o-border-radius:3px 3px 0 0;
  76. border-radius:3px 3px 0 0;
  77. -webkit-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
  78. -moz-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
  79. -o-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
  80. box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
  81. display:block;
  82. position:relative;
  83. }
  84. .j-forms .header > i {
  85. color:#fff;
  86. font-size:31px;
  87. float:left;
  88. padding:31px 15px 0 25px;
  89. }
  90. .j-forms .header p {
  91. color:#fff;
  92. margin:0;
  93. padding:30px 25px;
  94. font-size:30px;
  95. text-transform:uppercase;
  96. }
  97. /* Content
  98. =============================== */
  99. .j-forms .content { padding:25px 25px 0; }
  100. .j-forms .content:after {
  101. clear:both;
  102. content:".";
  103. display:block;
  104. height:0;
  105. visibility:hidden;
  106. }
  107. /* Footer
  108. =============================== */
  109. .j-forms .footer {
  110. background-color:#e8eaf6;
  111. border-top:1px solid #303f9f;
  112. -webkit-border-radius:0 0 3px 3px;
  113. -moz-border-radius:0 0 3px 3px;
  114. -o-border-radius:0 0 3px 3px;
  115. border-radius:0 0 3px 3px;
  116. display:block;
  117. padding:10px 25px;
  118. }
  119. .j-forms .footer:after {
  120. clear:both;
  121. content:".";
  122. display:block;
  123. height:0;
  124. visibility:hidden;
  125. }
  126. /* Dividers
  127. =============================== */
  128. .j-forms .divider,
  129. .j-forms .divider-text { border-top:1px solid rgba(0,0,0,.12); height:0; }
  130. .j-forms .divider-text { text-align:center; }
  131. .j-forms .divider-text span {
  132. border:1px solid rgba(0,0,0,.12);
  133. -webkit-border-radius:3px;
  134. -moz-border-radius:3px;
  135. -o-border-radius:3px;
  136. border-radius:3px;
  137. background-color:#f9fafd;
  138. color:#3f51b5;
  139. font-size:16px;
  140. padding:2px 15px;
  141. position:relative;
  142. top:-9px;
  143. white-space:nowrap;
  144. }
  145. /* Gap-top / gap-bottom classes
  146. =============================== */
  147. .j-forms .gap-top-20 { margin-top:20px; } /* text-divider top gap after "content"/"j-row" classes */
  148. .j-forms .gap-top-45 { margin-top:45px; } /* text-divider top gap after "unit" class */
  149. .j-forms .gap-bottom-45 { margin-bottom:45px; } /* text-divider bottom gap */
  150. .j-forms .gap-bottom-25 { margin-bottom:25px; } /* line-divider bottom gap */
  151. /* Labels
  152. =============================== */
  153. .j-forms label {
  154. display:block;
  155. color:inherit;
  156. font-weight:normal;
  157. text-align:left;
  158. margin-bottom:0;
  159. }
  160. .j-forms .label { font-size:14px; margin-bottom:6px; line-height:14px; height:14px; }
  161. .j-forms .label-center { height:48px; line-height:48px; text-align:center; margin-bottom:0; }
  162. .j-forms .j-row > .label{ padding-left:10px; }
  163. /* Radio and checkbox
  164. =============================== */
  165. .j-forms .radio,
  166. .j-forms .checkbox,
  167. .j-forms .radio-toggle,
  168. .j-forms .checkbox-toggle {
  169. color:rgba(0,0,0,.87);
  170. cursor:pointer;
  171. font-size:15px;
  172. height:15px;
  173. margin-bottom:4px;
  174. position:relative;
  175. line-height:15px;
  176. }
  177. .j-forms .radio,
  178. .j-forms .checkbox,
  179. .j-forms .inline-group .radio,
  180. .j-forms .inline-group .checkbox { padding:9px 0 8px 32px; }
  181. .j-forms .radio-toggle,
  182. .j-forms .checkbox-toggle,
  183. .j-forms .inline-group .radio-toggle,
  184. .j-forms .inline-group .checkbox-toggle { padding:9px 0 8px 58px; }
  185. .j-forms .radio:last-child,
  186. .j-forms .checkbox:last-child,
  187. .j-forms .radio-toggle:last-child,
  188. .j-forms .checkbox-toggle:last-child { margin-bottom:0; }
  189. .j-forms .inline-group .radio,
  190. .j-forms .inline-group .checkbox,
  191. .j-forms .inline-group .radio-toggle,
  192. .j-forms .inline-group .checkbox-toggle { display:inline-block; margin-right:25px; }
  193. .j-forms .radio input,
  194. .j-forms .checkbox input,
  195. .j-forms .radio-toggle input,
  196. .j-forms .checkbox-toggle input { position:absolute; left:-9999px; }
  197. .j-forms .radio i,
  198. .j-forms .checkbox i,
  199. .j-forms .checkbox-toggle i,
  200. .j-forms .radio-toggle i {
  201. background-color:#fff;
  202. border:2px solid rgba(0,0,0,.26);
  203. display:block;
  204. height:18px;
  205. left:0;
  206. outline:none;
  207. position:absolute;
  208. top:5px;
  209. -webkit-transition:border-color.2s;
  210. -moz-transition:border-color.2s;
  211. -ms-transition:border-color.2s;
  212. -o-transition:border-color.2s;
  213. transition:border-color.2s;
  214. }
  215. .j-forms .radio i,
  216. .j-forms .checkbox i { width:18px; }
  217. .j-forms .checkbox-toggle i,
  218. .j-forms .radio-toggle i { width:44px; }
  219. .j-forms .checkbox i,
  220. .j-forms .checkbox-toggle i {
  221. -webkit-border-radius:3px;
  222. -moz-border-radius:3px;
  223. -o-border-radius:3px;
  224. border-radius:3px;
  225. }
  226. .j-forms .radio i,
  227. .j-forms .radio i:after,
  228. .j-forms .radio-toggle i:before {
  229. -webkit-border-radius:50%;
  230. -moz-border-radius:50%;
  231. -o-border-radius:50%;
  232. border-radius:50%;
  233. }
  234. .j-forms .radio-toggle i {
  235. -webkit-border-radius:13px;
  236. -moz-border-radius:13px;
  237. -o-border-radius:13px;
  238. border-radius:13px;
  239. }
  240. .j-forms .checkbox-toggle i:before {
  241. -webkit-border-radius:2px;
  242. -moz-border-radius:2px;
  243. -o-border-radius:2px;
  244. border-radius:2px;
  245. }
  246. .j-forms .radio i:after {
  247. background-color:rgba(48,63,159,.9);
  248. content:"";
  249. height:8px;
  250. top:5px;
  251. left:5px;
  252. opacity:0;
  253. position:absolute;
  254. width:8px;
  255. }
  256. .j-forms .checkbox i:after {
  257. border-width:0 0 3px 3px;
  258. border-bottom:solid rgb(48,63,159);
  259. border-left:solid rgb(48,63,159);
  260. content:"";
  261. height:5px;
  262. top:3px;
  263. -webkit-transform:rotate(-45deg);
  264. -moz-transform:rotate(-45deg);
  265. -ms-transform:rotate(-45deg);
  266. -o-transform:rotate(-45deg);
  267. transform:rotate(-45deg);
  268. left:3px;
  269. opacity:0;
  270. position:absolute;
  271. width:10px;
  272. }
  273. .j-forms .radio input:checked + i:after,
  274. .j-forms .checkbox input:checked + i:after { opacity:1; }
  275. .j-forms .checkbox-toggle i:before,
  276. .j-forms .radio-toggle i:before {
  277. border:none;
  278. background-color:rgba(48,63,159,.9);
  279. content:"";
  280. display:block;
  281. height:14px;
  282. left:2px;
  283. position:absolute;
  284. top:2px;
  285. width:14px;
  286. }
  287. .j-forms .checkbox-toggle input:checked + i:before,
  288. .j-forms .radio-toggle input:checked + i:before { left:28px; }
  289. .j-forms .checkbox-toggle i:after,
  290. .j-forms .radio-toggle i:after,
  291. .j-forms .checkbox-toggle input:checked + i:after,
  292. .j-forms .radio-toggle input:checked + i:after {
  293. font-size:10px;
  294. font-style:normal;
  295. font-weight:bold;
  296. line-height:10px;
  297. position:absolute;
  298. top:4px;
  299. }
  300. .j-forms .checkbox-toggle i:after,
  301. .j-forms .radio-toggle i:after { content:"NO"; left:22px; }
  302. .j-forms .checkbox-toggle input:checked + i:after,
  303. .j-forms .radio-toggle input:checked + i:after { content:"YES"; left:6px; }
  304. .j-forms .checkbox:hover i,
  305. .j-forms .radio:hover i,
  306. .j-forms .checkbox-toggle:hover i,
  307. .j-forms .radio-toggle:hover i { border:2px solid rgba(48,63,159,.6); }
  308. .j-forms .radio input:checked + i,
  309. .j-forms .checkbox input:checked + i,
  310. .j-forms .radio-toggle input:checked + i,
  311. .j-forms .checkbox-toggle input:checked + i { border:2px solid rgba(48,63,159,.9); }
  312. .j-forms .radio input:checked + i,
  313. .j-forms .checkbox input:checked + i { color:rgba(48,63,159,.9); }
  314. .j-forms .checkbox-toggle input:checked + i,
  315. .j-forms .radio-toggle input:checked + i { background-color:#e8eaf6; }
  316. /* Widget
  317. =============================== */
  318. .j-forms .widget { position: relative; }
  319. .j-forms .widget .addon,
  320. .j-forms .widget .addon-btn {
  321. background:#e0e0e0;
  322. border:none;
  323. color:rgba(0,0,0,.56);
  324. display:block;
  325. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  326. height:48px;
  327. line-height:48px;
  328. padding:0;
  329. position:absolute;
  330. outline:none;
  331. overflow:hidden;
  332. text-align:center;
  333. top:0;
  334. z-index:5;
  335. }
  336. .j-forms .widget .addon-btn,
  337. .j-forms .widget .addon-btn i {
  338. cursor:pointer;
  339. -webkit-transition:all.2s;
  340. -moz-transition:all.2s;
  341. -ms-transition:all.2s;
  342. -o-transition:all.2s;
  343. transition:all.2s;
  344. }
  345. .j-forms .widget .addon-btn:hover,
  346. .j-forms .widget .addon-btn:focus { background-color:#d6d6d6; color:rgba(0,0,0,.87); }
  347. .j-forms .widget .addon-btn:hover i,
  348. .j-forms .widget .addon-btn:focus i { color:rgba(0,0,0,.61); }
  349. .j-forms .widget .adn-left { left:0; }
  350. .j-forms .widget .adn-right { right:0; }
  351. .j-forms .widget .addon i,
  352. .j-forms .widget .addon-btn i { color:rgba(0,0,0,.34); font-size:17px; z-index:2; }
  353. .j-forms .widget .adn-50 { width:50px; }
  354. .j-forms .widget .adn-130 { width:130px; }
  355. .j-forms .widget.right-50 .input { padding-right:50px; }
  356. .j-forms .widget.left-50 .input { padding-left:50px; }
  357. .j-forms .widget.right-130 .input { padding-right:130px; }
  358. .j-forms .widget.left-130 .input { padding-left:130px; }
  359. .j-forms .widget .adn-left,
  360. .j-forms .widget.right-50 .input input,
  361. .j-forms .widget.right-130 .input input {
  362. -webkit-border-radius:3px 0 0 3px;
  363. -moz-border-radius:3px 0 0 3px;
  364. -o-border-radius:3px 0 0 3px;
  365. border-radius:3px 0 0 3px;
  366. }
  367. .j-forms .widget .adn-right,
  368. .j-forms .widget.left-50 .input input,
  369. .j-forms .widget.left-130 .input input {
  370. -webkit-border-radius:0 3px 3px 0;
  371. -moz-border-radius:0 3px 3px 0;
  372. -o-border-radius:0 3px 3px 0;
  373. border-radius:0 3px 3px 0;
  374. }
  375. .j-forms .widget.left-50.right-50 .input input,
  376. .j-forms .widget.left-50.right-130 .input input,
  377. .j-forms .widget.left-130.right-50 .input input,
  378. .j-forms .widget.left-130.right-130 .input input {
  379. -webkit-border-radius:0;
  380. -moz-border-radius:0;
  381. -o-border-radius:0;
  382. border-radius:0;
  383. }
  384. /* Inputs
  385. =============================== */
  386. .j-forms input[type="text"],
  387. .j-forms input[type="password"],
  388. .j-forms input[type="email"],
  389. .j-forms input[type="search"],
  390. .j-forms input[type="url"],
  391. .j-forms textarea,
  392. .j-forms select {
  393. background:#fff;
  394. border:2px solid rgba(0,0,0,.12);
  395. -webkit-border-radius:3px;
  396. -moz-border-radius:3px;
  397. -o-border-radius:3px;
  398. border-radius:3px;
  399. color:rgba(0,0,0,.87);
  400. display:block;
  401. font-family:inherit;
  402. font-size:16px;
  403. height:48px;
  404. padding:10px 15px;
  405. width:100%;
  406. outline:none;
  407. -webkit-appearance:none;
  408. -moz-appearance:none;
  409. appearance:none;
  410. -webkit-box-sizing:border-box;
  411. -moz-box-sizing:border-box;
  412. box-sizing:border-box;
  413. -webkit-transition:all.4s;
  414. -moz-transition:all.4s;
  415. -ms-transition:all.4s;
  416. -o-transition:all.4s;
  417. transition:all.4s;
  418. }
  419. .j-forms input[type="text"]:hover,
  420. .j-forms input[type="password"]:hover,
  421. .j-forms input[type="email"]:hover,
  422. .j-forms input[type="search"]:hover,
  423. .j-forms input[type="url"]:hover,
  424. .j-forms textarea:hover,
  425. .j-forms select:hover { border:2px solid rgba(48,63,159,.6); }
  426. .j-forms input[type="text"]:focus,
  427. .j-forms input[type="password"]:focus,
  428. .j-forms input[type="email"]:focus,
  429. .j-forms input[type="search"]:focus,
  430. .j-forms input[type="url"]:focus,
  431. .j-forms textarea:focus,
  432. .j-forms select:focus { border:2px solid rgba(48,63,159,.9); }
  433. .j-forms .input textarea {
  434. height:112px;
  435. overflow:auto;
  436. min-height:52px;
  437. resize:vertical;
  438. }
  439. .j-forms .input textarea:focus { height:128px; }
  440. /* Placeholders
  441. =============================== */
  442. .j-forms input::-webkit-input-placeholder,
  443. .j-forms textarea::-webkit-input-placeholder { color:rgba(0,0,0,.54); }
  444. .j-forms input::-moz-placeholder,
  445. .j-forms textarea::-moz-placeholder { color:rgba(0,0,0,.54); }
  446. .j-forms input:-moz-placeholder,
  447. .j-forms textarea:-moz-placeholder { color:rgba(0,0,0,.54); }
  448. .j-forms input:-ms-input-placeholder,
  449. .j-forms textarea:-ms-input-placeholder { color:rgba(0,0,0,.54); }
  450. .j-forms input:focus::-webkit-input-placeholder,
  451. .j-forms textarea:focus::-webkit-input-placeholder { color:rgba(0,0,0,.36); }
  452. .j-forms input:focus::-moz-placeholder,
  453. .j-forms textarea:focus::-moz-placeholder { color:rgba(0,0,0,.36); }
  454. .j-forms input:focus:-moz-placeholder,
  455. .j-forms textarea:focus:-moz-placeholder { color:rgba(0,0,0,.36); }
  456. .j-forms input:focus:-ms-input-placeholder,
  457. .j-forms textarea:focus:-ms-input-placeholder { color:rgba(0,0,0,.36); }
  458. /* Select
  459. =============================== */
  460. .j-forms select { padding-left:13px; }
  461. .j-forms .multiple-select select { height:auto; }
  462. .j-forms .select i {
  463. background:#fff;
  464. -webkit-box-shadow:0 0 0 11px #fff;
  465. -moz-box-shadow:0 0 0 11px #fff;
  466. -o-box-shadow:0 0 0 11px #fff;
  467. box-shadow:0 0 0 11px #fff;
  468. height:20px;
  469. position:absolute;
  470. pointer-events:none;
  471. top:14px;
  472. right:14px;
  473. width:14px;
  474. }
  475. .j-forms .select i:after,
  476. .j-forms .select i:before {
  477. border-right:4px solid transparent;
  478. border-left:4px solid transparent;
  479. content:'';
  480. position:absolute;
  481. right:3px;
  482. }
  483. .j-forms .select i:after { border-top:6px solid rgba(0,0,0,.4); bottom:1px; }
  484. .j-forms .select i:before { border-bottom:6px solid rgba(0,0,0,.4); top:3px; }
  485. .j-forms .select { position:relative; }
  486. /* Icons
  487. =============================== */
  488. .j-forms .icon-left,
  489. .j-forms .icon-right {
  490. color:rgba(0,0,0,.54);
  491. font-size:17px;
  492. height:38px;
  493. line-height:38px !important;
  494. opacity:.6;
  495. position:absolute;
  496. text-align:center;
  497. top:5px;
  498. width:42px;
  499. z-index:2;
  500. }
  501. .j-forms .icon-left { border-right:1px solid rgba(0,0,0,.54); left:3px; }
  502. .j-forms .icon-right { border-left:1px solid rgba(0,0,0,.54); right:3px; }
  503. .j-forms .icon-left ~ input,
  504. .j-forms .icon-left ~ textarea { padding-left:58px; }
  505. .j-forms .icon-right ~ input,
  506. .j-forms .icon-right ~ textarea { padding-right:58px; }
  507. /* File for upload
  508. =============================== */
  509. .j-forms .file-button input {
  510. bottom:-1px;
  511. font-size:34px;
  512. opacity:0;
  513. position:absolute;
  514. width:108px;
  515. z-index:0;
  516. }
  517. .j-forms .prepend-small-btn .file-button input,
  518. .j-forms .prepend-big-btn .file-button input { left:0; }
  519. .j-forms .append-small-btn .file-button input,
  520. .j-forms .append-big-btn .file-button input { right:0; }
  521. .j-forms .prepend-small-btn .file-button,
  522. .j-forms .append-small-btn .file-button { width:64px; }
  523. .j-forms .prepend-big-btn .file-button,
  524. .j-forms .append-big-btn .file-button { width:106px; }
  525. .j-forms .prepend-small-btn .file-button,
  526. .j-forms .prepend-big-btn .file-button { left:4px; }
  527. .j-forms .append-small-btn .file-button,
  528. .j-forms .append-big-btn .file-button { right:4px; }
  529. .j-forms .append-small-btn .file-button,
  530. .j-forms .append-big-btn .file-button,
  531. .j-forms .prepend-small-btn .file-button,
  532. .j-forms .prepend-big-btn .file-button {
  533. -webkit-border-radius:2px;
  534. -moz-border-radius:2px;
  535. -o-border-radius:2px;
  536. border-radius:2px;
  537. }
  538. .j-forms .prepend-big-btn input[type="text"] { padding-left:123px; }
  539. .j-forms .append-big-btn input[type="text"] { padding-right:123px; }
  540. .j-forms .prepend-small-btn input[type="text"] { padding-left:81px; }
  541. .j-forms .append-small-btn input[type="text"] { padding-right:81px; }
  542. .j-forms .input input[type="file"] { cursor:pointer; }
  543. /* Buttons
  544. =============================== */
  545. .j-forms .primary-btn,
  546. .j-forms .secondary-btn {
  547. border:none;
  548. -webkit-border-radius:3px;
  549. -moz-border-radius:3px;
  550. -o-border-radius:3px;
  551. border-radius:3px;
  552. color:#fff;
  553. display:block;
  554. cursor:pointer;
  555. float:right;
  556. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  557. height:48px;
  558. margin:10px 0 10px 20px;
  559. outline:none;
  560. padding:0 25px;
  561. white-space:nowrap;
  562. }
  563. .j-forms .primary-btn { position:relative; }
  564. .j-forms .content .primary-btn,
  565. .j-forms .content .secondary-btn { margin:0 0 20px 20px; }
  566. .j-forms .file-button {
  567. color:#fff;
  568. display:block;
  569. font-family:'Open Sans',Helvetica,Arial,sans-serif;
  570. font-size:14px;
  571. height:40px;
  572. line-height:40px;
  573. outline:none;
  574. overflow:hidden;
  575. position:absolute;
  576. text-align:center;
  577. top:4px;
  578. z-index:1;
  579. }
  580. .j-forms .primary-btn,
  581. .j-forms .file-button,
  582. .j-forms .secondary-btn {
  583. background:#303f9f;
  584. -webkit-transition:background.2s;
  585. -moz-transition:background.2s;
  586. -ms-transition:background.2s;
  587. -o-transition:background.2s;
  588. transition:background.2s;
  589. }
  590. .j-forms .primary-btn:hover,
  591. .j-forms .file-button:hover,
  592. .j-forms .secondary-btn:hover { background:#3f51b5; }
  593. .j-forms .primary-btn:hover.processing { background:#303f9f; cursor:wait; }
  594. .j-forms .file-button:hover + input { border:2px solid rgba(48,63,159,.6); }
  595. .j-forms .secondary-btn,
  596. .j-forms .secondary-btn:hover,
  597. .j-forms .secondary-btn:active { opacity:.5; }
  598. .j-forms .primary-btn.processing:before {
  599. background:rgba(255,255,255,.4);
  600. content:'';
  601. height:100%;
  602. position:absolute;
  603. top:0;
  604. left:0;
  605. width:100%;
  606. -webkit-animation:processing 3s ease-in-out infinite;
  607. -moz-animation:processing 3s ease-in-out infinite;;
  608. -ms-animation:processing 3s ease-in-out infinite;
  609. -o-animation:processing 3s ease-in-out infinite;
  610. animation:processing 3s ease-in-out infinite;
  611. }
  612. @-webkit-keyframes processing {
  613. 0% { width:0; }
  614. 100% { width:100%; }
  615. }
  616. @-moz-keyframes processing {
  617. 0% { width:0; }
  618. 100% { width:100%; }
  619. }
  620. @-ms-keyframes processing {
  621. 0% { width:0; }
  622. 100% { width:100%; }
  623. }
  624. @-o-keyframes processing {
  625. 0% { width:0; }
  626. 100% { width:100%; }
  627. }
  628. @keyframes processing {
  629. 0% { width:0; }
  630. 100% { width:100%; }
  631. }
  632. /* Tooltip
  633. =============================== */
  634. .j-forms .tooltip,
  635. .j-forms .tooltip-image {
  636. background-color:#1a237e;
  637. -webkit-border-radius:3px;
  638. -moz-border-radius:3px;
  639. -o-border-radius:3px;
  640. border-radius:3px;
  641. display:block;
  642. left:-9999px;
  643. opacity:0;
  644. position:absolute;
  645. z-index:20px;
  646. }
  647. .j-forms .tooltip {
  648. color:#fff;
  649. font:600 13px 'Open Sans',Helvetica,Arial,sans-serif;
  650. line-height:20px;
  651. padding:5px 10px;
  652. }
  653. .j-forms .tooltip-image { padding:2px 2px 1px; }
  654. .j-forms .input input:focus + .tooltip,
  655. .j-forms .input textarea:focus + .tooltip,
  656. .j-forms .select select:focus + .tooltip,
  657. .j-forms .input input:focus + .tooltip-image,
  658. .j-forms .input textarea:focus + .tooltip-image,
  659. .j-forms .select select:focus + .tooltip-image { opacity:1; z-index:5; }
  660. .j-forms .tooltip-left-top { bottom:100%; margin-bottom:8px; }
  661. .j-forms .tooltip-left-top:before {
  662. border-color:#1a237e transparent;
  663. border-style:solid;
  664. border-width:8px 7px 0;
  665. bottom:-6px;
  666. content:"";
  667. left:16px;
  668. position:absolute;
  669. }
  670. .j-forms .input input:focus + .tooltip-left-top,
  671. .j-forms .input textarea:focus + .tooltip-left-top,
  672. .j-forms .select select:focus + .tooltip-left-top { left:0; right:auto; }
  673. .j-forms .tooltip-right-top { bottom:100%; margin-bottom:8px; }
  674. .j-forms .tooltip-right-top:before {
  675. border-color:#1a237e transparent;
  676. border-style:solid;
  677. border-width:8px 7px 0;
  678. bottom:-6px;
  679. content:"";
  680. position:absolute;
  681. right:16px;
  682. }
  683. .j-forms .input input:focus + .tooltip-right-top,
  684. .j-forms .input textarea:focus + .tooltip-right-top,
  685. .j-forms .select select:focus + .tooltip-right-top { left:auto; right:0; }
  686. .j-forms .tooltip-left-bottom { margin-top:8px; top:100%; }
  687. .j-forms .tooltip-left-bottom:before {
  688. border-color:#1a237e transparent;
  689. border-style:solid;
  690. border-width:0 7px 8px;
  691. top:-6px;
  692. content:"";
  693. left:16px;
  694. position:absolute;
  695. }
  696. .j-forms .input input:focus + .tooltip-left-bottom,
  697. .j-forms .input textarea:focus + .tooltip-left-bottom,
  698. .j-forms .select select:focus + .tooltip-left-bottom { left:0; right:auto; }
  699. .j-forms .tooltip-right-bottom { margin-top:8px; top:100%; }
  700. .j-forms .tooltip-right-bottom:before {
  701. border-color:#1a237e transparent;
  702. border-style:solid;
  703. border-width:0 7px 8px;
  704. top:-6px;
  705. content:"";
  706. right:16px;
  707. position:absolute;
  708. }
  709. .j-forms .input input:focus + .tooltip-right-bottom,
  710. .j-forms .input textarea:focus + .tooltip-right-bottom,
  711. .j-forms .select select:focus + .tooltip-right-bottom { left:auto; right:0; }
  712. .j-forms .tooltip-right-side { margin-left:8px; top:8px; white-space:nowrap; }
  713. .j-forms .tooltip-right-side:before {
  714. border-color:transparent #1a237e;
  715. border-style:solid;
  716. border-width:7px 8px 7px 0;
  717. content:"";
  718. left:-6px;
  719. position:absolute;
  720. top:8px;
  721. }
  722. .j-forms .input input:focus + .tooltip-right-side,
  723. .j-forms .input textarea:focus + .tooltip-right-side,
  724. .j-forms .select select:focus + .tooltip-right-side { left:100%; }
  725. .j-forms .tooltip-left-side { margin-right:8px; top:8px; white-space:nowrap; }
  726. .j-forms .tooltip-left-side:before {
  727. border-color:transparent #1a237e;
  728. border-style:solid;
  729. border-width:7px 0 7px 8px;
  730. content:"";
  731. right:-6px;
  732. position:absolute;
  733. top:8px;
  734. }
  735. .j-forms .input input:focus + .tooltip-left-side,
  736. .j-forms .input textarea:focus + .tooltip-left-side,
  737. .j-forms .select select:focus + .tooltip-left-side { left:auto; right:100%; }
  738. /* Status message
  739. =============================== */
  740. .j-forms .error-message,
  741. .j-forms .success-message,
  742. .j-forms .info-message,
  743. .j-forms .warning-message {
  744. border:2px solid;
  745. -webkit-border-radius:3px;
  746. -moz-border-radius:3px;
  747. -o-border-radius:3px;
  748. border-radius:3px;
  749. display:block;
  750. font:16px/24px 'Open Sans',Helvetica,Arial,sans-serif;
  751. padding:15px;
  752. }
  753. .j-forms .error-message i,
  754. .j-forms .success-message i,
  755. .j-forms .info-message i,
  756. .j-forms .warning-message i {
  757. font-size:18px;
  758. float:left;
  759. height:24px;
  760. line-height:24px;
  761. padding-right:10px;
  762. }
  763. .j-forms .error-message ul,
  764. .j-forms .success-message ul,
  765. .j-forms .info-message ul,
  766. .j-forms .warning-message ul { margin:0; }
  767. .j-forms span.error-view,
  768. .j-forms span.success-view,
  769. .j-forms span.warning-view,
  770. .j-forms span.info-view {
  771. display:block;
  772. font-size:14px;
  773. height:14px;
  774. line-height:14px;
  775. margin-top:5px;
  776. padding:0 2px;
  777. }
  778. .j-forms span.hint {
  779. display:block;
  780. font-size:13px;
  781. color:inherit;
  782. height:13px;
  783. line-height:13px;
  784. margin-top:5px;
  785. padding:0 2px;
  786. }
  787. /* Disabled state
  788. =============================== */
  789. .j-forms .widget.disabled-view,
  790. .j-forms .input.disabled-view,
  791. .j-forms .select.disabled-view,
  792. .j-forms .checkbox.disabled-view,
  793. .j-forms .radio.disabled-view,
  794. .j-forms .checkbox-toggle.disabled-view,
  795. .j-forms .radio-toggle.disabled-view,
  796. .j-forms .primary-btn.disabled-view,
  797. .j-forms .secondary-btn.disabled-view,
  798. .j-forms .file-button.disabled-view { cursor:default; opacity:.5; }
  799. .j-forms .input.disabled-view input[type="file"] { cursor:default; }
  800. .j-forms .widget.disabled-view input,
  801. .j-forms .input.disabled-view input,
  802. .j-forms .input.disabled-view textarea,
  803. .j-forms .select.disabled-view select { border-color:rgba(0,0,0,.12) !important; }
  804. .j-forms .checkbox.disabled-view i,
  805. .j-forms .radio.disabled-view i,
  806. .j-forms .checkbox-toggle.disabled-view i,
  807. .j-forms .radio-toggle.disabled-view i { border-color:rgba(0,0,0,.26) !important; }
  808. .j-forms .primary-btn.disabled-view,
  809. .j-forms .secondary-btn.disabled-view,
  810. .j-forms .disabled-view .file-button { background:#303f9f; }
  811. .j-forms .widget.disabled-view .addon-btn:hover,
  812. .j-forms .widget.disabled-view .addon-btn:focus { background:#e0e0e0; cursor:default; color:rgba(0,0,0,.56); }
  813. .j-forms .widget.disabled-view .addon-btn i { color:rgba(0,0,0,.24) !important; }
  814. /* Error state
  815. =============================== */
  816. .j-forms .error-view .checkbox i,
  817. .j-forms .error-view .radio i,
  818. .j-forms .error-view .checkbox-toggle i,
  819. .j-forms .error-view .radio-toggle i,
  820. .j-forms .error-view input,
  821. .j-forms .error-view select,
  822. .j-forms .error-view textarea { background:#ffebee !important; }
  823. .j-forms .select.error-view i {
  824. background-color:#ffebee;
  825. -webkit-box-shadow:0 0 0 12px #ffebee;
  826. -moz-box-shadow:0 0 0 12px #ffebee;
  827. -o-box-shadow:0 0 0 12px #ffebee;
  828. box-shadow:0 0 0 12px #ffebee;
  829. }
  830. .j-forms .error-view .icon-left,
  831. .j-forms .error-view .icon-right { border-color:#e57373; }
  832. .j-forms .error-view .icon-left,
  833. .j-forms .error-view .icon-right,
  834. .j-forms span.error-view,
  835. .j-forms .error-message i { color:#b71c1c; }
  836. .j-forms .error-message { background:#ffebee; border-color:#b71c1c; color:#b71c1c; }
  837. /* Success state
  838. =============================== */
  839. .j-forms .success-view .checkbox i,
  840. .j-forms .success-view .radio i,
  841. .j-forms .success-view .checkbox-toggle i,
  842. .j-forms .success-view .radio-toggle i,
  843. .j-forms .success-view input,
  844. .j-forms .success-view select,
  845. .j-forms .success-view textarea { background:#e8f5e9 !important; }
  846. .j-forms .select.success-view i {
  847. background-color:#e8f5e9;
  848. -webkit-box-shadow:0 0 0 12px #e8f5e9;
  849. -moz-box-shadow:0 0 0 12px #e8f5e9;
  850. -o-box-shadow:0 0 0 12px #e8f5e9;
  851. box-shadow:0 0 0 12px #e8f5e9;
  852. }
  853. .j-forms .success-view .icon-left,
  854. .j-forms .success-view .icon-right { border-color:#81c784; }
  855. .j-forms .success-view .icon-left,
  856. .j-forms .success-view .icon-right,
  857. .j-forms span.success-view,
  858. .j-forms .success-message i { color:#1b5e20; }
  859. .j-forms .success-message { background:#e8f5e9; border-color:#1b5e20; color:#1b5e20; }
  860. /* Warning state
  861. =============================== */
  862. .j-forms .warning-view .checkbox i,
  863. .j-forms .warning-view .radio i,
  864. .j-forms .warning-view .checkbox-toggle i,
  865. .j-forms .warning-view .radio-toggle i,
  866. .j-forms .warning-view input,
  867. .j-forms .warning-view select,
  868. .j-forms .warning-view textarea { background:#fff8e1 !important; }
  869. .j-forms .select.warning-view i {
  870. background-color:#fff8e1;
  871. -webkit-box-shadow:0 0 0 12px #fff8e1;
  872. -moz-box-shadow:0 0 0 12px #fff8e1;
  873. -o-box-shadow:0 0 0 12px #fff8e1;
  874. box-shadow:0 0 0 12px #fff8e1;
  875. }
  876. .j-forms .warning-view .icon-left,
  877. .j-forms .warning-view .icon-right { border-color:#f9a825; }
  878. .j-forms .warning-view .icon-left,
  879. .j-forms .warning-view .icon-right,
  880. .j-forms span.warning-view,
  881. .j-forms .warning-message i { color:#f57f17; }
  882. .j-forms .warning-message { background:#fff8e1; border-color:#f57f17; color:#f57f17; }
  883. /* Info state
  884. =============================== */
  885. .j-forms .info-view .checkbox i,
  886. .j-forms .info-view .radio i,
  887. .j-forms .info-view .checkbox-toggle i,
  888. .j-forms .info-view .radio-toggle i,
  889. .j-forms .info-view input,
  890. .j-forms .info-view select,
  891. .j-forms .info-view textarea { background:#e1f5fe !important; }
  892. .j-forms .select.info-view i {
  893. background-color:#e1f5fe;
  894. -webkit-box-shadow:0 0 0 12px #e1f5fe;
  895. -moz-box-shadow:0 0 0 12px #e1f5fe;
  896. -o-box-shadow:0 0 0 12px #e1f5fe;
  897. box-shadow:0 0 0 12px #e1f5fe;
  898. }
  899. .j-forms .info-view .icon-left,
  900. .j-forms .info-view .icon-right { border-color:#0288d1; }
  901. .j-forms .info-view .icon-left,
  902. .j-forms .info-view .icon-right,
  903. .j-forms span.info-view,
  904. .j-forms .info-message i { color:#01579b; }
  905. .j-forms .info-message { background:#e1f5fe; border-color:#01579b; color:#01579b; }
  906. /* Ratings
  907. ==================================== */
  908. .j-forms .rating-group { color:rgba(0,0,0,.87); height:30px; line-height:30px; margin-bottom:4px; }
  909. .j-forms .rating-group:last-child { margin-bottom:0; }
  910. .j-forms .rating-group .label { float:left; font-size:16px; height:30px; line-height:30px; margin-bottom:0; }
  911. .j-forms .rating-group .ratings { float:right; height:30px; line-height:30px; }
  912. .j-forms .ratings input { left:-9999px; position:absolute; }
  913. .j-forms .ratings input + label {
  914. color:rgba(0,0,0,.26);
  915. cursor:pointer;
  916. font-size:20px;
  917. float:right;
  918. padding:0 2px;
  919. -webkit-transition:color.2s;
  920. -moz-transition:color.2s;
  921. -ms-transition:color.2s;
  922. -o-transition:color.2s;
  923. transition:color.2s;
  924. }
  925. .j-forms .ratings input + label:hover,
  926. .j-forms .ratings input + label:hover ~ label,
  927. .j-forms .ratings input:checked + label,
  928. .j-forms .ratings input:checked + label ~ label { color:#303f9f; }
  929. /* Social links
  930. ==================================== */
  931. .j-forms .social-btn,
  932. .j-forms .social-icon { margin-bottom:6px; position:relative; }
  933. .j-forms .social-icon { display:inline-block; margin-left:2px; margin-right:2px; }
  934. .j-forms .social-center { text-align:center; }
  935. .j-forms .social-btn i,
  936. .j-forms .social-icon i {
  937. background-color:rgba(0,0,0,.15);
  938. color:#fff;
  939. cursor:pointer;
  940. font-size:22px;
  941. left:0;
  942. line-height:48px;
  943. position:absolute;
  944. text-align:center;
  945. width:48px;
  946. z-index:2;
  947. }
  948. .j-forms .social-btn i {
  949. -webkit-border-radius:3px 0 0 3px;
  950. -moz-border-radius:3px 0 0 3px;
  951. -o-border-radius:3px 0 0 3px;
  952. border-radius:3px 0 0 3px;
  953. }
  954. .j-forms .social-icon i {
  955. -webkit-border-radius:3px;
  956. -moz-border-radius:3px;
  957. -o-border-radius:3px;
  958. border-radius:3px;
  959. }
  960. .j-forms .social-btn button,
  961. .j-forms .social-icon button {
  962. -webkit-border-radius:3px;
  963. -moz-border-radius:3px;
  964. -o-border-radius:3px;
  965. border-radius:3px;
  966. border:none;
  967. color:#fff;
  968. cursor:pointer;
  969. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  970. padding:0 0 0 48px;
  971. outline:none;
  972. overflow:hidden;
  973. height:48px;
  974. white-space:nowrap;
  975. -webkit-transition:background.2s;
  976. -moz-transition:background.2s;
  977. -ms-transition:background.2s;
  978. -o-transition:background.2s;
  979. transition:background.2s;
  980. }
  981. .j-forms .social-btn button { width:100%; }
  982. .j-forms .social-icon button { width:48px; }
  983. .j-forms .social-btn.vk button,
  984. .j-forms .social-icon.vk button { background:rgb(47,80,112); }
  985. .j-forms .social-btn.vk:hover button,
  986. .j-forms .social.vk:hover button { background:rgba(47,80,112,.85); }
  987. .j-forms .social-btn.skype button,
  988. .j-forms .social-icon.skype button { background:rgb(19,176,237); }
  989. .j-forms .social-btn.skype:hover button,
  990. .j-forms .social-icon.skype:hover button { background:rgba(19,176,237,.85); }
  991. .j-forms .social-btn.yahoo button,
  992. .j-forms .social-icon.yahoo button { background:rgb(112,14,156); }
  993. .j-forms .social-btn.yahoo:hover button,
  994. .j-forms .social-icon.yahoo:hover button { background:rgba(112,14,156,.85); }
  995. .j-forms .social-btn.flickr button,
  996. .j-forms .social-icon.flickr button { background:rgb(254,59,147); }
  997. .j-forms .social-btn.flickr:hover button,
  998. .j-forms .social-icon.flickr:hover button { background:rgba(254,59,147,.85); }
  999. .j-forms .social-btn.tumblr button,
  1000. .j-forms .social-icon.tumblr button { background:rgb(56,72,83); }
  1001. .j-forms .social-btn.tumblr:hover button,
  1002. .j-forms .social-icon.tumblr:hover button { background:rgba(56,72,83,.85); }
  1003. .j-forms .social-btn.google button,
  1004. .j-forms .social-icon.google button { background:rgb(8,104,185); }
  1005. .j-forms .social-btn.google:hover button,
  1006. .j-forms .social-icon.google:hover button { background:rgba(8,104,185,.85); }
  1007. .j-forms .social-btn.twitter button,
  1008. .j-forms .social-icon.twitter button { background:rgb(44,168,210); }
  1009. .j-forms .social-btn.twitter:hover button,
  1010. .j-forms .social-icon.twitter:hover button { background:rgba(44,168,210,.85); }
  1011. .j-forms .social-btn.youtube button,
  1012. .j-forms .social-icon.youtube button { background:rgb(206,51,44); }
  1013. .j-forms .social-btn.youtube:hover button,
  1014. .j-forms .social-icon.youtube:hover button { background:rgba(206,51,44,.85); }
  1015. .j-forms .social-btn.facebook button,
  1016. .j-forms .social-icon.facebook button { background:rgb(48,88,145); }
  1017. .j-forms .social-btn.facebook:hover button,
  1018. .j-forms .social-icon.facebook:hover button { background:rgba(48,88,145,.85); }
  1019. .j-forms .social-btn.linkedin button,
  1020. .j-forms .social-icon.linkedin button { background:rgb(68,152,200); }
  1021. .j-forms .social-btn.linkedin:hover button,
  1022. .j-forms .social-icon.linkedin:hover button { background:rgba(68,152,200,.85); }
  1023. .j-forms .social-btn.pinterest button,
  1024. .j-forms .social-icon.pinterest button { background:rgb(200,40,40); }
  1025. .j-forms .social-btn.pinterest:hover button,
  1026. .j-forms .social-icon.pinterest:hover button { background:rgba(200,40,40,.85); }
  1027. .j-forms .social-btn.google-plus button,
  1028. .j-forms .social-icon.google-plus button { background:rgb(206,77,57); }
  1029. .j-forms .social-btn.google-plus:hover button,
  1030. .j-forms .social-icon.google-plus:hover button { background:rgba(206,77,57,.85); }
  1031. /* Captcha
  1032. =============================== */
  1033. .j-forms .captcha-group { position: relative; }
  1034. .j-forms .captcha-group .captcha {
  1035. background-color:#e0e0e0;
  1036. border:none;
  1037. -webkit-border-radius:3px 0 0 3px;
  1038. -moz-border-radius:3px 0 0 3px;
  1039. -o-border-radius:3px 0 0 3px;
  1040. border-radius:3px 0 0 3px;
  1041. height:48px;
  1042. line-height:48px;
  1043. position:absolute;
  1044. outline:none;
  1045. text-align:center;
  1046. top:0;
  1047. width:90px;
  1048. }
  1049. .j-forms .captcha-group .input { padding-left:90px; }
  1050. .j-forms .captcha-group .input input {
  1051. -webkit-border-radius:0 3px 3px 0;
  1052. -moz-border-radius:0 3px 3px 0;
  1053. -o-border-radius:0 3px 3px 0;
  1054. border-radius:0 3px 3px 0;
  1055. }
  1056. /* Stepper
  1057. =============================== */
  1058. .j-forms .stepper { position:relative; padding-right:40px; }
  1059. .j-forms .stepper input {
  1060. -webkit-border-radius:3px 0 0 3px;
  1061. -moz-border-radius:3px 0 0 3px;
  1062. -o-border-radius:3px 0 0 3px;
  1063. border-radius:3px 0 0 3px;
  1064. }
  1065. .j-forms .stepper .stepper-wrapper {
  1066. -webkit-border-radius:0 3px 3px 0;
  1067. -moz-border-radius:0 3px 3px 0;
  1068. -o-border-radius:0 3px 3px 0;
  1069. border-radius:0 3px 3px 0;
  1070. bottom:0;
  1071. outline:none;
  1072. position:absolute;
  1073. right:0;
  1074. top:0;
  1075. overflow:hidden;
  1076. width:40px;
  1077. }
  1078. .j-forms .stepper input::-webkit-inner-spin-button,
  1079. .j-forms .stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  1080. .j-forms .stepper .stepper-arrow {
  1081. background-color:#e0e0e0;
  1082. cursor:pointer;
  1083. display:block;
  1084. height:50%;
  1085. -webkit-transition:background-color.4s;
  1086. -moz-transition:background-color.4s;
  1087. -ms-transition:background-color.4s;
  1088. -o-transition:background-color.4s;
  1089. transition:background-color.4s;
  1090. }
  1091. .j-forms .stepper .stepper-arrow:hover { background-color:#d6d6d6; }
  1092. .j-forms .stepper .stepper-arrow.down { bottom: 0; }
  1093. .j-forms .stepper .stepper-arrow.up:after,
  1094. .j-forms .stepper .stepper-arrow.down:after {
  1095. border-right:5px solid transparent;
  1096. border-left:5px solid transparent;
  1097. content:'';
  1098. position:absolute;
  1099. right:16px;
  1100. -webkit-transition:all.4s;
  1101. -moz-transition:all.4s;
  1102. -ms-transition:all.4s;
  1103. -o-transition:all.4s;
  1104. transition:all.4s;
  1105. }
  1106. .j-forms .stepper .stepper-arrow.down:after { border-top:7px solid rgba(0,0,0,.56); bottom:13px; }
  1107. .j-forms .stepper .stepper-arrow.up:after { border-bottom: 7px solid rgba(0,0,0,.56); top:13px; }
  1108. .j-forms .stepper .stepper-arrow:hover.down:after { border-top:7px solid rgba(0,0,0,.87); }
  1109. .j-forms .stepper .stepper-arrow:hover.up:after { border-bottom: 7px solid rgba(0,0,0,.87); }
  1110. /* Datapicker and Timepicker
  1111. =============================== */
  1112. .ui-datepicker {
  1113. background-color:#fff;
  1114. -webkit-border-radius:3px;
  1115. -moz-border-radius:3px;
  1116. -o-border-radius:3px;
  1117. border-radius:3px;
  1118. border:1px solid rgba(0,0,0,.26);
  1119. -webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
  1120. -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
  1121. -o-box-shadow:0 0 2px rgba(0,0,0,.5);
  1122. box-shadow:0 0 2px rgba(0,0,0,.5);
  1123. color:rgba(0,0,0,.54);
  1124. display:none;
  1125. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1126. text-align:center;
  1127. padding:10px 0;
  1128. width:240px;
  1129. z-index:1100 !important;
  1130. }
  1131. .ui-datepicker-header {
  1132. background-color:#f0f0f0;
  1133. line-height:1.5;
  1134. margin:-2px 0 12px;
  1135. padding:10px;
  1136. position:relative;
  1137. }
  1138. .ui-datepicker-prev,
  1139. .ui-datepicker-next {
  1140. cursor:pointer;
  1141. display:block;
  1142. font-size:18px;
  1143. height:30px;
  1144. position:absolute;
  1145. text-decoration:none;
  1146. top:6px;
  1147. width:30px;
  1148. }
  1149. .ui-datepicker-prev { border-right:1px solid; left:0; }
  1150. .ui-datepicker-next { border-left:1px solid; right:0; }
  1151. .ui-datepicker-calendar { border-collapse:collapse; line-height:1.5; width:100%; }
  1152. .ui-datepicker-calendar th span { color:rgba(0,0,0,.26); font-weight:lighter; }
  1153. .ui-datepicker-calendar a,
  1154. .ui-datepicker-calendar span {
  1155. color:rgba(0,0,0,.54);
  1156. display:block;
  1157. font-size:16px;
  1158. margin:0 auto;
  1159. text-decoration:none;
  1160. width:28px;
  1161. }
  1162. .ui-datepicker-calendar a:hover,
  1163. .ui-datepicker-calendar .ui-state-active { background-color:#e0e0e0; }
  1164. .ui-datepicker-today a { outline:1px solid rgba(0,0,0,.54); }
  1165. .ui-datepicker-inline {
  1166. -webkit-box-sizing:border-box;
  1167. -moz-box-sizing:border-box;
  1168. box-sizing:border-box;
  1169. border:2px solid rgba(0,0,0,.12);
  1170. -webkit-box-shadow:none;
  1171. -moz-box-shadow:none;
  1172. -o-box-shadow:none;
  1173. box-shadow:none;
  1174. width:100%;
  1175. }
  1176. .ui-state-disabled span { color:rgba(0,0,0,.26); }
  1177. .ui-timepicker-div .ui-widget-header { background-color:#f0f0f0; margin-bottom:8px; padding:10px 0; }
  1178. .ui-timepicker-div dl { text-align:left; }
  1179. .ui-timepicker-div dl dt { float:left; clear:left; padding:0 0 0 5px; }
  1180. .ui-timepicker-div td { font-size:90%; }
  1181. .ui-tpicker-grid-label { background:none; border:none; margin:0; padding:0; }
  1182. .ui-timepicker-rtl{ direction:rtl; }
  1183. .ui-timepicker-rtl dl { text-align:right; padding:0 5px 0 0; }
  1184. .ui-timepicker-rtl dl dt{ float:right; clear:right; }
  1185. .ui-timepicker-rtl dl dd { margin:0 40% 10px 10px; }
  1186. .ui-timepicker-div { font-size:15px; }
  1187. .ui-timepicker-div dl {
  1188. -webkit-box-sizing:border-box;
  1189. -moz-box-sizing:border-box;
  1190. box-sizing:border-box;
  1191. border-top:1px solid rgba(0,0,0,.26);
  1192. padding:16px 5px;
  1193. margin:16px 0 0;
  1194. }
  1195. .ui-timepicker-div .ui_tpicker_time { margin:0 10px 10px 40%; }
  1196. .ui-timepicker-div .ui_tpicker_hour,
  1197. .ui-timepicker-div .ui_tpicker_minute { margin:16px 10px 10px 40%; }
  1198. .ui-datepicker-buttonpane { border-top:1px solid rgba(0,0,0,.26); }
  1199. .ui-datepicker-buttonpane button {
  1200. background:#e0e0e0;
  1201. border:none;
  1202. -webkit-border-radius:3px;
  1203. -moz-border-radius:3px;
  1204. -o-border-radius:3px;
  1205. border-radius:3px;
  1206. color:rgba(0,0,0,.56);
  1207. cursor:pointer;
  1208. font:14px 'Open Sans',Helvetica,Arial,sans-serif;
  1209. padding:5px 10px;
  1210. margin:10px 5px 0;
  1211. -webkit-transition:all.15s;
  1212. -moz-transition:all.15s;
  1213. -ms-transition:all.15s;
  1214. -o-transition:all.15s;
  1215. transition:all.15s;
  1216. outline:none;
  1217. }
  1218. .ui-datepicker-buttonpane button:hover { background:#d6d6d6; color:rgba(0,0,0,.87); }
  1219. /* jQuery Slider
  1220. =============================== */
  1221. .ui-slider { position:relative; }
  1222. .ui-slider .ui-slider-range {
  1223. border:none;
  1224. display:block;
  1225. font-size:11px;
  1226. position:absolute;
  1227. overflow:hidden;
  1228. z-index:1;
  1229. }
  1230. .ui-slider .ui-slider-handle {
  1231. background-color:#e0e0e0;
  1232. border:1px solid rgba(0,0,0,.36);
  1233. -webkit-border-radius:3px;
  1234. -moz-border-radius:3px;
  1235. -o-border-radius:3px;
  1236. border-radius:3px;
  1237. cursor:pointer;
  1238. height:16px;
  1239. position:absolute;
  1240. outline:none;
  1241. left:-5px;
  1242. width:16px;
  1243. z-index:2;
  1244. }
  1245. .ui-slider-horizontal { height:7px; }
  1246. .ui-slider-vertical { height:100px; width:7px; }
  1247. .ui-slider-horizontal .ui-slider-handle { top:-5px; margin-left:-10px; }
  1248. .ui-slider-horizontal .ui-slider-range { top:0; height:100%; }
  1249. .ui-slider-horizontal .ui-slider-range-min { left:0; }
  1250. .ui-slider-horizontal .ui-slider-range-max { right:0; }
  1251. .ui-slider-vertical .ui-slider-range-min { bottom:0; }
  1252. .ui-slider-vertical .ui-slider-range { left:0; width:100%; }
  1253. .ui-slider.ui-widget-content {
  1254. background-color:#fff;
  1255. border:2px solid #e0e0e0;
  1256. -webkit-border-radius:3px;
  1257. -moz-border-radius:3px;
  1258. -o-border-radius:3px;
  1259. border-radius:3px;
  1260. }
  1261. .ui-slider-vertical .ui-widget-header,
  1262. .ui-slider-horizontal .ui-widget-header { background-color:#f0f0f0; }
  1263. .j-forms .slider-group {
  1264. font:15px 'Open Sans',Helvetica,Arial,sans-serif;
  1265. height:48px;
  1266. line-height:48px;
  1267. padding:0 2px;
  1268. margin-bottom:5px;
  1269. white-space:nowrap;
  1270. }
  1271. .j-forms .slider-group label { display:inline-block; color:rgba(0,0,0,.87); padding:0 4px; }
  1272. /* Multistep form
  1273. =============================== */
  1274. .j-forms fieldset {
  1275. border:none;
  1276. outline:none;
  1277. margin:0;
  1278. padding:0;
  1279. position:absolute;
  1280. opacity:0;
  1281. left:-9999px;
  1282. top:0;
  1283. -webkit-transform:translateY(-4%);
  1284. -moz-transform:translateY(-4%);
  1285. -ms-transform:translateY(-4%);
  1286. -o-transform:translateY(-4%);
  1287. transform:translateY(-4%);
  1288. -webkit-transition:opacity.3s, -webkit-transform.3s;
  1289. -moz-transition:opacity.3s, -moz-transform.3s;
  1290. -ms-transition:opacity.3s, -ms-transform.3s;
  1291. -o-transition:opacity.3s, -o-transform.3s;
  1292. transition:opacity.3s, transform.3s;
  1293. }
  1294. .j-forms .steps {
  1295. border:1px solid rgba(0,0,0,.12);
  1296. -webkit-border-radius:3px;
  1297. -moz-border-radius:3px;
  1298. -o-border-radius:3px;
  1299. border-radius:3px;
  1300. margin-bottom:25px;
  1301. text-align:center;
  1302. -webkit-transition:all.3s;
  1303. -moz-transition:all.3s;
  1304. -ms-transition:all.3s;
  1305. -o-transition:all.3s;
  1306. transition:all.3s;
  1307. }
  1308. .j-forms .active-fieldset {
  1309. left:0;
  1310. position:relative;
  1311. opacity:1;
  1312. -webkit-transform:translateY(0);
  1313. -moz-transform:translateY(0);
  1314. -ms-transform:translateY(0);
  1315. -o-transform:translateY(0);
  1316. transform:translateY(0);
  1317. }
  1318. .j-forms fieldset .unit,
  1319. .j-forms fieldset .j-row { display:none; }
  1320. .j-forms .active-fieldset .unit,
  1321. .j-forms .active-fieldset .j-row { display:block; }
  1322. .j-forms .steps p { color:rgba(0,0,0,.56); font-size:16px; height:36px; line-height:36px; margin:0; padding:0; }
  1323. .j-forms .steps span { color:rgba(0,0,0,.56); font-size:13px; height:13px; line-height:13px; }
  1324. .j-forms .active-step .steps p { color:rgba(0,0,0,.87); }
  1325. .j-forms .active-step .steps { background-color:#e8eaf6; border:1px solid #303f9f; }
  1326. .j-forms .passed-step .steps { border:1px solid #e8eaf6; background-color:#e8eaf6; }
  1327. .j-forms.j-multistep .input textarea:focus { height:112px; }
  1328. #j-forms a.step-link,
  1329. #j-forms a.step-link:hover,
  1330. #j-forms a.step-link:focus,
  1331. #j-forms a.step-link:active { color:inherit; text-decoration:none; }
  1332. /* Modal form
  1333. =============================== */
  1334. /* Settings for block with links */
  1335. .modal-block {
  1336. background-color:#fff;
  1337. -webkit-border-radius:3px;
  1338. -moz-border-radius:3px;
  1339. -o-border-radius:3px;
  1340. border-radius:3px;
  1341. -webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
  1342. -moz-box-shadow:0 0 15px rgba(0,0,0,.4);
  1343. -o-box-shadow:0 0 15px rgba(0,0,0,.4);
  1344. box-shadow:0 0 15px rgba(0,0,0,.4);
  1345. color:rgba(0,0,0,.54);
  1346. font-family:'Open Sans',Helvetica,Arial,sans-serif;
  1347. font-size:15px;
  1348. margin:0 auto;
  1349. max-width:320px;
  1350. outline:medium none;
  1351. padding:20px;
  1352. }
  1353. .modal-block .modal-link {
  1354. border-bottom:1px solid #90caf9;
  1355. color:#1e88e5;
  1356. font-size:14px;
  1357. line-height:inherit;
  1358. text-decoration:none;
  1359. }
  1360. .modal-block .modal-link:hover { border-bottom:none; }
  1361. /* Settings for modal form directly */
  1362. .modal-form {
  1363. background-color:rgba(103,119,129,.5);
  1364. bottom:0;
  1365. height:100%;
  1366. left:0;
  1367. opacity:0;
  1368. overflow-y:scroll;
  1369. position:fixed;
  1370. right:0;
  1371. top:0;
  1372. visibility:hidden;
  1373. width:100%;
  1374. z-index:1040;
  1375. }
  1376. .modal-form.modal-visible { opacity:1; visibility:visible; }
  1377. .modal-scroll { overflow:hidden; }
  1378. .j-forms .modal-close {
  1379. background-color:rgba(0,0,0,.3);
  1380. -webkit-border-radius:2px;
  1381. -moz-border-radius:2px;
  1382. -o-border-radius:2px;
  1383. border-radius:2px;
  1384. cursor:pointer;
  1385. position:absolute;
  1386. right:8px;
  1387. top:11px;
  1388. -webkit-transition:background-color.15s;
  1389. -moz-transition:background-color.15s;
  1390. -ms-transition:background-color.15s;
  1391. -o-transition:background-color.15s;
  1392. transition:background-color.15s;
  1393. }
  1394. .j-forms .modal-close:hover,
  1395. .j-forms .modal-close:focus { background-color:rgba(0,0,0,.6); }
  1396. .j-forms .modal-close i { display:block; height:22px; width:23px; }
  1397. .j-forms .modal-close i:before,
  1398. .j-forms .modal-close i:after {
  1399. background-color:#fff;
  1400. content:'';
  1401. height:3px;
  1402. position:absolute;
  1403. right:1px;
  1404. top:10px;
  1405. width:21px;
  1406. }
  1407. .j-forms .modal-close i:before{
  1408. -webkit-transform:rotate(45deg);
  1409. -moz-transform:rotate(45deg);
  1410. -ms-transform:rotate(45deg);
  1411. -o-transform:rotate(45deg);
  1412. transform:rotate(45deg);
  1413. }
  1414. .j-forms .modal-close i:after{
  1415. -webkit-transform:rotate(-45deg);
  1416. -moz-transform:rotate(-45deg);
  1417. -ms-transform:rotate(-45deg);
  1418. -o-transform:rotate(-45deg);
  1419. transform:rotate(-45deg);
  1420. }
  1421. /* Pop-up form
  1422. =============================== */
  1423. /* Popup menu forms */
  1424. .popup-menu { padding:0 15px; }
  1425. .popup-list {
  1426. background-color:#f9fafd;
  1427. -webkit-border-radius:3px;
  1428. -moz-border-radius:3px;
  1429. -o-border-radius:3px;
  1430. border-radius:3px;
  1431. -webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
  1432. -moz-box-shadow:0 0 15px rgba(0,0,0,.4);
  1433. -o-box-shadow:0 0 15px rgba(0,0,0,.4);
  1434. box-shadow:0 0 15px rgba(0,0,0,.4);
  1435. max-width:100%;
  1436. position:relative;
  1437. }
  1438. .popup-list:after {
  1439. clear:both;
  1440. content:".";
  1441. display:block;
  1442. height:0;
  1443. visibility:hidden;
  1444. }
  1445. .popup-list > ul { font-size:0; float:right; outline:none; padding:5px; }
  1446. .popup-list > ul > li {
  1447. border-left:1px solid rgba(0,0,0,.12);
  1448. display:inline-block;
  1449. font-family:'Open Sans',Helvetica,Arial,sans-serif;
  1450. font-size:16px;
  1451. line-height:45px;
  1452. padding:0 20px;
  1453. list-style-type:none;
  1454. }
  1455. .popup-list > ul > li:hover { background-color:#e8eaf6; }
  1456. .popup-list-open { position:relative; }
  1457. .popup-list-open .j-forms { margin:10px auto 0; z-index:999; }
  1458. .popup-list-open .j-forms .input textarea:focus { height:112px; }
  1459. .popup-list-open .popup-list-wrapper {
  1460. display:none;
  1461. opacity:0;
  1462. position:absolute;
  1463. left:-9999px;
  1464. width:400px;
  1465. -webkit-animation:popup-list-open.4s both;
  1466. -moz-animation:popup-list-open.4s both;
  1467. -ms-animation:popup-list-open.4s both;
  1468. -o-animation:popup-list-open.4s both;
  1469. animation:popup-list-open.4s both;
  1470. }
  1471. @-webkit-keyframes popup-list-open {
  1472. from { -webkit-transform:translate(0,-10px); transform:translate(0,-10px); }
  1473. to { -webkit-transform:translate(0,0); transform:translate(0,0); }
  1474. }
  1475. @-moz-keyframes popup-list-open {
  1476. from { -moz-transform:translate(0,-10px); transform:translate(0,-10px); }
  1477. to { -moz-transform:translate(0,0); transform:translate(0,0); }
  1478. }
  1479. @-ms-keyframes popup-list-open {
  1480. from { -ms-transform:translate(0,-10px); transform:translate(0,-10px); }
  1481. to { -ms-transform:translate(0,0); transform:translate(0,0); }
  1482. }
  1483. @-o-keyframes popup-list-open {
  1484. from { -o-transform:translate(0,-10px); transform:translate(0,-10px); }
  1485. to { -o-transform:translate(0,0); transform:translate(0,0); }
  1486. }
  1487. @-keyframes popup-list-open {
  1488. from { transform:translate(0,-10px); }
  1489. to { transform:translate(0,0); }
  1490. }
  1491. /* Popup bottom form */
  1492. .popup-btm-400,
  1493. .popup-btm-640 {
  1494. bottom:0;
  1495. position:fixed;
  1496. -webkit-transition:width.3s;
  1497. -moz-transition:width.3s;
  1498. -ms-transition:width.3s;
  1499. -o-transition:width.3s;
  1500. transition:width.3s;
  1501. right:1%;
  1502. z-index:1000;
  1503. }
  1504. .popup-btm-400 { width:400px; }
  1505. .popup-btm-640 { width:640px; }
  1506. .popup-btm-400 #popup-input-open,
  1507. .popup-btm-400 #popup-input-close,
  1508. .popup-btm-640 #popup-input-open,
  1509. .popup-btm-640 #popup-input-close { display:none; }
  1510. .popup-btm-400 .popup-btm-wrapper,
  1511. .popup-btm-640 .popup-btm-wrapper {
  1512. bottom:-500px;
  1513. height:auto;
  1514. position:absolute;
  1515. right:0;
  1516. -webkit-transition:all.4s ease-in-out;
  1517. -moz-transition:all.4s ease-in-out;
  1518. -ms-transition:all.4s ease-in-out;
  1519. -o-transition:all.4s ease-in-out;
  1520. transition:all.4s ease-in-out;
  1521. width:100%;
  1522. z-index:1000;
  1523. }
  1524. .popup-btm-400 input#popup-input-open:checked ~ .popup-btm-label,
  1525. .popup-btm-640 input#popup-input-open:checked ~ .popup-btm-label { opacity:0; cursor:default; }
  1526. .popup-btm-400 input#popup-input-close:checked ~ .popup-btm-wrapper,
  1527. .popup-btm-640 input#popup-input-close:checked ~ .popup-btm-wrapper,
  1528. .popup-btm-400 .popup-btm-wrapper,
  1529. .popup-btm-640 .popup-btm-wrapper {
  1530. -webkit-transform:translateY(100%);
  1531. -moz-transform:translateY(100%);
  1532. -ms-transform:translateY(100%);
  1533. -o-transform:translateY(100%);
  1534. transform:translateY(100%);
  1535. }
  1536. .popup-btm-400 input#popup-input-open:checked ~ .popup-btm-wrapper,
  1537. .popup-btm-640 input#popup-input-open:checked ~ .popup-btm-wrapper {
  1538. bottom:5px;
  1539. -webkit-transform:translateY(0);
  1540. -moz-transform:translateY(0);
  1541. -ms-transform:translateY(0);
  1542. -o-transform:translateY(0);
  1543. transform:translateY(0);
  1544. }
  1545. .popup-btm-400 .j-forms .input textarea:focus,
  1546. .popup-btm-640 .j-forms .input textarea:focus { height:112px; }
  1547. .popup-btm-400 .popup-btm-label,
  1548. .popup-btm-640 .popup-btm-label {
  1549. background-color:#f9fafd;
  1550. -webkit-border-radius:3px;
  1551. -moz-border-radius:3px;
  1552. -o-border-radius:3px;
  1553. border-radius:3px;
  1554. -webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
  1555. -moz-box-shadow:0 0 15px rgba(0,0,0,.4);
  1556. -o-box-shadow:0 0 15px rgba(0,0,0,.4);
  1557. box-shadow:0 0 15px rgba(0,0,0,.4);
  1558. bottom:0;
  1559. cursor:pointer;
  1560. color:rgba(0,0,0,.87);
  1561. display:block;
  1562. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1563. height:35px;
  1564. text-align:center;
  1565. opacity:1;
  1566. line-height:35px;
  1567. padding:0 30px;
  1568. position:fixed;
  1569. right:1%;
  1570. -webkit-transition:opacity.4s ease-in-out.05s;
  1571. -moz-transition:opacity.4s ease-in-out.05s;
  1572. -ms-transition:opacity.4s ease-in-out.05s;
  1573. -o-transition:opacity.4s ease-in-out.05s;
  1574. transition:opacity.4s ease-in-out.05s;
  1575. white-space:nowrap;
  1576. z-index: 9999;
  1577. }
  1578. .popup-btm-400 .popup-btm-close,
  1579. .popup-btm-640 .popup-btm-close {
  1580. background-color:rgba(0,0,0,.6);
  1581. -webkit-border-radius:2px;
  1582. -moz-border-radius:2px;
  1583. -o-border-radius:2px;
  1584. border-radius:2px;
  1585. cursor:pointer;
  1586. position:absolute;
  1587. right:0;
  1588. top:-25px;
  1589. -webkit-transition:background-color.15s;
  1590. -moz-transition:background-color.15s;
  1591. -ms-transition:background-color.15s;
  1592. -o-transition:background-color.15s;
  1593. transition:background-color.15s;
  1594. }
  1595. .popup-btm-400 .popup-btm-close:hover,
  1596. .popup-btm-400 .popup-btm-close:focus,
  1597. .popup-btm-640 .popup-btm-close:hover,
  1598. .popup-btm-640 .popup-btm-close:focus { background-color:rgba(0,0,0,.8); }
  1599. .popup-btm-400 .popup-btm-close i,
  1600. .popup-btm-640 .popup-btm-close i { display:block; height:22px; width:23px; }
  1601. .popup-btm-400 .popup-btm-close i:before,
  1602. .popup-btm-400 .popup-btm-close i:after,
  1603. .popup-btm-640 .popup-btm-close i:before,
  1604. .popup-btm-640 .popup-btm-close i:after {
  1605. background-color:#fff;
  1606. content:'';
  1607. height:3px;
  1608. position:absolute;
  1609. right:1px;
  1610. top:10px;
  1611. width:21px;
  1612. }
  1613. .popup-btm-400 .popup-btm-close i:before,
  1614. .popup-btm-640 .popup-btm-close i:before {
  1615. -webkit-transform:rotate(45deg);
  1616. -moz-transform:rotate(45deg);
  1617. -ms-transform:rotate(45deg);
  1618. -o-transform:rotate(45deg);
  1619. transform:rotate(45deg);
  1620. }
  1621. .popup-btm-400 .popup-btm-close i:after,
  1622. .popup-btm-640 .popup-btm-close i:after {
  1623. -webkit-transform:rotate(-45deg);
  1624. -moz-transform:rotate(-45deg);
  1625. -ms-transform:rotate(-45deg);
  1626. -o-transform:rotate(-45deg);
  1627. transform:rotate(-45deg);
  1628. }
  1629. /*=================================================================*/
  1630. /* Grid layout */
  1631. /*=================================================================*/
  1632. .j-forms [class*="span"] {
  1633. -webkit-box-sizing:border-box;
  1634. -moz-box-sizing:border-box;
  1635. box-sizing:border-box;
  1636. float:left;
  1637. padding-left:10px;
  1638. padding-right:10px;
  1639. position:relative;
  1640. }
  1641. .j-forms .span1 { width:8.3333%; }
  1642. .j-forms .span2 { width:16.6666%; }
  1643. .j-forms .span3 { width:25%; }
  1644. .j-forms .span4 { width:33.3333%; }
  1645. .j-forms .span5 { width:41.6666%; }
  1646. .j-forms .span6 { width:50%; }
  1647. .j-forms .span7 { width:58.3333%; }
  1648. .j-forms .span8 { width:66.6666%; }
  1649. .j-forms .span9 { width:75%; }
  1650. .j-forms .span10 { width:83.3333%; }
  1651. .j-forms .span11 { width:91.6666%; }
  1652. .j-forms .span12 { width:100%; }
  1653. .j-forms .offset1 { margin-left:8.3333%; }
  1654. .j-forms .offset2 { margin-left:16.6666%; }
  1655. .j-forms .offset3 { margin-left:25%; }
  1656. .j-forms .offset4 { margin-left:33.3333%; }
  1657. .j-forms .offset5 { margin-left:41.6666%; }
  1658. .j-forms .offset6 { margin-left:50%; }
  1659. .j-forms .offset7 { margin-left:58.3333%; }
  1660. .j-forms .offset8 { margin-left:66.6666%; }
  1661. .j-forms .offset9 { margin-left:75%; }
  1662. .j-forms .offset10 { margin-left:83.3333%; }
  1663. .j-forms .offset11 { margin-left:91.6666%; }
  1664. .j-forms .offset12 { margin-left:100%; }
  1665. .j-forms .j-row{ margin:0 -10px; }
  1666. .j-forms .j-row:after {
  1667. clear:both;
  1668. content:".";
  1669. display:block;
  1670. height:0;
  1671. visibility:hidden;
  1672. }
  1673. /* Responsiveness
  1674. ==================================== */
  1675. /* Wrapper-640 */
  1676. @media all and (max-width:620px) {
  1677. .wrapper-640 .j-forms [class*="span"] { margin-right:0; width:100%; }
  1678. .wrapper-640 .j-forms [class*="offset"] { margin-left:0; }
  1679. .wrapper-640 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
  1680. .wrapper-640 .j-forms .radio:last-child,
  1681. .wrapper-640 .j-forms .checkbox:last-child,
  1682. .wrapper-640 .j-forms .radio-toggle:last-child,
  1683. .wrapper-640 .j-forms .checkbox-toggle:last-child { margin-bottom:4px; }
  1684. /* Popup menu forms*/
  1685. .popup-list-open > .popup-list-wrapper { width:100%; }
  1686. .popup-list-open { position:static; }
  1687. }
  1688. /* Wrapper-400 */
  1689. @media all and (max-width:380px) {
  1690. .wrapper-400 .j-forms [class*="span"] { margin-right:0; width:100%; }
  1691. .wrapper-400 [class*="offset"] { margin-left:0; }
  1692. .wrapper-400 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
  1693. .wrapper-400 .j-forms .radio:last-child,
  1694. .wrapper-400 .j-forms .checkbox:last-child,
  1695. .wrapper-400 .j-forms .radio-toggle:last-child,
  1696. .wrapper-400 .j-forms .checkbox-toggle:last-child { margin-bottom:4px; }
  1697. /* Responsiveness inside popup menu forms */
  1698. .popup-list-wrapper .j-forms [class*="span"] { margin-right:0; width:100%; }
  1699. .popup-list-wrapper .j-forms [class*="offset"] { margin-left:0; }
  1700. .popup-list-wrapper .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
  1701. }
  1702. /* Popup bottom form 400 px*/
  1703. @media all and (max-width:410px) {
  1704. .popup-btm-400 { width: 320px; }
  1705. .popup-btm-400 .j-forms [class*="span"] { margin-right:0; width:100%; }
  1706. .popup-btm-400 .j-forms [class*="offset"] { margin-left:0; }
  1707. .popup-btm-400 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
  1708. }
  1709. /* Popup bottom form 640 px*/
  1710. @media all and (max-width:650px) {
  1711. .popup-btm-640 { width: 320px; }
  1712. .popup-btm-640 .j-forms [class*="span"] { margin-right:0; width:100%; }
  1713. .popup-btm-640 .j-forms [class*="offset"] { margin-left:0; }
  1714. .popup-btm-640 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
  1715. }
  1716. /* Bootstrap compatibility
  1717. =============================== */
  1718. .j-forms .radio,
  1719. .j-forms .checkbox,
  1720. .j-forms .radio-toggle,
  1721. .j-forms .checkbox-toggle { margin-top:0; }
  1722. .j-forms .label {
  1723. padding:0;
  1724. -webkit-border-radius:0;
  1725. -moz-border-radius:0;
  1726. -o-border-radius:0;
  1727. border-radius:0;
  1728. }
  1729. .j-forms .radio,
  1730. .j-forms .checkbox,
  1731. .j-forms .radio-toggle,
  1732. .j-forms .checkbox-toggle,
  1733. .j-forms .radio *,
  1734. .j-forms .checkbox *,
  1735. .j-forms .radio-toggle *,
  1736. .j-forms .checkbox-toggle *,
  1737. .j-forms .radio i:after,
  1738. .j-forms .checkbox i:after,
  1739. .j-forms .radio-toggle i:after,
  1740. .j-forms .checkbox-toggle i:after,
  1741. .j-forms .radio i:before,
  1742. .j-forms .checkbox i:before,
  1743. .j-forms .radio-toggle i:before,
  1744. .j-forms .checkbox-toggle i:before {
  1745. -webkit-box-sizing:content-box;
  1746. -moz-box-sizing:content-box;
  1747. box-sizing:content-box;
  1748. }
  1749. /* =============================== */
  1750. /* start */
  1751. /* Just Forms */
  1752. /* version 2.0 */
  1753. /* =============================== */
  1754. /* Form details & total price
  1755. =============================== */
  1756. .j-forms .form-details {
  1757. font:15px/25px 'Open Sans',Helvetica,Arial,sans-serif;
  1758. margin-bottom:5px;
  1759. }
  1760. .j-forms .form-details p { display:inline-block; margin:0; padding:0; }
  1761. .j-forms .form-details span { color:rgba(0,0,0,.87); padding:0 4px; }
  1762. .j-forms .total-price {
  1763. background:#c4df9b;
  1764. -webkit-border-radius:3px;
  1765. -moz-border-radius:3px;
  1766. -o-border-radius:3px;
  1767. border-radius:3px;
  1768. text-align:center;
  1769. padding:10px 0;
  1770. }
  1771. .j-forms .form-details.total-price span { font-size:17px; }
  1772. /* Cloned elements
  1773. =============================== */
  1774. .j-forms .content .clone-btn-right,
  1775. .j-forms .content .clone-btn-left {
  1776. font-size:14px;
  1777. height:48px;
  1778. padding:0;
  1779. position:absolute;
  1780. margin:0;
  1781. width:47px;
  1782. }
  1783. .j-forms .j-row>.clone-btn-right { bottom:25px; right:10px; }
  1784. .j-forms .j-row>.clone-btn-right.delete { right:60px; }
  1785. .j-forms .unit>.clone-btn-right { bottom:0; right:0; }
  1786. .j-forms .unit>.clone-btn-right.delete { right:50px; }
  1787. .j-forms .j-row>.clone-btn-left { bottom:25px; left:10px; }
  1788. .j-forms .j-row>.clone-btn-left.delete { left:60px; }
  1789. .j-forms .unit>.clone-btn-left { bottom:0; left:0; }
  1790. .j-forms .unit>.clone-btn-left.delete { left:50px; }
  1791. .toclone-widget-right { padding-right:100px; position:relative; }
  1792. .toclone-widget-left { padding-left:100px; position:relative; }
  1793. .j-forms .toclone .link { display:inline-block; padding-bottom:3px; margin:0 5px 5px 0; }
  1794. /* jQuery UI Autocomplete
  1795. =============================== */
  1796. .ui-autocomplete {
  1797. background:#fff;
  1798. border-color:rgba(0,0,0,.12);
  1799. border-style:none solid solid;
  1800. border-width:0 2px 2px;
  1801. -webkit-border-radius:0 0 3px 3px;
  1802. -moz-border-radius:0 0 3px 3px;
  1803. -o-border-radius:0 0 3px 3px;
  1804. border-radius:0 0 3px 3px;
  1805. cursor:default;
  1806. display:block;
  1807. font:16px 'Open Sans',Helvetica,Arial,sans-serif;
  1808. left:0;
  1809. list-style:none;
  1810. margin:0;
  1811. max-height:110px;
  1812. outline:none;
  1813. overflow-x:hidden;
  1814. overflow-y:auto;
  1815. padding:0;
  1816. position:absolute;
  1817. top:0;
  1818. z-index:10000;
  1819. }
  1820. .ui-autocomplete .ui-menu { position:absolute; }
  1821. .ui-autocomplete .ui-menu-item {
  1822. background:#fff;
  1823. border-bottom:1px solid rgba(0,0,0,.12);
  1824. cursor:pointer;
  1825. margin:0;
  1826. min-height:0;
  1827. padding:8px 15px;
  1828. position:relative;
  1829. }
  1830. .ui-autocomplete .ui-menu-item:hover { background:rgba(0,0,0,.06); }
  1831. .ui-helper-hidden-accessible { position:absolute; left:-999em; }
  1832. /* TinyMCE
  1833. =============================== */
  1834. .j-forms .input .mce-tinymce {
  1835. -webkit-border-radius:3px;
  1836. -moz-border-radius:3px;
  1837. -o-border-radius:3px;
  1838. border-radius:3px;
  1839. border:2px solid rgba(0,0,0,.12) !important;
  1840. -webkit-transition:border.4s;
  1841. -moz-transition:border.4s;
  1842. -ms-transition:border.4s;
  1843. -o-transition:border.4s;
  1844. transition:border.4s;
  1845. }
  1846. .j-forms .input .mce-tinymce:hover { border:2px solid rgba(48,63,159,.6) !important; }
  1847. /* =============================== */
  1848. /* Just Forms */
  1849. /* version 2.0 */
  1850. /* end */
  1851. /* =============================== */
  1852. /* =============================== */
  1853. /* start */
  1854. /* Just Forms */
  1855. /* version 2.3*/
  1856. /* =============================== */
  1857. /* Tabs
  1858. =============================== */
  1859. .j-tabs-section,
  1860. .j-tabs-container input[type="radio"] { display:none; }
  1861. #tab1:checked ~ #tabs-section-1,
  1862. #tab2:checked ~ #tabs-section-2,
  1863. #tab3:checked ~ #tabs-section-3 { display:block; }
  1864. .j-tabs-container .j-tabs-label {
  1865. background:#fff;
  1866. border-top:2px solid rgba(0,0,0,.34);
  1867. -webkit-border-radius:2px 2px 0 0;
  1868. -moz-border-radius:2px 2px 0 0;
  1869. -o-border-radius:2px 2px 0 0;
  1870. border-radius:2px 2px 0 0;
  1871. display:inline-block;
  1872. margin:0 0 -3px;
  1873. font:14px 'Open Sans',Helvetica,Arial,sans-serif;
  1874. padding:11px 13px 13px;
  1875. -webkit-box-shadow:0 2px 2px rgba(0,0,0,.6);
  1876. -moz-box-shadow:0 2px 2px rgba(0,0,0,.6);
  1877. -o-box-shadow:0 2px 2px rgba(0,0,0,.6);
  1878. box-shadow:0 2px 2px rgba(0,0,0,.6);
  1879. opacity:.95;
  1880. -webkit-transition:border-top.2s;
  1881. -moz-transition:border-top.2s;
  1882. -ms-transition:border-top.2s;
  1883. -o-transition:border-top.2s;
  1884. transition:border-top.2s;
  1885. }
  1886. .j-tabs-container .j-tabs-label i,
  1887. .j-tabs-container .j-tabs-label span { padding:1px; }
  1888. .j-tabs-container .j-tabs-label i { font-size:16px; }
  1889. .j-tabs-container .j-tabs-label i,
  1890. .j-tabs-container .j-tabs-label span,
  1891. .j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:rgba(0,0,0,.54); }
  1892. .j-tabs-container .j-tabs-label:hover { cursor:pointer; }
  1893. .j-tabs-container input[type="radio"]:checked + .j-tabs-label { border-top:2px solid rgba(0,0,0,.87); opacity:1; }
  1894. .j-tabs-container input[type="radio"]:checked + .j-tabs-label span { color:#4680ff; }
  1895. .j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:#4680ff; }
  1896. @media all and (max-width: 430px) {
  1897. .j-tabs-container .j-tabs-label { font-size:0; }
  1898. .j-tabs-container .j-tabs-label i { font-size:16px; height:18px; }
  1899. .j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:rgba(0,0,0,.87); }
  1900. }
  1901. /* Image checkbox & Image radio
  1902. =============================== */
  1903. .j-forms .radio-block,
  1904. .j-forms .checkbox-block {
  1905. color:rgba(0,0,0,.87);
  1906. cursor:pointer;
  1907. font-size:15px;
  1908. margin-bottom:8px;
  1909. position:relative;
  1910. }
  1911. .j-forms .radio-block:last-child,
  1912. .j-forms .checkbox-block:last-child { margin-bottom:0; }
  1913. .j-forms .radio-block input,
  1914. .j-forms .checkbox-block input { position:absolute; left:-9999px; }
  1915. .j-forms .radio-block i,
  1916. .j-forms .checkbox-block i {
  1917. display:block;
  1918. height:18px;
  1919. outline:none;
  1920. position:absolute;
  1921. top:5px;
  1922. left:5px;
  1923. width:18px;
  1924. z-index:10;
  1925. }
  1926. .j-forms .checkbox-block i {
  1927. -webkit-border-radius:3px;
  1928. -moz-border-radius:3px;
  1929. -o-border-radius:3px;
  1930. border-radius:3px;
  1931. }
  1932. .j-forms .checkbox-block i:after {
  1933. border-width:0 0 3px 3px;
  1934. border-bottom:solid rgb(48,63,159);
  1935. border-left:solid rgb(48,63,159);
  1936. content:"";
  1937. height:5px;
  1938. top:3px;
  1939. -webkit-transform:rotate(-45deg);
  1940. -moz-transform:rotate(-45deg);
  1941. -ms-transform:rotate(-45deg);
  1942. -o-transform:rotate(-45deg);
  1943. transform:rotate(-45deg);
  1944. left:3px;
  1945. opacity:0;
  1946. position:absolute;
  1947. width:10px;
  1948. }
  1949. .j-forms .radio-block i,
  1950. .j-forms .radio-block i:after {
  1951. -webkit-border-radius:50%;
  1952. -moz-border-radius:50%;
  1953. -o-border-radius:50%;
  1954. border-radius:50%;
  1955. }
  1956. .j-forms .radio-block i:after {
  1957. background-color:rgba(48,63,159,.9);
  1958. content:"";
  1959. height:8px;
  1960. top:5px;
  1961. left:5px;
  1962. opacity:0;
  1963. position:absolute;
  1964. width:8px;
  1965. }
  1966. .j-forms .radio-block input:checked + i,
  1967. .j-forms .checkbox-block input:checked + i { color:rgba(48,63,159,.9); border:2px solid rgba(48,63,159,.9); }
  1968. .j-forms .radio-block input:checked + i:after,
  1969. .j-forms .checkbox-block input:checked + i:after { opacity:1; }
  1970. .j-forms .checkbox-block span,
  1971. .j-forms .radio-block span { display:block; }
  1972. .j-forms .checkbox-block .block-image,
  1973. .j-forms .radio-block .block-image { position:relative; border:0;}
  1974. .j-forms .checkbox-block .block-content img,
  1975. .j-forms .radio-block .block-content img { height:auto; display:block; width:100%; }
  1976. .j-forms .checkbox-block .block-content:hover,
  1977. .j-forms .radio-block .block-content:hover,
  1978. .j-forms .checkbox-block input:checked ~ .block-content,
  1979. .j-forms .radio-block input:checked ~ .block-content {
  1980. -webkit-border-radius:2px;
  1981. -moz-border-radius:2px;
  1982. -o-border-radius:2px;
  1983. border-radius:2px;
  1984. }
  1985. .j-forms .checkbox-block .block-content:hover,
  1986. .j-forms .radio-block .block-content:hover { background:rgba(232,234,246,.5); }
  1987. .j-forms .checkbox-block input:checked ~ .block-content,
  1988. .j-forms .radio-block input:checked ~ .block-content { background:#e8eaf6; }
  1989. .j-forms .checkbox-block .block-text-title,
  1990. .j-forms .radio-block .block-text-title { color:rgba(0,0,0,.87); font-size:17px; margin:5px 0; }
  1991. .j-forms .checkbox-block .block-text-desc,
  1992. .j-forms .radio-block .block-text-desc {
  1993. color:rgba(0,0,0,.54);
  1994. font-size:13px;
  1995. padding-right:5px;
  1996. line-height:1.2;
  1997. margin:5px 0 10px;
  1998. word-spacing:3px;
  1999. }
  2000. .j-forms .checkbox-block .block-image-title,
  2001. .j-forms .radio-block .block-image-title,
  2002. .j-forms .checkbox-block .block-content,
  2003. .j-forms .radio-block .block-content {
  2004. -webkit-transition:background .2s;
  2005. -moz-transition:background .2s;
  2006. -ms-transition:background .2s;
  2007. -o-transition:background .2s;
  2008. transition:background .2s;
  2009. }
  2010. .j-forms .checkbox-block .block-image-title,
  2011. .j-forms .radio-block .block-image-title {
  2012. background:rgba(0,0,0,.34);
  2013. bottom:0;
  2014. color:#fff;
  2015. font-size:13px;
  2016. padding:10px;
  2017. position:absolute;
  2018. left:0;
  2019. width:100%;
  2020. z-index:20;
  2021. -webkit-box-sizing:border-box;
  2022. -moz-box-sizing:border-box;
  2023. box-sizing:border-box;
  2024. }
  2025. .j-forms .checkbox-block .block-content:hover .block-image-title,
  2026. .j-forms .radio-block .block-content:hover .block-image-title { background:rgba(0,0,0,.57); }
  2027. .j-forms .checkbox-block input:checked ~ .block-content .block-image-title,
  2028. .j-forms .radio-block input:checked ~ .block-content .block-image-title { background:rgba(0,0,0,.77); }
  2029. /* MULTIPLE SELECT Plugin
  2030. =============================== */
  2031. .j-forms .error-view .ms-parent .ms-choice { background:#ffebee; }
  2032. .j-forms .success-view .ms-parent .ms-choice { background:#e8f5e9; }
  2033. .j-forms .warning-view .ms-parent .ms-choice { background:#fff8e1; }
  2034. .j-forms .info-view .ms-parent .ms-choice { background:#e1f5fe; }
  2035. .j-forms .ms-parent { display:inline-block; position:relative; vertical-align:middle; }
  2036. .j-forms .ms-choice {
  2037. background-color:#fff;
  2038. border:2px solid rgba(0,0,0,.12);
  2039. -webkit-border-radius:3px;
  2040. -moz-border-radius:3px;
  2041. -o-border-radius:3px;
  2042. border-radius:3px;
  2043. display:block;
  2044. color:rgba(0,0,0,.87);
  2045. font:16px/48px 'Open Sans',Helvetica,Arial,sans-serif;
  2046. height:48px;
  2047. overflow:hidden;
  2048. text-align:left;
  2049. text-decoration:none;
  2050. padding:0;
  2051. white-space:nowrap;
  2052. width:100%;
  2053. -webkit-transition:border.4s;
  2054. -moz-transition:border.4s;
  2055. -ms-transition:border.4s;
  2056. -o-transition:border.4s;
  2057. transition:border.4s;
  2058. }
  2059. .j-forms .ms-choice:hover { border:2px solid rgba(48,63,159,.6); }
  2060. .j-forms .ms-choice:focus { border:2px solid rgba(48,63,159,.9); }
  2061. .j-forms .ms-choice.disabled {
  2062. background-color:#fff;
  2063. background-image:none;
  2064. border:2px solid rgba(0,0,0,.12) !important;
  2065. cursor:default;
  2066. }
  2067. .j-forms .ms-choice > span {
  2068. display:block;
  2069. padding-left:18px;
  2070. position:absolute;
  2071. top:0;
  2072. left:0;
  2073. right:20px;
  2074. overflow:hidden;
  2075. text-overflow:ellipsis;
  2076. white-space:nowrap;
  2077. }
  2078. .j-forms .ms-choice > span.placeholder { color:rgba(0,0,0,.36); }
  2079. .j-forms .ms-drop {
  2080. background:#fff;
  2081. border:1px solid rgba(0,0,0,.12);
  2082. -webkit-border-radius:3px;
  2083. -moz-border-radius:3px;
  2084. -o-border-radius:3px;
  2085. border-radius:3px;
  2086. color:rgba(0,0,0,.87);
  2087. display:none;
  2088. overflow:hidden;
  2089. padding:0;
  2090. position:absolute;
  2091. width:100%;
  2092. z-index:1000;
  2093. }
  2094. .j-forms .ms-drop.bottom {
  2095. top:100%;
  2096. -webkit-box-shadow:0 4px 5px rgba(0,0,0,.15);
  2097. -moz-box-shadow:0 4px 5px rgba(0,0,0,.15);
  2098. -o-box-shadow:0 4px 5px rgba(0,0,0,.15);
  2099. box-shadow:0 4px 5px rgba(0,0,0,.15);
  2100. }
  2101. .j-forms .ms-drop.top {
  2102. bottom:100%;
  2103. -webkit-box-shadow:0 -4px 5px rgba(0,0,0,.15);
  2104. -moz-box-shadow:0 -4px 5px rgba(0,0,0,.15);
  2105. -o-box-shadow:0 -4px 5px rgba(0,0,0,.15);
  2106. box-shadow:0 -4px 5px rgba(0,0,0,.15);
  2107. }
  2108. .j-forms .ms-search {
  2109. display:inline-block;
  2110. margin:0;
  2111. min-height:26px;
  2112. padding:4px;
  2113. position:relative;
  2114. white-space:nowrap;
  2115. width:100%;
  2116. z-index:9999;
  2117. }
  2118. .j-forms .ms-search,
  2119. .j-forms .ms-search input {
  2120. -webkit-box-sizing:border-box;
  2121. -khtml-box-sizing:border-box;
  2122. -moz-box-sizing:border-box;
  2123. -ms-box-sizing:border-box;
  2124. box-sizing:border-box;
  2125. }
  2126. .j-forms .ms-drop ul { overflow:auto; margin:0; padding:5px 8px; }
  2127. .j-forms .ms-drop ul > li { list-style:none; display:list-item; background-image:none; position:static; }
  2128. .j-forms .ms-drop ul > li .disabled { opacity:.35; }
  2129. .j-forms .ms-drop ul > li.multiple { display:block; float:left; }
  2130. .j-forms .ms-drop ul > li.group { clear:both; }
  2131. .j-forms .ms-drop ul > li.multiple label {
  2132. display:block;
  2133. overflow:hidden;
  2134. text-overflow:ellipsis;
  2135. white-space:nowrap;
  2136. width:100%;
  2137. }
  2138. .j-forms .ms-drop ul > li label { font-weight:normal; display:block; white-space:nowrap; }
  2139. .j-forms .ms-drop ul > li label.optgroup { font-weight:bold; }
  2140. .j-forms .ms-drop input[type="checkbox"] { vertical-align:middle; }
  2141. .j-forms .ms-drop .ms-no-results { display:none; }