style.css 67 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139
  1. @charset "UTF-8";
  2. /***** Base *****/
  3. * {
  4. box-sizing: border-box;
  5. }
  6. body {
  7. background-color: #ffffff;
  8. color: #39414a;
  9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  10. font-size: 15px;
  11. font-weight: 400;
  12. line-height: 1.5;
  13. -webkit-font-smoothing: antialiased;
  14. }
  15. @media (min-width: 1024px) {
  16. body > main {
  17. min-height: 65vh;
  18. }
  19. }
  20. h1, h2, h3, h4, h5, h6 {
  21. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  22. font-weight: 400;
  23. margin-top: 0;
  24. }
  25. h1 {
  26. font-size: 32px;
  27. }
  28. h2 {
  29. font-size: 22px;
  30. }
  31. h3 {
  32. font-size: 18px;
  33. font-weight: 600;
  34. }
  35. h4 {
  36. font-size: 16px;
  37. }
  38. a {
  39. color: #0c86c2;
  40. text-decoration: none;
  41. }
  42. a:hover, a:active, a:focus {
  43. text-decoration: underline;
  44. }
  45. input,
  46. textarea {
  47. color: #000;
  48. font-size: 14px;
  49. }
  50. input {
  51. font-weight: 300;
  52. max-width: 100%;
  53. box-sizing: border-box;
  54. outline: none;
  55. transition: border .12s ease-in-out;
  56. }
  57. input:focus {
  58. border: 1px solid #0c86c2;
  59. }
  60. input[disabled] {
  61. background-color: #ddd;
  62. }
  63. select {
  64. -webkit-appearance: none;
  65. -moz-appearance: none;
  66. background: url("/hc/theming_assets/01HZKNDTKX8HCXDPTSZ50NSKZ4") no-repeat #fff;
  67. background-position: right 10px center;
  68. border: 1px solid #ddd;
  69. border-radius: 4px;
  70. padding: 8px 30px 8px 10px;
  71. outline: none;
  72. color: #555;
  73. width: 100%;
  74. }
  75. select:focus {
  76. border: 1px solid #0c86c2;
  77. }
  78. select::-ms-expand {
  79. display: none;
  80. }
  81. textarea {
  82. border: 1px solid #ddd;
  83. border-radius: 2px;
  84. resize: vertical;
  85. width: 100%;
  86. outline: none;
  87. padding: 10px;
  88. }
  89. textarea:focus {
  90. border: 1px solid #0c86c2;
  91. }
  92. .container {
  93. max-width: 1160px;
  94. margin: 0 auto;
  95. padding: 0 5%;
  96. }
  97. @media (min-width: 1160px) {
  98. .container {
  99. padding: 0;
  100. width: 90%;
  101. }
  102. }
  103. .container-divider {
  104. border-top: 1px solid #ddd;
  105. margin-bottom: 20px;
  106. }
  107. ul {
  108. list-style: none;
  109. margin: 0;
  110. padding: 0;
  111. }
  112. .error-page {
  113. max-width: 1160px;
  114. margin: 0 auto;
  115. padding: 0 5%;
  116. }
  117. @media (min-width: 1160px) {
  118. .error-page {
  119. padding: 0;
  120. width: 90%;
  121. }
  122. }
  123. .dropdown-toggle::after {
  124. color: inherit;
  125. }
  126. /***** Buttons *****/
  127. .button, [role="button"] {
  128. border: 1px solid #0c86c2;
  129. border-radius: 4px;
  130. color: #0c86c2;
  131. cursor: pointer;
  132. display: inline-block;
  133. font-size: 12px;
  134. line-height: 2.34;
  135. margin: 0;
  136. padding: 0 20px;
  137. text-align: center;
  138. transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  139. user-select: none;
  140. white-space: nowrap;
  141. width: 100%;
  142. -webkit-touch-callout: none;
  143. }
  144. @media (min-width: 768px) {
  145. .button, [role="button"] {
  146. width: auto;
  147. }
  148. }
  149. .button::after, [role="button"]::after {
  150. color: #0c86c2;
  151. }
  152. .button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
  153. background-color: #0c86c2;
  154. color: #ffffff;
  155. text-decoration: none;
  156. }
  157. .button[aria-selected="true"]:hover, .button[aria-selected="true"]:focus, .button[aria-selected="true"]:active, [role="button"][aria-selected="true"]:hover, [role="button"][aria-selected="true"]:focus, [role="button"][aria-selected="true"]:active {
  158. background-color: #064462;
  159. border-color: #064462;
  160. }
  161. .button[data-disabled], [role="button"][data-disabled] {
  162. cursor: default;
  163. }
  164. .button-large, input[type="submit"] {
  165. background-color: #0c86c2;
  166. border: 0;
  167. border-radius: 4px;
  168. color: #ffffff;
  169. font-size: 14px;
  170. font-weight: 400;
  171. line-height: 2.72;
  172. min-width: 190px;
  173. padding: 0 1.9286em;
  174. width: 100%;
  175. }
  176. @media (min-width: 768px) {
  177. .button-large, input[type="submit"] {
  178. width: auto;
  179. }
  180. }
  181. .button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  182. background-color: #064462;
  183. }
  184. .button-large[disabled], input[type="submit"][disabled] {
  185. background-color: #ddd;
  186. }
  187. .button-secondary {
  188. color: #657484;
  189. border: 1px solid #ddd;
  190. background-color: transparent;
  191. }
  192. .button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  193. color: #39414a;
  194. border: 1px solid #ddd;
  195. background-color: #f7f7f7;
  196. }
  197. /***** Tables *****/
  198. .table {
  199. width: 100%;
  200. table-layout: fixed;
  201. }
  202. @media (min-width: 768px) {
  203. .table {
  204. table-layout: auto;
  205. }
  206. }
  207. .table th,
  208. .table th a {
  209. color: #657484;
  210. font-size: 13px;
  211. font-weight: 300;
  212. text-align: left;
  213. }
  214. [dir="rtl"] .table th, [dir="rtl"]
  215. .table th a {
  216. text-align: right;
  217. }
  218. .table tr {
  219. border-bottom: 1px solid #ddd;
  220. display: block;
  221. padding: 20px 0;
  222. }
  223. @media (min-width: 768px) {
  224. .table tr {
  225. display: table-row;
  226. }
  227. }
  228. .table td {
  229. display: block;
  230. }
  231. @media (min-width: 768px) {
  232. .table td {
  233. display: table-cell;
  234. }
  235. }
  236. @media (min-width: 1024px) {
  237. .table td, .table th {
  238. padding: 20px 30px;
  239. }
  240. }
  241. @media (min-width: 768px) {
  242. .table td, .table th {
  243. padding: 10px 20px;
  244. height: 60px;
  245. }
  246. }
  247. /***** Forms *****/
  248. .form {
  249. max-width: 650px;
  250. }
  251. .form-field ~ .form-field {
  252. margin-top: 25px;
  253. }
  254. .form-field label {
  255. display: block;
  256. font-size: 13px;
  257. margin-bottom: 5px;
  258. }
  259. .form-field input {
  260. border: 1px solid #ddd;
  261. border-radius: 4px;
  262. padding: 10px;
  263. width: 100%;
  264. }
  265. .form-field input:focus {
  266. border: 1px solid #0c86c2;
  267. }
  268. .form-field input[type="text"] {
  269. border: 1px solid #ddd;
  270. border-radius: 4px;
  271. }
  272. .form-field input[type="text"]:focus {
  273. border: 1px solid #0c86c2;
  274. }
  275. .form-field input[type="checkbox"] {
  276. width: auto;
  277. }
  278. .form-field .nesty-input {
  279. border-radius: 4px;
  280. height: 40px;
  281. line-height: 40px;
  282. outline: none;
  283. vertical-align: middle;
  284. }
  285. .form-field .nesty-input:focus {
  286. border: 1px solid #0c86c2;
  287. text-decoration: none;
  288. }
  289. .form-field textarea {
  290. vertical-align: middle;
  291. }
  292. .form-field input[type="checkbox"] + label {
  293. margin: 0 0 0 10px;
  294. }
  295. .form-field.required > label::after {
  296. content: "*";
  297. color: #f00;
  298. margin-left: 2px;
  299. }
  300. .form-field p {
  301. color: #657484;
  302. font-size: 12px;
  303. margin: 5px 0;
  304. }
  305. [data-loading="true"] input,
  306. [data-loading="true"] textarea {
  307. background: transparent url("/hc/theming_assets/01HZKNDTRRRWRF7R86A11T6X01") 99% 50% no-repeat;
  308. background-size: 16px 16px;
  309. }
  310. .form footer {
  311. margin-top: 40px;
  312. padding-top: 30px;
  313. }
  314. .form footer a {
  315. color: #657484;
  316. cursor: pointer;
  317. margin-right: 15px;
  318. }
  319. .form .suggestion-list {
  320. font-size: 13px;
  321. margin-top: 30px;
  322. }
  323. .form .suggestion-list label {
  324. border-bottom: 1px solid #ddd;
  325. display: block;
  326. padding-bottom: 5px;
  327. }
  328. .form .suggestion-list li {
  329. padding: 10px 0;
  330. }
  331. .form .suggestion-list li a:visited {
  332. color: #064462;
  333. }
  334. /***** Header *****/
  335. .header {
  336. max-width: 1160px;
  337. margin: 0 auto;
  338. padding: 0 5%;
  339. position: relative;
  340. align-items: center;
  341. display: flex;
  342. height: 71px;
  343. justify-content: space-between;
  344. }
  345. @media (min-width: 1160px) {
  346. .header {
  347. padding: 0;
  348. width: 90%;
  349. }
  350. }
  351. .logo img {
  352. max-height: 37px;
  353. }
  354. .user-nav {
  355. display: inline-block;
  356. position: absolute;
  357. white-space: nowrap;
  358. }
  359. @media (min-width: 768px) {
  360. .user-nav {
  361. position: relative;
  362. }
  363. }
  364. .user-nav[aria-expanded="true"] {
  365. background-color: #fff;
  366. box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  367. border: solid 1px #ddd;
  368. right: 0;
  369. left: 0;
  370. top: 71px;
  371. z-index: 1;
  372. }
  373. .user-nav[aria-expanded="true"] > a {
  374. display: block;
  375. margin: 20px;
  376. }
  377. .nav-wrapper a {
  378. border: 0;
  379. color: #0c86c2;
  380. display: none;
  381. font-size: 14px;
  382. padding: 0 20px 0 0;
  383. width: auto;
  384. }
  385. @media (min-width: 768px) {
  386. .nav-wrapper a {
  387. display: inline-block;
  388. }
  389. }
  390. [dir="rtl"] .nav-wrapper a {
  391. padding: 0 0 0 20px;
  392. }
  393. .nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  394. background-color: transparent;
  395. color: #0c86c2;
  396. text-decoration: underline;
  397. }
  398. .nav-wrapper a.login {
  399. display: inline-block;
  400. }
  401. .nav-wrapper .icon-menu {
  402. display: inline-block;
  403. margin-right: 10px;
  404. color: #0c86c2;
  405. }
  406. @media (min-width: 768px) {
  407. .nav-wrapper .icon-menu {
  408. display: none;
  409. }
  410. }
  411. [dir="rtl"] .nav-wrapper .icon-menu {
  412. margin-left: 10px;
  413. margin-right: 0;
  414. }
  415. /***** User info in header *****/
  416. .user-info {
  417. display: inline-block;
  418. }
  419. .user-info .dropdown-toggle::after {
  420. display: none;
  421. }
  422. @media (min-width: 768px) {
  423. .user-info .dropdown-toggle::after {
  424. display: inline-block;
  425. }
  426. }
  427. .user-info > [role="button"] {
  428. border: 0;
  429. color: #0c86c2;
  430. min-width: 0;
  431. padding: 0;
  432. white-space: nowrap;
  433. }
  434. .user-info > [role="button"]:hover {
  435. color: #0c86c2;
  436. background-color: transparent;
  437. }
  438. .user-info > [role="button"]::after {
  439. color: #0c86c2;
  440. padding-right: 15px;
  441. }
  442. [dir="rtl"] .user-info > [role="button"]::after {
  443. padding-left: 15px;
  444. padding-right: 0;
  445. }
  446. #user #user-name {
  447. display: none;
  448. font-size: 14px;
  449. }
  450. @media (min-width: 768px) {
  451. #user #user-name {
  452. display: inline-block;
  453. }
  454. }
  455. #user #user-name:hover {
  456. text-decoration: underline;
  457. }
  458. /***** User avatar *****/
  459. .user-avatar {
  460. height: 25px;
  461. width: 25px;
  462. border-radius: 50%;
  463. display: inline-block;
  464. vertical-align: middle;
  465. }
  466. .avatar {
  467. display: inline-block;
  468. position: relative;
  469. }
  470. .avatar img {
  471. height: 40px;
  472. width: 40px;
  473. }
  474. .avatar .icon-agent::before {
  475. background-color: #0c86c2;
  476. border: 2px solid #fff;
  477. border-radius: 50%;
  478. bottom: -4px;
  479. color: #ffffff;
  480. content: "\1F464";
  481. font-size: 14px;
  482. height: 14px;
  483. line-height: 14px;
  484. position: absolute;
  485. right: -2px;
  486. text-align: center;
  487. width: 14px;
  488. }
  489. /***** Footer *****/
  490. .footer {
  491. border-top: 1px solid #ddd;
  492. margin-top: 60px;
  493. padding: 30px 0;
  494. }
  495. .footer a {
  496. color: #657484;
  497. }
  498. .footer-inner {
  499. max-width: 1160px;
  500. margin: 0 auto;
  501. padding: 0 5%;
  502. display: flex;
  503. justify-content: space-between;
  504. }
  505. @media (min-width: 1160px) {
  506. .footer-inner {
  507. padding: 0;
  508. width: 90%;
  509. }
  510. }
  511. .footer-disclaimer {
  512. color: #657484;
  513. max-width: 1160px;
  514. margin: 1rem auto;
  515. padding: 0 5%;
  516. display: flex;
  517. justify-content: space-between;
  518. }
  519. @media (min-width: 1160px) {
  520. .footer-disclaimer {
  521. padding: 0;
  522. width: 90%;
  523. }
  524. }
  525. .footer-language-selector {
  526. color: #657484;
  527. display: inline-block;
  528. font-weight: 300;
  529. }
  530. /***** Breadcrumbs *****/
  531. .breadcrumbs {
  532. margin: 0 0 15px 0;
  533. padding: 0;
  534. }
  535. @media (min-width: 768px) {
  536. .breadcrumbs {
  537. margin: 0;
  538. }
  539. }
  540. .breadcrumbs li {
  541. color: #657484;
  542. display: inline;
  543. font-weight: 300;
  544. font-size: 13px;
  545. max-width: 450px;
  546. overflow: hidden;
  547. text-overflow: ellipsis;
  548. }
  549. .breadcrumbs li + li::before {
  550. content: ">";
  551. margin: 0 4px;
  552. }
  553. .breadcrumbs li a:visited {
  554. color: #0c86c2;
  555. }
  556. /***** Search field *****/
  557. .search {
  558. position: relative;
  559. }
  560. .search input[type="search"] {
  561. border: 1px solid #ddd;
  562. border-radius: 30px;
  563. box-sizing: border-box;
  564. color: #999;
  565. height: 40px;
  566. padding-left: 40px;
  567. padding-right: 20px;
  568. -webkit-appearance: none;
  569. width: 100%;
  570. }
  571. [dir="rtl"] .search input[type="search"] {
  572. padding-right: 40px;
  573. padding-left: 20px;
  574. }
  575. .search input[type="search"]:focus {
  576. border: 1px solid #0c86c2;
  577. color: #555;
  578. }
  579. .search::before {
  580. position: relative;
  581. top: 50%;
  582. transform: translateY(-50%);
  583. background-color: #fff;
  584. color: #ddd;
  585. content: "\1F50D";
  586. font-size: 18px;
  587. position: absolute;
  588. left: 15px;
  589. }
  590. [dir="rtl"] .search::before {
  591. right: 15px;
  592. left: auto;
  593. }
  594. .search-full input[type="search"] {
  595. border: 1px solid #fff;
  596. }
  597. /***** Hero component *****/
  598. .hero {
  599. background-image: url(/hc/theming_assets/01HZKNDV9XE0JE4PCZX5RSWDTG);
  600. background-position: center;
  601. background-size: cover;
  602. height: 300px;
  603. padding: 0 20px;
  604. text-align: center;
  605. width: 100%;
  606. }
  607. .hero-inner {
  608. position: relative;
  609. top: 50%;
  610. transform: translateY(-50%);
  611. max-width: 610px;
  612. margin: 0 auto;
  613. }
  614. .page-header {
  615. display: flex;
  616. flex-direction: column;
  617. flex-wrap: wrap;
  618. justify-content: space-between;
  619. margin: 10px 0;
  620. }
  621. @media (min-width: 768px) {
  622. .page-header {
  623. align-items: baseline;
  624. flex-direction: row;
  625. margin: 0;
  626. }
  627. }
  628. .page-header .section-subscribe {
  629. flex-shrink: 0;
  630. margin-bottom: 10px;
  631. }
  632. @media (min-width: 768px) {
  633. .page-header .section-subscribe {
  634. margin-bottom: 0;
  635. }
  636. }
  637. .page-header h1 {
  638. flex-grow: 1;
  639. margin-bottom: 10px;
  640. }
  641. .page-header-description {
  642. font-style: italic;
  643. font-weight: 300;
  644. margin: 0 0 30px 0;
  645. word-break: break-word;
  646. }
  647. @media (min-width: 1024px) {
  648. .page-header-description {
  649. flex-basis: 100%;
  650. }
  651. }
  652. .page-header .icon-lock::before {
  653. content: "\1F512";
  654. font-size: 20px;
  655. position: relative;
  656. left: -5px;
  657. vertical-align: baseline;
  658. }
  659. .sub-nav {
  660. display: flex;
  661. flex-direction: column;
  662. justify-content: space-between;
  663. margin-bottom: 30px;
  664. min-height: 50px;
  665. padding-bottom: 15px;
  666. }
  667. @media (min-width: 768px) {
  668. .sub-nav {
  669. align-items: baseline;
  670. flex-direction: row;
  671. }
  672. }
  673. @media (min-width: 768px) {
  674. .sub-nav input[type="search"] {
  675. min-width: 300px;
  676. }
  677. }
  678. .sub-nav input[type="search"]::after {
  679. font-size: 15px;
  680. }
  681. /***** Blocks *****/
  682. /* Used in Homepage#categories and Community#topics */
  683. .blocks-list {
  684. display: flex;
  685. flex-wrap: wrap;
  686. justify-content: flex-start;
  687. list-style: none;
  688. padding: 0;
  689. }
  690. @media (min-width: 768px) {
  691. .blocks-list {
  692. margin: 0 -15px;
  693. }
  694. }
  695. .blocks-item {
  696. border: 1px solid #0c86c2;
  697. border-radius: 4px;
  698. box-sizing: border-box;
  699. color: #0c86c2;
  700. display: flex;
  701. flex: 1 0 340px;
  702. flex-direction: column;
  703. justify-content: center;
  704. margin: 0 0 30px;
  705. max-width: 100%;
  706. text-align: center;
  707. }
  708. @media (min-width: 768px) {
  709. .blocks-item {
  710. margin: 0 15px 30px;
  711. }
  712. }
  713. .blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  714. background-color: #0c86c2;
  715. }
  716. .blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  717. color: #ffffff;
  718. text-decoration: none;
  719. }
  720. .blocks-item-internal {
  721. background-color: transparent;
  722. border: 1px solid #ddd;
  723. }
  724. .blocks-item-internal .icon-lock::before {
  725. content: "\1F512";
  726. font-size: 15px;
  727. bottom: 5px;
  728. position: relative;
  729. }
  730. .blocks-item-internal a {
  731. color: #39414a;
  732. }
  733. .blocks-item-link {
  734. color: #0c86c2;
  735. padding: 20px 30px;
  736. }
  737. .blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  738. text-decoration: none;
  739. }
  740. .blocks-item-title {
  741. margin-bottom: 0;
  742. }
  743. .blocks-item-description {
  744. font-weight: 300;
  745. margin: 0;
  746. }
  747. .blocks-item-description:not(:empty) {
  748. margin-top: 10px;
  749. }
  750. /***** Homepage *****/
  751. .section {
  752. margin-bottom: 40px;
  753. }
  754. @media (min-width: 768px) {
  755. .section {
  756. margin-bottom: 60px;
  757. }
  758. }
  759. .section h2 {
  760. margin-bottom: 10px;
  761. text-align: center;
  762. }
  763. /***** Promoted articles *****/
  764. .promoted-articles {
  765. display: flex;
  766. flex-direction: column;
  767. flex-wrap: wrap;
  768. }
  769. @media (min-width: 1024px) {
  770. .promoted-articles {
  771. flex-direction: row;
  772. }
  773. }
  774. .promoted-articles-item {
  775. flex: 1 0 auto;
  776. }
  777. @media (min-width: 1024px) {
  778. .promoted-articles-item {
  779. align-self: flex-end;
  780. flex: 0 0 auto;
  781. padding-right: 30px;
  782. width: 33%;
  783. /* Three columns on desktop */
  784. }
  785. [dir="rtl"] .promoted-articles-item {
  786. padding: 0 0 0 30px;
  787. }
  788. }
  789. .promoted-articles-item:nth-child(3n) {
  790. padding-right: 0;
  791. }
  792. .promoted-articles-item a {
  793. border-bottom: 1px solid #ddd;
  794. color: #39414a;
  795. display: block;
  796. padding: 15px 0;
  797. }
  798. .promoted-articles-item:last-child a {
  799. border: 0;
  800. }
  801. @media (min-width: 1024px) {
  802. .promoted-articles-item:last-child a {
  803. border-bottom: 1px solid #ddd;
  804. }
  805. }
  806. /***** Community section in homepage *****/
  807. .community {
  808. text-align: center;
  809. }
  810. .community-image {
  811. min-height: 300px;
  812. background-image: url(/hc/theming_assets/01HZKNDVNSXYK3AF805XJZH5V8);
  813. background-position: center;
  814. background-repeat: no-repeat;
  815. max-width: 100%;
  816. }
  817. .community,
  818. .activity {
  819. border-top: 1px solid #ddd;
  820. padding: 30px 0;
  821. margin-top: 30px;
  822. }
  823. /***** Recent activity *****/
  824. .recent-activity-header {
  825. margin-bottom: 10px;
  826. text-align: center;
  827. }
  828. .recent-activity-list {
  829. padding: 0;
  830. }
  831. .recent-activity-item {
  832. border-bottom: 1px solid #ddd;
  833. overflow: auto;
  834. padding: 20px 0;
  835. }
  836. .recent-activity-item-parent {
  837. font-size: 16px;
  838. }
  839. .recent-activity-item-parent, .recent-activity-item-link {
  840. margin: 6px 0;
  841. color: #39414a;
  842. display: inline-block;
  843. width: 100%;
  844. }
  845. @media (min-width: 768px) {
  846. .recent-activity-item-parent, .recent-activity-item-link {
  847. width: 70%;
  848. margin: 0;
  849. }
  850. }
  851. .recent-activity-item-link {
  852. font-size: 14px;
  853. font-weight: 300;
  854. }
  855. .recent-activity-item-meta {
  856. margin: 15px 0 0 0;
  857. float: none;
  858. }
  859. @media (min-width: 768px) {
  860. .recent-activity-item-meta {
  861. margin: 0;
  862. float: right;
  863. }
  864. [dir="rtl"] .recent-activity-item-meta {
  865. float: left;
  866. }
  867. }
  868. .recent-activity-item-time, .recent-activity-item-comment {
  869. color: #657484;
  870. display: inline-block;
  871. font-size: 13px;
  872. font-weight: 300;
  873. }
  874. .recent-activity-item-comment {
  875. padding-left: 5px;
  876. }
  877. [dir="rtl"] .recent-activity-item-comment {
  878. padding: 0 5px 0 0;
  879. }
  880. .recent-activity-item-comment::before {
  881. display: inline-block;
  882. }
  883. .recent-activity-item-comment span::before {
  884. color: #0c86c2;
  885. content: "\1F4AC";
  886. display: inline-block;
  887. font-size: 15px;
  888. padding-right: 3px;
  889. vertical-align: middle;
  890. }
  891. [dir="rtl"] .recent-activity-item-comment span::before {
  892. padding-left: 3px;
  893. }
  894. .recent-activity-controls {
  895. padding-top: 15px;
  896. }
  897. /***** Category pages *****/
  898. .category-container {
  899. display: flex;
  900. justify-content: flex-end;
  901. }
  902. .category-content {
  903. flex: 1;
  904. }
  905. @media (min-width: 1024px) {
  906. .category-content {
  907. flex: 0 0 80%;
  908. }
  909. }
  910. .section-tree {
  911. display: flex;
  912. flex-direction: column;
  913. flex-wrap: wrap;
  914. justify-content: space-between;
  915. }
  916. @media (min-width: 768px) {
  917. .section-tree {
  918. flex-direction: row;
  919. }
  920. }
  921. .section-tree .section {
  922. flex: initial;
  923. }
  924. @media (min-width: 768px) {
  925. .section-tree .section {
  926. flex: 0 0 45%;
  927. /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  928. }
  929. }
  930. .section-tree .icon-lock::before {
  931. vertical-align: baseline;
  932. }
  933. .section-tree-title {
  934. margin-bottom: 0;
  935. }
  936. .section-tree-title a {
  937. color: #39414a;
  938. }
  939. .section-tree .see-all-articles {
  940. display: block;
  941. padding: 15px 0;
  942. }
  943. .article-list-item {
  944. border-bottom: 1px solid #ddd;
  945. font-size: 16px;
  946. padding: 15px 0;
  947. }
  948. .article-list-item a {
  949. color: #39414a;
  950. }
  951. .icon-star::before {
  952. color: #0c86c2;
  953. font-size: 18px;
  954. }
  955. /***** Section pages *****/
  956. .section-container {
  957. display: flex;
  958. justify-content: flex-end;
  959. }
  960. .section-content {
  961. flex: 1;
  962. }
  963. @media (min-width: 1024px) {
  964. .section-content {
  965. flex: 0 0 80%;
  966. }
  967. }
  968. .section-subscribe .dropdown-toggle::after {
  969. display: none;
  970. }
  971. /***** Article *****/
  972. .article {
  973. /*
  974. * The article grid is defined this way to optimize readability:
  975. * Sidebar | Content | Free space
  976. * 17% | 66% | 17%
  977. */
  978. flex: 1 0 auto;
  979. }
  980. @media (min-width: 1024px) {
  981. .article {
  982. flex: 1 0 66%;
  983. max-width: 66%;
  984. min-width: 640px;
  985. padding: 0 30px;
  986. }
  987. }
  988. .article-container {
  989. display: flex;
  990. flex-direction: column;
  991. }
  992. @media (min-width: 1024px) {
  993. .article-container {
  994. flex-direction: row;
  995. }
  996. }
  997. .article-header {
  998. align-items: flex-start;
  999. display: flex;
  1000. flex-direction: column;
  1001. flex-wrap: wrap;
  1002. justify-content: space-between;
  1003. margin-bottom: 40px;
  1004. margin-top: 20px;
  1005. }
  1006. @media (min-width: 768px) {
  1007. .article-header {
  1008. flex-direction: row;
  1009. margin-top: 0;
  1010. }
  1011. }
  1012. .article-author {
  1013. margin-bottom: 10px;
  1014. }
  1015. @media (min-width: 768px) {
  1016. .article-title {
  1017. flex-basis: 100%;
  1018. /* Take entire row */
  1019. }
  1020. }
  1021. .article-title .icon-lock::before {
  1022. content: "\1F512";
  1023. font-size: 20px;
  1024. position: relative;
  1025. left: -5px;
  1026. vertical-align: baseline;
  1027. }
  1028. .article [role="button"] {
  1029. flex-shrink: 0;
  1030. /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  1031. width: 100%;
  1032. }
  1033. @media (min-width: 768px) {
  1034. .article [role="button"] {
  1035. width: auto;
  1036. }
  1037. }
  1038. .article-info {
  1039. max-width: 100%;
  1040. }
  1041. .article-meta {
  1042. display: inline-block;
  1043. margin-left: 10px;
  1044. vertical-align: middle;
  1045. }
  1046. .article-body img {
  1047. height: auto;
  1048. max-width: 100%;
  1049. }
  1050. .article-body ul, .article-body ol {
  1051. padding-left: 20px;
  1052. list-style-position: outside;
  1053. margin: 20px 0 20px 20px;
  1054. }
  1055. [dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  1056. padding-right: 20px;
  1057. padding-left: 0;
  1058. margin-left: 0;
  1059. margin-right: 20px;
  1060. }
  1061. .article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol {
  1062. margin: 0;
  1063. }
  1064. .article-body ul {
  1065. list-style-type: disc;
  1066. }
  1067. .article-body a:visited {
  1068. color: #064462;
  1069. }
  1070. .article-body code {
  1071. background: #f7f7f7;
  1072. border: 1px solid #ddd;
  1073. border-radius: 3px;
  1074. padding: 0 5px;
  1075. margin: 0 2px;
  1076. }
  1077. .article-body pre {
  1078. background: #f7f7f7;
  1079. border: 1px solid #ddd;
  1080. border-radius: 3px;
  1081. padding: 10px 15px;
  1082. overflow: auto;
  1083. white-space: pre;
  1084. }
  1085. .article-body blockquote {
  1086. border-left: 1px solid #ddd;
  1087. color: #657484;
  1088. font-style: italic;
  1089. padding: 0 15px;
  1090. }
  1091. .article-body > p:last-child {
  1092. margin-bottom: 0;
  1093. }
  1094. .article-content {
  1095. line-height: 1.6;
  1096. margin: 40px 0;
  1097. word-wrap: break-word;
  1098. }
  1099. .article-footer {
  1100. align-items: center;
  1101. display: flex;
  1102. justify-content: space-between;
  1103. padding-bottom: 20px;
  1104. }
  1105. .article-comment-count {
  1106. color: #657484;
  1107. font-weight: 300;
  1108. }
  1109. .article-comment-count:hover {
  1110. text-decoration: none;
  1111. }
  1112. .article-comment-count .icon-comments {
  1113. color: #0c86c2;
  1114. content: "\1F4AC";
  1115. display: inline-block;
  1116. font-size: 18px;
  1117. padding: 5px;
  1118. }
  1119. .article-sidebar {
  1120. border-bottom: 1px solid #ddd;
  1121. border-top: 1px solid #ddd;
  1122. flex: 1 0 auto;
  1123. margin-bottom: 20px;
  1124. padding: 0;
  1125. }
  1126. @media (min-width: 1024px) {
  1127. .article-sidebar {
  1128. border: 0;
  1129. flex: 0 0 17%;
  1130. height: auto;
  1131. }
  1132. }
  1133. .article-relatives {
  1134. border-top: 1px solid #ddd;
  1135. display: flex;
  1136. flex-direction: column;
  1137. padding: 20px 0;
  1138. }
  1139. @media (min-width: 768px) {
  1140. .article-relatives {
  1141. flex-direction: row;
  1142. }
  1143. }
  1144. .article-relatives > * {
  1145. flex: 1 0 auto;
  1146. margin-right: 0;
  1147. }
  1148. .article-relatives > *:last-child {
  1149. margin: 0;
  1150. }
  1151. @media (min-width: 768px) {
  1152. .article-relatives > * {
  1153. margin-right: 20px;
  1154. }
  1155. }
  1156. .article-votes {
  1157. border-top: 1px solid #ddd;
  1158. padding: 30px 0;
  1159. text-align: center;
  1160. }
  1161. .article-vote {
  1162. background: transparent;
  1163. border: 1px solid #0c86c2;
  1164. color: #0c86c2;
  1165. margin: 10px 5px;
  1166. min-width: 90px;
  1167. width: auto;
  1168. }
  1169. .article-vote::before {
  1170. font-size: 8px;
  1171. margin-right: 10px;
  1172. }
  1173. [dir="rtl"] .article-vote::before {
  1174. margin-right: 0;
  1175. margin-left: 10px;
  1176. }
  1177. .article-vote::after {
  1178. content: attr(title);
  1179. /* Yes/No label*/
  1180. }
  1181. .article-vote:focus, .article-vote:active {
  1182. background-color: transparent;
  1183. color: #0c86c2;
  1184. }
  1185. .article-vote:hover {
  1186. background-color: #0c86c2;
  1187. }
  1188. .article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  1189. color: #ffffff;
  1190. }
  1191. .article-vote-up::before {
  1192. content: "\2713";
  1193. }
  1194. .article-vote-down::before {
  1195. content: "\2715";
  1196. }
  1197. .article-more-questions {
  1198. margin: 10px 0 20px;
  1199. text-align: center;
  1200. }
  1201. .article-return-to-top {
  1202. border-top: 1px solid #ddd;
  1203. }
  1204. @media (min-width: 1024px) {
  1205. .article-return-to-top {
  1206. display: none;
  1207. }
  1208. }
  1209. .article-return-to-top a {
  1210. color: #39414a;
  1211. display: block;
  1212. padding: 20px 0;
  1213. }
  1214. .article-return-to-top a:hover, .article-return-to-top a:focus {
  1215. text-decoration: none;
  1216. }
  1217. .article-return-to-top .icon-arrow-up::before {
  1218. font-size: 16px;
  1219. margin-left: 5px;
  1220. }
  1221. [dir="rtl"] .article-return-to-top .icon-arrow-up::before {
  1222. margin-right: 10px;
  1223. }
  1224. .article-unsubscribe {
  1225. background-color: #0c86c2;
  1226. color: #ffffff;
  1227. text-decoration: none;
  1228. }
  1229. .article-unsubscribe:hover {
  1230. background-color: #064462;
  1231. border-color: #064462;
  1232. }
  1233. .sidenav-title {
  1234. font-size: 15px;
  1235. position: relative;
  1236. }
  1237. .sidenav-item {
  1238. border-radius: 4px;
  1239. color: #39414a;
  1240. display: block;
  1241. font-weight: 300;
  1242. margin-bottom: 10px;
  1243. padding: 10px;
  1244. }
  1245. .sidenav-item.current-article, .sidenav-item:hover {
  1246. background-color: #0c86c2;
  1247. color: #ffffff;
  1248. text-decoration: none;
  1249. }
  1250. .recent-articles h3,
  1251. .related-articles h3 {
  1252. font-size: 15px;
  1253. margin: 20px 0;
  1254. }
  1255. .recent-articles li,
  1256. .related-articles li {
  1257. margin-bottom: 15px;
  1258. }
  1259. /***** Attachments *****/
  1260. /* Styles attachments inside posts, articles and comments */
  1261. .attachments .attachment-item {
  1262. padding-left: 20px;
  1263. position: relative;
  1264. margin-bottom: 10px;
  1265. }
  1266. .attachments .attachment-item:last-child {
  1267. margin-bottom: 0;
  1268. }
  1269. .attachments .attachment-item::before {
  1270. color: #39414a;
  1271. content: "\1F4CE";
  1272. font-size: 15px;
  1273. left: 0;
  1274. position: absolute;
  1275. top: 5px;
  1276. }
  1277. [dir="rtl"] .attachments .attachment-item {
  1278. padding-left: 0;
  1279. padding-right: 20px;
  1280. }
  1281. [dir="rtl"] .attachments .attachment-item::before {
  1282. left: auto;
  1283. right: 0;
  1284. }
  1285. .upload-dropzone span {
  1286. color: #657484;
  1287. }
  1288. /***** Social share links *****/
  1289. .share {
  1290. padding: 0;
  1291. white-space: nowrap;
  1292. }
  1293. .share li, .share a {
  1294. display: inline-block;
  1295. }
  1296. .share a {
  1297. border-radius: 50%;
  1298. height: 25px;
  1299. line-height: 25px;
  1300. overflow: hidden;
  1301. width: 25px;
  1302. }
  1303. .share a::before {
  1304. color: #657484;
  1305. display: block;
  1306. font-size: 23px;
  1307. text-align: center;
  1308. width: 100%;
  1309. }
  1310. .share a:hover {
  1311. text-decoration: none;
  1312. }
  1313. .share a:hover::before {
  1314. color: #0c86c2;
  1315. }
  1316. .share-twitter::before {
  1317. content: "\e901";
  1318. }
  1319. .share-facebook::before {
  1320. content: "\e903";
  1321. }
  1322. .share-linkedin::before {
  1323. content: "\e900";
  1324. }
  1325. .share-googleplus::before {
  1326. content: "\e902";
  1327. }
  1328. /***** Comments *****/
  1329. /* Styles comments inside articles, posts and requests */
  1330. .comment {
  1331. border-bottom: 1px solid #ddd;
  1332. padding: 20px 0;
  1333. }
  1334. .comment-heading {
  1335. margin-bottom: 5px;
  1336. margin-top: 0;
  1337. }
  1338. .comment-overview {
  1339. border-bottom: 1px solid #ddd;
  1340. border-top: 1px solid #ddd;
  1341. padding: 20px 0;
  1342. }
  1343. .comment-overview p {
  1344. margin-top: 0;
  1345. }
  1346. .comment-callout {
  1347. color: #657484;
  1348. display: inline-block;
  1349. font-weight: 300;
  1350. font-size: 13px;
  1351. margin-bottom: 0;
  1352. }
  1353. .comment-callout a {
  1354. color: #0c86c2;
  1355. }
  1356. .comment-sorter {
  1357. display: inline-block;
  1358. float: right;
  1359. }
  1360. .comment-sorter a {
  1361. color: #657484;
  1362. font-weight: 300;
  1363. font-size: 13px;
  1364. text-decoration: none;
  1365. }
  1366. [dir="rtl"] .comment-sorter {
  1367. float: left;
  1368. }
  1369. .comment-wrapper {
  1370. display: flex;
  1371. position: relative;
  1372. }
  1373. .comment-wrapper.comment-official {
  1374. border: 1px solid #0c86c2;
  1375. padding: 40px 20px 20px;
  1376. }
  1377. @media (min-width: 768px) {
  1378. .comment-wrapper.comment-official {
  1379. padding-top: 20px;
  1380. }
  1381. }
  1382. .comment-info {
  1383. min-width: 0;
  1384. padding-right: 20px;
  1385. width: 100%;
  1386. }
  1387. [dir="rtl"] .comment-info {
  1388. padding-right: 0;
  1389. padding-left: 20px;
  1390. }
  1391. .comment-author {
  1392. align-items: flex-end;
  1393. display: flex;
  1394. flex-wrap: wrap;
  1395. margin-bottom: 20px;
  1396. }
  1397. @media (min-width: 768px) {
  1398. .comment-author {
  1399. justify-content: space-between;
  1400. }
  1401. }
  1402. .comment-avatar {
  1403. margin-right: 10px;
  1404. }
  1405. [dir="rtl"] .comment-avatar {
  1406. margin-left: 10px;
  1407. margin-right: 0;
  1408. }
  1409. .comment-meta {
  1410. flex: 1 0 auto;
  1411. }
  1412. .comment-labels {
  1413. flex-basis: 100%;
  1414. }
  1415. @media (min-width: 768px) {
  1416. .comment-labels {
  1417. flex-basis: auto;
  1418. }
  1419. }
  1420. .comment .status-label:not(.status-label-official) {
  1421. margin-top: 10px;
  1422. }
  1423. @media (min-width: 768px) {
  1424. .comment .status-label:not(.status-label-official) {
  1425. margin-top: 0;
  1426. }
  1427. }
  1428. .comment-form {
  1429. display: flex;
  1430. padding-top: 30px;
  1431. word-wrap: break-word;
  1432. }
  1433. .comment-container {
  1434. width: 100%;
  1435. }
  1436. .comment-form-controls {
  1437. display: none;
  1438. margin-top: 10px;
  1439. text-align: left;
  1440. }
  1441. @media (min-width: 768px) {
  1442. [dir="ltr"] .comment-form-controls {
  1443. text-align: right;
  1444. }
  1445. }
  1446. .comment-form-controls input[type="submit"] {
  1447. margin-top: 15px;
  1448. }
  1449. @media (min-width: 1024px) {
  1450. .comment-form-controls input[type="submit"] {
  1451. margin-left: 15px;
  1452. }
  1453. [dir="rtl"] .comment-form-controls input[type="submit"] {
  1454. margin-left: 0;
  1455. margin-right: 15px;
  1456. }
  1457. }
  1458. .comment-form-controls input[type="checkbox"] {
  1459. margin-right: 5px;
  1460. }
  1461. .comment-form-controls input[type="checkbox"] [dir="rtl"] {
  1462. margin-left: 5px;
  1463. }
  1464. .comment-ccs {
  1465. display: none;
  1466. }
  1467. .comment-ccs + textarea {
  1468. margin-top: 10px;
  1469. }
  1470. .comment-attachments {
  1471. margin-top: 10px;
  1472. }
  1473. .comment-attachments a {
  1474. color: #0c86c2;
  1475. }
  1476. .comment-body {
  1477. -moz-hyphens: auto;
  1478. -ms-hyphens: auto;
  1479. -webkit-hyphens: auto;
  1480. word-break: break-word;
  1481. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  1482. line-height: 1.6;
  1483. }
  1484. .comment-body img {
  1485. height: auto;
  1486. max-width: 100%;
  1487. }
  1488. .comment-body ul, .comment-body ol {
  1489. padding-left: 20px;
  1490. list-style-position: outside;
  1491. margin: 20px 0 20px 20px;
  1492. }
  1493. [dir="rtl"] .comment-body ul, [dir="rtl"] .comment-body ol {
  1494. padding-right: 20px;
  1495. padding-left: 0;
  1496. margin-left: 0;
  1497. margin-right: 20px;
  1498. }
  1499. .comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol {
  1500. margin: 0;
  1501. }
  1502. .comment-body ul {
  1503. list-style-type: disc;
  1504. }
  1505. .comment-body a:visited {
  1506. color: #064462;
  1507. }
  1508. .comment-body code {
  1509. background: #f7f7f7;
  1510. border: 1px solid #ddd;
  1511. border-radius: 3px;
  1512. padding: 0 5px;
  1513. margin: 0 2px;
  1514. }
  1515. .comment-body pre {
  1516. background: #f7f7f7;
  1517. border: 1px solid #ddd;
  1518. border-radius: 3px;
  1519. padding: 10px 15px;
  1520. overflow: auto;
  1521. white-space: pre;
  1522. }
  1523. .comment-body blockquote {
  1524. border-left: 1px solid #ddd;
  1525. color: #657484;
  1526. font-style: italic;
  1527. padding: 0 15px;
  1528. }
  1529. .comment-mark-as-solved {
  1530. display: inline-block;
  1531. }
  1532. /***** Vote *****/
  1533. /* Used in article comments, post comments and post */
  1534. .vote {
  1535. display: inline-block;
  1536. text-align: center;
  1537. width: 35px;
  1538. }
  1539. .vote a {
  1540. outline: none;
  1541. }
  1542. .vote a:active, .vote a:hover, .vote a:focus {
  1543. text-decoration: none;
  1544. }
  1545. .vote-sum {
  1546. color: #657484;
  1547. display: block;
  1548. margin: 3px 0;
  1549. }
  1550. [dir="rtl"] .vote-sum {
  1551. direction: ltr;
  1552. unicode-bidi: bidi-override;
  1553. }
  1554. .vote-up:hover::before,
  1555. .vote-down:hover::before {
  1556. color: #0c86c2;
  1557. }
  1558. .vote-up::before, .vote-down::before {
  1559. color: #657484;
  1560. font-size: 24px;
  1561. }
  1562. .vote-up::before {
  1563. content: "\2B06";
  1564. }
  1565. .vote-down::before {
  1566. content: "\2B07";
  1567. }
  1568. .vote-voted::before {
  1569. color: #0c86c2;
  1570. }
  1571. .vote-voted:hover::before {
  1572. color: #064462;
  1573. }
  1574. /***** Actions *****/
  1575. /* Styles admin and en user actions(edit, delete, change status) in comments and posts */
  1576. .actions {
  1577. text-align: center;
  1578. flex-shrink: 0;
  1579. /*Avoid collapsing elements in Safari*/
  1580. }
  1581. .actions .dropdown-toggle {
  1582. font-size: 0;
  1583. margin: 15px 0;
  1584. }
  1585. .actions .dropdown-toggle:hover::before, .actions .dropdown-toggle:focus::before, .actions .dropdown-toggle:active::before {
  1586. background-color: #f7f7f7;
  1587. }
  1588. .actions .dropdown-toggle::before {
  1589. background-color: transparent;
  1590. border-radius: 50%;
  1591. color: #657484;
  1592. content: "\2699";
  1593. display: block;
  1594. font-size: 13px;
  1595. margin: auto;
  1596. padding: 5px;
  1597. }
  1598. /***** Community *****/
  1599. .community-hero {
  1600. background-image: url(/hc/theming_assets/01HZKNDVG7V751QD00JX9HFQEA);
  1601. margin-bottom: 10px;
  1602. }
  1603. .community-footer {
  1604. padding-top: 50px;
  1605. text-align: center;
  1606. }
  1607. .community-featured-posts, .community-activity {
  1608. padding-top: 40px;
  1609. width: 100%;
  1610. }
  1611. .community-header {
  1612. margin-bottom: 30px;
  1613. }
  1614. .community-header h4 {
  1615. margin-bottom: 0;
  1616. }
  1617. .post-to-community {
  1618. margin-top: 10px;
  1619. }
  1620. @media (min-width: 768px) {
  1621. .post-to-community {
  1622. margin: 0;
  1623. }
  1624. }
  1625. /* Community topics grid */
  1626. .topics {
  1627. max-width: none;
  1628. width: 100%;
  1629. }
  1630. .topics-item .meta-group {
  1631. justify-content: center;
  1632. margin-top: 20px;
  1633. }
  1634. /* Community topic page */
  1635. .topic-header {
  1636. border-bottom: 1px solid #ddd;
  1637. font-size: 13px;
  1638. }
  1639. @media (min-width: 768px) {
  1640. .topic-header {
  1641. padding-bottom: 10px;
  1642. }
  1643. }
  1644. .topic-header .dropdown {
  1645. display: block;
  1646. border-top: 1px solid #ddd;
  1647. padding: 10px 0;
  1648. }
  1649. @media (min-width: 768px) {
  1650. .topic-header .dropdown {
  1651. border-top: 0;
  1652. display: inline-block;
  1653. margin-right: 20px;
  1654. padding: 0;
  1655. }
  1656. }
  1657. .no-posts-with-filter {
  1658. margin-top: 20px;
  1659. margin-bottom: 20px;
  1660. }
  1661. /* Topic, post and user follow button */
  1662. .community-follow {
  1663. margin-bottom: 10px;
  1664. width: 100%;
  1665. }
  1666. @media (min-width: 768px) {
  1667. .community-follow {
  1668. margin-bottom: 0;
  1669. width: auto;
  1670. }
  1671. }
  1672. .community-follow .dropdown {
  1673. width: 100%;
  1674. }
  1675. .community-follow [role="button"] {
  1676. line-height: 30px;
  1677. padding: 0 10px 0 15px;
  1678. position: relative;
  1679. width: 100%;
  1680. }
  1681. @media (min-width: 768px) {
  1682. .community-follow [role="button"] {
  1683. width: auto;
  1684. }
  1685. }
  1686. .community-follow [role="button"]:hover {
  1687. background-color: #0c86c2;
  1688. }
  1689. .community-follow [role="button"]:hover::after, .community-follow [role="button"]:focus::after {
  1690. border-color: #ffffff;
  1691. color: #ffffff;
  1692. }
  1693. .community-follow [role="button"][aria-selected="true"] {
  1694. background-color: #0c86c2;
  1695. color: #ffffff;
  1696. }
  1697. .community-follow [role="button"][aria-selected="true"]::after {
  1698. border-left: 1px solid #ffffff;
  1699. color: #ffffff;
  1700. }
  1701. .community-follow [role="button"][aria-selected="true"]:hover {
  1702. background-color: #064462;
  1703. border-color: #064462;
  1704. }
  1705. .community-follow [role="button"]::after {
  1706. border-left: 1px solid #0c86c2;
  1707. content: attr(data-follower-count);
  1708. color: #0c86c2;
  1709. display: inline-block;
  1710. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  1711. margin-left: 15px;
  1712. padding-left: 10px;
  1713. position: absolute;
  1714. right: 10px;
  1715. }
  1716. @media (min-width: 768px) {
  1717. .community-follow [role="button"]::after {
  1718. position: static;
  1719. }
  1720. }
  1721. [dir="rtl"] .community-follow [role="button"]::after {
  1722. border-left: 0;
  1723. border-right: 1px solid #0c86c2;
  1724. margin: 0 10px 0 0;
  1725. padding: 0 10px 0 0;
  1726. }
  1727. /***** Striped list *****/
  1728. /* Used in community posts list and requests list */
  1729. .striped-list {
  1730. padding: 0;
  1731. }
  1732. .striped-list-item {
  1733. align-items: flex-start;
  1734. border-bottom: 1px solid #ddd;
  1735. display: flex;
  1736. flex-direction: column;
  1737. justify-content: flex-end;
  1738. padding: 20px 0;
  1739. }
  1740. @media (min-width: 768px) {
  1741. .striped-list-item {
  1742. align-items: center;
  1743. flex-direction: row;
  1744. }
  1745. }
  1746. .striped-list-info {
  1747. flex: 2;
  1748. }
  1749. .striped-list-title {
  1750. color: #0c86c2;
  1751. margin-bottom: 10px;
  1752. margin-right: 5px;
  1753. }
  1754. .striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  1755. text-decoration: underline;
  1756. }
  1757. .striped-list-title:visited {
  1758. color: #064462;
  1759. }
  1760. .striped-list .meta-group {
  1761. margin: 5px 0;
  1762. }
  1763. .striped-list-count {
  1764. color: #657484;
  1765. font-weight: 300;
  1766. font-size: 13px;
  1767. justify-content: flex-start;
  1768. text-transform: capitalize;
  1769. }
  1770. @media (min-width: 768px) {
  1771. .striped-list-count {
  1772. display: flex;
  1773. flex: 1;
  1774. justify-content: space-around;
  1775. }
  1776. }
  1777. .striped-list-count-item::after {
  1778. content: "·";
  1779. display: inline-block;
  1780. padding: 0 5px;
  1781. }
  1782. @media (min-width: 768px) {
  1783. .striped-list-count-item::after {
  1784. display: none;
  1785. }
  1786. }
  1787. .striped-list-count-item:last-child::after {
  1788. display: none;
  1789. }
  1790. .striped-list-number {
  1791. font-weight: 300;
  1792. text-align: center;
  1793. }
  1794. @media (min-width: 768px) {
  1795. .striped-list-number {
  1796. color: #39414a;
  1797. display: block;
  1798. font-weight: 400;
  1799. }
  1800. }
  1801. /***** Status labels *****/
  1802. /* Styles labels used in posts, articles and requests */
  1803. .status-label {
  1804. background-color: #1eb848;
  1805. border-radius: 4px;
  1806. color: #fff;
  1807. font-size: 12px;
  1808. margin-right: 2px;
  1809. padding: 3px 10px;
  1810. vertical-align: middle;
  1811. white-space: nowrap;
  1812. display: inline-block;
  1813. }
  1814. .status-label:hover, .status-label:active, .status-label:focus {
  1815. text-decoration: none;
  1816. }
  1817. .status-label-pinned, .status-label-featured, .status-label-official {
  1818. background-color: #0c86c2;
  1819. }
  1820. .status-label-official {
  1821. border-radius: 0;
  1822. margin-right: 0;
  1823. position: absolute;
  1824. right: 0;
  1825. text-align: center;
  1826. top: 0;
  1827. width: 100%;
  1828. }
  1829. @media (min-width: 768px) {
  1830. .status-label-official {
  1831. border-radius: 0 0 4px 4px;
  1832. right: 30px;
  1833. width: auto;
  1834. }
  1835. }
  1836. [dir="rtl"] .status-label-official {
  1837. left: 30px;
  1838. right: auto;
  1839. }
  1840. .status-label-pending, .status-label-not-planned {
  1841. background-color: #eee;
  1842. color: #657484;
  1843. }
  1844. .status-label-pending {
  1845. text-align: center;
  1846. }
  1847. .status-label-open {
  1848. background-color: #e03b30;
  1849. }
  1850. .status-label-closed {
  1851. background-color: #ddd;
  1852. }
  1853. .status-label-solved {
  1854. background-color: #999;
  1855. }
  1856. .status-label-new {
  1857. background-color: #ffd12a;
  1858. }
  1859. .status-label-hold {
  1860. background-color: #000;
  1861. }
  1862. .status-label-open, .status-label-closed, .status-label-solved, .status-label-new, .status-label-hold, .status-label-answered {
  1863. text-transform: lowercase;
  1864. }
  1865. /***** Post *****/
  1866. /*
  1867. * The post grid is defined this way:
  1868. * Content | Sidebar
  1869. * 70% | 30%
  1870. */
  1871. .post {
  1872. flex: 1;
  1873. margin-bottom: 10px;
  1874. }
  1875. @media (min-width: 1024px) {
  1876. .post {
  1877. flex: 1 0 70%;
  1878. max-width: 70%;
  1879. }
  1880. }
  1881. .post-container {
  1882. display: flex;
  1883. flex-direction: column;
  1884. }
  1885. @media (min-width: 1024px) {
  1886. .post-container {
  1887. flex-direction: row;
  1888. }
  1889. }
  1890. .post-header {
  1891. align-items: center;
  1892. display: flex;
  1893. flex-direction: column;
  1894. justify-content: space-between;
  1895. margin-bottom: 10px;
  1896. }
  1897. @media (min-width: 768px) {
  1898. .post-header {
  1899. align-items: baseline;
  1900. flex-direction: row;
  1901. }
  1902. }
  1903. .post-header .status-label {
  1904. vertical-align: super;
  1905. }
  1906. .post-title {
  1907. margin-bottom: 20px;
  1908. width: 100%;
  1909. }
  1910. @media (min-width: 768px) {
  1911. .post-title {
  1912. margin-bottom: 0;
  1913. padding-right: 10px;
  1914. }
  1915. }
  1916. .post-title h1 {
  1917. display: inline;
  1918. vertical-align: middle;
  1919. }
  1920. @media (min-width: 768px) {
  1921. .post-title h1 {
  1922. margin-right: 5px;
  1923. }
  1924. }
  1925. .post-author {
  1926. align-items: flex-start;
  1927. display: flex;
  1928. justify-content: space-between;
  1929. }
  1930. .post-avatar {
  1931. margin-bottom: 30px;
  1932. }
  1933. .post-content {
  1934. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  1935. line-height: 1.6;
  1936. word-break: break-word;
  1937. }
  1938. .post-info-container {
  1939. display: flex;
  1940. margin-bottom: 40px;
  1941. }
  1942. .post-info {
  1943. min-width: 0;
  1944. padding-right: 20px;
  1945. width: 100%;
  1946. }
  1947. [dir="rtl"] .post-info {
  1948. padding-right: 0;
  1949. padding-left: 20px;
  1950. }
  1951. .post-meta {
  1952. display: inline-block;
  1953. flex: 1;
  1954. margin-left: 10px;
  1955. vertical-align: middle;
  1956. }
  1957. [dir="rtl"] .post-meta {
  1958. margin-left: 0;
  1959. margin-right: 10px;
  1960. }
  1961. .post-body img {
  1962. height: auto;
  1963. max-width: 100%;
  1964. }
  1965. .post-body ul, .post-body ol {
  1966. padding-left: 20px;
  1967. list-style-position: outside;
  1968. margin: 20px 0 20px 20px;
  1969. }
  1970. [dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol {
  1971. padding-right: 20px;
  1972. padding-left: 0;
  1973. margin-left: 0;
  1974. margin-right: 20px;
  1975. }
  1976. .post-body ul > ul, .post-body ol > ol, .post-body ol > ul, .post-body ul > ol {
  1977. margin: 0;
  1978. }
  1979. .post-body ul {
  1980. list-style-type: disc;
  1981. }
  1982. .post-body a:visited {
  1983. color: #064462;
  1984. }
  1985. .post-body code {
  1986. background: #f7f7f7;
  1987. border: 1px solid #ddd;
  1988. border-radius: 3px;
  1989. padding: 0 5px;
  1990. margin: 0 2px;
  1991. }
  1992. .post-body pre {
  1993. background: #f7f7f7;
  1994. border: 1px solid #ddd;
  1995. border-radius: 3px;
  1996. padding: 10px 15px;
  1997. overflow: auto;
  1998. white-space: pre;
  1999. }
  2000. .post-body blockquote {
  2001. border-left: 1px solid #ddd;
  2002. color: #657484;
  2003. font-style: italic;
  2004. padding: 0 15px;
  2005. }
  2006. .post-footer {
  2007. align-items: center;
  2008. display: flex;
  2009. justify-content: space-between;
  2010. padding-bottom: 20px;
  2011. }
  2012. .post-comment-count {
  2013. color: #657484;
  2014. font-weight: 300;
  2015. }
  2016. .post-comment-count:hover {
  2017. text-decoration: none;
  2018. }
  2019. .post-comment-count .icon-comments {
  2020. color: #0c86c2;
  2021. content: "\1F4AC";
  2022. display: inline-block;
  2023. font-size: 18px;
  2024. padding: 5px;
  2025. }
  2026. .post-sidebar {
  2027. border-top: 1px solid #ddd;
  2028. flex: 1;
  2029. padding: 30px 0;
  2030. text-align: center;
  2031. }
  2032. @media (min-width: 1024px) {
  2033. .post-sidebar {
  2034. border: 0;
  2035. flex: 1 0 30%;
  2036. padding: 0 0 0 50px;
  2037. text-align: initial;
  2038. }
  2039. [dir="rtl"] .post-sidebar {
  2040. padding: 0 50px 0 0;
  2041. }
  2042. }
  2043. .post-sidebar h5 {
  2044. font-weight: 600;
  2045. }
  2046. @media (min-width: 1024px) {
  2047. .post-sidebar h5 {
  2048. border-bottom: 1px solid #ddd;
  2049. padding-bottom: 20px;
  2050. }
  2051. }
  2052. .post-comments {
  2053. margin-bottom: 20px;
  2054. }
  2055. @media (min-width: 1024px) {
  2056. .post-comments {
  2057. margin-bottom: 0;
  2058. }
  2059. }
  2060. /* Navigation element that collapses on mobile */
  2061. .collapsible-nav {
  2062. border-bottom: 1px solid #ddd;
  2063. border-top: 1px solid #ddd;
  2064. flex-direction: column;
  2065. max-height: 45px;
  2066. overflow: hidden;
  2067. font-size: 14px;
  2068. }
  2069. @media (min-width: 768px) {
  2070. .collapsible-nav {
  2071. border: 0;
  2072. height: auto;
  2073. flex-direction: row;
  2074. max-height: none;
  2075. }
  2076. }
  2077. .collapsible-nav-list {
  2078. display: flex;
  2079. flex-direction: column;
  2080. }
  2081. @media (min-width: 768px) {
  2082. .collapsible-nav-list {
  2083. flex-direction: row;
  2084. }
  2085. }
  2086. .collapsible-nav-list li {
  2087. color: #39414a;
  2088. line-height: 45px;
  2089. order: 1;
  2090. }
  2091. @media (min-width: 768px) {
  2092. .collapsible-nav-list li {
  2093. line-height: normal;
  2094. margin-right: 30px;
  2095. }
  2096. [dir="rtl"] .collapsible-nav-list li {
  2097. margin-left: 30px;
  2098. margin-right: 0;
  2099. }
  2100. .collapsible-nav-list li a {
  2101. text-decoration: none;
  2102. padding: 15px 0;
  2103. }
  2104. }
  2105. .collapsible-nav-list li a {
  2106. color: #39414a;
  2107. display: block;
  2108. }
  2109. @media (min-width: 768px) {
  2110. .collapsible-nav-list li:hover {
  2111. border-bottom: 4px solid #ddd;
  2112. }
  2113. .collapsible-nav-list li:hover a {
  2114. padding: 15px 0 11px 0;
  2115. text-decoration: none;
  2116. }
  2117. }
  2118. .collapsible-nav-list li[aria-selected="true"] {
  2119. order: 0;
  2120. position: relative;
  2121. }
  2122. @media (min-width: 768px) {
  2123. .collapsible-nav-list li[aria-selected="true"] {
  2124. border-bottom: 4px solid #0c86c2;
  2125. order: 1;
  2126. padding: 15px 0 11px 0;
  2127. }
  2128. }
  2129. .collapsible-nav-list li[aria-selected="true"] a {
  2130. color: #39414a;
  2131. }
  2132. .collapsible-nav-list li[aria-selected="true"]::after {
  2133. position: relative;
  2134. top: 50%;
  2135. transform: translateY(-50%);
  2136. content: "\25BE";
  2137. position: absolute;
  2138. right: 0;
  2139. }
  2140. @media (min-width: 768px) {
  2141. .collapsible-nav-list li[aria-selected="true"]::after {
  2142. display: none;
  2143. }
  2144. }
  2145. [dir="rtl"] .collapsible-nav-list li[aria-selected="true"]::after {
  2146. left: 0;
  2147. right: auto;
  2148. }
  2149. .collapsible-nav[aria-expanded="true"] {
  2150. max-height: none;
  2151. }
  2152. .collapsible-nav[aria-expanded="true"] li[aria-selected="true"]::after {
  2153. content: "\2715";
  2154. }
  2155. /* Sidebar navigation that collapses on mobile */
  2156. .collapsible-sidebar {
  2157. flex: 1;
  2158. max-height: 45px;
  2159. overflow: hidden;
  2160. padding: 10px 0;
  2161. position: relative;
  2162. }
  2163. @media (min-width: 1024px) {
  2164. .collapsible-sidebar {
  2165. max-height: none;
  2166. padding: 0;
  2167. }
  2168. }
  2169. .collapsible-sidebar[aria-expanded="true"] {
  2170. max-height: none;
  2171. }
  2172. .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  2173. content: "\2715";
  2174. }
  2175. @media (min-width: 1024px) {
  2176. .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  2177. display: none;
  2178. }
  2179. }
  2180. .collapsible-sidebar-title {
  2181. margin-top: 0;
  2182. }
  2183. .collapsible-sidebar-title::after {
  2184. position: relative;
  2185. top: 50%;
  2186. transform: translateY(-50%);
  2187. content: "\25BE";
  2188. position: absolute;
  2189. right: 10px;
  2190. }
  2191. @media (min-width: 1024px) {
  2192. .collapsible-sidebar-title::after {
  2193. display: none;
  2194. }
  2195. }
  2196. [dir="rtl"] .collapsible-sidebar-title::after {
  2197. left: 10px;
  2198. right: auto;
  2199. }
  2200. /***** My activities *****/
  2201. .my-activities-nav {
  2202. background-color: #f2f2f2;
  2203. border: 0;
  2204. margin-bottom: 20px;
  2205. }
  2206. .my-activities-sub-nav {
  2207. background-color: transparent;
  2208. border-bottom: 1px solid #ddd;
  2209. margin-bottom: 30px;
  2210. }
  2211. @media (min-width: 768px) {
  2212. .my-activities-sub-nav li:hover {
  2213. border-bottom: 4px solid #ddd;
  2214. }
  2215. }
  2216. .my-activities-sub-nav li[aria-selected="true"] {
  2217. border-color: #0c86c2;
  2218. }
  2219. .my-activities-table .striped-list-title {
  2220. /* My activities tables */
  2221. display: block;
  2222. margin-bottom: 10px;
  2223. max-width: 350px;
  2224. white-space: normal;
  2225. }
  2226. @media (min-width: 1024px) {
  2227. .my-activities-table .striped-list-title {
  2228. margin-bottom: 0;
  2229. max-width: 500px;
  2230. min-width: 350px;
  2231. overflow: hidden;
  2232. text-overflow: ellipsis;
  2233. white-space: nowrap;
  2234. }
  2235. }
  2236. .my-activities-table thead {
  2237. display: none;
  2238. }
  2239. @media (min-width: 768px) {
  2240. .my-activities-table thead {
  2241. display: table-header-group;
  2242. }
  2243. }
  2244. .my-activities-table th:first-child,
  2245. .my-activities-table td:first-child {
  2246. padding-left: 0;
  2247. }
  2248. @media (min-width: 1024px) {
  2249. .my-activities-table th:first-child,
  2250. .my-activities-table td:first-child {
  2251. width: 500px;
  2252. }
  2253. }
  2254. .my-activities-table th:last-child,
  2255. .my-activities-table td:last-child {
  2256. padding-right: 0;
  2257. }
  2258. .my-activities-table td:not(:first-child) {
  2259. display: none;
  2260. }
  2261. @media (min-width: 768px) {
  2262. .my-activities-table td:not(:first-child) {
  2263. display: table-cell;
  2264. }
  2265. }
  2266. /* Requests table */
  2267. .requests-search {
  2268. width: 100%;
  2269. }
  2270. .requests-table-toolbar {
  2271. align-items: flex-end;
  2272. display: flex;
  2273. flex-direction: column;
  2274. }
  2275. @media (min-width: 768px) {
  2276. .requests-table-toolbar {
  2277. flex-direction: row;
  2278. }
  2279. }
  2280. .requests-table-toolbar .search {
  2281. flex: 1;
  2282. width: 100%;
  2283. }
  2284. .requests-table-toolbar .request-table-filter {
  2285. width: 100%;
  2286. }
  2287. @media (min-width: 768px) {
  2288. .requests-table-toolbar .request-table-filter {
  2289. width: auto;
  2290. }
  2291. }
  2292. .requests-table-toolbar .request-filter {
  2293. display: block;
  2294. }
  2295. @media (min-width: 768px) {
  2296. .requests-table-toolbar .request-filter {
  2297. margin: 0 0 0 30px;
  2298. }
  2299. [dir="rtl"] .requests-table-toolbar .request-filter {
  2300. margin: 0 30px 0 0;
  2301. }
  2302. }
  2303. .requests-table-toolbar .request-filter-label {
  2304. font-size: 13px;
  2305. margin-top: 30px;
  2306. }
  2307. @media (min-width: 768px) {
  2308. .requests-table-toolbar .request-filter-label {
  2309. margin-top: 0;
  2310. }
  2311. }
  2312. .requests-table-toolbar select {
  2313. max-height: 40px;
  2314. margin-bottom: 30px;
  2315. width: 100%;
  2316. }
  2317. @media (min-width: 768px) {
  2318. .requests-table-toolbar select {
  2319. margin-bottom: 0;
  2320. max-width: 300px;
  2321. width: auto;
  2322. }
  2323. }
  2324. .requests-table-toolbar .organization-subscribe,
  2325. .requests-table-toolbar .organization-unsubscribe {
  2326. line-height: 40px;
  2327. max-height: 40px;
  2328. padding: 0 20px;
  2329. }
  2330. @media (min-width: 768px) {
  2331. .requests-table-toolbar .organization-subscribe,
  2332. .requests-table-toolbar .organization-unsubscribe {
  2333. margin-left: 10px;
  2334. }
  2335. [dir="rtl"] .requests-table-toolbar .organization-subscribe, [dir="rtl"]
  2336. .requests-table-toolbar .organization-unsubscribe {
  2337. margin: 0 10px 0 0;
  2338. }
  2339. }
  2340. .requests-table-toolbar .organization-unsubscribe {
  2341. background-color: #0c86c2;
  2342. color: #ffffff;
  2343. }
  2344. .requests-table-toolbar + .requests-search-info {
  2345. margin-top: 15px;
  2346. }
  2347. .requests-table-toolbar + .requests-search-info.meta-data::after {
  2348. content: "";
  2349. margin: 0;
  2350. }
  2351. .requests-table-toolbar + .requests-search-info + .requests {
  2352. margin-top: 20px;
  2353. }
  2354. .requests-table-toolbar + .requests {
  2355. margin-top: 40px;
  2356. }
  2357. .requests .requests-table-meta {
  2358. display: block;
  2359. }
  2360. @media (min-width: 768px) {
  2361. .requests .requests-table-meta {
  2362. display: none;
  2363. }
  2364. }
  2365. .requests .requests-table thead {
  2366. display: none;
  2367. }
  2368. @media (min-width: 768px) {
  2369. .requests .requests-table thead {
  2370. display: table-header-group;
  2371. }
  2372. }
  2373. .requests .requests-table-info {
  2374. display: block;
  2375. }
  2376. @media (min-width: 768px) {
  2377. .requests .requests-table-info {
  2378. display: table-cell;
  2379. vertical-align: middle;
  2380. width: auto;
  2381. }
  2382. }
  2383. .requests .requests-table .requests-link {
  2384. position: relative;
  2385. }
  2386. .requests .requests-table .requests-sort-symbol {
  2387. position: absolute;
  2388. left: calc(100% + 3px);
  2389. bottom: 0;
  2390. font-size: 10px;
  2391. }
  2392. /* Following table */
  2393. .subscriptions-unsubscribe a {
  2394. background: #0c86c2;
  2395. border-radius: 4px;
  2396. color: #ffffff;
  2397. display: inline-block;
  2398. font-size: 12px;
  2399. line-height: 2.34;
  2400. padding: 0 20px;
  2401. text-align: center;
  2402. width: 100%;
  2403. }
  2404. @media (min-width: 768px) {
  2405. .subscriptions-unsubscribe a {
  2406. width: auto;
  2407. }
  2408. }
  2409. .subscriptions-unsubscribe a:hover {
  2410. background-color: #064462;
  2411. text-decoration: none;
  2412. }
  2413. .subscriptions-table td:last-child {
  2414. display: block;
  2415. }
  2416. @media (min-width: 768px) {
  2417. .subscriptions-table td:last-child {
  2418. display: table-cell;
  2419. }
  2420. }
  2421. .subscriptions-table td:first-child {
  2422. display: flex;
  2423. align-items: center;
  2424. }
  2425. .subscriptions-table .user-avatar {
  2426. margin-right: 10px;
  2427. }
  2428. .subscriptions .striped-list-title {
  2429. display: inline-block;
  2430. vertical-align: middle;
  2431. }
  2432. /* Contributions table */
  2433. .contributions-table td:last-child {
  2434. color: #657484;
  2435. font-size: 13px;
  2436. font-weight: 300;
  2437. }
  2438. @media (min-width: 768px) {
  2439. .contributions-table td:last-child {
  2440. color: inherit;
  2441. font-size: inherit;
  2442. font-weight: inherit;
  2443. }
  2444. }
  2445. .no-activities {
  2446. color: #657484;
  2447. }
  2448. /***** Request *****/
  2449. .request-container {
  2450. display: flex;
  2451. flex-direction: column;
  2452. flex-wrap: wrap;
  2453. justify-content: space-between;
  2454. }
  2455. @media (min-width: 1024px) {
  2456. .request-container {
  2457. align-items: flex-start;
  2458. flex-direction: row;
  2459. }
  2460. }
  2461. .request-container .comment-container {
  2462. min-width: 0;
  2463. }
  2464. .request-breadcrumbs {
  2465. margin-bottom: 40px;
  2466. }
  2467. @media (min-width: 1024px) {
  2468. .request-breadcrumbs {
  2469. margin-bottom: 60px;
  2470. }
  2471. }
  2472. .request-main {
  2473. flex: 1 0 auto;
  2474. order: 1;
  2475. }
  2476. .request-main .comment-fields, .request-main .request-submit-comment {
  2477. display: none;
  2478. }
  2479. .request-main .comment-fields.shown {
  2480. display: block;
  2481. }
  2482. .request-main .request-submit-comment.shown {
  2483. display: inline;
  2484. }
  2485. @media (min-width: 1024px) {
  2486. .request-main {
  2487. flex: 0 0 66%;
  2488. order: 0;
  2489. min-width: 0;
  2490. }
  2491. }
  2492. .request-main .comment-form-controls {
  2493. display: block;
  2494. }
  2495. .request-main .comment-ccs {
  2496. display: block;
  2497. }
  2498. .request-main .comment-show-container {
  2499. border-radius: 2px;
  2500. border: 1px solid #ddd;
  2501. cursor: pointer;
  2502. display: flex;
  2503. padding: 8px 15px;
  2504. width: 100%;
  2505. }
  2506. .request-main .comment-show-container.hidden {
  2507. display: none;
  2508. }
  2509. .request-main .comment-show-container-content {
  2510. align-self: center;
  2511. color: #657484;
  2512. margin-left: 10px;
  2513. }
  2514. .request-main .form-field.comment-ccs > ul {
  2515. border-bottom-left-radius: 0;
  2516. border-bottom-right-radius: 0;
  2517. border-bottom: 0;
  2518. }
  2519. .request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  2520. border: 1px solid #0c86c2;
  2521. }
  2522. .request-main .form-field.comment-ccs > input[type="text"] {
  2523. border-bottom-left-radius: 0;
  2524. border-bottom-right-radius: 0;
  2525. border-bottom: 0;
  2526. }
  2527. .request-main .comment-ccs + textarea {
  2528. border-top-left-radius: 0;
  2529. border-top-right-radius: 0;
  2530. margin-top: 0;
  2531. }
  2532. .request-main .comment-ccs + textarea:focus {
  2533. border-top: 1px solid #0c86c2;
  2534. }
  2535. .request-main input#mark_as_solved {
  2536. display: none;
  2537. }
  2538. .request-title {
  2539. width: 100%;
  2540. }
  2541. @media (min-width: 1024px) {
  2542. .request-title {
  2543. border-bottom: 1px solid #ddd;
  2544. margin-bottom: 0;
  2545. max-width: 66%;
  2546. padding-bottom: 20px;
  2547. }
  2548. }
  2549. .request-sidebar {
  2550. border-bottom: 1px solid #ddd;
  2551. border-top: 1px solid #ddd;
  2552. flex: 1 0 auto;
  2553. order: 0;
  2554. }
  2555. @media (min-width: 1024px) {
  2556. .request-sidebar {
  2557. background-color: #f7f7f7;
  2558. border: 0;
  2559. font-size: 13px;
  2560. flex: 0 0 auto;
  2561. padding: 0 20px;
  2562. width: 30%;
  2563. }
  2564. }
  2565. .request-sidebar h5 {
  2566. font-size: 15px;
  2567. font-weight: 600;
  2568. position: relative;
  2569. }
  2570. @media (min-width: 1024px) {
  2571. .request-sidebar h5 {
  2572. display: none;
  2573. }
  2574. }
  2575. .request-details {
  2576. border-bottom: 1px solid #ddd;
  2577. font-size: 0;
  2578. margin: 0;
  2579. padding-bottom: 20px;
  2580. }
  2581. .request-details:last-child {
  2582. border: 0;
  2583. }
  2584. .request-details dt, .request-details dd {
  2585. display: inline-block;
  2586. vertical-align: top;
  2587. font-size: 13px;
  2588. margin: 20px 0 0 0;
  2589. }
  2590. .request-details dd {
  2591. padding: 0 10px;
  2592. width: 60%;
  2593. }
  2594. .request-details dd::after {
  2595. content: "\A";
  2596. white-space: pre;
  2597. }
  2598. .request-details dt {
  2599. color: #657484;
  2600. font-weight: 300;
  2601. width: 40%;
  2602. }
  2603. .request-details .request-collaborators {
  2604. display: inline-block;
  2605. }
  2606. .request-attachments dt, .request-attachments dd {
  2607. width: 100%;
  2608. }
  2609. .request-attachments dd {
  2610. margin: 10px 0 0 0;
  2611. }
  2612. .request-form textarea {
  2613. min-height: 120px;
  2614. }
  2615. .request-follow-up {
  2616. padding-top: 20px;
  2617. }
  2618. /***** Pagination *****/
  2619. .pagination {
  2620. margin: 20px 0;
  2621. text-align: center;
  2622. }
  2623. .pagination * {
  2624. display: inline-block;
  2625. }
  2626. .pagination li {
  2627. border-radius: 50%;
  2628. height: 40px;
  2629. float: left;
  2630. margin-left: 5px;
  2631. width: 40px;
  2632. }
  2633. @media (min-width: 768px) {
  2634. .pagination li {
  2635. height: 30px;
  2636. width: 30px;
  2637. }
  2638. }
  2639. [dir="rtl"] .pagination li {
  2640. float: right;
  2641. }
  2642. .pagination li:hover:not(.pagination-current) {
  2643. background-color: #f3f3f3;
  2644. }
  2645. .pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  2646. color: #39414a;
  2647. text-decoration: none;
  2648. }
  2649. .pagination a, .pagination span {
  2650. font-size: 15px;
  2651. color: #657484;
  2652. padding: 10px 12px;
  2653. }
  2654. @media (min-width: 768px) {
  2655. .pagination a, .pagination span {
  2656. font-size: 13px;
  2657. padding: 5px 12px;
  2658. }
  2659. }
  2660. .pagination-current {
  2661. background-color: #0c86c2;
  2662. }
  2663. .pagination-current a, .pagination-current span {
  2664. color: #ffffff;
  2665. }
  2666. .pagination-first {
  2667. border-radius: 3px 0 0 3px;
  2668. }
  2669. [dir="rtl"] .pagination-first {
  2670. border-radius: 0 3px 3px 0;
  2671. }
  2672. .pagination-last {
  2673. border-radius: 0 3px 3px 0;
  2674. }
  2675. [dir="rtl"] .pagination-last {
  2676. border-radius: 3px 0 0 3px;
  2677. }
  2678. /***** Metadata *****/
  2679. .meta-group {
  2680. display: block;
  2681. }
  2682. .meta-group * {
  2683. display: inline;
  2684. }
  2685. .meta-data {
  2686. color: #657484;
  2687. font-size: 13px;
  2688. font-weight: 300;
  2689. }
  2690. .meta-data:not(:last-child)::after {
  2691. content: "\00B7";
  2692. margin: 0 5px;
  2693. }
  2694. /***** Icons *****/
  2695. [class^="icon-"]::before,
  2696. [class*=" icon-"]::before,
  2697. .icon,
  2698. .search::before,
  2699. .recent-activity-item-comment span::before,
  2700. .article-vote::before,
  2701. .attachments .attachment-item::before,
  2702. .share a::before,
  2703. .vote-up::before,
  2704. .vote-down::before,
  2705. .actions .dropdown-toggle::before,
  2706. .collapsible-nav-list li[aria-selected="true"]::after,
  2707. .collapsible-sidebar-title::after,
  2708. .search-result-votes::before,
  2709. .search-result-meta-count::before {
  2710. font-family: "copenhagen-icons";
  2711. font-style: normal;
  2712. font-weight: normal;
  2713. speak: none;
  2714. line-height: 1em;
  2715. vertical-align: middle;
  2716. -webkit-font-smoothing: antialiased;
  2717. }
  2718. .icon-lock::before {
  2719. content: "\1F512";
  2720. }
  2721. .icon-star::before {
  2722. content: "\2605";
  2723. }
  2724. .icon-linkedin::before {
  2725. content: "\e900";
  2726. }
  2727. .icon-twitter::before {
  2728. content: "\e901";
  2729. }
  2730. .icon-googleplus-::before {
  2731. content: "\e902";
  2732. }
  2733. .icon-facebook::before {
  2734. content: "\e903";
  2735. }
  2736. .icon-agent::before {
  2737. content: "\1F464";
  2738. }
  2739. .icon-close::before {
  2740. content: "\2715";
  2741. }
  2742. .icon-arrow-up::before {
  2743. content: "\2B06";
  2744. }
  2745. .icon-arrow-down::before {
  2746. content: "\2B07";
  2747. }
  2748. .icon-attachments::before {
  2749. content: "\1F4CE";
  2750. }
  2751. .icon-comments::before {
  2752. content: "\1F4AC";
  2753. }
  2754. .icon-search::before {
  2755. content: "\1F50D";
  2756. }
  2757. .icon-vote::before {
  2758. content: "\1F44D";
  2759. }
  2760. .icon-handle::before {
  2761. content: "\25BE";
  2762. }
  2763. .icon-check::before {
  2764. content: "\2713";
  2765. }
  2766. .icon-gear::before {
  2767. content: "\2699";
  2768. }
  2769. .icon-menu::before {
  2770. content: "\2630";
  2771. }
  2772. .icon-article::before {
  2773. content: "\1F4C4";
  2774. }
  2775. .icon-post::before {
  2776. content: "\1F4D4";
  2777. }
  2778. .icon-notification-alert::before {
  2779. content: "\26A0";
  2780. }
  2781. .icon-notification-error::before {
  2782. content: "\00D7";
  2783. }
  2784. .icon-notification-info::before {
  2785. content: "\2139";
  2786. }
  2787. .icon-notification-success::before {
  2788. content: "\2714";
  2789. }
  2790. /* User Profiles */
  2791. .profile-header {
  2792. padding: 30px 0;
  2793. background-color: #f7f7f7;
  2794. }
  2795. .profile-header .container {
  2796. display: flex;
  2797. flex-wrap: wrap;
  2798. }
  2799. @media (min-width: 768px) {
  2800. .profile-header .container {
  2801. flex-wrap: nowrap;
  2802. }
  2803. }
  2804. .profile-header .profile-info {
  2805. flex-basis: 100%;
  2806. display: flex;
  2807. flex-wrap: wrap;
  2808. min-width: 0;
  2809. }
  2810. .profile-avatar {
  2811. position: relative;
  2812. line-height: 0;
  2813. align-self: center;
  2814. margin-right: 10px;
  2815. }
  2816. [dir="rtl"] .profile-avatar {
  2817. margin-left: 10px;
  2818. margin-right: 0;
  2819. }
  2820. .profile-avatar .user-avatar {
  2821. width: 65px;
  2822. height: 65px;
  2823. }
  2824. .profile-avatar .icon-agent::before {
  2825. bottom: 0;
  2826. right: 0;
  2827. }
  2828. .profile-header .basic-info {
  2829. -moz-hyphens: auto;
  2830. -ms-hyphens: auto;
  2831. -webkit-hyphens: auto;
  2832. word-break: break-word;
  2833. display: flex;
  2834. flex-direction: column;
  2835. justify-content: center;
  2836. flex-grow: 1;
  2837. flex-basis: 0;
  2838. min-width: 0;
  2839. }
  2840. .profile-header .basic-info .name {
  2841. margin: 0;
  2842. }
  2843. .profile-header .options {
  2844. display: flex;
  2845. flex-basis: 100%;
  2846. margin-top: 12px;
  2847. align-items: flex-start;
  2848. flex-wrap: wrap;
  2849. }
  2850. @media (min-width: 768px) {
  2851. .profile-header .options {
  2852. flex-wrap: nowrap;
  2853. flex-basis: auto;
  2854. margin-top: 0;
  2855. margin-left: 10px;
  2856. }
  2857. [dir="rtl"] .profile-header .options {
  2858. margin-left: 0;
  2859. margin-right: 10px;
  2860. }
  2861. .profile-header .options > :not(:last-child) {
  2862. margin-bottom: 0;
  2863. margin-right: 10px;
  2864. }
  2865. [dir="rtl"] .profile-header .options > :not(:last-child) {
  2866. margin-left: 10px;
  2867. margin-right: 0;
  2868. }
  2869. }
  2870. .profile-header .options [data-action="edit-profile"] {
  2871. background-color: #0c86c2;
  2872. border: 0;
  2873. color: #ffffff;
  2874. line-height: normal;
  2875. padding: 8px 20px;
  2876. }
  2877. .profile-header .description {
  2878. -moz-hyphens: auto;
  2879. -ms-hyphens: auto;
  2880. -webkit-hyphens: auto;
  2881. word-break: break-word;
  2882. margin: 15px 0;
  2883. flex-basis: 100%;
  2884. }
  2885. .profile-stats {
  2886. font-size: 13px;
  2887. display: flex;
  2888. flex-direction: column;
  2889. flex-basis: 100%;
  2890. }
  2891. .profile-stats .stat {
  2892. display: flex;
  2893. margin-bottom: 10px;
  2894. }
  2895. .profile-stats .stat-label {
  2896. color: #657484;
  2897. font-weight: 300;
  2898. flex: 0 0 100px;
  2899. margin-right: 10px;
  2900. }
  2901. [dir="rtl"] .profile-stats .stat-label {
  2902. margin-left: 10px;
  2903. margin-right: 0;
  2904. }
  2905. .profile-stats-activity {
  2906. border-top: solid 1px #ddd;
  2907. margin-top: 15px;
  2908. }
  2909. @media (min-width: 768px) {
  2910. .profile-stats-activity {
  2911. border-top: 0;
  2912. flex-direction: row;
  2913. }
  2914. }
  2915. @media (min-width: 768px) {
  2916. .profile-stats-activity .stat {
  2917. flex-direction: column;
  2918. }
  2919. }
  2920. .profile-stats-activity .stat:first-child {
  2921. margin-top: 10px;
  2922. }
  2923. @media (min-width: 768px) {
  2924. .profile-stats-activity .stat:first-child {
  2925. margin-top: 0;
  2926. }
  2927. }
  2928. @media (min-width: 768px) {
  2929. .profile-stats-activity .stat:not(:last-child) {
  2930. margin-right: 40px;
  2931. }
  2932. [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
  2933. margin-left: 40px;
  2934. margin-right: 0;
  2935. }
  2936. }
  2937. @media (min-width: 768px) {
  2938. .profile-stats-activity .stat-label {
  2939. flex: 0 1 auto;
  2940. }
  2941. }
  2942. .profile-stats-counters {
  2943. border-bottom: solid 1px #ddd;
  2944. }
  2945. @media (min-width: 768px) {
  2946. .profile-stats-counters {
  2947. flex: 0 0 200px;
  2948. border-bottom: 0;
  2949. margin-left: 40px;
  2950. }
  2951. [dir="rtl"] .profile-stats-counters {
  2952. margin-left: 0;
  2953. margin-right: 40px;
  2954. }
  2955. }
  2956. @media (min-width: 1024px) {
  2957. .profile-stats-counters {
  2958. flex: 0 0 270px;
  2959. margin-left: 60px;
  2960. }
  2961. [dir="rtl"] .profile-stats-counters {
  2962. margin-right: 60px;
  2963. margin-left: 0;
  2964. }
  2965. }
  2966. @media (min-width: 768px) {
  2967. .profile-stats-counters .stat {
  2968. flex-direction: column;
  2969. }
  2970. }
  2971. @media (min-width: 1024px) {
  2972. .profile-stats-counters .stat {
  2973. flex-direction: row;
  2974. }
  2975. }
  2976. @media (min-width: 768px) {
  2977. .profile-stats-counters .stat:not(:last-child) {
  2978. margin-bottom: 15px;
  2979. }
  2980. }
  2981. @media (min-width: 768px) {
  2982. .profile-stats-counters .stat-label {
  2983. flex: 0 1 auto;
  2984. }
  2985. }
  2986. @media (min-width: 1024px) {
  2987. .profile-stats-counters .stat-label {
  2988. flex: 0 0 100px;
  2989. }
  2990. }
  2991. .profile-private-badge {
  2992. flex-basis: 100%;
  2993. border: solid 1px #0c86c2;
  2994. border-radius: 4px;
  2995. color: #0c86c2;
  2996. padding: 5px 20px;
  2997. font-size: 12px;
  2998. text-align: center;
  2999. }
  3000. .profile-private-badge::after {
  3001. content: "\1f512";
  3002. margin-left: 5px;
  3003. font-family: "copenhagen-icons";
  3004. vertical-align: middle;
  3005. line-height: 15px;
  3006. }
  3007. @media (min-width: 768px) {
  3008. .profile-private-badge {
  3009. flex-basis: auto;
  3010. }
  3011. }
  3012. .profile-nav {
  3013. background-color: #f2f2f2;
  3014. border: 0;
  3015. margin-bottom: 37px;
  3016. }
  3017. .profile-section {
  3018. width: 100%;
  3019. }
  3020. @media (min-width: 1024px) {
  3021. .profile-section {
  3022. width: calc(100% - 330px);
  3023. }
  3024. }
  3025. .profile-section-header {
  3026. display: flex;
  3027. flex-wrap: wrap;
  3028. }
  3029. .profile-section-title {
  3030. flex-basis: 100%;
  3031. margin-bottom: 0;
  3032. }
  3033. .profile-section-description {
  3034. flex-basis: 100%;
  3035. padding: 10px 0;
  3036. color: #657484;
  3037. font-weight: 300;
  3038. font-size: 13px;
  3039. white-space: nowrap;
  3040. overflow: hidden;
  3041. text-overflow: ellipsis;
  3042. }
  3043. @media (min-width: 768px) {
  3044. .profile-section-description {
  3045. flex: 1 0 50%;
  3046. padding-bottom: 0;
  3047. }
  3048. }
  3049. .profile-section-sorter {
  3050. flex-basis: 100%;
  3051. border-top: solid 1px #eee;
  3052. font-size: 13px;
  3053. }
  3054. .profile-section-sorter .dropdown-toggle {
  3055. padding: 10px 0;
  3056. width: 100%;
  3057. }
  3058. .profile-section-sorter .dropdown-toggle::after {
  3059. position: absolute;
  3060. right: 0;
  3061. }
  3062. [dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  3063. left: 0;
  3064. right: initial;
  3065. }
  3066. @media (min-width: 768px) {
  3067. .profile-section-sorter .dropdown-toggle::after {
  3068. position: relative;
  3069. }
  3070. }
  3071. @media (min-width: 768px) {
  3072. .profile-section-sorter {
  3073. flex: 0 1 auto;
  3074. padding-top: 0;
  3075. border-top: 0;
  3076. margin-left: 20px;
  3077. }
  3078. [dir="rtl"] .profile-section-sorter {
  3079. margin-left: 0;
  3080. margin-right: 20px;
  3081. }
  3082. }
  3083. .profile-contribution {
  3084. -moz-hyphens: auto;
  3085. -ms-hyphens: auto;
  3086. -webkit-hyphens: auto;
  3087. word-break: break-word;
  3088. padding: 20px 0;
  3089. position: relative;
  3090. }
  3091. .profile-contribution-header {
  3092. margin-bottom: 5px;
  3093. }
  3094. .profile-contribution-title {
  3095. margin: 0 0 5px 0;
  3096. display: inline;
  3097. line-height: 21px;
  3098. font-size: 15px;
  3099. vertical-align: middle;
  3100. }
  3101. .profile-contribution-body {
  3102. margin: 10px 0;
  3103. }
  3104. .profile-contribution-list > .profile-contribution {
  3105. border-top: 1px solid #eee;
  3106. }
  3107. @media (min-width: 768px) {
  3108. .profile-contribution-list > .profile-contribution {
  3109. padding-left: 30px;
  3110. }
  3111. [dir="rtl"] .profile-contribution-list > .profile-contribution {
  3112. padding-right: 30px;
  3113. padding-left: 0;
  3114. }
  3115. }
  3116. .profile-contribution-list > .profile-contribution:last-child {
  3117. border-bottom: 1px solid #eee;
  3118. }
  3119. .profile-contribution-list > .profile-contribution::before {
  3120. left: 0;
  3121. position: absolute;
  3122. font-size: 16px;
  3123. color: #ccc;
  3124. font-family: "copenhagen-icons";
  3125. line-height: 25px;
  3126. }
  3127. [dir="rtl"] .profile-contribution-list > .profile-contribution::before {
  3128. right: 0;
  3129. }
  3130. .profile-contribution-list .profile-contribution-header {
  3131. margin-left: 30px;
  3132. }
  3133. [dir="rtl"] .profile-contribution-list .profile-contribution-header {
  3134. padding-right: 30px;
  3135. padding-left: 0;
  3136. }
  3137. @media (min-width: 768px) {
  3138. .profile-contribution-list .profile-contribution-header {
  3139. margin-left: 0;
  3140. }
  3141. [dir="rtl"] .profile-contribution-list .profile-contribution-header {
  3142. padding-right: 0;
  3143. }
  3144. }
  3145. .profile-comments .profile-contribution-breadcrumbs {
  3146. margin-left: 30px;
  3147. }
  3148. [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  3149. padding-right: 30px;
  3150. padding-left: 0;
  3151. }
  3152. @media (min-width: 768px) {
  3153. .profile-comments .profile-contribution-breadcrumbs {
  3154. margin-left: 0;
  3155. }
  3156. [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  3157. padding-right: 0;
  3158. }
  3159. }
  3160. .profile-section .no-activity,
  3161. .profile-section .private-activity {
  3162. display: block;
  3163. margin-top: 40px;
  3164. color: #999;
  3165. }
  3166. .profile-section .private-activity::before {
  3167. content: "\1f512";
  3168. font-family: "copenhagen-icons";
  3169. font-style: normal;
  3170. font-size: 12px;
  3171. font-weight: normal;
  3172. vertical-align: middle;
  3173. margin-right: 10px;
  3174. }
  3175. [dir="rtl"] .profile-section .private-activity::before {
  3176. margin-right: 0;
  3177. margin-left: 10px;
  3178. }
  3179. .profile-activity-list {
  3180. margin-top: 25px;
  3181. }
  3182. .profile-activity {
  3183. position: relative;
  3184. padding-bottom: 30px;
  3185. }
  3186. @media (min-width: 768px) {
  3187. .profile-activity {
  3188. padding-left: 20px;
  3189. }
  3190. [dir="rtl"] .profile-activity {
  3191. padding-right: 20px;
  3192. padding-left: 0;
  3193. }
  3194. }
  3195. @media (min-width: 768px) {
  3196. .profile-activity:not(:last-child) {
  3197. border-left: 1px solid #ddd;
  3198. }
  3199. [dir="rtl"] .profile-activity:not(:last-child) {
  3200. border-left: 0;
  3201. border-right: 1px solid #ddd;
  3202. }
  3203. }
  3204. .profile-activity-header {
  3205. display: flex;
  3206. align-items: center;
  3207. margin-left: 35px;
  3208. }
  3209. [dir="rtl"] .profile-activity-header {
  3210. margin-left: 0;
  3211. margin-right: 35px;
  3212. }
  3213. @media (min-width: 768px) {
  3214. .profile-activity-header {
  3215. margin-left: 0;
  3216. }
  3217. [dir="rtl"] .profile-activity-header {
  3218. margin-right: 0;
  3219. }
  3220. }
  3221. .profile-activity-header .user-avatar {
  3222. width: 40px;
  3223. height: 40px;
  3224. margin-right: 10px;
  3225. min-width: 40px;
  3226. align-self: flex-start;
  3227. }
  3228. [dir="rtl"] .profile-activity-header .user-avatar {
  3229. margin-left: 10px;
  3230. margin-right: 0;
  3231. }
  3232. .profile-activity-description {
  3233. -moz-hyphens: auto;
  3234. -ms-hyphens: auto;
  3235. -webkit-hyphens: auto;
  3236. word-break: break-word;
  3237. margin: 0;
  3238. min-width: 0;
  3239. width: 100%;
  3240. }
  3241. .profile-activity-description span:first-child {
  3242. font-weight: 600;
  3243. display: inline;
  3244. }
  3245. .profile-activity-contribution {
  3246. padding: 20px;
  3247. margin-top: 10px;
  3248. border-radius: 8px;
  3249. background-color: #f7f7f7;
  3250. }
  3251. @media (min-width: 768px) {
  3252. .profile-activity-contribution {
  3253. margin-top: 0;
  3254. margin-left: 50px;
  3255. }
  3256. [dir="rtl"] .profile-activity-contribution {
  3257. margin-left: 0;
  3258. margin-right: 50px;
  3259. }
  3260. }
  3261. .profile-activity::before {
  3262. position: absolute;
  3263. left: 0;
  3264. width: 28px;
  3265. border-radius: 50%;
  3266. content: "";
  3267. background-size: 14px 14px;
  3268. background-repeat: no-repeat;
  3269. background-color: #ffffff;
  3270. background-position: 50% 50%;
  3271. text-align: center;
  3272. line-height: 40px;
  3273. font-size: 16px;
  3274. color: #ccc;
  3275. font-family: "copenhagen-icons";
  3276. }
  3277. [dir="rtl"] .profile-activity::before {
  3278. right: 0;
  3279. }
  3280. @media (min-width: 768px) {
  3281. .profile-activity::before {
  3282. left: -14px;
  3283. }
  3284. [dir="rtl"] .profile-activity::before {
  3285. right: -14px;
  3286. }
  3287. }
  3288. .profile-articles > .profile-contribution::before,
  3289. .profile-activity-list > li[class$="-article"]::before {
  3290. content: "\1f4c4";
  3291. }
  3292. .profile-posts > .profile-contribution::before,
  3293. .profile-activity-list > li[class$="-post"]::before {
  3294. content: "\1f4d4";
  3295. }
  3296. .profile-comments > .profile-contribution::before,
  3297. .profile-activity-list > li[class$="-comment"]::before {
  3298. content: "\1f4ac";
  3299. line-height: 35px;
  3300. }
  3301. /***** Search results *****/
  3302. .search-results {
  3303. display: flex;
  3304. flex-direction: column;
  3305. flex-wrap: wrap;
  3306. justify-content: space-between;
  3307. }
  3308. @media (min-width: 1024px) {
  3309. .search-results {
  3310. flex-direction: row;
  3311. }
  3312. }
  3313. .search-results-column {
  3314. flex: 1;
  3315. }
  3316. @media (min-width: 1024px) {
  3317. .search-results-column {
  3318. flex: 0 0 100%;
  3319. }
  3320. }
  3321. .search-results-list {
  3322. margin-bottom: 25px;
  3323. }
  3324. .search-results-list > li {
  3325. border-bottom: 1px solid #ddd;
  3326. padding: 20px 0;
  3327. }
  3328. .search-results-list > li:first-child {
  3329. border-top: 1px solid #ddd;
  3330. }
  3331. .search-result-description {
  3332. margin-top: 15px;
  3333. }
  3334. .search-result-votes, .search-result-meta-count {
  3335. color: #657484;
  3336. display: inline-block;
  3337. font-size: 13px;
  3338. font-weight: 300;
  3339. padding: 4px 5px;
  3340. position: relative;
  3341. }
  3342. .search-result-votes::before, .search-result-meta-count::before {
  3343. color: #0c86c2;
  3344. }
  3345. [dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  3346. margin-left: 5px;
  3347. }
  3348. [dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  3349. margin-right: 3px;
  3350. }
  3351. [dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  3352. margin-right: 5px;
  3353. }
  3354. [dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  3355. margin-left: 3px;
  3356. }
  3357. .search-result-votes::before {
  3358. content: "\1F44D";
  3359. }
  3360. .search-result-meta-count::before {
  3361. content: "\1F4AC";
  3362. }
  3363. .search-result .meta-group {
  3364. align-items: center;
  3365. }
  3366. .search-result-breadcrumbs {
  3367. margin: 0;
  3368. }
  3369. .search-result-breadcrumbs li:last-child::after {
  3370. content: "·";
  3371. display: inline-block;
  3372. margin: 0 5px;
  3373. }
  3374. .hero {
  3375. background-image: none;
  3376. background: #00abd4;
  3377. background: linear-gradient(to bottom left, rgb(0, 171, 212), rgb(7, 107, 184));
  3378. height: 206px;
  3379. }
  3380. .hero:before {
  3381. content: "我们能帮您什么?";
  3382. font-size: 28px;
  3383. color: #fff;
  3384. position: relative;
  3385. top: 54px;
  3386. }
  3387. html[lang*="en-US"] .hero:before {
  3388. content: "What can we do for you?";
  3389. }
  3390. .imtoken #navbar-container {
  3391. display: none;
  3392. }
  3393. .imtoken .header {
  3394. display: none;
  3395. }
  3396. .imtoken .hero {
  3397. height: 176px;
  3398. }
  3399. .imtoken .blocks-item-link {
  3400. padding: 13px 30px;
  3401. }
  3402. .imtoken .blocks-item {
  3403. border-radius: 8px;
  3404. margin: 0 0 20px;
  3405. }
  3406. .imtoken .article-more-questions {
  3407. display: none;
  3408. }
  3409. .imtoken .page-header {
  3410. display: none;
  3411. }
  3412. .imtoken .sub-nav {
  3413. display: none;
  3414. }
  3415. .imtoken .article-author {
  3416. display: none;
  3417. }
  3418. .imtoken .article-subscribe {
  3419. display: none;
  3420. }
  3421. .imtoken .article-title {
  3422. margin-bottom: 0;
  3423. }
  3424. .imtoken .article-header {
  3425. margin-bottom: 20px;
  3426. margin-top: 10px;
  3427. }
  3428. .imtoken .article-sidebar {
  3429. border-top: none;
  3430. }
  3431. .imtoken .container-divider {
  3432. border-top: none;
  3433. }
  3434. .blocks-item:last-child {
  3435. display: none;
  3436. }