Accueil Explorer Aide
S'inscrire Connexion
chengwenliang
/
newsupernova
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Branche: master
Branches Tags
newsupernova
/
lib
/
web
/
css
/
docs
/
variables.html

variables.html 498 KB
Lien permanent Historique Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394 
  1. <!--
    2. 

  2. /**
    3. 

  3.  * Copyright © Magento, Inc. All rights reserved.
    4. 

  4.  * See COPYING.txt for license details.
    5. 

  5.  */
    6. 

  6. -->
    7. 

  7. 

  8. <!DOCTYPE html><html><head><title>variables | Magento UI Library
    9. 

  9. </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}.docs .vars_list{width:100%}.docs .vars_list th,.docs .vars_list td{width:33%}.docs pre th{text-align:left}.docs pre table{border-collapse:collapse;margin:0}.docs th,.docs td{border:0;padding:9px 10px 9px 0;vertical-align:top}.docs tr th:last-child,.docs tr td:last-child{padding-right:0}.docs pre th{font-weight:400}.docs pre th.vars_head{border-bottom:1px solid #e5e5e5;color:#707070;white-space:nowrap}.docs pre th.vars_section{border-bottom:1px solid #e5e5e5;color:#333;font-size:18px;padding-top:30px}.vars_value{color:#338bb8}.docs li p{margin:0 0 20px}.dropdown a{text-transform:capitalize}#default-button #default-button-big+.preview+.preview-code{display:block}#actions-toolbar-alignment .preview-code,#reverse-primary-and-secondary-blocks .preview-code,#actions-toolbar-indents-customizations .preview-code,#actionstoolbarclearfloats-mixin .preview-code,#responsive-actions-toolbar .preview-code,#button-with-gradient-background .preview-code,#primary-button .preview-code,#button-as-an-icon .preview-code,#button-with-an-icon-on-the-left-or-right-side-of-the-text .preview-code,#button-with-fixed-width .preview-code,#button-as-a-link .preview-code,#link-as-a-button .preview-code,#buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol .preview-code,#breadcrumbs-with-solid-background .preview-code,#pagination-without-label-with-solid-background .preview-code,#pagination-with-label-and-text-previousnext-links .preview-code,#pagination-with-label-and-gradient-background-on-links .preview-code,#fixed-height-popup .preview-code,#fixed-content-height-popup .preview-code,#margins-for-header-content-and-footer-block-in-popup .preview-code,#popup-titles-with-styled-as-theme-headings .preview-code,#popup-action-toolbar .preview-code,#popup-close-button-without-an-icon .preview-code,#modify-icon-of-popup-close-button .preview-code,#modify-overlay-styles .preview-code,#rating-summary-multiple-ratings .preview-code,#rating-summary-hide-label .preview-code,#rating-summary-icons-symbol .preview-code,#rating-summary-icons-color .preview-code,#rating-summary-set-number-of-icons .preview-code,#rating-summary .preview-code,#rating-with-vote-icon-symbol .preview-code,#rating-with-vote-setup-icons-colors .preview-code,#rating-with-vote-setup-number-of-icons .preview-code,#tabs-with-content-top-border .preview-code,#accordion-mixin-variables .preview-code,#tabs-base .preview-code,#accordion-base .preview-code,#warning-message .preview-code,#error-message .preview-code,#success-message .preview-code,#notice-message .preview-code,#message-with-inner-icon .preview-code,#message-with-lateral-icon .preview-code,#custom-message-style .preview-code,#modify-dropdown-list-styles .preview-code,#dropdown-with-icon-customization .preview-code,#split-button-button-styling .preview-code,#split-button-icon-customization .preview-code,#split-button-dropdown-list-customization .preview-code,#table-cells-resize .preview-code,#table-caption .preview-code,#table-typography .preview-code,#table-background-customization .preview-code,#table-borders-customization .preview-code,#table-without-borders .preview-code,#table-with-horizontal-borders .preview-code,#table-with-vertical-borders .preview-code,#striped-table .preview-code,#responsive-table-technics-1 .preview-code,#responsive-table-technics-2 .preview-code,#fontsize-mixin .preview-code,#word-breaking-mixin .preview-code,#word-breaking-mixin .preview-code,#text-overflow-mixin .preview-code,#text-hide .preview-code,#hyphens .preview-code,#font-style-and-color .preview-code,#reset-list-styles .preview-code,#inlineblock-list-item-styling .preview-code,#link-styling-mixin .preview-code,#heading-styling-mixin .preview-code,#icon-with-image-or-sprite .preview-code,#change-the-size-of-font-icon .preview-code,#sprite-and-font-icons-for-blank-theme .preview-code,#icon-position-for-an-icon-with-image-or-sprite .preview-code{display:none}article[id$="-variables"] .docs,#resets .docs,#ratings .docs,#tabs-and-accordions .docs,#messages .docs,#dropdown-and-split-buttons-mixins .docs,#font-face-mixin .docs,#layout .docs,#forms-mixins .docs,#including-magento-ui-library-to-your-theme .docs,#global-forms-elements-customization .docs,#mobile-off-canvas-navigation .docs,#desktop-navigation .docs,#utilities .docs,#layout-width .docs,#responsive-breakpoints .docs,#responsive-mixins-usage .docs{width:100%}article[id$="-variables"] .code{display:none}article[id$="-variables"] .docs pre{background:#fff;border:0;margin-top:0}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})()</script><style type="text/preview">@media only screen and (max-width: 767px){.example-responsive-block{ background:#ffc}.example-responsive-block:before{content:'Mobile styles ';font-weight:700}}@media only screen and (max-width: 768px){.modal-popup.modal-slide{ left:14.8rem;z-index:900}.modal-popup.modal-slide._show .modal-inner-wrap{-webkit-transform:translateX(0);transform:translateX(0)}.modal-popup.modal-slide .modal-inner-wrap{height:100%;overflow-y:auto;position:static;-webkit-transform:translateX(100%);transform:translateX(100%);transition-duration:.3s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease-in-out;width:auto}.modal-popup.modal-slide .modal-inner-wrap{margin:0;max-height:none}}@media all and (min-width: 768px),print{.example-responsive-block{ background:#ccf}.example-responsive-block:before{content:'Desktop styles ';font-weight:700}}.actions-toolbar:before,.actions-toolbar:after{content:'';display:table}.actions-toolbar:after{clear:both}.actions-toolbar .primary{float:left}.actions-toolbar .secondary{float:right}.actions-toolbar .primary,.actions-toolbar .secondary{display:inline-block}.actions-toolbar .primary a.action,.actions-toolbar .secondary a.action{display:inline-block}.actions-toolbar .primary .action{margin:0 5px 0 0}.actions-toolbar .secondary a.action{margin-top:6px}.example-actions-toolbar-1:before,.example-actions-toolbar-1:after{content:'';display:table}.example-actions-toolbar-1:after{clear:both}.example-actions-toolbar-1 .primary{float:left}.example-actions-toolbar-1 .secondary{float:right}.example-actions-toolbar-1 .primary,.example-actions-toolbar-1 .secondary{display:inline-block}.example-actions-toolbar-1 .primary a.action,.example-actions-toolbar-1 .secondary a.action{display:inline-block}.example-actions-toolbar-1 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-1 .secondary a.action{margin-top:6px}.example-actions-toolbar-2:before,.example-actions-toolbar-2:after{content:'';display:table}.example-actions-toolbar-2:after{clear:both}.example-actions-toolbar-2 .primary{float:left}.example-actions-toolbar-2 .secondary{float:right}.example-actions-toolbar-2 .primary,.example-actions-toolbar-2 .secondary{display:inline-block}.example-actions-toolbar-2 .primary a.action,.example-actions-toolbar-2 .secondary a.action{display:inline-block}.example-actions-toolbar-2 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-2 .secondary a.action{margin-top:6px}.example-actions-toolbar-3{text-align:left}.example-actions-toolbar-3:before,.example-actions-toolbar-3:after{content:'';display:table}.example-actions-toolbar-3:after{clear:both}.example-actions-toolbar-3 .primary{float:left}.example-actions-toolbar-3 .primary,.example-actions-toolbar-3 .secondary{display:inline-block}.example-actions-toolbar-3 .primary a.action,.example-actions-toolbar-3 .secondary a.action{display:inline-block}.example-actions-toolbar-3 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-3 .secondary a.action{margin-top:6px}.example-actions-toolbar-4{text-align:right}.example-actions-toolbar-4:before,.example-actions-toolbar-4:after{content:'';display:table}.example-actions-toolbar-4:after{clear:both}.example-actions-toolbar-4 .secondary{float:right}.example-actions-toolbar-4 .primary,.example-actions-toolbar-4 .secondary{display:inline-block}.example-actions-toolbar-4 .primary a.action,.example-actions-toolbar-4 .secondary a.action{display:inline-block}.example-actions-toolbar-4 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-4 .secondary a.action{margin-top:6px}.example-actions-toolbar-5{text-align:center}.example-actions-toolbar-5:before,.example-actions-toolbar-5:after{content:'';display:table}.example-actions-toolbar-5:after{clear:both}.example-actions-toolbar-5 .primary,.example-actions-toolbar-5 .secondary{vertical-align:top}.example-actions-toolbar-5 .primary,.example-actions-toolbar-5 .secondary{display:inline-block}.example-actions-toolbar-5 .primary a.action,.example-actions-toolbar-5 .secondary a.action{display:inline-block}.example-actions-toolbar-5 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-5 .secondary a.action{margin-top:6px}.example-actions-toolbar-6:before,.example-actions-toolbar-6:after{content:'';display:table}.example-actions-toolbar-6:after{clear:both}.example-actions-toolbar-6 .primary{float:right}.example-actions-toolbar-6 .secondary{float:left}.example-actions-toolbar-6 .primary,.example-actions-toolbar-6 .secondary{display:inline-block}.example-actions-toolbar-6 .primary a.action,.example-actions-toolbar-6 .secondary a.action{display:inline-block}.example-actions-toolbar-6 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-6 .secondary a.action{margin-top:6px}.example-actions-toolbar-7{text-align:left}.example-actions-toolbar-7:before,.example-actions-toolbar-7:after{content:'';display:table}.example-actions-toolbar-7:after{clear:both}.example-actions-toolbar-7 .secondary{float:left}.example-actions-toolbar-7 .primary,.example-actions-toolbar-7 .secondary{display:inline-block}.example-actions-toolbar-7 .primary a.action,.example-actions-toolbar-7 .secondary a.action{display:inline-block}.example-actions-toolbar-7 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-7 .secondary a.action{margin-top:6px}.example-actions-toolbar-8{text-align:right}.example-actions-toolbar-8:before,.example-actions-toolbar-8:after{content:'';display:table}.example-actions-toolbar-8:after{clear:both}.example-actions-toolbar-8 .primary{float:right}.example-actions-toolbar-8 .primary,.example-actions-toolbar-8 .secondary{display:inline-block}.example-actions-toolbar-8 .primary a.action,.example-actions-toolbar-8 .secondary a.action{display:inline-block}.example-actions-toolbar-8 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-8 .secondary a.action{margin-top:6px}.example-actions-toolbar-9{margin:10px;padding:10px}.example-actions-toolbar-9:before,.example-actions-toolbar-9:after{content:'';display:table}.example-actions-toolbar-9:after{clear:both}.example-actions-toolbar-9 .primary{float:left}.example-actions-toolbar-9 .secondary{float:right}.example-actions-toolbar-9 .primary,.example-actions-toolbar-9 .secondary{display:inline-block}.example-actions-toolbar-9 .primary a.action,.example-actions-toolbar-9 .secondary a.action{display:inline-block}.example-actions-toolbar-9 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-9 .secondary a.action{margin-top:6px}.example-actions-toolbar-10{text-align:left}.example-actions-toolbar-10:before,.example-actions-toolbar-10:after{content:'';display:table}.example-actions-toolbar-10:after{clear:both}.example-actions-toolbar-10 .primary{float:left}.example-actions-toolbar-10 .primary,.example-actions-toolbar-10 .secondary{display:inline-block}.example-actions-toolbar-10 .primary a.action,.example-actions-toolbar-10 .secondary a.action{display:inline-block}.example-actions-toolbar-10 .primary .action{margin:0 50px 0 0}.example-actions-toolbar-10 .secondary a.action{margin-top:6px}.example-actions-toolbar-11{text-align:left}.example-actions-toolbar-11:before,.example-actions-toolbar-11:after{content:'';display:table}.example-actions-toolbar-11:after{clear:both}.example-actions-toolbar-11 .primary{float:left}.example-actions-toolbar-11 .primary,.example-actions-toolbar-11 .secondary{display:inline-block}.example-actions-toolbar-11 .primary a.action,.example-actions-toolbar-11 .secondary a.action{display:inline-block}.example-actions-toolbar-11 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-11 .secondary .action{margin:0 50px 0 0}.example-actions-toolbar-11 .secondary a.action{margin-top:6px}.example-actions-toolbar-12:before,.example-actions-toolbar-12:after{content:'';display:table}.example-actions-toolbar-12:after{clear:both}.example-actions-toolbar-12 .primary{float:left}.example-actions-toolbar-12 .secondary{float:right}.example-actions-toolbar-12 .primary,.example-actions-toolbar-12 .secondary{display:inline-block}.example-actions-toolbar-12 .primary a.action,.example-actions-toolbar-12 .secondary a.action{display:inline-block}.example-actions-toolbar-12 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-12 .secondary a.action{margin-top:6px}@media only screen and (max-width: 768px){.example-actions-toolbar-12 .primary,.example-actions-toolbar-12 .secondary{ display:block;float:none}}.example-breadcrumbs-1{margin:0 0 20px}.example-breadcrumbs-1 .items{font-size:1.2rem;color:#a3a3a3;margin:0;padding:0;list-style:none none}.example-breadcrumbs-1 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-1 .item{margin:0}.example-breadcrumbs-1 a{color:#333;text-decoration:none}.example-breadcrumbs-1 a:visited{color:#333;text-decoration:none}.example-breadcrumbs-1 a:hover{color:#333;text-decoration:underline}.example-breadcrumbs-1 a:active{color:#333;text-decoration:none}.example-breadcrumbs-1 strong{font-weight:400}.example-breadcrumbs-1 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-1 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-2{margin:0 0 20px}.example-breadcrumbs-2 .items{font-size:1.2rem;color:#1979c3;margin:0;padding:0;list-style:none none}.example-breadcrumbs-2 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-2 .item{margin:0}.example-breadcrumbs-2 a{background-color:#ccc;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f4f4f4 0, #ccc 100%);background-image:linear-gradient(to bottom, #f4f4f4 0, #ccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#cccccc', GradientType=0);border:1px solid #ccc;color:#333;display:inline-block;padding:3px 5px;text-decoration:none}.example-breadcrumbs-2 a:visited{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 a:hover{background-color:#f4f4f4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #ccc 0, #f4f4f4 100%);background-image:linear-gradient(to bottom, #ccc 0, #f4f4f4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f4f4f4', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 a:active{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 strong{background-color:#ff5501;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f7b32e 0, #ff5501 100%);background-image:linear-gradient(to bottom, #f7b32e 0, #ff5501 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7b32e', endColorstr='#ff5501', GradientType=0);border:1px solid #d04b0a;display:inline-block;font-weight:400;padding:3px 5px}.example-breadcrumbs-2 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-2 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-3{margin:0 0 20px}.example-breadcrumbs-3 .items{font-size:1.2rem;color:#333;margin:0;padding:0;list-style:none none}.example-breadcrumbs-3 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-3 .item{margin:0}.example-breadcrumbs-3 a{background:#f4f4f4;color:#333;display:inline-block;padding:3px 5px;text-decoration:none}.example-breadcrumbs-3 a:visited{color:#333;text-decoration:none}.example-breadcrumbs-3 a:hover{background:#ccc;color:#333;text-decoration:none}.example-breadcrumbs-3 a:active{color:#333;text-decoration:none}.example-breadcrumbs-3 strong{background:#e7e7e7;display:inline-block;font-weight:400;padding:3px 5px}.example-breadcrumbs-3 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-3 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-3 .item a{position:relative;margin:0 11px 0 0}.example-breadcrumbs-3 .item a:after{border:12px solid transparent;height:0;width:0;border-left-color:#f4f4f4;content:"";position:absolute;display:block;top:0;right:-23px}.example-breadcrumbs-3 .item a:hover:after{border-color:transparent transparent transparent #ccc}button{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;border-radius:3px}button:focus,button:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}button:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}button.disabled,button[disabled],fieldset[disabled] button{opacity:.5;cursor:default;pointer-events:none}button:active,button:focus{box-shadow:inset 0 2px 1px rgba(0,0,0,.12)}.example-button-1.example-button-2{line-height:2.2rem;padding:14px 17px;font-size:1.8rem}.example-button-1.example-button-3{line-height:1.2rem;padding:5px 8px;font-size:1.1rem;border-radius:0;color:#000}.example-button-1.example-button-3:hover,.example-button-1.example-button-3.active{color:#000}.example-button-10{background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400}.example-button-10>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-button-10:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-10:hover:before{color:inherit}.example-button-10:active:before{color:inherit}.example-button-10:focus,.example-button-10:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-10:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-10.disabled,.example-button-10[disabled],fieldset[disabled] .example-button-10{opacity:.5;cursor:default;pointer-events:none}.example-button-10:focus,.example-button-10:active{background:0;border:0}.example-button-10:hover{background:0;border:0}.example-button-10.disabled,.example-button-10[disabled],fieldset[disabled] .example-button-10{cursor:not-allowed;pointer-events:none;opacity:.5}.example-button-11{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;text-decoration:none}.example-button-11:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-11:hover:before{color:inherit}.example-button-11:active:before{color:inherit}.example-button-11:focus,.example-button-11:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-11:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-11.disabled,.example-button-11[disabled],fieldset[disabled] .example-button-11{opacity:.5;cursor:default;pointer-events:none}.example-button-12{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;text-decoration:none}.example-button-12:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-12:hover:after{color:inherit}.example-button-12:active:after{color:inherit}.example-button-12:focus,.example-button-12:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-12:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-12.disabled,.example-button-12[disabled],fieldset[disabled] .example-button-12{opacity:.5;cursor:default;pointer-events:none}.example-button-13{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;width:100px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle}.example-button-13:focus,.example-button-13:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-13:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-13.disabled,.example-button-13[disabled],fieldset[disabled] .example-button-13{opacity:.5;cursor:default;pointer-events:none}.example-button-4{background-image:none;background:#1979c3;border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;box-sizing:border-box;vertical-align:middle}.example-button-4:focus,.example-button-4:active{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-4:hover{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-4.disabled,.example-button-4[disabled],fieldset[disabled] .example-button-4{opacity:.5;cursor:default;pointer-events:none}.example-button-4:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-4.example-button-5{line-height:2.2rem;padding:7px 35px;font-size:1.8rem}.example-button-4.example-button-6{line-height:1.2rem;padding:5px 8px;font-size:1.1rem;color:#fff}.example-button-4.example-button-6:hover,.example-button-4.example-button-6.active{color:#fff}.example-button-7{background-image:none;background:#f2f2f2;background-color:#006bb4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #1979c3 0, #006bb4 100%);background-image:linear-gradient(to bottom, #1979c3 0, #006bb4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1979c3', endColorstr='#006bb4', GradientType=0);border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;border-radius:3px}.example-button-7:focus,.example-button-7:active{background:#e2e2e2;background-color:#006bb4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #006bb4 0, #006bb4 100%);background-image:linear-gradient(to bottom, #006bb4 0, #006bb4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006bb4', endColorstr='#006bb4', GradientType=0);border:1px solid #006bb4;color:#fff}.example-button-7:hover{background:#e2e2e2;background-color:#1979c3;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #006bb4 0, #1979c3 100%);background-image:linear-gradient(to bottom, #006bb4 0, #1979c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006bb4', endColorstr='#1979c3', GradientType=0);border:1px solid #006bb4;color:#fff}.example-button-7.disabled,.example-button-7[disabled],fieldset[disabled] .example-button-7{opacity:.5;cursor:default;pointer-events:none}.example-button-7:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-8{line-height:1.42857143;margin:0;padding:0;color:#1979c3;text-decoration:none;background:0;border:0;display:inline;font-weight:400}.example-button-8:visited{color:#1979c3;text-decoration:none}.example-button-8:hover{color:#006bb4;text-decoration:underline}.example-button-8:active{color:#ff5501;text-decoration:underline}.example-button-8:hover{color:#006bb4}.example-button-8:hover,.example-button-8:active,.example-button-8:focus{background:0;border:0}.example-button-8.disabled,.example-button-8[disabled],fieldset[disabled] .example-button-8{color:#1979c3;opacity:.5;cursor:default;pointer-events:none;text-decoration:underline}.example-button-8:active{box-shadow:none}.example-button-9{text-decoration:none;background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:0;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;margin:3px;border-radius:3px;font-weight:700}.example-button-9:hover,.example-button-9:active,.example-button-9:focus{text-decoration:none}.example-button-9:focus,.example-button-9:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-9:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-9.disabled,.example-button-9[disabled],fieldset[disabled] .example-button-9{opacity:.5;cursor:default;pointer-events:none}.example-button-9:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-14{background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400}.example-button-14:focus,.example-button-14:active{background:0;border:0}.example-button-14:hover{background:0;border:0}.example-button-14.disabled,.example-button-14[disabled],fieldset[disabled] .example-button-14{cursor:not-allowed;pointer-events:none;opacity:.5}.example-button-15{background-image:none;background:#1979c3;border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;padding:7px 15px;font-size:1.4rem;box-sizing:border-box;vertical-align:middle;background:#f2f2f2;border:1px solid #cdcdcd;color:#333}.example-button-15:focus,.example-button-15:active{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-15:hover{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-15.disabled,.example-button-15[disabled],fieldset[disabled] .example-button-15{opacity:.5;cursor:default;pointer-events:none}.example-button-15:focus,.example-button-15:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-15:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-17{line-height:2.2rem;padding:14px 17px;font-size:1.8rem;font-size:1.4rem;line-height:1.6rem;padding:7px 15px}.example-button-18{font-size:1rem;line-height:1.2rem;padding:4px 10px}body._has-modal{height:100%;overflow:hidden;width:100%}.modals-overlay{z-index:899}.modal-slide,.modal-popup{bottom:0;left:0;min-width:0;position:fixed;right:0;top:0;visibility:hidden}.modal-slide._show,.modal-popup._show{visibility:visible}.modal-slide._show .modal-inner-wrap,.modal-popup._show .modal-inner-wrap{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-slide .modal-inner-wrap,.modal-popup .modal-inner-wrap{background-color:#fff;box-shadow:0 0 12px 2px rgba(0,0,0,.35);opacity:1;pointer-events:auto}.modal-slide{left:14.8rem;z-index:900}.modal-slide._show .modal-inner-wrap{-webkit-transform:translateX(0);transform:translateX(0)}.modal-slide .modal-inner-wrap{height:100%;overflow-y:auto;position:static;-webkit-transform:translateX(100%);transform:translateX(100%);transition-duration:.3s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease-in-out;width:auto}.modal-slide._inner-scroll .modal-inner-wrap{overflow-y:visible;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.modal-slide._inner-scroll .modal-header,.modal-slide._inner-scroll .modal-footer{-webkit-flex-grow:0;flex-grow:0;-webkit-flex-shrink:0;flex-shrink:0}.modal-slide._inner-scroll .modal-content{overflow-y:auto}.modal-slide._inner-scroll .modal-footer{margin-top:auto}.modal-slide .modal-header,.modal-slide .modal-content,.modal-slide .modal-footer{padding:0 2.6rem 2.6rem}.modal-slide .modal-header{padding-bottom:2.1rem;padding-top:2.1rem}.modal-popup{z-index:900;left:0;overflow-y:auto}.modal-popup._show .modal-inner-wrap{-webkit-transform:translateY(0);transform:translateY(0)}.modal-popup .modal-inner-wrap{margin:5rem auto;width:75%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;height:auto;left:0;position:absolute;right:0;-webkit-transform:translateY(-200%);transform:translateY(-200%);transition-duration:.2s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease}.modal-popup._inner-scroll{overflow-y:visible}.ie10 .modal-popup._inner-scroll,.ie9 .modal-popup._inner-scroll{overflow-y:auto}.modal-popup._inner-scroll .modal-inner-wrap{max-height:90%}.ie10 .modal-popup._inner-scroll .modal-inner-wrap,.ie9 .modal-popup._inner-scroll .modal-inner-wrap{max-height:none}.modal-popup._inner-scroll .modal-content{overflow-y:auto}.modal-popup .modal-header,.modal-popup .modal-content,.modal-popup .modal-footer{padding-left:3rem;padding-right:3rem}.modal-popup .modal-header,.modal-popup .modal-footer{-webkit-flex-grow:0;flex-grow:0;-webkit-flex-shrink:0;flex-shrink:0}.modal-popup .modal-header{padding-bottom:1.2rem;padding-top:3rem}.modal-popup .modal-footer{margin-top:auto;padding-bottom:3rem;padding-top:3rem}.modal-popup .modal-footer-actions{text-align:right}.example-dropdown-1{display:inline-block;position:relative}.example-dropdown-1:before,.example-dropdown-1:after{content:'';display:table}.example-dropdown-1:after{clear:both}.example-dropdown-1 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-1 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-1 .action.toggle:hover:after{color:inherit}.example-dropdown-1 .action.toggle:active:after{color:inherit}.example-dropdown-1 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-1 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-1 .action.toggle.active:hover:after{color:inherit}.example-dropdown-1 .action.toggle.active:active:after{color:inherit}.example-dropdown-1 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-1 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-1 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-1 ul.dropdown:before,.example-dropdown-1 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-1 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-1 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-1 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-1 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-1.active{overflow:visible}.example-dropdown-1.active ul.dropdown{display:block}.example-dropdown-2{display:inline-block;position:relative}.example-dropdown-2:before,.example-dropdown-2:after{content:'';display:table}.example-dropdown-2:after{clear:both}.example-dropdown-2 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-2 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-2 .action.toggle:hover:after{color:inherit}.example-dropdown-2 .action.toggle:active:after{color:inherit}.example-dropdown-2 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-2 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-2 .action.toggle.active:hover:after{color:inherit}.example-dropdown-2 .action.toggle.active:active:after{color:inherit}.example-dropdown-2 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-2 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-2 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-2 ul.dropdown:before,.example-dropdown-2 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-2 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-2 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-2 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-2 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-2.active{overflow:visible}.example-dropdown-2.active ul.dropdown{display:block}.example-dropdown-3{display:inline-block;position:relative}.example-dropdown-3:before,.example-dropdown-3:after{content:'';display:table}.example-dropdown-3:after{clear:both}.example-dropdown-3 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-3 .action.toggle:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:red;content:'\e61c';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-3 .action.toggle:hover:before{color:red}.example-dropdown-3 .action.toggle:active:before{color:inherit}.example-dropdown-3 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-3 .action.toggle.active:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:red;content:'\e60f';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-3 .action.toggle.active:hover:before{color:red}.example-dropdown-3 .action.toggle.active:active:before{color:inherit}.example-dropdown-3 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-3 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-3 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-3 ul.dropdown:before,.example-dropdown-3 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-3 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-3 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-3 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-3 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-3.active{overflow:visible}.example-dropdown-3.active ul.dropdown{display:block}.example-dropdown-5{display:inline-block;position:relative}.example-dropdown-5:before,.example-dropdown-5:after{content:'';display:table}.example-dropdown-5:after{clear:both}.example-dropdown-5 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-5 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-5 .action.toggle:hover:after{color:inherit}.example-dropdown-5 .action.toggle:active:after{color:inherit}.example-dropdown-5 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-5 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-5 .action.toggle.active:hover:after{color:inherit}.example-dropdown-5 .action.toggle.active:active:after{color:inherit}.example-dropdown-5 ul.dropdown{margin:0;padding:0;list-style:none none;background:#eef1f3;border:2px solid #ced1d4;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%}.example-dropdown-5 ul.dropdown li{margin:0;padding:10px;border-top:2px solid #e8eaed}.example-dropdown-5 ul.dropdown li:first-child{border:0}.example-dropdown-5 ul.dropdown li:hover{background:#d8e3e3;cursor:pointer}.example-dropdown-5.active{overflow:visible}.example-dropdown-5.active ul.dropdown{display:block}.example-dropdown-6{display:inline-block;position:relative}.example-dropdown-6:before,.example-dropdown-6:after{content:'';display:table}.example-dropdown-6:after{clear:both}.example-dropdown-6 .action.split{float:left;margin:0}.example-dropdown-6 .action.toggle{float:right;margin:0}.example-dropdown-6 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-6 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-6 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-6 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-6 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-6 .action.toggle:hover:after{color:inherit}.example-dropdown-6 .action.toggle:active:after{color:inherit}.example-dropdown-6 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-6 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-6 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-6 .action.toggle.active:hover:after{color:inherit}.example-dropdown-6 .action.toggle.active:active:after{color:inherit}.example-dropdown-6 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-6 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-6 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-6 ul.dropdown:before,.example-dropdown-6 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-6 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-6 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-6 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-6 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-6.active{overflow:visible}.example-dropdown-6.active ul.dropdown{display:block}.split.example-dropdown-7{display:inline-block;position:relative}.split.example-dropdown-7:before,.split.example-dropdown-7:after{content:'';display:table}.split.example-dropdown-7:after{clear:both}.split.example-dropdown-7 .action.split{float:left;margin:0}.split.example-dropdown-7 .action.toggle{float:right;margin:0}.split.example-dropdown-7 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.split.example-dropdown-7 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.split.example-dropdown-7 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.split.example-dropdown-7 .action.toggle:hover:after{color:inherit}.split.example-dropdown-7 .action.toggle:active:after{color:inherit}.split.example-dropdown-7 .action.toggle.active{display:inline-block;text-decoration:none}.split.example-dropdown-7 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.split.example-dropdown-7 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.split.example-dropdown-7 .action.toggle.active:hover:after{color:inherit}.split.example-dropdown-7 .action.toggle.active:active:after{color:inherit}.split.example-dropdown-7 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.split.example-dropdown-7 ul.dropdown li{margin:0;padding:3px 5px}.split.example-dropdown-7 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.split.example-dropdown-7 ul.dropdown:before,.split.example-dropdown-7 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.split.example-dropdown-7 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.split.example-dropdown-7 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.split.example-dropdown-7 ul.dropdown:before{right:10px;top:-12px}.split.example-dropdown-7 ul.dropdown:after{right:9px;top:-14px}.split.example-dropdown-7.active{overflow:visible}.split.example-dropdown-7.active ul.dropdown{display:block}.example-dropdown-8{display:inline-block;position:relative}.example-dropdown-8:before,.example-dropdown-8:after{content:'';display:table}.example-dropdown-8:after{clear:both}.example-dropdown-8 .action.split{float:left;margin:0}.example-dropdown-8 .action.toggle{float:right;margin:0}.example-dropdown-8 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-8 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-8 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-8 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-8 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-8 .action.toggle:hover:after{color:inherit}.example-dropdown-8 .action.toggle:active:after{color:inherit}.example-dropdown-8 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-8 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-8 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-8 .action.toggle.active:hover:after{color:inherit}.example-dropdown-8 .action.toggle.active:active:after{color:inherit}.example-dropdown-8 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-8 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-8 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-8 ul.dropdown:before,.example-dropdown-8 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-8 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-8 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-8 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-8 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-8.active{overflow:visible}.example-dropdown-8.active ul.dropdown{display:block}.example-dropdown-9{display:inline-block;position:relative}.example-dropdown-9 .action.split,.example-dropdown-9 .action.toggle{line-height:2.2rem;padding:14px 17px;font-size:1.8rem}.example-dropdown-9:before,.example-dropdown-9:after{content:'';display:table}.example-dropdown-9:after{clear:both}.example-dropdown-9 .action.split{float:left;margin:0}.example-dropdown-9 .action.toggle{float:right;margin:0}.example-dropdown-9 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-9 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-9 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-9 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-9 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-9 .action.toggle:hover:after{color:inherit}.example-dropdown-9 .action.toggle:active:after{color:inherit}.example-dropdown-9 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-9 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-9 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-9 .action.toggle.active:hover:after{color:inherit}.example-dropdown-9 .action.toggle.active:active:after{color:inherit}.example-dropdown-9 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-9 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-9 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-9 ul.dropdown:before,.example-dropdown-9 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-9 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-9 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-9 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-9 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-9.active{overflow:visible}.example-dropdown-9.active ul.dropdown{display:block}.example-dropdown-10{display:inline-block;position:relative}.example-dropdown-10 .action.split,.example-dropdown-10 .action.toggle{line-height:1.2rem;padding:5px 8px;font-size:1.1rem}.example-dropdown-10:before,.example-dropdown-10:after{content:'';display:table}.example-dropdown-10:after{clear:both}.example-dropdown-10 .action.split{float:left;margin:0}.example-dropdown-10 .action.toggle{float:right;margin:0}.example-dropdown-10 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-10 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-10 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-10 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-10 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-10 .action.toggle:hover:after{color:inherit}.example-dropdown-10 .action.toggle:active:after{color:inherit}.example-dropdown-10 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-10 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-10 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-10 .action.toggle.active:hover:after{color:inherit}.example-dropdown-10 .action.toggle.active:active:after{color:inherit}.example-dropdown-10 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-10 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-10 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-10 ul.dropdown:before,.example-dropdown-10 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-10 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-10 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-10 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-10 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-10.active{overflow:visible}.example-dropdown-10.active ul.dropdown{display:block}.example-dropdown-11{display:inline-block;position:relative}.example-dropdown-11:before,.example-dropdown-11:after{content:'';display:table}.example-dropdown-11:after{clear:both}.example-dropdown-11 .action.split{float:right;margin:0}.example-dropdown-11 .action.toggle{float:left;margin:0}.example-dropdown-11 button.action.split{border-bottom-left-radius:0;border-top-left-radius:0}.example-dropdown-11 button+.action.toggle{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.example-dropdown-11 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-11 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-11 .action.toggle:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:red;content:'\e61c';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-11 .action.toggle:hover:before{color:red}.example-dropdown-11 .action.toggle:active:before{color:inherit}.example-dropdown-11 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-11 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-11 .action.toggle.active:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:red;content:'\e60f';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-11 .action.toggle.active:hover:before{color:red}.example-dropdown-11 .action.toggle.active:active:before{color:inherit}.example-dropdown-11 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-11 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-11 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-11 ul.dropdown:before,.example-dropdown-11 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-11 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-11 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-11 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-11 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-11.active{overflow:visible}.example-dropdown-11.active ul.dropdown{display:block}.example-dropdown-12{display:inline-block;position:relative}.example-dropdown-12:before,.example-dropdown-12:after{content:'';display:table}.example-dropdown-12:after{clear:both}.example-dropdown-12 .action.split{float:left;margin:0}.example-dropdown-12 .action.toggle{float:right;margin:0}.example-dropdown-12 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-12 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-12 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-12 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-12 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-12 .action.toggle:hover:after{color:inherit}.example-dropdown-12 .action.toggle:active:after{color:inherit}.example-dropdown-12 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-12 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-12 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-12 .action.toggle.active:hover:after{color:inherit}.example-dropdown-12 .action.toggle.active:active:after{color:inherit}.example-dropdown-12 ul.dropdown{margin:0;padding:0;list-style:none none;background:#eef1f3;border:2px solid #ced1d4;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%}.example-dropdown-12 ul.dropdown li{margin:0;padding:10px;border-top:2px solid #e8eaed}.example-dropdown-12 ul.dropdown li:first-child{border:0}.example-dropdown-12 ul.dropdown li:hover{background:#d8e3e3;cursor:pointer}.example-dropdown-12.active{overflow:visible}.example-dropdown-12.active ul.dropdown{display:block}.example-form-1 .example-form-1-fieldset{border:0;margin:0 0 40px;padding:0;letter-spacing:-.31em}.example-form-1 .example-form-1-fieldset>*{letter-spacing:normal}.example-form-1 .example-form-1-fieldset>.legend{margin:0 0 25px;padding:0;box-sizing:border-box;float:left;line-height:1.2;font-size:2rem}.example-form-1 .example-form-1-fieldset>.legend+br{clear:both;display:block;height:0;overflow:hidden;visibility:hidden}.example-form-1 .example-form-1-fieldset:after{margin:10px 0 0;content:attr(data-hasrequired);display:block;letter-spacing:normal;word-spacing:normal;color:#e02b27;font-size:1.2rem}.example-form-1 .example-form-1-fieldset>.field{margin:0 0 20px}.example-form-1 .example-form-1-fieldset>.field>.label{margin:0 0 5px;display:inline-block}.example-form-1 .example-form-1-fieldset>.field:last-child{margin-bottom:0}.example-form-1 .example-form-1-fieldset>.field>.label{font-weight:700}.example-form-1 .example-form-1-fieldset>.field>.label+br{display:none}.example-form-1 .example-form-1-fieldset>.field .choice input{vertical-align:top}.example-form-1 .example-form-1-fieldset>.field .fields.group:before,.example-form-1 .example-form-1-fieldset>.field .fields.group:after{content:'';display:table}.example-form-1 .example-form-1-fieldset>.field .fields.group:after{clear:both}.example-form-1 .example-form-1-fieldset>.field .fields.group .field{box-sizing:border-box;float:left}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-2 .field{width:50%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-3 .field{width:33.3%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-4 .field{width:25%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-5 .field{width:20%!important}.example-form-1 .example-form-1-fieldset>.field .addon{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;padding:0;width:100%}.example-form-1 .example-form-1-fieldset>.field .addon textarea,.example-form-1 .example-form-1-fieldset>.field .addon select,.example-form-1 .example-form-1-fieldset>.field .addon input{-ms-flex-order:2;-webkit-order:2;order:2;-webkit-flex-basis:100%;flex-basis:100%;display:inline-block;margin:0;width:auto}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore,.example-form-1 .example-form-1-fieldset>.field .addon .addafter{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;-ms-flex-order:3;-webkit-order:3;order:3;display:inline-block;vertical-align:middle;white-space:nowrap;width:auto}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore:disabled,.example-form-1 .example-form-1-fieldset>.field .addon .addafter:disabled{opacity:.5}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore::-moz-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter::-moz-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore::-webkit-input-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter::-webkit-input-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore:-ms-input-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter:-ms-input-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore{float:left;-ms-flex-order:1;-webkit-order:1;order:1}.example-form-1 .example-form-1-fieldset>.field .additional{margin-top:10px}.example-form-1 .example-form-1-fieldset>.field.required>.label:after,.example-form-1 .example-form-1-fieldset>.field._required>.label:after{content:'*';color:#e02b27;font-size:1.2rem;margin:0 0 0 5px}.example-form-1 .example-form-1-fieldset>.field .note{font-size:1.2rem;margin:3px 0 0;padding:0;display:inline-block;text-decoration:none}.example-form-1 .example-form-1-fieldset>.field .note:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:12px;content:'\e618';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-form-2 .example-form-2-fieldset{border:0;margin:0 0 40px;padding:0;letter-spacing:-.31em}.example-form-2 .example-form-2-fieldset>*{letter-spacing:normal}.example-form-2 .example-form-2-fieldset>.legend{margin:0 0 25px;padding:0;box-sizing:border-box;float:left;line-height:1.2;font-size:2rem}.example-form-2 .example-form-2-fieldset>.legend+br{clear:both;display:block;height:0;overflow:hidden;visibility:hidden}.example-form-2 .example-form-2-fieldset>.field{margin:0 0 20px;padding:0 12px 0 0;box-sizing:border-box;display:inline-block;width:50%;vertical-align:top}.example-form-2 .example-form-2-fieldset>.field>.label{margin:0 0 5px;display:inline-block}.example-form-2 .example-form-2-fieldset>.field:last-child{margin-bottom:0}.example-form-2 .example-form-2-fieldset>.field+.fieldset{clear:both}.example-form-2 .example-form-2-fieldset>.field>.label{font-weight:700}.example-form-2 .example-form-2-fieldset>.field>.label+br{display:none}.example-form-2 .example-form-2-fieldset>.field .choice input{vertical-align:top}.example-form-2 .example-form-2-fieldset>.field .fields.group:before,.example-form-2 .example-form-2-fieldset>.field .fields.group:after{content:'';display:table}.example-form-2 .example-form-2-fieldset>.field .fields.group:after{clear:both}.example-form-2 .example-form-2-fieldset>.field .fields.group .field{box-sizing:border-box;float:left}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-2 .field{width:50%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-3 .field{width:33.3%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-4 .field{width:25%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-5 .field{width:20%!important}.example-form-2 .example-form-2-fieldset>.field .addon{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;padding:0;width:100%}.example-form-2 .example-form-2-fieldset>.field .addon textarea,.example-form-2 .example-form-2-fieldset>.field .addon select,.example-form-2 .example-form-2-fieldset>.field .addon input{-ms-flex-order:2;-webkit-order:2;order:2;-webkit-flex-basis:100%;flex-basis:100%;display:inline-block;margin:0;width:auto}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore,.example-form-2 .example-form-2-fieldset>.field .addon .addafter{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;-ms-flex-order:3;-webkit-order:3;order:3;display:inline-block;vertical-align:middle;white-space:nowrap;width:auto}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore:disabled,.example-form-2 .example-form-2-fieldset>.field .addon .addafter:disabled{opacity:.5}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore::-moz-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter::-moz-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore::-webkit-input-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter::-webkit-input-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore:-ms-input-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter:-ms-input-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore{float:left;-ms-flex-order:1;-webkit-order:1;order:1}.example-form-2 .example-form-2-fieldset>.field .additional{margin-top:10px}.example-form-2 .example-form-2-fieldset>.field.required>.label:after,.example-form-2 .example-form-2-fieldset>.field._required>.label:after{content:'*';color:#e02b27;font-size:1.2rem;margin:0 0 0 5px}.example-form-2 .example-form-2-fieldset>.field .note{font-size:1.2rem;margin:3px 0 0;padding:0;display:inline-block;text-decoration:none}.example-form-2 .example-form-2-fieldset>.field .note:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:12px;content:'\e618';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}input[type="text"],input[type="password"],input[type="url"],input[type="tel"],input[type="search"],input[type="number"],input[type="datetime"],input[type="email"]{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;margin-bottom:20px}input[type="text"]:disabled,input[type="password"]:disabled,input[type="url"]:disabled,input[type="tel"]:disabled,input[type="search"]:disabled,input[type="number"]:disabled,input[type="datetime"]:disabled,input[type="email"]:disabled{opacity:.5}input[type="text"]::-moz-placeholder,input[type="password"]::-moz-placeholder,input[type="url"]::-moz-placeholder,input[type="tel"]::-moz-placeholder,input[type="search"]::-moz-placeholder,input[type="number"]::-moz-placeholder,input[type="datetime"]::-moz-placeholder,input[type="email"]::-moz-placeholder{color:#c2c2c2}input[type="text"]::-webkit-input-placeholder,input[type="password"]::-webkit-input-placeholder,input[type="url"]::-webkit-input-placeholder,input[type="tel"]::-webkit-input-placeholder,input[type="search"]::-webkit-input-placeholder,input[type="number"]::-webkit-input-placeholder,input[type="datetime"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder{color:#c2c2c2}input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="url"]:-ms-input-placeholder,input[type="tel"]:-ms-input-placeholder,input[type="search"]:-ms-input-placeholder,input[type="number"]:-ms-input-placeholder,input[type="datetime"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder{color:#c2c2c2}select{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:5px 10px 4px;vertical-align:baseline;width:100%;box-sizing:border-box;margin-bottom:20px}select:disabled{opacity:.5}select[multiple="multiple"]{height:auto;margin-bottom:20px}textarea{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:auto;line-height:1.428571429;margin:0;padding:10px;vertical-align:baseline;width:100%;box-sizing:border-box;resize:vertical}textarea:disabled{opacity:.5}textarea::-moz-placeholder{color:#c2c2c2}textarea::-webkit-input-placeholder{color:#c2c2c2}textarea:-ms-input-placeholder{color:#c2c2c2}input[type="checkbox"]{margin:2px 5px 0 0}input[type="checkbox"]:disabled{opacity:.5}input[type="radio"]{margin:2px 5px 0 0}input[type="radio"]:disabled{opacity:.5}input.text-example-1,select.select-example-1,textarea.textarea-example-1{background:#fdf0d5;border-color:#fc0;color:#b30000}input.text-example-1:focus,select.select-example-1:focus,textarea.textarea-example-1:focus{border-color:#cff;color:#060}input.text-example-1:disabled,select.select-example-1:disabled,textarea.textarea-example-1:disabled{color:#fcc}input.text-example-1::-moz-placeholder,textarea.textarea-example-1::-moz-placeholder{color:#ccc}input.text-example-1::-webkit-input-placeholder,textarea.textarea-example-1::-webkit-input-placeholder{color:#ccc}input.text-example-1:-ms-input-placeholder,textarea.textarea-example-1:-ms-input-placeholder{color:#ccc}.number-example{-moz-appearance:textfield}.number-example::-webkit-inner-spin-button,.number-example::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.search-example{-webkit-appearance:none}.search-example::-webkit-search-cancel-button,.search-example::-webkit-search-decoration,.search-example::-webkit-search-results-button,.search-example::-webkit-search-results-decoration{-webkit-appearance:none}input,textarea,select{color:#e02b27;font-size:1.2rem}.example-icon-1{display:inline-block}.example-icon-1:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-2{display:inline-block}.example-icon-2:after{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:-26px;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-3{display:inline-block}.example-icon-3>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-icon-3:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:-156px;background-position-y:-52px;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-4{display:inline-block;text-decoration:none}.example-icon-4:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e606';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-5{display:inline-block;text-decoration:none}.example-icon-5:after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e605';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-6{display:inline-block;text-decoration:none}.example-icon-6>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-icon-6:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e61b';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-7{display:inline-block}.example-icon-7:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-8{display:inline-block}.example-icon-8:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-8:before{background-position:-182px 0}.example-icon-9{display:inline-block}.example-icon-9:after{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-9:after{background-position:-52px -26px}.example-icon-10{display:inline-block}.example-icon-10:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-10:before{background-position:-104px 0}.example-icon-11{display:inline-block}.example-icon-11:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-11:before{height:30px;width:30px}.example-icon-11:after{height:30px;width:30px}.example-icon-11:before{background-color:#f1f1f1}.example-icon-12{display:inline-block;text-decoration:none}.example-icon-12:before{-webkit-font-smoothing:antialiased;font-size:28px;line-height:inherit;color:inherit;content:'\e612';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-13{display:inline-block;text-decoration:none}.example-icon-13:before{-webkit-font-smoothing:antialiased;font-size:inherit;line-height:inherit;color:inherit;content:'\e612';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-13:before{font-size:26px;line-height:inherit}.example-icon-14{display:inline-block;text-decoration:none}.example-icon-14:before{-webkit-font-smoothing:antialiased;font-size:26px;line-height:inherit;color:inherit;content:'\e61d';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-14>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.icons-image-list{list-style:none;padding:0}.icons-image-list li{float:left;width:33%}.icons-image-list li>span{display:inline-block}.icons-image-list li>span:before{background-image:url('/pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.icons-image-list li .icon-search:before{background-position:0 0}.icons-image-list li .icon-cart:before{background-position:-26px 0}.icons-image-list li .icon-arrow-down:before{background-position:-52px 0}.icons-image-list li .icon-arrow-up:before{background-position:-78px 0}.icons-image-list li .icon-grid:before{background-position:-104px 0}.icons-image-list li .icon-list:before{background-position:-130px 0}.icons-image-list li .icon-remove:before{background-position:-156px 0}.icons-image-list li .icon-star:before{background-position:-182px 0}.icons-image-list li .icon-pointer-down:before{background-position:-208px 0}.icons-image-list li .icon-pointer-up:before{background-position:-234px 0}.icons-image-list li .icon-pointer-left:before{background-position:-260px 0}.icons-image-list li .icon-pointer-right:before{background-position:-286px 0}.icons-image-list li .icon-compare-empty:before{background-position:0 -26px}.icons-image-list li .icon-compare-full:before{background-position:-26px -26px}.icons-image-list li .icon-wishlist-empty:before{background-position:-52px -26px}.icons-image-list li .icon-wishlist-full:before{background-position:-78px -26px}.icons-image-list li .icon-update:before{background-position:-104px -26px}.icons-image-list li .icon-collapse:before{background-position:-130px -26px}.icons-image-list li .icon-expand:before{background-position:-156px -26px}.icons-image-list li .icon-menu:before{background-position:-182px -26px}.icons-image-list li .icon-prev:before{background-position:-208px -26px}.icons-image-list li .icon-next:before{background-position:-234px -26px}.icons-image-list li .icon-settings:before{background-position:-260px -26px}.icons-image-list li .icon-info:before{background-position:-286px -26px}.icons-image-list li .icon-checkmark:before{background-position:0 -52px}.icons-image-list li .icon-calendar:before{background-position:-26px -52px}.icons-image-list li .icon-comment:before{background-position:-52px -52px}.icons-image-list li .icon-comment-reflected:before{background-position:-78px -52px}.icons-image-list li .icon-envelope:before{background-position:-104px -52px}.icons-image-list li .icon-warning:before{background-position:-130px -52px}.icons-image-list li .icon-trash:before{background-position:-156px -52px}.icons-image-list li .icon-flag:before{background-position:-182px -52px}.icons-image-list li .icon-location:before{background-position:-208px -52px}.icons-image-list li .icon-up:before{background-position:-234px -52px}.icons-image-list li .icon-down:before{background-position:-260px -52px}.icons-font-list{list-style:none;padding:0}.icons-font-list li{float:left;width:25%;margin-bottom:35px;text-align:center}.icons-font-list li>span{display:inline-block;text-decoration:none}.icons-font-list li>span:before{-webkit-font-smoothing:antialiased;font-size:34px;line-height:inherit;color:inherit;font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.icons-font-list li>span:before{content:attr(data-icon);margin:0 auto;display:block}.loader{background-color:rgba(255,255,255,.5);z-index:9999;bottom:0;left:0;position:fixed;right:0;top:0}.loader:before{background:transparent url('/pub/static/frontend/Magento/blank/en_US/images/loader-2.gif') no-repeat 50% 50%;border-radius:5px;height:160px;width:160px;bottom:0;box-sizing:border-box;content:'';left:0;margin:auto;position:absolute;right:0;top:0}.loading{position:relative}.loading:before{background:rgba(255,255,255,.5) url('/pub/static/frontend/Magento/blank/en_US/images/loader-2.gif') no-repeat 50% 50%;bottom:0;content:'';left:0;position:absolute;right:0;top:0}.example-message-info{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-info a{color:#1979c3}.example-message-info a:hover{color:#006bb4}.example-message-info a:active{color:#006bb4}.example-message-warning{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-warning a{color:#1979c3}.example-message-warning a:hover{color:#006bb4}.example-message-warning a:active{color:#006bb4}.example-message-error{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fae5e5;color:#e02b27}.example-message-error a{color:#1979c3}.example-message-error a:hover{color:#006bb4}.example-message-error a:active{color:#006bb4}.example-message-success{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#e5efe5;color:#006400}.example-message-success a{color:#1979c3}.example-message-success a:hover{color:#006bb4}.example-message-success a:active{color:#006bb4}.example-message-notice{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-notice a{color:#1979c3}.example-message-notice a:hover{color:#006bb4}.example-message-notice a:active{color:#006bb4}.example-message-1{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400;padding-left:40px;position:relative}.example-message-1 a{color:#1979c3}.example-message-1 a:hover{color:#006bb4}.example-message-1 a:active{color:#006bb4}.example-message-1>:first-child:before{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#c07600;content:'\e602';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:40px;position:absolute;text-align:center}.example-message-2{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fae5e5;color:#e02b27;position:relative;padding-right:40px}.example-message-2 a{color:#1979c3}.example-message-2 a:hover{color:#006bb4}.example-message-2 a:active{color:#006bb4}.example-message-2:before{background:#b30000;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-2>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-2>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#fff;content:'\e602';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:30px;position:absolute;text-align:center}.example-message-2:before{right:0}.example-message-2>:first-child:before{border:5px solid transparent;height:0;width:0;border-right-color:#b30000;right:30px}.example-message-2>:first-child:after{right:0}.example-message-3{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#e5efe5;color:#006400;position:relative;padding-left:40px}.example-message-3 a{color:#1979c3}.example-message-3 a:hover{color:#006bb4}.example-message-3 a:active{color:#006bb4}.example-message-3:before{background:#006400;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-3>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-3>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#fff;content:'\e610';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:30px;position:absolute;text-align:center}.example-message-3:before{left:0}.example-message-3>:first-child:before{border:5px solid transparent;height:0;width:0;border-left-color:#006400;left:30px}.example-message-3>:first-child:after{left:0}.example-message-4{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fc0;border-color:#ffa500;color:#000;position:relative;padding-left:40px;border-width:4px;border-radius:10px}.example-message-4 a{color:#00f}.example-message-4 a:hover{color:#009}.example-message-4 a:active{color:#006}.example-message-4:before{background:#green;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-4>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-4>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#000;content:'\e606';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:15px;width:30px;position:absolute;text-align:center}.example-message-4:before{left:0}.example-message-4>:first-child:before{border:5px solid transparent;height:0;width:0;border-left-color:#green;left:30px}.example-message-4>:first-child:after{left:0}header.header{background-color:rgba(255,0,0,.2)}.column.main{background-color:rgba(255,255,0,.2)}.column.left{background-color:rgba(0,255,255,.2)}.column.right{background-color:rgba(0,0,255,.2)}footer.footer{background-color:rgba(0,0,0,.2)}.columns{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box}.columns:after{clear:both;content:' ';display:block;height:0;overflow:hidden;visibility:hidden}.columns>.column{padding-bottom:40px}@media (min-width: 600px){.page-layout-1column .column.main{ width:100%;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-3columns .column.main{width:66.66666667%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-left .column.main{width:83.33333333%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-right .column.main{width:83.33333333%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-3columns .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-2columns-left .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-2columns-right .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-3columns .column.right{width:16.66666667%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.page-layout-2columns-left .column.right{width:16.66666667%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-right .column.right{width:16.66666667%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}}.layout-example-3 .column.main{width:60%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.layout-example-3 .column.left{width:20%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.layout-example-3 .column.right{width:20%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.layout-example-3-1 .column.main{width:60%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.layout-example-3-1 .column.left{width:20%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.layout-example-3-1 .column.right{width:20%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.pages>.label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.pages .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.pages .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages a.page{color:#1979c3;display:inline-block;padding:0 4px;text-decoration:none}.pages a.page:visited{color:#1979c3}.pages a.page:hover{color:#006bb4;text-decoration:none}.pages a.page:active{color:#ff5501}.pages strong.page{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#333;display:inline-block;font-weight:700;padding:0 4px}.pages .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.pages .action:visited{color:#7d7d7d}.pages .action:hover{color:#7d7d7d;text-decoration:none}.pages .action:active{color:#7d7d7d}.pages .action.next{display:inline-block;text-decoration:none}.pages .action.next:visited:before{color:#7d7d7d}.pages .action.next:active:before{color:#7d7d7d}.pages .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .action.next:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#7d7d7d;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.pages .action.next:hover:before{color:#7d7d7d}.pages .action.next:active:before{color:#7d7d7d}.pages .action.previous{display:inline-block;text-decoration:none}.pages .action.previous:visited:before{color:#7d7d7d}.pages .action.previous:active:before{color:#7d7d7d}.pages .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .action.previous:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#7d7d7d;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.pages .action.previous:hover:before{color:#7d7d7d}.pages .action.previous:active:before{color:#7d7d7d}.example-pages-1>.label{display:inline-block;font-weight:700;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px}.example-pages-1>.label:after{content:':'}.example-pages-1 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-1 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 3px;display:inline-block}.example-pages-1 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 a.page{background-color:#ccc;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f4f4f4 0, #ccc 100%);background-image:linear-gradient(to bottom, #f4f4f4 0, #ccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#cccccc', GradientType=0);border:1px solid #b3b3b3;color:#333;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-1 a.page:visited{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#1979c3}.example-pages-1 a.page:hover{background-color:#f4f4f4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #ccc 0, #f4f4f4 100%);background-image:linear-gradient(to bottom, #ccc 0, #f4f4f4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f4f4f4', GradientType=0);border:1px solid #999;color:#333;text-decoration:none}.example-pages-1 a.page:active{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#ff5501}.example-pages-1 strong.page{background:#1979c3;border:1px solid #135d96;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#f7b32e;display:inline-block;font-weight:700;padding:0 4px}.example-pages-1 .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.example-pages-1 .action:visited{color:#7d7d7d}.example-pages-1 .action:hover{color:#ff5501;text-decoration:none}.example-pages-1 .action:active{color:#7d7d7d}.example-pages-1 .action.next{display:inline-block;text-decoration:none}.example-pages-1 .action.next:visited:before{color:#7d7d7d}.example-pages-1 .action.next:active:before{color:#7d7d7d}.example-pages-1 .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 .action.next:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:inherit;color:#7d7d7d;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-1 .action.next:hover:before{color:#ff5501}.example-pages-1 .action.next:active:before{color:#7d7d7d}.example-pages-1 .action.previous{display:inline-block;text-decoration:none}.example-pages-1 .action.previous:visited:before{color:#7d7d7d}.example-pages-1 .action.previous:active:before{color:#7d7d7d}.example-pages-1 .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 .action.previous:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:inherit;color:#7d7d7d;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-1 .action.previous:hover:before{color:#ff5501}.example-pages-1 .action.previous:active:before{color:#7d7d7d}.example-pages-2>.label{display:inline-block;font-weight:700;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px}.example-pages-2>.label:after{content:':'}.example-pages-2 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-2 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.example-pages-2 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-2 a.page{color:#1979c3;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-2 a.page:visited{color:#1979c3}.example-pages-2 a.page:hover{color:#006bb4;text-decoration:none}.example-pages-2 a.page:active{color:#ff5501}.example-pages-2 strong.page{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#333;display:inline-block;font-weight:700;padding:0 4px}.example-pages-2 .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.example-pages-2 .action:visited{color:#7d7d7d}.example-pages-2 .action:hover{color:#7d7d7d;text-decoration:none}.example-pages-2 .action:active{color:#7d7d7d}.example-pages-3>.label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-3 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.example-pages-3 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 a.page{background:#1979c3;color:#fff;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-3 a.page:visited{background:#1979c3;color:#fff}.example-pages-3 a.page:hover{background:#006bb4;color:#fff;text-decoration:none}.example-pages-3 a.page:active{background:#ff5501;color:#fff}.example-pages-3 strong.page{background:#1979c3;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#fff;display:inline-block;font-weight:700;padding:0 4px}.example-pages-3 .action{background:#1979c3;border:1px solid #d1d1d1;color:#fff;display:inline-block;padding:0;text-decoration:none}.example-pages-3 .action:visited{background:#1979c3;color:#7d7d7d}.example-pages-3 .action:hover{background:#006bb4;color:#fff;text-decoration:none}.example-pages-3 .action:active{background:#ff5501;color:#fff}.example-pages-3 .action.next{display:inline-block;text-decoration:none}.example-pages-3 .action.next:visited:before{color:#7d7d7d}.example-pages-3 .action.next:active:before{color:#fff}.example-pages-3 .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .action.next:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#fff;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-3 .action.next:hover:before{color:#fff}.example-pages-3 .action.next:active:before{color:#fff}.example-pages-3 .action.previous{display:inline-block;text-decoration:none}.example-pages-3 .action.previous:visited:before{color:#7d7d7d}.example-pages-3 .action.previous:active:before{color:#fff}.example-pages-3 .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .action.previous:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#fff;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-3 .action.previous:hover:before{color:#fff}.example-pages-3 .action.previous:active:before{color:#fff}.window.popup.popup-example{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example .popup-actions .action.close:focus,.window.popup.popup-example .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example .popup-actions .action.close.disabled,.window.popup.popup-example .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example.active{opacity:1}.window.popup.popup-example-1{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-1 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-1 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-1 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-1 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-1 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-1 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-1 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-1 .popup-actions .action.close:focus,.window.popup.popup-example-1 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-1 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-1 .popup-actions .action.close.disabled,.window.popup.popup-example-1 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-1 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-1.active{opacity:1}.window.overlay{transition:opacity .15s linear;background:#000;z-index:899;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.window.overlay.active{opacity:.5;filter:alpha(opacity=50)}.window.popup.popup-example-2{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;overflow-y:auto;max-height:200px;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-2 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-2 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-2 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-2 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-2 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-2 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-2 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-2 .popup-actions .action.close:focus,.window.popup.popup-example-2 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-2 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-2 .popup-actions .action.close.disabled,.window.popup.popup-example-2 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-2 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-2.active{opacity:1}.window.popup.popup-example-3{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-3 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-3 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-3 .popup-content{overflow-y:auto;max-height:200px}.window.popup.popup-example-3 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-3 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-3 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-3 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-3 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-3 .popup-actions .action.close:focus,.window.popup.popup-example-3 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-3 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-3 .popup-actions .action.close.disabled,.window.popup.popup-example-3 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-3 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-3.active{opacity:1}.window.popup.popup-example-4{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-4 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-4 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-4 .popup-content{margin:0 0 20px}.window.popup.popup-example-4 .popup-footer{margin:0 20px}.window.popup.popup-example-4 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-4 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-4 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-4 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-4 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-4 .popup-actions .action.close:focus,.window.popup.popup-example-4 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-4 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-4 .popup-actions .action.close.disabled,.window.popup.popup-example-4 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-4 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-4.active{opacity:1}.window.popup.popup-example-5{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-5 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-5 .popup-header .title{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}.window.popup.popup-example-5 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-5 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-5 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-5 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-5 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-5 .popup-actions .action.close:focus,.window.popup.popup-example-5 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-5 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-5 .popup-actions .action.close.disabled,.window.popup.popup-example-5 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-5 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-5.active{opacity:1}.window.popup.popup-example-6{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-6 .popup-footer .actions.toolbar{text-align:left}.window.popup.popup-example-6 .popup-footer .actions.toolbar:before,.window.popup.popup-example-6 .popup-footer .actions.toolbar:after{content:'';display:table}.window.popup.popup-example-6 .popup-footer .actions.toolbar:after{clear:both}.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary{float:left}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary,.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary{display:inline-block}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary a.action,.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary a.action{display:inline-block}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary .action{margin:0 5px 0 0}.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary a.action{margin-top:6px}.window.popup.popup-example-6 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-6 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-6 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-6 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-6 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-6 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-6 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-6 .popup-actions .action.close:focus,.window.popup.popup-example-6 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-6 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-6 .popup-actions .action.close.disabled,.window.popup.popup-example-6 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-6 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-6.active{opacity:1}.window.popup.popup-example-7{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-7 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-7 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-7 .popup-actions .action.close{position:absolute;right:10px;top:10px}.window.popup.popup-example-7.active{opacity:1}.window.popup.popup-example-8{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-8 .popup-header{margin:0 0 25px;padding-right:30px}.window.popup.popup-example-8 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-8 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-8 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:22px;color:red;content:'\e613';font-family:'icons-blank-theme';margin:0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-8 .popup-actions .action.close:hover:before{color:#090}.window.popup.popup-example-8 .popup-actions .action.close:active:before{color:#00f}.window.popup.popup-example-8 .popup-actions .action.close:focus,.window.popup.popup-example-8 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-8 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-8 .popup-actions .action.close.disabled,.window.popup.popup-example-8 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-8 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-8.active{opacity:1}.window.popup.popup-example-9{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-9 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-9 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-9 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-9 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-9 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-9 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-9 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-9 .popup-actions .action.close:focus,.window.popup.popup-example-9 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-9 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-9 .popup-actions .action.close.disabled,.window.popup.popup-example-9 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-9 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-9.active{opacity:1}.window.overlay.example-overlay-1.active{transition:opacity .15s linear;background:#0f5293;z-index:899;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.window.overlay.example-overlay-1.active.active{opacity:.8;filter:alpha(opacity=80)}.example-ratings-1{overflow:hidden}.example-ratings-1:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-1 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-1 input[type="radio"]:focus+label:before,.example-ratings-1 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-1 label{cursor:pointer;display:block;position:absolute}.example-ratings-1 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-1 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-1 label:hover:before{opacity:1}.example-ratings-1 label:hover~label:before{opacity:0}.example-ratings-1 .rating-5{z-index:2}.example-ratings-1 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-1 .rating-4{z-index:3}.example-ratings-1 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-1 .rating-3{z-index:4}.example-ratings-1 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-1 .rating-2{z-index:5}.example-ratings-1 .rating-2:before{content:'\e605' '\e605'}.example-ratings-1 .rating-1{z-index:6}.example-ratings-1 .rating-1:before{content:'\e605'}.example-ratings-2{overflow:hidden}.example-ratings-2:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-2 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-2 input[type="radio"]:focus+label:before,.example-ratings-2 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-2 label{cursor:pointer;display:block;position:absolute}.example-ratings-2 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-2 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-2 label:hover:before{opacity:1}.example-ratings-2 label:hover~label:before{opacity:0}.example-ratings-2 .rating-8{z-index:2}.example-ratings-2 .rating-8:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-7{z-index:3}.example-ratings-2 .rating-7:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-6{z-index:4}.example-ratings-2 .rating-6:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-5{z-index:5}.example-ratings-2 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-4{z-index:6}.example-ratings-2 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-3{z-index:7}.example-ratings-2 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-2 .rating-2{z-index:8}.example-ratings-2 .rating-2:before{content:'\e605' '\e605'}.example-ratings-2 .rating-1{z-index:9}.example-ratings-2 .rating-1:before{content:'\e605'}.example-ratings-3{overflow:hidden}.example-ratings-3:before{color:#aff5e3;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-3 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-3 input[type="radio"]:focus+label:before,.example-ratings-3 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-3 label{cursor:pointer;display:block;position:absolute}.example-ratings-3 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-3 label:before{color:#0a6767;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-3 label:hover:before{opacity:1}.example-ratings-3 label:hover~label:before{opacity:0}.example-ratings-3 .rating-5{z-index:2}.example-ratings-3 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-3 .rating-4{z-index:3}.example-ratings-3 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-3 .rating-3{z-index:4}.example-ratings-3 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-3 .rating-2{z-index:5}.example-ratings-3 .rating-2:before{content:'\e605' '\e605'}.example-ratings-3 .rating-1{z-index:6}.example-ratings-3 .rating-1:before{content:'\e605'}.example-ratings-4{overflow:hidden}.example-ratings-4:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;position:absolute;z-index:1}.example-ratings-4 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-4 input[type="radio"]:focus+label:before,.example-ratings-4 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-4 label{cursor:pointer;display:block;position:absolute}.example-ratings-4 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-4 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-4 label:hover:before{opacity:1}.example-ratings-4 label:hover~label:before{opacity:0}.example-ratings-4 .rating-5{z-index:2}.example-ratings-4 .rating-5:before{content:'\e600' '\e600' '\e600' '\e600' '\e600'}.example-ratings-4 .rating-4{z-index:3}.example-ratings-4 .rating-4:before{content:'\e600' '\e600' '\e600' '\e600'}.example-ratings-4 .rating-3{z-index:4}.example-ratings-4 .rating-3:before{content:'\e600' '\e600' '\e600'}.example-ratings-4 .rating-2{z-index:5}.example-ratings-4 .rating-2:before{content:'\e600' '\e600'}.example-ratings-4 .rating-1{z-index:6}.example-ratings-4 .rating-1:before{content:'\e600'}.exapmle-ratings-5 .control.rating.vote{overflow:hidden}.exapmle-ratings-5 .control.rating.vote:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.exapmle-ratings-5 .control.rating.vote input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.exapmle-ratings-5 .control.rating.vote input[type="radio"]:focus+label:before,.exapmle-ratings-5 .control.rating.vote input[type="radio"]:checked+label:before{opacity:1}.exapmle-ratings-5 .control.rating.vote label{cursor:pointer;display:block;position:absolute}.exapmle-ratings-5 .control.rating.vote label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.exapmle-ratings-5 .control.rating.vote label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.exapmle-ratings-5 .control.rating.vote label:hover:before{opacity:1}.exapmle-ratings-5 .control.rating.vote label:hover~label:before{opacity:0}.exapmle-ratings-5 .control.rating.vote .rating-5{z-index:2}.exapmle-ratings-5 .control.rating.vote .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-4{z-index:3}.exapmle-ratings-5 .control.rating.vote .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-3{z-index:4}.exapmle-ratings-5 .control.rating.vote .rating-3:before{content:'\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-2{z-index:5}.exapmle-ratings-5 .control.rating.vote .rating-2:before{content:'\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-1{z-index:6}.exapmle-ratings-5 .control.rating.vote .rating-1:before{content:'\e605'}.example-rating-summary-1{overflow:hidden;white-space:nowrap}.example-rating-summary-1 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-1 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-1 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-1 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-1 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-2{overflow:hidden;white-space:nowrap}.example-rating-summary-2 .rating-result{width:154px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-2 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-2 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-2 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-2 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-3{overflow:hidden;white-space:nowrap}.example-rating-summary-3 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-3 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#aff5e3;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-3 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-3 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#0a6767;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-3 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-4{overflow:hidden;white-space:nowrap}.example-rating-summary-4 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-4 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-4 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-4 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-4 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-5{overflow:hidden;white-space:nowrap}.example-rating-summary-5 .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-5 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-5 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-5 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-5 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-5 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-6 .rating-summary{overflow:hidden;white-space:nowrap}.example-rating-summary-6 .rating-summary .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-6 .rating-summary .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-6 .rating-summary .rating-result>span{display:block;overflow:hidden}.example-rating-summary-6 .rating-summary .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-6 .rating-summary .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-7{overflow:hidden;white-space:nowrap}.example-rating-summary-7 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-7 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-7 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-7 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-7 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-7 .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-responsive-block{padding:10px}.example-sections-1{position:relative;z-index:1}.example-sections-1:before,.example-sections-1:after{content:'';display:table}.example-sections-1:after{clear:both}.example-sections-1>.item.title{float:left;width:auto}.example-sections-1>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-1>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-1>.item.content:before,.example-sections-1>.item.content:after{content:'';display:table}.example-sections-1>.item.content:after{clear:both}.example-sections-1>.item.content.active{display:block}.example-sections-1>.item.title{margin:0 5px 0 0}.example-sections-1>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-1>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-1>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-1>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-1>.item.title:not(.disabled)>.switch:focus,.example-sections-1>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-1>.item.title:not(.disabled)>.switch:active,.example-sections-1>.item.title.active>.switch,.example-sections-1>.item.title.active>.switch:focus,.example-sections-1>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-1>.item.title.active>.switch,.example-sections-1>.item.title.active>.switch:focus,.example-sections-1>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-1>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:1px solid #d1d1d1}.example-sections-2{position:relative;z-index:1}.example-sections-2:before,.example-sections-2:after{content:'';display:table}.example-sections-2:after{clear:both}.example-sections-2>.item.title{float:left;width:auto}.example-sections-2>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-2>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-2>.item.content:before,.example-sections-2>.item.content:after{content:'';display:table}.example-sections-2>.item.content:after{clear:both}.example-sections-2>.item.content.active{display:block}.example-sections-2>.item.title{margin:0 5px 0 0}.example-sections-2>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-2>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-2>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-2>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-2>.item.title:not(.disabled)>.switch:focus,.example-sections-2>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-2>.item.title:not(.disabled)>.switch:active,.example-sections-2>.item.title.active>.switch,.example-sections-2>.item.title.active>.switch:focus,.example-sections-2>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-2>.item.title.active>.switch,.example-sections-2>.item.title.active>.switch:focus,.example-sections-2>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-2>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:0;border-top:1px solid #d1d1d1}.example-sections-3{margin:0;padding:0}.example-sections-3>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-3>.item.title>.switch{display:block}.example-sections-3>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-3>.item.content:before,.example-sections-3>.item.content:after{content:'';display:table}.example-sections-3>.item.content:after{clear:both}.example-sections-3>.item.content.active{display:block}.example-sections-3>.item.title{margin:0 0 5px}.example-sections-3>.item.title>.switch{background:#f0f0f0;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;border-top:1px solid #d1d1d1;height:40px;padding:5px 20px 5px 20px;font-weight:600;line-height:40px;font-size:1.8rem;color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-3>.item.title:not(.disabled)>.switch:focus,.example-sections-3>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-3>.item.title:not(.disabled)>.switch:active,.example-sections-3>.item.title.active>.switch,.example-sections-3>.item.title.active>.switch:focus,.example-sections-3>.item.title.active>.switch:hover{background:#fff;padding-bottom:5px}.example-sections-3>.item.content{background:#fff;border:1px solid #d1d1d1;margin:0 0 5px;padding:20px 20px 20px 20px}@media only screen and (max-width: 99999px){.example-sections-4{ position:relative;z-index:1}.example-sections-4:before,.example-sections-4:after{content:'';display:table}.example-sections-4:after{clear:both}.example-sections-4>.item.title{float:left;width:auto}.example-sections-4>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-4>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-4>.item.content:before,.example-sections-4>.item.content:after{content:'';display:table}.example-sections-4>.item.content:after{clear:both}.example-sections-4>.item.content.active{display:block}.example-sections-4>.item.title{margin:0 5px 0 0}.example-sections-4>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-4>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-4>.item.title:not(.disabled)>.switch:focus,.example-sections-4>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-4>.item.title:not(.disabled)>.switch:active,.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-4>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:1px solid #d1d1d1}}@media only screen and (max-width: 768px){.example-sections-4{ margin:0;padding:0}.example-sections-4>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-4>.item.title>.switch{display:block}.example-sections-4>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-4>.item.content:before,.example-sections-4>.item.content:after{content:'';display:table}.example-sections-4>.item.content:after{clear:both}.example-sections-4>.item.content.active{display:block}.example-sections-4>.item.title{margin:0 0 5px}.example-sections-4>.item.title>.switch{background:#f0f0f0;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;border-top:1px solid #d1d1d1;height:40px;padding:5px 20px 5px 20px;font-weight:600;line-height:40px;font-size:1.8rem;color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-4>.item.title:not(.disabled)>.switch:focus,.example-sections-4>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-4>.item.title:not(.disabled)>.switch:active,.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{background:#fff;padding-bottom:5px}.example-sections-4>.item.content{background:#fff;border:1px solid #d1d1d1;margin:0 0 5px;padding:20px 20px 20px 20px}}.example-sections-5{position:relative;z-index:1}.example-sections-5:before,.example-sections-5:after{content:'';display:table}.example-sections-5:after{clear:both}.example-sections-5>.item.title{float:left;width:auto}.example-sections-5>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-5>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-5>.item.content:before,.example-sections-5>.item.content:after{content:'';display:table}.example-sections-5>.item.content:after{clear:both}.example-sections-5>.item.content.active{display:block}.example-sections-6{margin:0;padding:0}.example-sections-6>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-6>.item.title>.switch{display:block}.example-sections-6>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-6>.item.content:before,.example-sections-6>.item.content:after{content:'';display:table}.example-sections-6>.item.content:after{clear:both}.example-sections-6>.item.content.active{display:block}.example-table-1{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-1 th{text-align:left}.example-table-1>tbody>tr>th,.example-table-1>tfoot>tr>th,.example-table-1>tbody>tr>td,.example-table-1>tfoot>tr>td{vertical-align:top}.example-table-1>thead>tr>th,.example-table-1>thead>tr>td{vertical-align:bottom}.example-table-1>thead>tr>th,.example-table-1>tbody>tr>th,.example-table-1>tfoot>tr>th,.example-table-1>thead>tr>td,.example-table-1>tbody>tr>td,.example-table-1>tfoot>tr>td{padding:8px 10px}.example-table-2>thead>tr>th,.example-table-2>tbody>tr>th,.example-table-2>tfoot>tr>th{color:#111;font-weight:700}.example-table-3{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-3 th{text-align:left}.example-table-3>tbody>tr>th,.example-table-3>tfoot>tr>th,.example-table-3>tbody>tr>td,.example-table-3>tfoot>tr>td{vertical-align:top}.example-table-3>thead>tr>th,.example-table-3>thead>tr>td{vertical-align:bottom}.example-table-3>thead>tr>th,.example-table-3>tbody>tr>th,.example-table-3>tfoot>tr>th,.example-table-3>thead>tr>td,.example-table-3>tbody>tr>td,.example-table-3>tfoot>tr>td{padding:8px 10px}.example-table-3>caption{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-table-4{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-4 th{text-align:left}.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{vertical-align:top}.example-table-4>thead>tr>th,.example-table-4>thead>tr>td{vertical-align:bottom}.example-table-4>thead>tr>th,.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th,.example-table-4>thead>tr>td,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{padding:8px 10px}.example-table-4>thead>tr>td,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{padding:15px 25px 5px 0}.example-table-4>thead>tr>th,.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th{padding:15px 25px 10px 0}.example-table-5{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;background:#fff}.example-table-5 th{text-align:left}.example-table-5>tbody>tr>th,.example-table-5>tfoot>tr>th,.example-table-5>tbody>tr>td,.example-table-5>tfoot>tr>td{vertical-align:top}.example-table-5>thead>tr>th,.example-table-5>thead>tr>td{vertical-align:bottom}.example-table-5>thead>tr>th,.example-table-5>tbody>tr>th,.example-table-5>tfoot>tr>th,.example-table-5>thead>tr>td,.example-table-5>tbody>tr>td,.example-table-5>tfoot>tr>td{padding:8px 10px}.example-table-5>thead{background:#ccf}.example-table-5>tfoot{background:#cff}.example-table-5>tbody>tr>td{background:#fcc}.example-table-5>tbody>tr>th{background:#ffc}.example-table-6{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-6 th{text-align:left}.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{vertical-align:top}.example-table-6>thead>tr>th,.example-table-6>thead>tr>td{vertical-align:bottom}.example-table-6>thead>tr>th,.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>thead>tr>td,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{padding:8px 10px}.example-table-6>thead>tr>th,.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>thead>tr>td,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-7{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-7 th{text-align:left}.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{vertical-align:top}.example-table-7>thead>tr>th,.example-table-7>thead>tr>td{vertical-align:bottom}.example-table-7>thead>tr>th,.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>thead>tr>td,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{padding:8px 10px}.example-table-7>thead>tr>th,.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>thead>tr>td,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{border-top:1px solid #d1d1d1}.example-table-7>caption+thead>tr:first-child>th,.example-table-7>colgroup+thead>tr:first-child>th,.example-table-7>thead:first-child>tr:first-child>th,.example-table-7>caption+thead>tr:first-child>td,.example-table-7>colgroup+thead>tr:first-child>td,.example-table-7>thead:first-child>tr:first-child>td{border-top:0}.example-table-7>tbody+tbody{border-top:1px solid #d1d1d1}.example-table-8{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-8 th{text-align:left}.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{vertical-align:top}.example-table-8>thead>tr>th,.example-table-8>thead>tr>td{vertical-align:bottom}.example-table-8>thead>tr>th,.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>thead>tr>td,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{padding:8px 10px}.example-table-8>thead>tr>th,.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>thead>tr>td,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{border-left:1px solid #d1d1d1}.example-table-8>thead>tr>th:first-child,.example-table-8>tbody>tr>th:first-child,.example-table-8>tfoot>tr>th:first-child,.example-table-8>thead>tr>td:first-child,.example-table-8>tbody>tr>td:first-child,.example-table-8>tfoot>tr>td:first-child{border-left:0}.example-table-9{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:0}.example-table-9 th{text-align:left}.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{vertical-align:top}.example-table-9>thead>tr>th,.example-table-9>thead>tr>td{vertical-align:bottom}.example-table-9>thead>tr>th,.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>thead>tr>td,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{padding:8px 10px}.example-table-9>thead>tr>th,.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>thead>tr>td,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{border:0}.example-table-9>thead>tr>th,.example-table-9>thead>tr>td{border-bottom:1px solid #d1d1d1}.example-table-10{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:0}.example-table-10 th{text-align:left}.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{vertical-align:top}.example-table-10>thead>tr>th,.example-table-10>thead>tr>td{vertical-align:bottom}.example-table-10>thead>tr>th,.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>thead>tr>td,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{padding:8px 10px}.example-table-10>thead>tr>th,.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>thead>tr>td,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{border:0}.example-table-11{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-11 th{text-align:left}.example-table-11>tbody>tr>th,.example-table-11>tfoot>tr>th,.example-table-11>tbody>tr>td,.example-table-11>tfoot>tr>td{vertical-align:top}.example-table-11>thead>tr>th,.example-table-11>thead>tr>td{vertical-align:bottom}.example-table-11>thead>tr>th,.example-table-11>tbody>tr>th,.example-table-11>tfoot>tr>th,.example-table-11>thead>tr>td,.example-table-11>tbody>tr>td,.example-table-11>tfoot>tr>td{padding:8px 10px}.example-table-11>tbody>tr:nth-child(even)>td,.example-table-11>tbody>tr:nth-child(even)>th{background:#ffc;color:#000}.example-table-12{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-12 th{text-align:left}.example-table-12>tbody>tr>th,.example-table-12>tfoot>tr>th,.example-table-12>tbody>tr>td,.example-table-12>tfoot>tr>td{vertical-align:top}.example-table-12>thead>tr>th,.example-table-12>thead>tr>td{vertical-align:bottom}.example-table-12>thead>tr>th,.example-table-12>tbody>tr>th,.example-table-12>tfoot>tr>th,.example-table-12>thead>tr>td,.example-table-12>tbody>tr>td,.example-table-12>tfoot>tr>td{padding:8px 10px}.example-table-12>tbody>tr:nth-child(even):hover>td,.example-table-12>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-12>tbody>tr:nth-child(odd):hover>td,.example-table-12>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}.example-table-13{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-13 th{text-align:left}.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{vertical-align:top}.example-table-13>thead>tr>th,.example-table-13>thead>tr>td{vertical-align:bottom}.example-table-13>thead>tr>th,.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>thead>tr>td,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{padding:8px 10px}.example-table-13>thead>tr>th,.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>thead>tr>td,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-13>tbody>tr:nth-child(odd)>td,.example-table-13>tbody>tr:nth-child(odd)>th{background:#fff}.example-table-13>tbody>tr:nth-child(even):hover>td,.example-table-13>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-13>tbody>tr:nth-child(odd):hover>td,.example-table-13>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}@media only screen and (max-width: 768px){.example-table-14{ overflow-x:auto;overflow-y:hidden;width:100%;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch}}.example-table-15{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-15 th{text-align:left}.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{vertical-align:top}.example-table-15>thead>tr>th,.example-table-15>thead>tr>td{vertical-align:bottom}.example-table-15>thead>tr>th,.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>thead>tr>td,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{padding:8px 10px}.example-table-15>thead>tr>th,.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>thead>tr>td,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-15>tbody>tr:nth-child(odd)>td,.example-table-15>tbody>tr:nth-child(odd)>th{background:#fff}.example-table-15>tbody>tr:nth-child(even):hover>td,.example-table-15>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-15>tbody>tr:nth-child(odd):hover>td,.example-table-15>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}@media only screen and (max-width: 768px){.example-table-15{ background:#cff;border:0;display:block}.example-table-15>tbody>tr:nth-child(odd)>td,.example-table-15>tbody>tr:nth-child(odd)>th{background:#cff}.example-table-15>tbody>tr:nth-child(even):hover>td,.example-table-15>tbody>tr:nth-child(even):hover>th{background:#cff}.example-table-15>tbody>tr:nth-child(odd):hover>td,.example-table-15>tbody>tr:nth-child(odd):hover>th{background:#cff}.example-table-15>thead>tr>th{display:none}.example-table-15>tbody{display:block}.example-table-15>tbody>tr{display:block}.example-table-15>tbody>tr td,.example-table-15>tbody>tr th{border-bottom:0;display:block;padding:5px 0}.example-table-15>tbody>tr td:before,.example-table-15>tbody>tr th:before{padding-right:10px;content:attr(data-th) ':';display:inline-block;color:#111;font-weight:700}.example-table-15>tbody>tr td{background:#cff}.example-table-15>tbody>tr>th{background-color:#ffc!important}}.example-tooltip-bottom{position:relative}.example-tooltip-bottom .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-top:5px;left:0;top:100%}.example-tooltip-bottom .tooltip-content:after,.example-tooltip-bottom .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-bottom .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-bottom .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-bottom .tooltip-content:after,.example-tooltip-bottom .tooltip-content:before{bottom:100%}.example-tooltip-bottom .tooltip-content:after{border-bottom-color:#fff;left:15px;margin-left:-5px}.example-tooltip-bottom .tooltip-content:before{border-bottom-color:#bbb;left:15px;margin-left:-6px}.example-tooltip-bottom .tooltip-toggle{cursor:help}.example-tooltip-bottom .tooltip-toggle:hover+.tooltip-content,.example-tooltip-bottom .tooltip-toggle:focus+.tooltip-content,.example-tooltip-bottom:hover .tooltip-content{display:block}.example-tooltip-left{position:relative}.example-tooltip-left .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-right:5px;right:100%;top:0}.example-tooltip-left .tooltip-content:after,.example-tooltip-left .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-left .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-left .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-left .tooltip-content:after,.example-tooltip-left .tooltip-content:before{left:100%}.example-tooltip-left .tooltip-content:after{border-left-color:#fff;margin-top:-5px;top:15px}.example-tooltip-left .tooltip-content:before{border-left-color:#bbb;margin-top:-6px;top:15px}.example-tooltip-left .tooltip-toggle{cursor:help}.example-tooltip-left .tooltip-toggle:hover+.tooltip-content,.example-tooltip-left .tooltip-toggle:focus+.tooltip-content,.example-tooltip-left:hover .tooltip-content{display:block}.example-tooltip-right{position:relative}.example-tooltip-right .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-left:5px;left:100%;top:0}.example-tooltip-right .tooltip-content:after,.example-tooltip-right .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-right .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-right .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-right .tooltip-content:after,.example-tooltip-right .tooltip-content:before{right:100%}.example-tooltip-right .tooltip-content:after{border-right-color:#fff;margin-top:-5px;top:15px}.example-tooltip-right .tooltip-content:before{border-right-color:#bbb;margin-top:-6px;top:15px}.example-tooltip-right .tooltip-toggle{cursor:help}.example-tooltip-right .tooltip-toggle:hover+.tooltip-content,.example-tooltip-right .tooltip-toggle:focus+.tooltip-content,.example-tooltip-right:hover .tooltip-content{display:block}.example-tooltip-top{position:relative}.example-tooltip-top .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-bottom:5px;bottom:100%;left:0}.example-tooltip-top .tooltip-content:after,.example-tooltip-top .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-top .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-top .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-top .tooltip-content:after,.example-tooltip-top .tooltip-content:before{top:100%}.example-tooltip-top .tooltip-content:after{border-top-color:#fff;left:15px;margin-left:-5px}.example-tooltip-top .tooltip-content:before{border-top-color:#bbb;left:15px;margin-left:-6px}.example-tooltip-top .tooltip-toggle{cursor:help}.example-tooltip-top .tooltip-toggle:hover+.tooltip-content,.example-tooltip-top .tooltip-toggle:focus+.tooltip-content,.example-tooltip-top:hover .tooltip-content{display:block}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size-adjust:100%}body{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;font-size:1.4rem}p{margin-top:0rem;margin-bottom:1rem}abbr[title]{border-bottom:1px dotted #d1d1d1;cursor:help}b,strong{font-weight:700}em,i{font-style:italic}mark{background:#f0f0f0;color:#000}small,.small{font-size:12px}hr{border:0;border-top:1px solid #d1d1d1;margin-bottom:20px;margin-top:20px}sub,sup{font-size:71.42857143%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dfn{font-style:italic}h1{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}h2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}h3{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}h4{font-weight:700;line-height:1.1;font-size:1.4rem;margin-top:2rem;margin-bottom:2rem}h5{font-weight:700;line-height:1.1;font-size:1.2rem;margin-top:2rem;margin-bottom:2rem}h6{font-weight:700;line-height:1.1;font-size:1rem;margin-top:2rem;margin-bottom:2rem}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1}a,.alink{color:#1979c3;text-decoration:none}a:visited,.alink:visited{color:#1979c3;text-decoration:none}a:hover,.alink:hover{color:#006bb4;text-decoration:underline}a:active,.alink:active{color:#ff5501;text-decoration:underline}ul,ol{margin-top:0rem;margin-bottom:2.5rem}ul>li,ol>li{margin-top:0rem;margin-bottom:1rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}dl{margin-bottom:20px;margin-top:0}dt{font-weight:700;margin-bottom:5px;margin-top:0}dd{margin-bottom:10px;margin-top:0;margin-left:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,'Courier New',monospace}code{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem;white-space:nowrap}kbd{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem}pre{background:#f0f0f0;border:1px solid #d1d1d1;color:#111;line-height:1.42857143;margin:0 0 10px;padding:10px;font-size:1.2rem;display:block;word-wrap:break-word}pre code{background-color:transparent;border-radius:0;color:inherit;font-size:inherit;padding:0;white-space:pre-wrap}blockquote{border-left:0 solid #d1d1d1;margin:0 0 20px 40px;padding:0;color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;line-height:1.42857143;font-size:1.4rem}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{color:#333;line-height:1.42857143;font-size:1rem;display:block}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}blockquote cite{font-style:normal}blockquote:before,blockquote:after{content:''}q{quotes:none}q:before,q:after{content:'';content:none}cite{font-style:normal}.example{font-size:2.5rem}.example-line-height{line-height:3rem}.example-word-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;background:#ccc;width:120px}.example-text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#ccc;width:120px}.example-text-hide{background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.example-hyphens{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.example-hyphens-none{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.example-typography{color:#fc0;font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-style:italic;font-weight:500;line-height:1.2;font-size:3rem}.example-list-reset-styles{margin:0;padding:0;list-style:none none}.example-list-inline{margin:0;padding:0;list-style:none none}.example-list-inline>li{display:inline-block;vertical-align:top}.example-link-default{color:#1979c3;text-decoration:none}.example-link-default:visited{color:#1979c3;text-decoration:none}.example-link-default:hover{color:#006bb4;text-decoration:underline}.example-link-default:active{color:#ff5501;text-decoration:underline}.example-link{color:#008000;text-decoration:none}.example-link:visited{color:#1979c3;text-decoration:none}.example-link:hover{color:#ffa500;text-decoration:none}.example-link:active{color:#ff5501;text-decoration:underline}.example-heading{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}.example-heading-2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size-adjust:100%}body{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;font-size:1.4rem}p{margin-top:0rem;margin-bottom:1rem}abbr[title]{border-bottom:1px dotted #d1d1d1;cursor:help}b,strong{font-weight:700}em,i{font-style:italic}mark{background:#f0f0f0;color:#000}small,.small{font-size:12px}hr{border:0;border-top:1px solid #d1d1d1;margin-bottom:20px;margin-top:20px}sub,sup{font-size:71.42857143%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dfn{font-style:italic}h1{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}h2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}h3{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}h4{font-weight:700;line-height:1.1;font-size:1.4rem;margin-top:2rem;margin-bottom:2rem}h5{font-weight:700;line-height:1.1;font-size:1.2rem;margin-top:2rem;margin-bottom:2rem}h6{font-weight:700;line-height:1.1;font-size:1rem;margin-top:2rem;margin-bottom:2rem}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1}a,.alink{color:#1979c3;text-decoration:none}a:visited,.alink:visited{color:#1979c3;text-decoration:none}a:hover,.alink:hover{color:#006bb4;text-decoration:underline}a:active,.alink:active{color:#ff5501;text-decoration:underline}ul,ol{margin-top:0rem;margin-bottom:2.5rem}ul>li,ol>li{margin-top:0rem;margin-bottom:1rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}dl{margin-bottom:20px;margin-top:0}dt{font-weight:700;margin-bottom:5px;margin-top:0}dd{margin-bottom:10px;margin-top:0;margin-left:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,'Courier New',monospace}code{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem;white-space:nowrap}kbd{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem}pre{background:#f0f0f0;border:1px solid #d1d1d1;color:#111;line-height:1.42857143;margin:0 0 10px;padding:10px;font-size:1.2rem;display:block;word-wrap:break-word}pre code{background-color:transparent;border-radius:0;color:inherit;font-size:inherit;padding:0;white-space:pre-wrap}blockquote{border-left:0 solid #d1d1d1;margin:0 0 20px 40px;padding:0;color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;line-height:1.42857143;font-size:1.4rem}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{color:#333;line-height:1.42857143;font-size:1rem;display:block}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}blockquote cite{font-style:normal}blockquote:before,blockquote:after{content:''}q{quotes:none}q:before,q:after{content:'';content:none}cite{font-style:normal}.example-clearfix-container-1{border:1px solid red}.example-clearfix-container-2{border:1px solid #0f0}.example-clearfix-container-2:before,.example-clearfix-container-2:after{content:'';display:table}.example-clearfix-container-2:after{clear:both}.example-clearfix-item.left{float:left}.example-clearfix-item.right{float:right}.example-visibility-hidden{height:0;visibility:hidden}.example-visually-hidden-1{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-visually-hidden-2{background:#fdf0d5;padding:5px;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-visually-hidden-2{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.example-css-container{padding:20px;background:#e8e8e8}.example-rotate{background:red;position:absolute;height:20px;width:40px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.example-placeholder::-webkit-input-placeholder{color:#808080;font-weight:700}.example-placeholder:-moz-placeholder{color:#808080;font-weight:700}.example-placeholder::-moz-placeholder{color:#808080;font-weight:700}.example-placeholder:-ms-input-placeholder{color:#808080;font-weight:700}.example-background-gradient-1{background-color:#ccf;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #cff 0, #ccf 100%);background-image:linear-gradient(to bottom, #cff 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccffff', endColorstr='#ccccff', GradientType=0)}.example-background-gradient-2{background-color:#ccf;background-repeat:repeat-x;background-image:-webkit-linear-gradient(left,color-stop( #cff 0),color-stop( #ccf 100%));background-image:linear-gradient(to right, #cff 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccffff', endColorstr='#ccccff', GradientType=1)}.example-background-gradient-3-wrapper{background:#ffc;padding:10px}.example-background-gradient-3{background-color:rgba(255,255,255,0);background-repeat:repeat-x;background-image:-webkit-linear-gradient(left,color-stop(rgba(255,255,255,0) 0),color-stop( #ccf 100%));background-image:linear-gradient(to right,rgba(255,255,255,0) 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)',endColorstr='#ccccff',GradientType=1)}.example-url-check{background:#eee url('/images/test.png') no-repeat 0 0}body{padding:15px;background-image:none}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">Magento UI Library</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">files</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="actions-toolbar.html">actions-toolbar</a></li><li><a href="breadcrumbs.html">breadcrumbs</a></li><li><a href="buttons.html">buttons</a></li><li><a href="components.html">components</a></li><li><a href="dropdowns.html">dropdowns</a></li><li><a href="forms.html">forms</a></li><li><a href="icons.html">icons</a></li><li><a href="layout.html">layout</a></li><li><a href="lib.html">lib</a></li><li><a href="loaders.html">loaders</a></li><li><a href="messages.html">messages</a></li><li><a href="pages.html">pages</a></li><li><a href="popups.html">popups</a></li><li><a href="rating.html">rating</a></li><li><a href="resets.html">resets</a></li><li><a href="responsive.html">responsive</a></li><li><a href="sections.html">sections</a></li><li><a href="tables.html">tables</a></li><li><a href="tooltips.html">tooltips</a></li><li><a href="typography.html">typography</a></li><li><a href="utilities.html">utilities</a></li><li><a href="variables.html">variables</a></li><li><a href="docs.html">docs</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="list-of-global-variables" class="section"><div class="docs"><a href="#list-of-global-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="list-of-global-variables">List of Global Variables</h1>
    10. 

  10. <h2 id="typography">Typography</h2>
    11. 

  11. <h4 id="the-codelibtypographyallcode-mixin-variables">The <code>.lib-typography-all()</code> mixin variables</h4>
    12. 

  12.   <pre>
    13. 

  13.     <table>
    14. 

  14.         <tr>
    15. 

  15.             <th class="vars_head">Mixin variable</th>
    16. 

  16.             <th class="vars_head">Default value</th>
    17. 

  17.             <th class="vars_head">Comment</th>
    18. 

  18.         </tr>
    19. 

  19.         <tr>
    20. 

  20.             <th class="vars_section" colspan="3">Predefined font family</th>
    21. 

  21.         </tr>
    22. 

  22.         <tr>
    23. 

  23.             <th>@font-family__sans-serif</th>
    24. 

  24.             <td class="vars_value">'Helvetica Neue', Helvetica, Arial, sans-serif</td>
    25. 

  25.             <td>Sans-serif font family</td>
    26. 

  26.         </tr>
    27. 

  27.         <tr>
    28. 

  28.             <th>@font-family__serif</th>
    29. 

  29.             <td class="vars_value">Georgia, 'Times New Roman', Times, serif</td>
    30. 

  30.             <td>Serif font family</td>
    31. 

  31.         </tr>
    32. 

  32.         <tr>
    33. 

  33.             <th nowrap="nowrap">@font-family__monospace</th>
    34. 

  34.             <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
    35. 

  35.             <td>Monospace font family</td>
    36. 

  36.         </tr>
    37. 

  37.         <tr>
    38. 

  38.             <th>@font-path</th>
    39. 

  39.             <td class="vars_value">&quot;../../fonts/&quot;</td>
    40. 

  40.             <td>Path to custom font</td>
    41. 

  41.         </tr>
    42. 

  42.         <tr>
    43. 

  43.             <th class="vars_section" colspan="3">Predefined colors</th>
    44. 

  44.         </tr>
    45. 

  45.         <tr>
    46. 

  46.             <th>@color-white</th>
    47. 

  47.             <td class="vars_value">#fff</td>
    48. 

  48.             <td>White</td>
    49. 

  49.         </tr>
    50. 

  50.         <tr>
    51. 

  51.             <th>@color-gray20</th>
    52. 

  52.             <td class="vars_value">#333</td>
    53. 

  53.             <td>Gray 20</td>
    54. 

  54.         </tr>
    55. 

  55.         <tr>
    56. 

  56.             <th>@color-gray56</th>
    57. 

  57.             <td class="vars_value">#8f8f8f</td>
    58. 

  58.             <td>Gray 56</td>
    59. 

  59.         </tr>
    60. 

  60.         <tr>
    61. 

  61.             <th>@primary__color</th>
    62. 

  62.             <td class="vars_value">#555</td>
    63. 

  63.             <td>Primary color</td>
    64. 

  64.         </tr>
    65. 

  65.         <tr>
    66. 

  66.             <th>@primary__color__dark</th>
    67. 

  67.             <td class="vars_value">darken(@primary__color, 35%) // #000</td>
    68. 

  68.             <td>Dark primary color</td>
    69. 

  69.         </tr>
    70. 

  70.         <tr>
    71. 

  71.             <th>@primary__color__darker</th>
    72. 

  72.             <td class="vars_value">darken(@primary__color, 13.5%) // #111</td>
    73. 

  73.             <td>Darker primary color</td>
    74. 

  74.         </tr>
    75. 

  75.         <tr>
    76. 

  76.             <th>@primary__color__lighter</th>
    77. 

  77.             <td class="vars_value">lighten(@primary__color, 23%) // #7d7d7d</td>
    78. 

  78.             <td>Lighter primary color</td>
    79. 

  79.         </tr>
    80. 

  80.         <tr>
    81. 

  81.             <th>@primary__color__light</th>
    82. 

  82.             <td class="vars_value">lighten(@primary__color, 45%) // #a6a6a6</td>
    83. 

  83.             <td>Light primary color</td>
    84. 

  84.         </tr>
    85. 

  85.         <tr>
    86. 

  86.             <th>@border-color__base</th>
    87. 

  87.             <td class="vars_value">darken(@page__background-color, 18%)</td>
    88. 

  88.             <td>Base border color</td>
    89. 

  89.         </tr>
    90. 

  90.         <tr>
    91. 

  91.             <th>@border-width__base</th>
    92. 

  92.             <td class="vars_value">1px</td>
    93. 

  93.             <td>Base border width</td>
    94. 

  94.         </tr>
    95. 

  95.         <tr>
    96. 

  96.             <th class="vars_section" colspan="3">Fonts settings</th>
    97. 

  97.         </tr>
    98. 

  98.         <tr>
    99. 

  99.             <th>@font-family__base</th>
    100. 

  100.             <td class="vars_value">@font-family__sans-serif</td>
    101. 

  101.             <td>Basic font family</td>
    102. 

  102.         </tr>
    103. 

  103.         <tr>
    104. 

  104.             <th>@root__font-size</th>
    105. 

  105.             <td class="vars_value">62.5%</td>
    106. 

  106.             <td>Setting font-size for HTML tag, use % units</td>
    107. 

  107.         </tr>
    108. 

  108.         <tr>
    109. 

  109.             <th>@font-size-ratio__base</th>
    110. 

  110.             <td class="vars_value">1.4</td>
    111. 

  111.             <td>Defines ratio between root font size and base font size</td>
    112. 

  112.         </tr>
    113. 

  113.         <tr>
    114. 

  114.             <th>@font-size__base</th>
    115. 

  115.             <td class="vars_value">unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)</td>
    116. 

  116.             <td>Base font size value in px</td>
    117. 

  117.         </tr>
    118. 

  118.         <tr>
    119. 

  119.             <th>@font-size__xl</th>
    120. 

  120.             <td class="vars_value">ceil(1.5 * @font-size__base) // 21</td>
    121. 

  121.             <td>Extra large font size</td>
    122. 

  122.         </tr>
    123. 

  123.         <tr>
    124. 

  124.             <th>@font-size__l</th>
    125. 

  125.             <td class="vars_value">ceil(1.25 * @font-size__base) // 18</td>
    126. 

  126.             <td>Large font size</td>
    127. 

  127.         </tr>
    128. 

  128.         <tr>
    129. 

  129.             <th>@font-size__s</th>
    130. 

  130.             <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
    131. 

  131.             <td>Small font size</td>
    132. 

  132.         </tr>
    133. 

  133.         <tr>
    134. 

  134.             <th>@font-size__xs</th>
    135. 

  135.             <td class="vars_value">floor(.75 * @font-size__base) // 11</td>
    136. 

  136.             <td>Extra small font size</td>
    137. 

  137.         </tr>
    138. 

  138.         <tr>
    139. 

  139.             <th>@font-weight__regular</th>
    140. 

  140.             <td class="vars_value">400</td>
    141. 

  141.             <td>Basic font weight</td>
    142. 

  142.         </tr>
    143. 

  143.         <tr>
    144. 

  144.             <th>@font-weight__light</th>
    145. 

  145.             <td class="vars_value">200</td>
    146. 

  146.             <td>Light font weight</td>
    147. 

  147.         </tr>
    148. 

  148.         <tr>
    149. 

  149.             <th>@font-weight__semibold</th>
    150. 

  150.             <td class="vars_value">600</td>
    151. 

  151.             <td>Semibold font weight</td>
    152. 

  152.         </tr>
    153. 

  153.         <tr>
    154. 

  154.             <th>@font-weight__bold</th>
    155. 

  155.             <td class="vars_value">700</td>
    156. 

  156.             <td>Bold font weight</td>
    157. 

  157.         </tr>
    158. 

  158.         <tr>
    159. 

  159.             <th>@font-style__base</th>
    160. 

  160.             <td class="vars_value">normal</td>
    161. 

  161.             <td>Font style</td>
    162. 

  162.         </tr>
    163. 

  163.         <tr>
    164. 

  164.             <th nowrap="nowrap">@font-style__emphasis</th>
    165. 

  165.             <td class="vars_value">italic</td>
    166. 

  166.             <td>Emphasis font style</td>
    167. 

  167.         </tr>
    168. 

  168.         <tr>
    169. 

  169.             <th>@line-height__base</th>
    170. 

  170.             <td class="vars_value">1.428571429</td>
    171. 

  171.             <td>Base line height</td>
    172. 

  172.         </tr>
    173. 

  173.         <tr>
    174. 

  174.             <th>@line-height__computed</th>
    175. 

  175.             <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
    176. 

  176.             <td>Computed line height depending on base font size</td>
    177. 

  177.         </tr>
    178. 

  178.         <tr>
    179. 

  179.             <th>@line-height__l</th>
    180. 

  180.             <td class="vars_value">1.5</td>
    181. 

  181.             <td>Large line height</td>
    182. 

  182.         </tr>
    183. 

  183.         <tr>
    184. 

  184.             <th>@line-height__s</th>
    185. 

  185.             <td class="vars_value">1.33</td>
    186. 

  186.             <td>Small line height</td>
    187. 

  187.         </tr>
    188. 

  188.         <tr>
    189. 

  189.             <th>@text__color</th>
    190. 

  190.             <td class="vars_value">@primary__color</td>
    191. 

  191.             <td>Primary text color</td>
    192. 

  192.         </tr>
    193. 

  193.         <tr>
    194. 

  194.             <th>@text__color__intense</th>
    195. 

  195.             <td class="vars_value">@primary__color__darker</td>
    196. 

  196.             <td>Darker text color</td>
    197. 

  197.         </tr>
    198. 

  198.         <tr>
    199. 

  199.             <th>@text__color__muted</th>
    200. 

  200.             <td class="vars_value">@primary__color__lighter</td>
    201. 

  201.             <td>Lighter text color</td>
    202. 

  202.         </tr>
    203. 

  203.         <tr>
    204. 

  204.             <th>@indent__base</th>
    205. 

  205.             <td class="vars_value">@line-height__computed // 20px</td>
    206. 

  206.             <td>Base text ident (20px)</td>
    207. 

  207.         </tr>
    208. 

  208.         <tr>
    209. 

  209.             <th>@indent__xl</th>
    210. 

  210.             <td class="vars_value">@line-height__computed * 2 // 40px</td>
    211. 

  211.             <td>Extra large text ident (40px)</td>
    212. 

  212.         </tr>
    213. 

  213.         <tr>
    214. 

  214.             <th>@indent__l</th>
    215. 

  215.             <td class="vars_value">@line-height__computed * 1.5 // 30px</td>
    216. 

  216.             <td>Large text ident (30px)</td>
    217. 

  217.         </tr>
    218. 

  218.         <tr>
    219. 

  219.             <th>@indent__m</th>
    220. 

  220.             <td class="vars_value">@indent__base * 1.25 // 25px</td>
    221. 

  221.             <td>Extra large text ident (25px)</td>
    222. 

  222.         </tr>
    223. 

  223.         <tr>
    224. 

  224.             <th>@indent__s</th>
    225. 

  225.             <td class="vars_value">@line-height__computed / 2 //10px </td>
    226. 

  226.             <td>Small text ident (10px)</td>
    227. 

  227.         </tr>
    228. 

  228.         <tr>
    229. 

  229.             <th>@indent__xs</th>
    230. 

  230.             <td class="vars_value">@line-height__computed / 4 // 5px</td>
    231. 

  231.             <td>Extra small text ident (5px)</td>
    232. 

  232.         </tr>
    233. 

  233.         <tr>
    234. 

  234.             <th colspan="3" class="vars_section">Links</th>
    235. 

  235.         </tr>
    236. 

  236.         <tr>
    237. 

  237.             <th>@link__color</th>
    238. 

  238.             <td class="vars_value">#1979c3</td>
    239. 

  239.             <td>Links color</td>
    240. 

  240.         </tr>
    241. 

  241.         <tr>
    242. 

  242.             <th>@link__text-decoration</th>
    243. 

  243.             <td class="vars_value">none</td>
    244. 

  244.             <td>Links text decoration</td>
    245. 

  245.         </tr>
    246. 

  246.         <tr>
    247. 

  247.             <th>@link__visited__color</th>
    248. 

  248.             <td class="vars_value">#800080</td>
    249. 

  249.             <td>Visited links color</td>
    250. 

  250.         </tr>
    251. 

  251.         <tr>
    252. 

  252.             <th nowrap="nowrap">@link__visited__text-decoration</th>
    253. 

  253.             <td class="vars_value">none</td>
    254. 

  254.             <td>Visited links text decoration</td>
    255. 

  255.         </tr>
    256. 

  256.         <tr>
    257. 

  257.             <th>@link__hover__color</th>
    258. 

  258.             <td class="vars_value">#006bb4</td>
    259. 

  259.             <td>Hovered links color</td>
    260. 

  260.         </tr>
    261. 

  261.         <tr>
    262. 

  262.             <th>@link__hover__text-decoration</th>
    263. 

  263.             <td class="vars_value">underline</td>
    264. 

  264.             <td>Hovered links text decoration</td>
    265. 

  265.         </tr>
    266. 

  266.         <tr>
    267. 

  267.             <th>@link__active__color</th>
    268. 

  268.             <td class="vars_value">#ff5501</td>
    269. 

  269.             <td>Active links color</td>
    270. 

  270.         </tr>
    271. 

  271.         <tr>
    272. 

  272.             <th>@link__active__text-decoration</th>
    273. 

  273.             <td class="vars_value">underline</td>
    274. 

  274.             <td>Active links text decoration</td>
    275. 

  275.         </tr>
    276. 

  276.         <tr>
    277. 

  277.             <th class="vars_section" colspan="3">Lists</th>
    278. 

  278.         </tr>
    279. 

  279.         <tr>
    280. 

  280.             <th>@list__color__base</th>
    281. 

  281.             <td class="vars_value">false</td>
    282. 

  282.             <td>List text color</td>
    283. 

  283.         </tr>
    284. 

  284.         <tr>
    285. 

  285.             <th>@list__font-size__base</th>
    286. 

  286.             <td class="vars_value">@font-size__base</td>
    287. 

  287.             <td>List font size</td>
    288. 

  288.         </tr>
    289. 

  289.         <tr>
    290. 

  290.             <th>@list__margin-top</th>
    291. 

  291.             <td class="vars_value">0</td>
    292. 

  292.             <td>List margin top</td>
    293. 

  293.         </tr>
    294. 

  294.         <tr>
    295. 

  295.             <th>@list__margin-bottom</th>
    296. 

  296.             <td class="vars_value">@indent__m</td>
    297. 

  297.             <td>List margin bottom</td>
    298. 

  298.         </tr>
    299. 

  299.         <tr>
    300. 

  300.             <th>@list-item__margin-top</th>
    301. 

  301.             <td class="vars_value">0</td>
    302. 

  302.             <td>List item margin top</td>
    303. 

  303.         </tr>
    304. 

  304.         <tr>
    305. 

  305.             <th>@list-item__margin-bottom</th>
    306. 

  306.             <td class="vars_value">@indent__s</td>
    307. 

  307.             <td>List item margin bottom</td>
    308. 

  308.         </tr>
    309. 

  309.         <tr>
    310. 

  310.             <th colspan="3" class="vars_section">Definition list</th>
    311. 

  311.         </tr>
    312. 

  312.         <tr>
    313. 

  313.             <th>@dl__margin-top</th>
    314. 

  314.             <td class="vars_value">0</td>
    315. 

  315.             <td>Definition list margin top</td>
    316. 

  316.         </tr>
    317. 

  317.         <tr>
    318. 

  318.             <th>@dl__margin-bottom</th>
    319. 

  319.             <td class="vars_value">@indent__base</td>
    320. 

  320.             <td>Definition list margin bottom</td>
    321. 

  321.         </tr>
    322. 

  322.         <tr>
    323. 

  323.             <th>@dt__margin-top</th>
    324. 

  324.             <td class="vars_value">0</td>
    325. 

  325.             <td>Description term margin top</td>
    326. 

  326.         </tr>
    327. 

  327.         <tr>
    328. 

  328.             <th>@dt__margin-bottom</th>
    329. 

  329.             <td class="vars_value">@indent__xs</td>
    330. 

  330.             <td>Description term margin bottom</td>
    331. 

  331.         </tr>
    332. 

  332.         <tr>
    333. 

  333.             <th>@dt__font-weight</th>
    334. 

  334.             <td class="vars_value">@font-weight__bold</td>
    335. 

  335.             <td>Description term </td>
    336. 

  336.         </tr>
    337. 

  337.         <tr>
    338. 

  338.             <th>@dd__margin-top</th>
    339. 

  339.             <td class="vars_value">0</td>
    340. 

  340.             <td>Description margin top</td>
    341. 

  341.         </tr>
    342. 

  342.         <tr>
    343. 

  343.             <th>@dd__margin-bottom</th>
    344. 

  344.             <td class="vars_value">@indent__s</td>
    345. 

  345.             <td>Description margin bottom</td>
    346. 

  346.         </tr>
    347. 

  347.         <tr>
    348. 

  348.             <th colspan="3" class="vars_section">Paragraphs</th>
    349. 

  349.         </tr>
    350. 

  350.         <tr>
    351. 

  351.             <th>@p__margin-top</th>
    352. 

  352.             <td class="vars_value">0</td>
    353. 

  353.             <td>Paragraph margin top</td>
    354. 

  354.         </tr>
    355. 

  355.         <tr>
    356. 

  356.             <th>@p__margin-bottom</th>
    357. 

  357.             <td class="vars_value">@indent__s</td>
    358. 

  358.             <td>Paragraph margin bottom</td>
    359. 

  359.         </tr>
    360. 

  360.         <tr>
    361. 

  361.             <th colspan="3" class="vars_section">Headings</th>
    362. 

  362.         </tr>
    363. 

  363.         <tr>
    364. 

  364.             <th>@heading__font-family__base</th>
    365. 

  365.             <td class="vars_value">false</td>
    366. 

  366.             <td>Heading base font family</td>
    367. 

  367.         </tr>
    368. 

  368.         <tr>
    369. 

  369.             <th>@heading__font-style__base</th>
    370. 

  370.             <td class="vars_value">false</td>
    371. 

  371.             <td>Heading base font style</td>
    372. 

  372.         </tr>
    373. 

  373.         <tr>
    374. 

  374.             <th>@heading__font-weight__base</th>
    375. 

  375.             <td class="vars_value">@font-weight__light</td>
    376. 

  376.             <td>Heading base font weight</td>
    377. 

  377.         </tr>
    378. 

  378.         <tr>
    379. 

  379.             <th>@heading__line-height__base</th>
    380. 

  380.             <td class="vars_value">1.1</td>
    381. 

  381.             <td>Heading base line height</td>
    382. 

  382.         </tr>
    383. 

  383.         <tr>
    384. 

  384.             <th>@heading__color__base</th>
    385. 

  385.             <td class="vars_value">false</td>
    386. 

  386.             <td>Heading base color</td>
    387. 

  387.         </tr>
    388. 

  388.         <tr>
    389. 

  389.             <th>@heading__margin-top__base</th>
    390. 

  390.             <td class="vars_value">@indent__base</td>
    391. 

  391.             <td>Heading base margin top</td>
    392. 

  392.         </tr>
    393. 

  393.         <tr>
    394. 

  394.             <th>@heading__margin-bottom__base</th>
    395. 

  395.             <td class="vars_value">@indent__base</td>
    396. 

  396.             <td>Heading base margin bottom</td>
    397. 

  397.         </tr>
    398. 

  398.         <tr>
    399. 

  399.             <th colspan="3" class="vars_section">H1</th>
    400. 

  400.         </tr>
    401. 

  401.         <tr>
    402. 

  402.             <th>@h1__font-size</th>
    403. 

  403.             <td class="vars_value">ceil((@font-size__base * 2.85)) // 40px</td>
    404. 

  404.             <td>H1 font size</td>
    405. 

  405.         </tr>
    406. 

  406.         <tr>
    407. 

  407.             <th>@h1__font-color</th>
    408. 

  408.             <td class="vars_value">@heading__color__base</td>
    409. 

  409.             <td>H1 color</td>
    410. 

  410.         </tr>
    411. 

  411.         <tr>
    412. 

  412.             <th>@h1__font-family</th>
    413. 

  413.             <td class="vars_value">@heading__font-family__base</td>
    414. 

  414.             <td>H1 font family</td>
    415. 

  415.         </tr>
    416. 

  416.         <tr>
    417. 

  417.             <th>@h1__font-weight</th>
    418. 

  418.             <td class="vars_value">@heading__font-weight__base</td>
    419. 

  419.             <td>H1 font weight</td>
    420. 

  420.         </tr>
    421. 

  421.         <tr>
    422. 

  422.             <th>@h1__font-style</th>
    423. 

  423.             <td class="vars_value">@heading__font-style__base</td>
    424. 

  424.             <td>H1 font style</td>
    425. 

  425.         </tr>
    426. 

  426.         <tr>
    427. 

  427.             <th>@h1__line-height</th>
    428. 

  428.             <td class="vars_value">@heading__line-height__base</td>
    429. 

  429.             <td>H1 line height</td>
    430. 

  430.         </tr>
    431. 

  431.         <tr>
    432. 

  432.             <th>@h1__margin-top</th>
    433. 

  433.             <td class="vars_value">0</td>
    434. 

  434.             <td>H1 margin top</td>
    435. 

  435.         </tr>
    436. 

  436.         <tr>
    437. 

  437.             <th>@h1__margin-bottom</th>
    438. 

  438.             <td class="vars_value">@heading__margin-bottom__base</td>
    439. 

  439.             <td>H1 margin bottom</td>
    440. 

  440.         </tr>
    441. 

  441.         <tr>
    442. 

  442.             <th colspan="3" class="vars_section">H2</th>
    443. 

  443.         </tr>
    444. 

  444.         <tr>
    445. 

  445.             <th>@h2__font-size</th>
    446. 

  446.             <td class="vars_value">ceil((@font-size__base * 1.85)) // 26px</td>
    447. 

  447.             <td>H2 font size</td>
    448. 

  448.         </tr>
    449. 

  449.         <tr>
    450. 

  450.             <th>@h2__font-color</th>
    451. 

  451.             <td class="vars_value">@heading__color__base</td>
    452. 

  452.             <td>H2 color</td>
    453. 

  453.         </tr>
    454. 

  454.         <tr>
    455. 

  455.             <th>@h2__font-family</th>
    456. 

  456.             <td class="vars_value">@heading__font-family__base</td>
    457. 

  457.             <td>H2 font family</td>
    458. 

  458.         </tr>
    459. 

  459.         <tr>
    460. 

  460.             <th>@h2__font-weight</th>
    461. 

  461.             <td class="vars_value">@heading__font-weight__base</td>
    462. 

  462.             <td>H2 font weight</td>
    463. 

  463.         </tr>
    464. 

  464.         <tr>
    465. 

  465.             <th>@h2__font-style</th>
    466. 

  466.             <td class="vars_value">@heading__font-style__base</td>
    467. 

  467.             <td>H2 font style</td>
    468. 

  468.         </tr>
    469. 

  469.         <tr>
    470. 

  470.             <th>@h2__line-height</th>
    471. 

  471.             <td class="vars_value">@heading__line-height__base</td>
    472. 

  472.             <td>H2 line height</td>
    473. 

  473.         </tr>
    474. 

  474.         <tr>
    475. 

  475.             <th>@h2__margin-top</th>
    476. 

  476.             <td class="vars_value">@indent__m</td>
    477. 

  477.             <td>H2 margin top</td>
    478. 

  478.         </tr>
    479. 

  479.         <tr>
    480. 

  480.             <th>@h2__margin-bottom</th>
    481. 

  481.             <td class="vars_value">@heading__margin-bottom__base</td>
    482. 

  482.             <td>H2 margin bottom</td>
    483. 

  483.         </tr>
    484. 

  484.         <tr>
    485. 

  485.             <th colspan="3" class="vars_section">H3</th>
    486. 

  486.         </tr>
    487. 

  487.         <tr>
    488. 

  488.             <th>@h3__font-size</th>
    489. 

  489.             <td class="vars_value">ceil((@font-size__base * 1.28)) // 18px</td>
    490. 

  490.             <td>H3 font size</td>
    491. 

  491.         </tr>
    492. 

  492.         <tr>
    493. 

  493.             <th>@h3__font-color</th>
    494. 

  494.             <td class="vars_value">@heading__color__base</td>
    495. 

  495.             <td>H3 color</td>
    496. 

  496.         </tr>
    497. 

  497.         <tr>
    498. 

  498.             <th>@h3__font-family</th>
    499. 

  499.             <td class="vars_value">@heading__font-family__base</td>
    500. 

  500.             <td>H3 font family</td>
    501. 

  501.         </tr>
    502. 

  502.         <tr>
    503. 

  503.             <th>@h3__font-weight</th>
    504. 

  504.             <td class="vars_value">@heading__font-weight__base</td>
    505. 

  505.             <td>H3 font weight</td>
    506. 

  506.         </tr>
    507. 

  507.         <tr>
    508. 

  508.             <th>@h3__font-style</th>
    509. 

  509.             <td class="vars_value">@heading__font-style__base</td>
    510. 

  510.             <td>H3 font style</td>
    511. 

  511.         </tr>
    512. 

  512.         <tr>
    513. 

  513.             <th>@h3__line-height</th>
    514. 

  514.             <td class="vars_value">@heading__line-height__base</td>
    515. 

  515.             <td>H3 line height</td>
    516. 

  516.         </tr>
    517. 

  517.         <tr>
    518. 

  518.             <th>@h3__margin-top</th>
    519. 

  519.             <td class="vars_value">@indent__base * .75</td>
    520. 

  520.             <td>H3 margin top</td>
    521. 

  521.         </tr>
    522. 

  522.         <tr>
    523. 

  523.             <th>@h3__margin-bottom</th>
    524. 

  524.             <td class="vars_value">@indent__s</td>
    525. 

  525.             <td>H3 margin bottom</td>
    526. 

  526.         </tr>
    527. 

  527.         <tr>
    528. 

  528.             <th colspan="3" class="vars_section">H4</th>
    529. 

  529.         </tr>
    530. 

  530.         <tr>
    531. 

  531.             <th>@h4__font-size</th>
    532. 

  532.             <td class="vars_value">@font-size__base // 14px</td>
    533. 

  533.             <td>H4 font size</td>
    534. 

  534.         </tr>
    535. 

  535.         <tr>
    536. 

  536.             <th>@h4__font-color</th>
    537. 

  537.             <td class="vars_value">@heading__color__base</td>
    538. 

  538.             <td>H4 color</td>
    539. 

  539.         </tr>
    540. 

  540.         <tr>
    541. 

  541.             <th>@h4__font-family</th>
    542. 

  542.             <td class="vars_value">@heading__font-family__base</td>
    543. 

  543.             <td>H4 font family</td>
    544. 

  544.         </tr>
    545. 

  545.         <tr>
    546. 

  546.             <th>@h4__font-weight</th>
    547. 

  547.             <td class="vars_value">@font-weight__bold</td>
    548. 

  548.             <td>H4 font weight</td>
    549. 

  549.         </tr>
    550. 

  550.         <tr>
    551. 

  551.             <th>@h4__font-style</th>
    552. 

  552.             <td class="vars_value">@heading__font-style__base</td>
    553. 

  553.             <td>H4 font style</td>
    554. 

  554.         </tr>
    555. 

  555.         <tr>
    556. 

  556.             <th>@h4__line-height</th>
    557. 

  557.             <td class="vars_value">@heading__line-height__base</td>
    558. 

  558.             <td>H4 line height</td>
    559. 

  559.         </tr>
    560. 

  560.         <tr>
    561. 

  561.             <th>@h4__margin-top</th>
    562. 

  562.             <td class="vars_value">@heading__margin-top__base</td>
    563. 

  563.             <td>H4 margin top</td>
    564. 

  564.         </tr>
    565. 

  565.         <tr>
    566. 

  566.             <th>@h4__margin-bottom</th>
    567. 

  567.             <td class="vars_value">@heading__margin-bottom__base</td>
    568. 

  568.             <td>H4 margin bottom</td>
    569. 

  569.         </tr>
    570. 

  570.         <tr>
    571. 

  571.             <th colspan="3" class="vars_section">H5</th>
    572. 

  572.         </tr>
    573. 

  573.         <tr>
    574. 

  574.             <th>@h5__font-size</th>
    575. 

  575.             <td class="vars_value">ceil((@font-size__base * .85)) // 12px</td>
    576. 

  576.             <td>H5 font size</td>
    577. 

  577.         </tr>
    578. 

  578.         <tr>
    579. 

  579.             <th>@h5__font-color</th>
    580. 

  580.             <td class="vars_value">@heading__color__base</td>
    581. 

  581.             <td>H5 color</td>
    582. 

  582.         </tr>
    583. 

  583.         <tr>
    584. 

  584.             <th>@h5__font-family</th>
    585. 

  585.             <td class="vars_value">@heading__font-family__base</td>
    586. 

  586.             <td>H5 font family</td>
    587. 

  587.         </tr>
    588. 

  588.         <tr>
    589. 

  589.             <th>@h5__font-weight</th>
    590. 

  590.             <td class="vars_value">@font-weight__bold</td>
    591. 

  591.             <td>H5 font weight</td>
    592. 

  592.         </tr>
    593. 

  593.         <tr>
    594. 

  594.             <th>@h5__font-style</th>
    595. 

  595.             <td class="vars_value">@heading__font-style__base</td>
    596. 

  596.             <td>H5 font style</td>
    597. 

  597.         </tr>
    598. 

  598.         <tr>
    599. 

  599.             <th>@h5__line-height</th>
    600. 

  600.             <td class="vars_value">@heading__line-height__base</td>
    601. 

  601.             <td>H5 line height</td>
    602. 

  602.         </tr>
    603. 

  603.         <tr>
    604. 

  604.             <th>@h5__margin-top</th>
    605. 

  605.             <td class="vars_value">@heading__margin-top__base</td>
    606. 

  606.             <td>H5 margin top</td>
    607. 

  607.         </tr>
    608. 

  608.         <tr>
    609. 

  609.             <th>@h5__margin-bottom</th>
    610. 

  610.             <td class="vars_value">@heading__margin-bottom__base</td>
    611. 

  611.             <td>H5 margin bottom</td>
    612. 

  612.         </tr>
    613. 

  613.         <tr>
    614. 

  614.             <th colspan="3" class="vars_section">H6</th>
    615. 

  615.         </tr>
    616. 

  616.         <tr>
    617. 

  617.             <th>@h6__font-size</th>
    618. 

  618.             <td class="vars_value">ceil((@font-size__base * .7)) // 10px</td>
    619. 

  619.             <td>H6 font size</td>
    620. 

  620.         </tr>
    621. 

  621.         <tr>
    622. 

  622.             <th>@h6__font-color</th>
    623. 

  623.             <td class="vars_value">@heading__color__base</td>
    624. 

  624.             <td>H6 color</td>
    625. 

  625.         </tr>
    626. 

  626.         <tr>
    627. 

  627.             <th>@h6__font-family</th>
    628. 

  628.             <td class="vars_value">@heading__font-family__base</td>
    629. 

  629.             <td>H6 font family</td>
    630. 

  630.         </tr>
    631. 

  631.         <tr>
    632. 

  632.             <th>@h6__font-weight</th>
    633. 

  633.             <td class="vars_value">@heading__font-weight__base</td>
    634. 

  634.             <td>H6 font weight</td>
    635. 

  635.         </tr>
    636. 

  636.         <tr>
    637. 

  637.             <th>@h6__font-style</th>
    638. 

  638.             <td class="vars_value">@heading__font-style__base</td>
    639. 

  639.             <td>H6 font style</td>
    640. 

  640.         </tr>
    641. 

  641.         <tr>
    642. 

  642.             <th>@h6__line-height</th>
    643. 

  643.             <td class="vars_value">@heading__line-height__base</td>
    644. 

  644.             <td>H6 line height</td>
    645. 

  645.         </tr>
    646. 

  646.         <tr>
    647. 

  647.             <th>@h6__margin-top</th>
    648. 

  648.             <td class="vars_value">@heading__margin-top__base</td>
    649. 

  649.             <td>H6 margin top</td>
    650. 

  650.         </tr>
    651. 

  651.         <tr>
    652. 

  652.             <th>@h6__margin-bottom</th>
    653. 

  653.             <td class="vars_value">@heading__margin-bottom__base</td>
    654. 

  654.             <td>H6 margin bottom</td>
    655. 

  655.         </tr>
    656. 

  656.         <tr>
    657. 

  657.             <th colspan="3" class="vars_section">&lt;small&gt; tags and tags with class .small placed in H1-H6 headings</th>
    658. 

  658.         </tr>
    659. 

  659.         <tr>
    660. 

  660.             <th>@heading__small-color</th>
    661. 

  661.             <td class="vars_value">@primary__color</td>
    662. 

  662.             <td>&lt;small&gt; and .small heading element color</td>
    663. 

  663.         </tr>
    664. 

  664.         <tr>
    665. 

  665.             <th>@heading__small-line-height</th>
    666. 

  666.             <td class="vars_value">1</td>
    667. 

  667.             <td>&lt;small&gt; and .small heading element line height</td>
    668. 

  668.         </tr>
    669. 

  669.         <tr>
    670. 

  670.             <th>@heading__small-size</th>
    671. 

  671.             <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
    672. 

  672.             <td>&lt;small&gt; and .small heading element font size</td>
    673. 

  673.         </tr>
    674. 

  674.         <tr>
    675. 

  675.             <th colspan="3" class="vars_section">Focus</th>
    676. 

  676.         </tr>
    677. 

  677.         <tr>
    678. 

  678.             <th>@focus__box-shadow</th>
    679. 

  679.             <td class="vars_value">0 0 3px 1px @focus__color</td>
    680. 

  680.             <td>Focused element highlight</td>
    681. 

  681.         </tr>
    682. 

  682.         <tr>
    683. 

  683.             <th colspan="3" class="vars_section">Code blocks</th>
    684. 

  684.         </tr>
    685. 

  685.         <tr>
    686. 

  686.             <th>@code__background-color</th>
    687. 

  687.             <td class="vars_value">@panel__background-color</td>
    688. 

  688.             <td>Code block background</td>
    689. 

  689.         </tr>
    690. 

  690.         <tr>
    691. 

  691.             <th>@code__color</th>
    692. 

  692.             <td class="vars_value">@primary__color__darker</td>
    693. 

  693.             <td>Code text color</td>
    694. 

  694.         </tr>
    695. 

  695.         <tr>
    696. 

  696.             <th>@code__font-size</th>
    697. 

  697.             <td class="vars_value">@font-size__s</td>
    698. 

  698.             <td>Code font size</td>
    699. 

  699.         </tr>
    700. 

  700.         <tr>
    701. 

  701.             <th>@code__padding</th>
    702. 

  702.             <td class="vars_value">2px 4px</td>
    703. 

  703.             <td>Code padding</td>
    704. 

  704.         </tr>
    705. 

  705.         <tr>
    706. 

  706.             <th>@pre__background-color</th>
    707. 

  707.             <td class="vars_value">@primary__color__light</td>
    708. 

  708.             <td>Preformatted text background color</td>
    709. 

  709.         </tr>
    710. 

  710.         <tr>
    711. 

  711.             <th>@pre__border-color</th>
    712. 

  712.             <td class="vars_value">@border-color__base</td>
    713. 

  713.             <td>Preformatted text border color</td>
    714. 

  714.         </tr>
    715. 

  715.         <tr>
    716. 

  716.             <th>@pre__border-width</th>
    717. 

  717.             <td class="vars_value">@border-width__base</td>
    718. 

  718.             <td>Preformatted text border width</td>
    719. 

  719.         </tr>
    720. 

  720.         <tr>
    721. 

  721.             <th>@pre__color</th>
    722. 

  722.             <td class="vars_value">@primary__color__darker</td>
    723. 

  723.             <td>Preformatted text color</td>
    724. 

  724.         </tr>
    725. 

  725.         <tr>
    726. 

  726.             <th>@kbd__background-color</th>
    727. 

  727.             <td class="vars_value">@panel__background-color</td>
    728. 

  728.             <td>Keyboard input background</td>
    729. 

  729.         </tr>
    730. 

  730.         <tr>
    731. 

  731.             <th>@kbd__color</th>
    732. 

  732.             <td class="vars_value">@primary__color__darker</td>
    733. 

  733.             <td>Keyboard input text color</td>
    734. 

  734.         </tr>
    735. 

  735.         <tr>
    736. 

  736.             <th colspan="3" class="vars_section">Blockquote</th>
    737. 

  737.         </tr>
    738. 

  738.         <tr>
    739. 

  739.             <th>@blockquote__border-color</th>
    740. 

  740.             <td class="vars_value">@border-color__base</td>
    741. 

  741.             <td>Blockquote border color</td>
    742. 

  742.         </tr>
    743. 

  743.         <tr>
    744. 

  744.             <th>@blockquote__border-width</th>
    745. 

  745.             <td class="vars_value">0</td>
    746. 

  746.             <td>Blockquote border width</td>
    747. 

  747.         </tr>
    748. 

  748.         <tr>
    749. 

  749.             <th>@blockquote__content-before</th>
    750. 

  750.             <td class="vars_value">'\2014 \00A0'</td>
    751. 

  751.             <td>&quot;-&quot; and space symbols</td>
    752. 

  752.         </tr>
    753. 

  753.         <tr>
    754. 

  754.             <th>@blockquote__font-size</th>
    755. 

  755.             <td class="vars_value">@font-size__base</td>
    756. 

  756.             <td>Blockquote font size</td>
    757. 

  757.         </tr>
    758. 

  758.         <tr>
    759. 

  759.             <th>@blockquote__font-style</th>
    760. 

  760.             <td class="vars_value">@font-style__emphasis</td>
    761. 

  761.             <td>Blockquote font style</td>
    762. 

  762.         </tr>
    763. 

  763.         <tr>
    764. 

  764.             <th>@blockquote__margin</th>
    765. 

  765.             <td class="vars_value"> 0 0 @indent__base @indent__xl</td>
    766. 

  766.             <td>Blockquote margin</td>
    767. 

  767.         </tr>
    768. 

  768.         <tr>
    769. 

  769.             <th>@blockquote__padding</th>
    770. 

  770.             <td class="vars_value">0</td>
    771. 

  771.             <td>Blockquote padding</td>
    772. 

  772.         </tr>
    773. 

  773.         <tr>
    774. 

  774.             <th>@blockquote-small__color</th>
    775. 

  775.             <td class="vars_value">@primary__color</td>
    776. 

  776.             <td>Blockquote &lt;small&gt; and .small text color</td>
    777. 

  777.         </tr>
    778. 

  778.         <tr>
    779. 

  779.             <th>@blockquote-small__font-size</th>
    780. 

  780.             <td class="vars_value">@font-size__xs</td>
    781. 

  781.             <td>Blockquote &lt;small&gt; and .small font size</td>
    782. 

  782.         </tr>
    783. 

  783.         <tr>
    784. 

  784.             <th colspan="3" class="vars_section">Cite</th>
    785. 

  785.         </tr>
    786. 

  786.         <tr>
    787. 

  787.             <th>@cite__font-style</th>
    788. 

  788.             <td class="vars_value">@font-style__base</td>
    789. 

  789.             <td>Cite font style</td>
    790. 

  790.         </tr>
    791. 

  791.         <tr>
    792. 

  792.             <th colspan="3" class="vars_section">Other elements</th>
    793. 

  793.         </tr>
    794. 

  794.         <tr>
    795. 

  795.             <th>@hr__border-color</th>
    796. 

  796.             <td class="vars_value">@border-color__base</td>
    797. 

  797.             <td>HR border color</td>
    798. 

  798.         </tr>
    799. 

  799.         <tr>
    800. 

  800.             <th>@hr__border-style</th>
    801. 

  801.             <td class="vars_value">solid</td>
    802. 

  802.             <td>HR border style</td>
    803. 

  803.         </tr>
    804. 

  804.         <tr>
    805. 

  805.             <th>@hr__border-width</th>
    806. 

  806.             <td class="vars_value">@border-width__base</td>
    807. 

  807.             <td>HR border width</td>
    808. 

  808.         </tr>
    809. 

  809.         <tr>
    810. 

  810.             <th>@mark__color</th>
    811. 

  811.             <td class="vars_value">@primary__color__dark</td>
    812. 

  812.             <td>&lt;mark&gt; color</td>
    813. 

  813.         </tr>
    814. 

  814.         <tr>
    815. 

  815.             <th>@mark__background-color</th>
    816. 

  816.             <td class="vars_value">@panel__background-color</td>
    817. 

  817.             <td>&lt;mark&gt; background</td>
    818. 

  818.         </tr>
    819. 

  819.         <tr>
    820. 

  820.             <th>@abbr__border-color</th>
    821. 

  821.             <td class="vars_value">@border-color__base</td>
    822. 

  822.             <td>&lt;abbr&gt; border color</td>
    823. 

  823.         </tr>
    824. 

  824.         <tr>
    825. 

  825.             <th>@disable-filters</th>
    826. 

  826.             <td class="vars_value">false</td>
    827. 

  827.             <td>Disable filters output in css</td>
    828. 

  828.         </tr>
    829. 

  829.     </table>
    830. 

  830.   </pre>
    831. 

  831. 

  832. <h2 id="base-typography">Base Typography</h2>
    833. 

  833. <h4 id="the-codelibtypography__basecode-mixin-variables">The <code>.lib-typography__base()</code> mixin variables</h4>
    834. 

  834.   <pre>
    835. 

  835.     <table>
    836. 

  836.         <tr>
    837. 

  837.             <th class="vars_head">Mixin variable</th>
    838. 

  838.             <th class="vars_head">Global variable</th>
    839. 

  839.             <th class="vars_head">Default value</th>
    840. 

  840.             <th class="vars_head">Allowed values</th>
    841. 

  841.             <th class="vars_head">Comment</th>
    842. 

  842.         </tr>
    843. 

  843.         <tr>
    844. 

  844.             <th>@_abbr-border-color</th>
    845. 

  845.             <td class="vars_value">@abbr__border-color</td>
    846. 

  846.             <td class="vars_value">@border-color__base</td>
    847. 

  847.             <td class="vars_value">'' | false | value</td>
    848. 

  848.             <td>&lt;abbr&gt; border color</td>
    849. 

  849.         </tr>
    850. 

  850.         <tr>
    851. 

  851.             <th>@_dfn-font-style</th>
    852. 

  852.             <td class="vars_value">@font-style__emphasis</td>
    853. 

  853.             <td class="vars_value">italic</td>
    854. 

  854.             <td class="vars_value">'' | false | value</td>
    855. 

  855.             <td>&lt;dfn&gt; font style</td>
    856. 

  856.         </tr>
    857. 

  857.         <tr>
    858. 

  858.             <th nowrap="nowrap">@_emphasis-font-style</th>
    859. 

  859.             <td class="vars_value">@font-style__emphasis</td>
    860. 

  860.             <td class="vars_value">italic</td>
    861. 

  861.             <td class="vars_value">'' | false | value</td>
    862. 

  862.             <td>&lt;em&gt; font style</td>
    863. 

  863.         </tr>
    864. 

  864.         <tr>
    865. 

  865.             <th>@_hr-border-color</th>
    866. 

  866.             <td class="vars_value">@hr__border-color</td>
    867. 

  867.             <td class="vars_value">@border-color__base</td>
    868. 

  868.             <td class="vars_value">'' | false | value</td>
    869. 

  869.             <td>HR border color</td>
    870. 

  870.         </tr>
    871. 

  871.         <tr>
    872. 

  872.             <th>@_hr-border-style</th>
    873. 

  873.             <td class="vars_value">@hr__border-style</td>
    874. 

  874.             <td class="vars_value">solid</td>
    875. 

  875.             <td class="vars_value">'' | false | value</td>
    876. 

  876.             <td>HR border style</td>
    877. 

  877.         </tr>
    878. 

  878.         <tr>
    879. 

  879.             <th>@_hr-border-width</th>
    880. 

  880.             <td class="vars_value">@hr__border-width</td>
    881. 

  881.             <td class="vars_value">@border-width__base</td>
    882. 

  882.             <td class="vars_value">'' | false | value</td>
    883. 

  883.             <td>HR border width</td>
    884. 

  884.         </tr>
    885. 

  885.         <tr>
    886. 

  886.             <th>@_hr-margin-bottom</th>
    887. 

  887.             <td class="vars_value">@line-height__computed</td>
    888. 

  888.             <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
    889. 

  889.             <td class="vars_value">'' | false | value</td>
    890. 

  890.             <td>HR margin bottom</td>
    891. 

  891.         </tr>
    892. 

  892.         <tr>
    893. 

  893.             <th>@_hr-margin-top</th>
    894. 

  894.             <td class="vars_value">@line-height__computed</td>
    895. 

  895.             <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
    896. 

  896.             <td class="vars_value">'' | false | value</td>
    897. 

  897.             <td>HR margin top</td>
    898. 

  898.         </tr>
    899. 

  899.         <tr>
    900. 

  900.             <th>@_mark-background-color</th>
    901. 

  901.             <td class="vars_value">@mark__background-color</td>
    902. 

  902.             <td class="vars_value">@panel__background-color</td>
    903. 

  903.             <td class="vars_value">'' | false | value</td>
    904. 

  904.             <td>&lt;mark&gt; background color</td>
    905. 

  905.         </tr>
    906. 

  906.         <tr>
    907. 

  907.             <th>@_mark-color</th>
    908. 

  908.             <td class="vars_value">@mark__color</td>
    909. 

  909.             <td class="vars_value">@primary__color__dark</td>
    910. 

  910.             <td class="vars_value">'' | false | value</td>
    911. 

  911.             <td>&lt;mark&gt; color</td>
    912. 

  912.         </tr>
    913. 

  913.         <tr>
    914. 

  914.             <th>@_p-margin-bottom</th>
    915. 

  915.             <td class="vars_value">@p__margin-bottom</td>
    916. 

  916.             <td class="vars_value">@indent__s</td>
    917. 

  917.             <td class="vars_value">'' | false | value</td>
    918. 

  918.             <td>Paragraph margin bottom</td>
    919. 

  919.         </tr>
    920. 

  920.         <tr>
    921. 

  921.             <th>@_p-margin-top</th>
    922. 

  922.             <td class="vars_value">@p__margin-top</td>
    923. 

  923.             <td class="vars_value">0</td>
    924. 

  924.             <td class="vars_value">'' | false | value</td>
    925. 

  925.             <td>Paragraph margin top</td>
    926. 

  926.         </tr>
    927. 

  927.         <tr>
    928. 

  928.             <th>@_root-font-size</th>
    929. 

  929.             <td class="vars_value">@root__font-size</td>
    930. 

  930.             <td class="vars_value">62.5%</td>
    931. 

  931.             <td class="vars_value">'' | false | value</td>
    932. 

  932.             <td>Setting font-size for HTML tag</td>
    933. 

  933.         </tr>
    934. 

  934.         <tr>
    935. 

  935.             <th>@_small-font-size</th>
    936. 

  936.             <td class="vars_value">@font-size__s</td>
    937. 

  937.             <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
    938. 

  938.             <td class="vars_value">'' | false | value</td>
    939. 

  939.             <td>&lt;small&gt; tag font size</td>
    940. 

  940.         </tr>
    941. 

  941.         <tr>
    942. 

  942.             <th>@_strong-font-weight</th>
    943. 

  943.             <td class="vars_value">@font-weight__bold</td>
    944. 

  944.             <td class="vars_value">700</td>
    945. 

  945.             <td class="vars_value">'' | false | value</td>
    946. 

  946.             <td>&lt;strong&gt; tag font weight</td>
    947. 

  947.         </tr>
    948. 

  948.         <tr>
    949. 

  949.             <th>@_sub-sup-font-size</th>
    950. 

  950.             <td class="vars_value">-</td>
    951. 

  951.             <td class="vars_value">(@font-size__xs / @font-size__base) * 100%</td>
    952. 

  952.             <td class="vars_value">'' | false | value</td>
    953. 

  953.             <td>&lt;sup&gt; an &lt;sup&gt; tags font size</td>
    954. 

  954.         </tr>
    955. 

  955.     </table>
    956. 

  956.   </pre>
    957. 

  957. 

  958. <h2 id="headings">Headings</h2>
    959. 

  959. <h4 id="the-codelibtypographyheadingscode-mixin-variables">The <code>.lib-typography-headings()</code> mixin variables</h4>
    960. 

  960.   <pre>
    961. 

  961.     <table>
    962. 

  962.         <tr>
    963. 

  963.             <th class="vars_head">Mixin variable</th>
    964. 

  964.             <th class="vars_head">Global variable</th>
    965. 

  965.             <th class="vars_head">Default value</th>
    966. 

  966.             <th class="vars_head">Allowed values</th>
    967. 

  967.             <th class="vars_head">Comment</th>
    968. 

  968.         </tr>
    969. 

  969.         <tr>
    970. 

  970.             <th>@_heading-small-size</th>
    971. 

  971.             <td class="vars_value">@heading__small-size</td>
    972. 

  972.             <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
    973. 

  973.             <td class="vars_value">'' | false | value</td>
    974. 

  974.             <td>&lt;small&gt; and .small heading element font-size</td>
    975. 

  975.         </tr>
    976. 

  976.         <tr>
    977. 

  977.             <th>@_heading-small-color</th>
    978. 

  978.             <td class="vars_value">@heading__small-color</td>
    979. 

  979.             <td class="vars_value">@primary__color</td>
    980. 

  980.             <td class="vars_value">'' | false | value</td>
    981. 

  981.             <td>&lt;small&gt; and .small heading element color</td>
    982. 

  982.         </tr>
    983. 

  983.         <tr>
    984. 

  984.             <th nowrap="nowrap">@_heading-small-line-height</th>
    985. 

  985.             <td class="vars_value">@heading__small-line-height</td>
    986. 

  986.             <td class="vars_value">1</td>
    987. 

  987.             <td class="vars_value">'' | false | value</td>
    988. 

  988.             <td>&lt;small&gt; and .small heading element line height</td>
    989. 

  989.         </tr>
    990. 

  990.     </table>
    991. 

  991.   </pre>
    992. 

  992. 

  993. <h2 id="unordered-and-ordered-lists">Unordered and Ordered lists</h2>
    994. 

  994. <h4 id="the-codelibtypographylistscode-mixin-variables">The <code>.lib-typography-lists()</code> mixin variables</h4>
    995. 

  995.   <pre>
    996. 

  996.     <table>
    997. 

  997.         <tr>
    998. 

  998.             <th class="vars_head">Mixin variable</th>
    999. 

  999.             <th class="vars_head">Global variable</th>
    1000. 

  1000.             <th class="vars_head">Default value</th>
    1001. 

  1001.             <th class="vars_head">Allowed values</th>
    1002. 

  1002.             <th class="vars_head">Comment</th>
    1003. 

  1003.         </tr>
    1004. 

  1004.         <tr>
    1005. 

  1005.             <th>@_list-margin-top</th>
    1006. 

  1006.             <td class="vars_value">@list__margin-top</td>
    1007. 

  1007.             <td class="vars_value">0</td>
    1008. 

  1008.             <td class="vars_value">'' | false | value</td>
    1009. 

  1009.             <td>List margin top</td>
    1010. 

  1010.         </tr>
    1011. 

  1011.         <tr>
    1012. 

  1012.             <th>@_list-margin-bottom</th>
    1013. 

  1013.             <td class="vars_value">@list__margin-bottom</td>
    1014. 

  1014.             <td class="vars_value">@indent__m</td>
    1015. 

  1015.             <td class="vars_value">'' | false | value</td>
    1016. 

  1016.             <td>List margin bottom</td>
    1017. 

  1017.         </tr>
    1018. 

  1018.         <tr>
    1019. 

  1019.             <th nowrap="nowrap">@_list-item-margin-top</th>
    1020. 

  1020.             <td class="vars_value">@list-item__margin-top</td>
    1021. 

  1021.             <td class="vars_value">0</td>
    1022. 

  1022.             <td class="vars_value">'' | false | value</td>
    1023. 

  1023.             <td>List item margin top</td>
    1024. 

  1024.         </tr>
    1025. 

  1025.         <tr>
    1026. 

  1026.             <th nowrap="nowrap">@_list-item-margin-bottom</th>
    1027. 

  1027.             <td class="vars_value">@list-item__margin-bottom</td>
    1028. 

  1028.             <td class="vars_value">@indent__s</td>
    1029. 

  1029.             <td class="vars_value">'' | false | value</td>
    1030. 

  1030.             <td>List item margin bottom</td>
    1031. 

  1031.         </tr>
    1032. 

  1032.         <tr>
    1033. 

  1033.             <th nowrap="nowrap">@_dl-margin-bottom</th>
    1034. 

  1034.             <td class="vars_value">@dl__margin-bottom</td>
    1035. 

  1035.             <td class="vars_value">@indent__base</td>
    1036. 

  1036.             <td class="vars_value">'' | false | value</td>
    1037. 

  1037.             <td>Definition list margin bottom</td>
    1038. 

  1038.         </tr>
    1039. 

  1039.         <tr>
    1040. 

  1040.             <th nowrap="nowrap">@_dl-margin-top</th>
    1041. 

  1041.             <td class="vars_value">@dl__margin-top</td>
    1042. 

  1042.             <td class="vars_value">0</td>
    1043. 

  1043.             <td class="vars_value">'' | false | value</td>
    1044. 

  1044.             <td>Definition list margin top</td>
    1045. 

  1045.         </tr>
    1046. 

  1046.         <tr>
    1047. 

  1047.             <th nowrap="nowrap">@_dt-font-weight</th>
    1048. 

  1048.             <td class="vars_value">@dt__font-weight</td>
    1049. 

  1049.             <td class="vars_value">@font-weight__bold</td>
    1050. 

  1050.             <td class="vars_value">'' | false | value</td>
    1051. 

  1051.             <td>Description term font weight</td>
    1052. 

  1052.         </tr>
    1053. 

  1053.         <tr>
    1054. 

  1054.             <th nowrap="nowrap">@_dt-margin-bottom</th>
    1055. 

  1055.             <td class="vars_value">@dt__margin-bottom</td>
    1056. 

  1056.             <td class="vars_value">@indent__xs</td>
    1057. 

  1057.             <td class="vars_value">'' | false | value</td>
    1058. 

  1058.             <td>Description term margin bottom</td>
    1059. 

  1059.         </tr>
    1060. 

  1060.         <tr>
    1061. 

  1061.             <th nowrap="nowrap">@_dt-margin-top</th>
    1062. 

  1062.             <td class="vars_value">@dt__margin-top</td>
    1063. 

  1063.             <td class="vars_value">0</td>
    1064. 

  1064.             <td class="vars_value">'' | false | value</td>
    1065. 

  1065.             <td>Description term margin top</td>
    1066. 

  1066.         </tr>
    1067. 

  1067.         <tr>
    1068. 

  1068.             <th nowrap="nowrap">@_dd-margin-bottom</th>
    1069. 

  1069.             <td class="vars_value">@dd__margin-bottom</td>
    1070. 

  1070.             <td class="vars_value">@indent__s</td>
    1071. 

  1071.             <td class="vars_value">'' | false | value</td>
    1072. 

  1072.             <td>Description margin bottom</td>
    1073. 

  1073.         </tr>
    1074. 

  1074.         <tr>
    1075. 

  1075.             <th nowrap="nowrap">@_dd-margin-top</th>
    1076. 

  1076.             <td class="vars_value">@dd__margin-top</td>
    1077. 

  1077.             <td class="vars_value">0</td>
    1078. 

  1078.             <td class="vars_value">'' | false | value</td>
    1079. 

  1079.             <td>Description margin top</td>
    1080. 

  1080.         </tr>
    1081. 

  1081.     </table>
    1082. 

  1082.   </pre>
    1083. 

  1083. 

  1084. <h2 id="code-inline-and-block">Code (inline and block)</h2>
    1085. 

  1085. <h4 id="the-codelibtypographycodecode-mixin-variables">The <code>.lib-typography-code()</code> mixin variables</h4>
    1086. 

  1086.   <pre>
    1087. 

  1087.     <table>
    1088. 

  1088.         <tr>
    1089. 

  1089.             <th class="vars_head">Mixin variable</th>
    1090. 

  1090.             <th class="vars_head">Global variable</th>
    1091. 

  1091.             <th class="vars_head">Default value</th>
    1092. 

  1092.             <th class="vars_head">Allowed values</th>
    1093. 

  1093.             <th class="vars_head">Comment</th>
    1094. 

  1094.         </tr>
    1095. 

  1095.         <tr>
    1096. 

  1096.             <th>@_font-family-monospace</th>
    1097. 

  1097.             <td class="vars_value">@font-family__monospace</td>
    1098. 

  1098.             <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
    1099. 

  1099.             <td class="vars_value">'' | false | value</td>
    1100. 

  1100.             <td>Monospace font family</td>
    1101. 

  1101.         </tr>
    1102. 

  1102.         <tr>
    1103. 

  1103.             <th>@_code-background-color</th>
    1104. 

  1104.             <td class="vars_value">@code__background-color</td>
    1105. 

  1105.             <td class="vars_value">@panel__background-color</td>
    1106. 

  1106.             <td class="vars_value">'' | false | value</td>
    1107. 

  1107.             <td>Code block background</td>
    1108. 

  1108.         </tr>
    1109. 

  1109.         <tr>
    1110. 

  1110.             <th nowrap="nowrap">@_code-color</th>
    1111. 

  1111.             <td class="vars_value">@code__color</td>
    1112. 

  1112.             <td class="vars_value">@primary__color__darker</td>
    1113. 

  1113.             <td class="vars_value">'' | false | value</td>
    1114. 

  1114.             <td>Code text color</td>
    1115. 

  1115.         </tr>
    1116. 

  1116.         <tr>
    1117. 

  1117.             <th nowrap="nowrap">@_code-padding</th>
    1118. 

  1118.             <td class="vars_value">@code__padding</td>
    1119. 

  1119.             <td class="vars_value">2px 4px</td>
    1120. 

  1120.             <td class="vars_value">'' | false | value</td>
    1121. 

  1121.             <td>Code block padding</td>
    1122. 

  1122.         </tr>
    1123. 

  1123.         <tr>
    1124. 

  1124.             <th nowrap="nowrap">@_code-font-size</th>
    1125. 

  1125.             <td class="vars_value">@code__font-size</td>
    1126. 

  1126.             <td class="vars_value">@font-size__s</td>
    1127. 

  1127.             <td class="vars_value">'' | false | value</td>
    1128. 

  1128.             <td>Code block font size</td>
    1129. 

  1129.         </tr>
    1130. 

  1130.         <tr>
    1131. 

  1131.             <th nowrap="nowrap">@_kbd-background-color</th>
    1132. 

  1132.             <td class="vars_value">@kbd__background-color</td>
    1133. 

  1133.             <td class="vars_value">@panel__background-color</td>
    1134. 

  1134.             <td class="vars_value">'' | false | value</td>
    1135. 

  1135.             <td>Keyboard input background</td>
    1136. 

  1136.         </tr>
    1137. 

  1137.         <tr>
    1138. 

  1138.             <th nowrap="nowrap">@_kbd-color</th>
    1139. 

  1139.             <td class="vars_value">@kbd__color</td>
    1140. 

  1140.             <td class="vars_value">@primary__color__darker</td>
    1141. 

  1141.             <td class="vars_value">'' | false | value</td>
    1142. 

  1142.             <td>Keyboard input text color</td>
    1143. 

  1143.         </tr>
    1144. 

  1144.         <tr>
    1145. 

  1145.             <th nowrap="nowrap">@_kbd-padding</th>
    1146. 

  1146.             <td class="vars_value">@code__padding</td>
    1147. 

  1147.             <td class="vars_value">2px 4px</td>
    1148. 

  1148.             <td class="vars_value">'' | false | value</td>
    1149. 

  1149.             <td>Keyboard input padding</td>
    1150. 

  1150.         </tr>
    1151. 

  1151.         <tr>
    1152. 

  1152.             <th nowrap="nowrap">@_kbd-font-size</th>
    1153. 

  1153.             <td class="vars_value">@code__font-size</td>
    1154. 

  1154.             <td class="vars_value">@font-size__s</td>
    1155. 

  1155.             <td class="vars_value">'' | false | value</td>
    1156. 

  1156.             <td>Keyboard input font size</td>
    1157. 

  1157.         </tr>
    1158. 

  1158.         <tr>
    1159. 

  1159.             <th nowrap="nowrap">@_pre-background-color</th>
    1160. 

  1160.             <td class="vars_value">@pre__background-color</td>
    1161. 

  1161.             <td class="vars_value">@primary__color__light</td>
    1162. 

  1162.             <td class="vars_value">'' | false | value</td>
    1163. 

  1163.             <td>Preformatted text background color</td>
    1164. 

  1164.         </tr>
    1165. 

  1165.         <tr>
    1166. 

  1166.             <th nowrap="nowrap">@_pre-border-width</th>
    1167. 

  1167.             <td class="vars_value">@pre__border-width</td>
    1168. 

  1168.             <td class="vars_value">@border-width__base</td>
    1169. 

  1169.             <td class="vars_value">'' | false | value</td>
    1170. 

  1170.             <td>Preformatted text border width</td>
    1171. 

  1171.         </tr>
    1172. 

  1172.         <tr>
    1173. 

  1173.             <th nowrap="nowrap">@_pre-border-color</th>
    1174. 

  1174.             <td class="vars_value">@pre__border-color</td>
    1175. 

  1175.             <td class="vars_value">@border-color__base</td>
    1176. 

  1176.             <td class="vars_value">'' | false | value</td>
    1177. 

  1177.             <td>Preformatted text border color</td>
    1178. 

  1178.         </tr>
    1179. 

  1179.         <tr>
    1180. 

  1180.             <th nowrap="nowrap">@_pre-color</th>
    1181. 

  1181.             <td class="vars_value">@pre__color</td>
    1182. 

  1182.             <td class="vars_value">@primary__color__darker</td>
    1183. 

  1183.             <td class="vars_value">'' | false | value</td>
    1184. 

  1184.             <td>Text color of preformatted text</td>
    1185. 

  1185.         </tr>
    1186. 

  1186.         <tr>
    1187. 

  1187.             <th nowrap="nowrap">@_pre-line-height</th>
    1188. 

  1188.             <td class="vars_value">@line-height__base</td>
    1189. 

  1189.             <td class="vars_value">1.428571429</td>
    1190. 

  1190.             <td class="vars_value">'' | false | value</td>
    1191. 

  1191.             <td>Preformatted text line height</td>
    1192. 

  1192.         </tr>
    1193. 

  1193.         <tr>
    1194. 

  1194.             <th nowrap="nowrap">@_pre-margin</th>
    1195. 

  1195.             <td class="vars_value">-</td>
    1196. 

  1196.             <td class="vars_value">0 0 @indent__s</td>
    1197. 

  1197.             <td class="vars_value">'' | false | value</td>
    1198. 

  1198.             <td>Preformatted text margin</td>
    1199. 

  1199.         </tr>
    1200. 

  1200.         <tr>
    1201. 

  1201.             <th nowrap="nowrap">@_pre-padding</th>
    1202. 

  1202.             <td class="vars_value">-</td>
    1203. 

  1203.             <td class="vars_value">@indent__s</td>
    1204. 

  1204.             <td class="vars_value">'' | false | value</td>
    1205. 

  1205.             <td>Preformatted text padding</td>
    1206. 

  1206.         </tr>
    1207. 

  1207.         <tr>
    1208. 

  1208.             <th nowrap="nowrap">@_pre-font-size</th>
    1209. 

  1209.             <td class="vars_value">@code__font-size</td>
    1210. 

  1210.             <td class="vars_value">@font-size__s</td>
    1211. 

  1211.             <td class="vars_value">'' | false | value</td>
    1212. 

  1212.             <td>Preformatted text font size</td>
    1213. 

  1213.         </tr>
    1214. 

  1214.     </table>
    1215. 

  1215.   </pre>
    1216. 

  1216. 

  1217. <h2 id="blockquotes">Blockquotes</h2>
    1218. 

  1218. <h4 id="the-codelibtypographyblockquotecode-mixin-variables">The <code>.lib-typography-blockquote()</code> mixin variables</h4>
    1219. 

  1219.   <pre>
    1220. 

  1220.     <table>
    1221. 

  1221.         <tr>
    1222. 

  1222.             <th class="vars_head">Mixin variable</th>
    1223. 

  1223.             <th class="vars_head">Global variable</th>
    1224. 

  1224.             <th class="vars_head">Default value</th>
    1225. 

  1225.             <th class="vars_head">Allowed values</th>
    1226. 

  1226.             <th class="vars_head">Comment</th>
    1227. 

  1227.         </tr>
    1228. 

  1228.         <tr>
    1229. 

  1229.             <th nowrap="nowrap">@_blockquote-border-width</th>
    1230. 

  1230.             <td class="vars_value">@blockquote__border-width</td>
    1231. 

  1231.             <td class="vars_value">0</td>
    1232. 

  1232.             <td class="vars_value">'' | false | value</td>
    1233. 

  1233.             <td>Blockquote border width</td>
    1234. 

  1234.         </tr>
    1235. 

  1235.         <tr>
    1236. 

  1236.             <th nowrap="nowrap">@_blockquote-border-color</th>
    1237. 

  1237.             <td class="vars_value">@blockquote__border-color</td>
    1238. 

  1238.             <td class="vars_value">@border-color__base</td>
    1239. 

  1239.             <td class="vars_value">'' | false | value</td>
    1240. 

  1240.             <td>Blockquote border color</td>
    1241. 

  1241.         </tr>
    1242. 

  1242.         <tr>
    1243. 

  1243.             <th nowrap="nowrap">@_blockquote-margin</th>
    1244. 

  1244.             <td class="vars_value">@blockquote__margin</td>
    1245. 

  1245.             <td class="vars_value">0 0 @indent__base @indent__xl</td>
    1246. 

  1246.             <td class="vars_value">'' | false | value</td>
    1247. 

  1247.             <td>Blockquote margin</td>
    1248. 

  1248.         </tr>
    1249. 

  1249.         <tr>
    1250. 

  1250.             <th nowrap="nowrap">@_blockquote-padding</th>
    1251. 

  1251.             <td class="vars_value">@blockquote__padding</td>
    1252. 

  1252.             <td class="vars_value">0</td>
    1253. 

  1253.             <td class="vars_value">'' | false | value</td>
    1254. 

  1254.             <td>Blockquote padding</td>
    1255. 

  1255.         </tr>
    1256. 

  1256.         <tr>
    1257. 

  1257.             <th nowrap="nowrap">@_blockquote-font-size</th>
    1258. 

  1258.             <td class="vars_value">@blockquote__font-size</td>
    1259. 

  1259.             <td class="vars_value">@font-size__base</td>
    1260. 

  1260.             <td class="vars_value">'' | false | value</td>
    1261. 

  1261.             <td>Blockquote font size</td>
    1262. 

  1262.         </tr>
    1263. 

  1263.         <tr>
    1264. 

  1264.             <th nowrap="nowrap">@_blockquote-font-style</th>
    1265. 

  1265.             <td class="vars_value">@blockquote__font-style</td>
    1266. 

  1266.             <td class="vars_value">@font-style__emphasis</td>
    1267. 

  1267.             <td class="vars_value">'' | false | value</td>
    1268. 

  1268.             <td>Blockquote font style</td>
    1269. 

  1269.         </tr>
    1270. 

  1270.         <tr>
    1271. 

  1271.             <th nowrap="nowrap">@_blockquote-small-color</th>
    1272. 

  1272.             <td class="vars_value">@blockquote-small__color</td>
    1273. 

  1273.             <td class="vars_value">@primary__color</td>
    1274. 

  1274.             <td class="vars_value">'' | false | value</td>
    1275. 

  1275.             <td>Blockquote &lt;small&gt; and .small text color</td>
    1276. 

  1276.         </tr>
    1277. 

  1277.         <tr>
    1278. 

  1278.             <th nowrap="nowrap">@_blockquote-small-line-height</th>
    1279. 

  1279.             <td class="vars_value">@line-height__base</td>
    1280. 

  1280.             <td class="vars_value">1.428571429</td>
    1281. 

  1281.             <td class="vars_value">'' | false | value</td>
    1282. 

  1282.             <td>Blockquote &lt;small&gt; and .small line height</td>
    1283. 

  1283.         </tr>
    1284. 

  1284.         <tr>
    1285. 

  1285.             <th nowrap="nowrap">@_blockquote-small-font-size</th>
    1286. 

  1286.             <td class="vars_value">@blockquote-small__font-size</td>
    1287. 

  1287.             <td class="vars_value">@font-size__xs</td>
    1288. 

  1288.             <td class="vars_value">'' | false | value</td>
    1289. 

  1289.             <td>Blockquote &lt;small&gt; and .small text font size</td>
    1290. 

  1290.         </tr>
    1291. 

  1291.         <tr>
    1292. 

  1292.             <th nowrap="nowrap">@_blockquote-small-before-content</th>
    1293. 

  1293.             <td class="vars_value">@blockquote__content-before</td>
    1294. 

  1294.             <td class="vars_value">'\2014 \00A0'</td>
    1295. 

  1295.             <td class="vars_value">'' | false | value</td>
    1296. 

  1296.             <td>Blockquote &lt;small&gt; and .small before pseudo element content</td>
    1297. 

  1297.         </tr>
    1298. 

  1298.         <tr>
    1299. 

  1299.             <th nowrap="nowrap">@_blockquote-cite</th>
    1300. 

  1300.             <td class="vars_value">@cite__font-style</td>
    1301. 

  1301.             <td class="vars_value">@font-style__base</td>
    1302. 

  1302.             <td class="vars_value">'' | false | value</td>
    1303. 

  1303.             <td>Blockquote cite font style</td>
    1304. 

  1304.         </tr>
    1305. 

  1305.         <tr>
    1306. 

  1306.             <th nowrap="nowrap">@_cite</th>
    1307. 

  1307.             <td class="vars_value">@cite__font-style</td>
    1308. 

  1308.             <td class="vars_value">@font-style__base</td>
    1309. 

  1309.             <td class="vars_value">'' | false | value</td>
    1310. 

  1310.             <td>Cite font style</td>
    1311. 

  1311.         </tr>
    1312. 

  1312.     </table>
    1313. 

  1313.   </pre>
    1314. 

  1314. 

  1315. <h2 id="structure">Structure</h2>
    1316. 

  1316. <h4 id="predefined-variables-for-handle-global-zaxis-positioning">Predefined variables for handle global Z-axis positioning</h4>
    1317. 

  1317.   <pre>
    1318. 

  1318.     <table>
    1319. 

  1319.         <tr>
    1320. 

  1320.             <th class="vars_head">Variable</th>
    1321. 

  1321.             <th class="vars_head">Default value</th>
    1322. 

  1322.             <th class="vars_head">Allowed values</th></th>
    1323. 

  1323.         </tr>
    1324. 

  1324.       <tr>
    1325. 

  1325.         <th>@z-index-1</th>
    1326. 

  1326.         <td class="vars_value">100</td>
    1327. 

  1327.         <td class="vars_value">constant</td>
    1328. 

  1328.       </tr>
    1329. 

  1329.       <tr>
    1330. 

  1330.         <th>@z-index-2</th>
    1331. 

  1331.         <td class="vars_value">200</td>
    1332. 

  1332.         <td class="vars_value">constant</td>
    1333. 

  1333.       </tr>
    1334. 

  1334.       <tr>
    1335. 

  1335.         <th>@z-index-3</th>
    1336. 

  1336.         <td class="vars_value">300</td>
    1337. 

  1337.         <td class="vars_value">constant</td>
    1338. 

  1338.       </tr>
    1339. 

  1339.       <tr>
    1340. 

  1340.         <th>@z-index-4</th>
    1341. 

  1341.         <td class="vars_value">400</td>
    1342. 

  1342.         <td class="vars_value">constant</td>
    1343. 

  1343.       </tr>
    1344. 

  1344.       <tr>
    1345. 

  1345.         <th>@z-index-5</th>
    1346. 

  1346.         <td class="vars_value">500</td>
    1347. 

  1347.         <td class="vars_value">constant</td>
    1348. 

  1348.       </tr>
    1349. 

  1349.       <tr>
    1350. 

  1350.         <th>@z-index-6</th>
    1351. 

  1351.         <td class="vars_value">600</td>
    1352. 

  1352.         <td class="vars_value">constant</td>
    1353. 

  1353.       </tr>
    1354. 

  1354.       <tr>
    1355. 

  1355.         <th>@z-index-7</th>
    1356. 

  1356.         <td class="vars_value">700</td>
    1357. 

  1357.         <td class="vars_value">constant</td>
    1358. 

  1358.       </tr>
    1359. 

  1359.       <tr>
    1360. 

  1360.         <th>@z-index-8</th>
    1361. 

  1361.         <td class="vars_value">800</td>
    1362. 

  1362.         <td class="vars_value">constant</td>
    1363. 

  1363.       </tr>
    1364. 

  1364.       <tr>
    1365. 

  1365.         <th>@z-index-9</th>
    1366. 

  1366.         <td class="vars_value">900</td>
    1367. 

  1367.         <td class="vars_value">constant</td>
    1368. 

  1368.       </tr>
    1369. 

  1369.       <tr>
    1370. 

  1370.         <th>@z-index-10</th>
    1371. 

  1371.         <td class="vars_value">1000</td>
    1372. 

  1372.         <td class="vars_value">constant</td>
    1373. 

  1373.       </tr>
    1374. 

  1374.       <tr>
    1375. 

  1375.       <th colspan="3" class="vars_section">Nesting example</th>
    1376. 

  1376.       <tr>
    1377. 

  1377.         <th>@modal__z-index</th>
    1378. 

  1378.         <td class="vars_value">@z-index-9</td>
    1379. 

  1379.         <td class="vars_value">@z-index-N</td>
    1380. 

  1380.       </tr>
    1381. 

  1381.     </table>
    1382. 

  1382.   </pre>
    1383. 

  1383. 

  1384. <h2 id="actions-toolbar">Actions Toolbar</h2>
    1385. 

  1385. <h4 id="the-codelibactionstoolbarcode-mixin-variables">The <code>.lib-actions-toolbar()</code> mixin variables</h4>
    1386. 

  1386.   <pre>
    1387. 

  1387.     <table>
    1388. 

  1388.       <tr>
    1389. 

  1389.         <th class="vars_head">Mixin variable</th>
    1390. 

  1390.         <th class="vars_head">Global variable</th>
    1391. 

  1391.         <th class="vars_head">Default value</th>
    1392. 

  1392.         <th class="vars_head">Allowed values</th>
    1393. 

  1393.         <th class="vars_head">Comment</th>
    1394. 

  1394.       </tr>
    1395. 

  1395.       <tr>
    1396. 

  1396.         <th>@_actions-toolbar-actions-position</th>
    1397. 

  1397.         <td>@actions-toolbar-actions__position</td>
    1398. 

  1398.         <td class="vars_value">justify</td>
    1399. 

  1399.         <td class="vars_value">justify | left | right | center</td>
    1400. 

  1400.         <td>Position for actions in Actions toolbar</td>
    1401. 

  1401.       </tr>
    1402. 

  1402.       <tr>
    1403. 

  1403.         <th>@_actions-toolbar-actions-reverse</th>
    1404. 

  1404.         <td>@actions-toolbar-actions__reverse</td>
    1405. 

  1405.         <td class="vars_value">false</td>
    1406. 

  1406.         <td class="vars_value">true | false</td>
    1407. 

  1407.         <td>Reverse primary and secondary blocks position in Actions toolbar</td>
    1408. 

  1408.       </tr>
    1409. 

  1409.       <tr>
    1410. 

  1410.         <th>@_actions-toolbar-margin</th>
    1411. 

  1411.         <td>@actions-toolbar__margin</td>
    1412. 

  1412.         <td class="vars_value">false</td>
    1413. 

  1413.         <td class="vars_value">'' | false | value</td>
    1414. 

  1414.         <td>Margins of the Actions toolbar</td>
    1415. 

  1415.       </tr>
    1416. 

  1416.       <tr>
    1417. 

  1417.         <th>@_actions-toolbar-padding</th>
    1418. 

  1418.         <td>@actions-toolbar__padding</td>
    1419. 

  1419.         <td class="vars_value">false</td>
    1420. 

  1420.         <td class="vars_value">'' | false | value</td>
    1421. 

  1421.         <td>Paddings of the Actions toolbar</td>
    1422. 

  1422.       </tr>
    1423. 

  1423.       <tr>
    1424. 

  1424.         <th>@_actions-toolbar-actions-margin</th>
    1425. 

  1425.         <td>@actions-toolbar-actions__margin</td>
    1426. 

  1426.         <td class="vars_value">false</td>
    1427. 

  1427.         <td class="vars_value">'' | false | value</td>
    1428. 

  1428.         <td>Margins of all .actions in the Actions toolbar</td>
    1429. 

  1429.       </tr>
    1430. 

  1430.       <tr>
    1431. 

  1431.         <th>@_actions-toolbar-primary-actions-margin</th>
    1432. 

  1432.         <td>@actions-toolbar-actions-primary__margin</td>
    1433. 

  1433.         <td class="vars_value">0 @indent__xs 0 0</td>
    1434. 

  1434.         <td class="vars_value">'' | false | value</td>
    1435. 

  1435.         <td>Margins of primary .actions in the Actions toolbar</td>
    1436. 

  1436.       </tr>
    1437. 

  1437.       <tr>
    1438. 

  1438.         <th>@_actions-toolbar-secondary-actions-margin</th>
    1439. 

  1439.         <td>@actions-toolbar-actions-secondary__margin</td>
    1440. 

  1440.         <td class="vars_value">false</td>
    1441. 

  1441.         <td class="vars_value">'' | false | value</td>
    1442. 

  1442.         <td>Margins of secondary .actions in the Actions toolbar</td>
    1443. 

  1443.       </tr>
    1444. 

  1444.       <tr>
    1445. 

  1445.         <th nowrap="nowrap">@_actions-toolbar-actions-links-margin-top</th>
    1446. 

  1446.         <td>@actions-toolbar-actions-links__margin-top</td>
    1447. 

  1447.         <td class="vars_value">false</td>
    1448. 

  1448.         <td class="vars_value">'' | false | value</td>
    1449. 

  1449.         <td>Margin-top for links with class .action in the Actions toolbar</td>
    1450. 

  1450.       </tr>
    1451. 

  1451.       <tr>
    1452. 

  1452.         <th nowrap="nowrap">@_actions-toolbar-primary-actions-links-margin-top</th>
    1453. 

  1453.         <td>@actions-toolbar-actions-links-primary__margin-top</td>
    1454. 

  1454.         <td class="vars_value">false</td>
    1455. 

  1455.         <td class="vars_value">'' | false | value</td>
    1456. 

  1456.         <td>Margin-top for primary links with class .action in the Actions toolbar</td>
    1457. 

  1457.       </tr>
    1458. 

  1458.       <tr>
    1459. 

  1459.         <th nowrap="nowrap">@_actions-toolbar-secondary-actions-links-margin-top</th>
    1460. 

  1460.         <td>@actions-toolbar-actions-secondary__margin</td>
    1461. 

  1461.         <td class="vars_value">6px</td>
    1462. 

  1462.         <td class="vars_value">'' | false | value</td>
    1463. 

  1463.         <td>Margin-top for secondary links with class .action in the Actions toolbar</td>
    1464. 

  1464.       </tr>
    1465. 

  1465.     </table>
    1466. 

  1466.   </pre>
    1467. 

  1467. 

  1468. <h2 id="breadcrumbs-variables">Breadcrumbs variables</h2>
    1469. 

  1469. <h4 id="the-codelibbreadcrumbscode-mixin-variables">The <code>.lib-breadcrumbs()</code> mixin variables</h4>
    1470. 

  1470.   <pre>
    1471. 

  1471.     <table>
    1472. 

  1472.       <tr>
    1473. 

  1473.         <th class="vars_head">Mixin variable</th>
    1474. 

  1474.         <th class="vars_head">Global variable</th>
    1475. 

  1475.         <th class="vars_head">Default value</th>
    1476. 

  1476.         <th class="vars_head">Allowed values</th>
    1477. 

  1477.         <th class="vars_head">Comment</th>
    1478. 

  1478.       </tr>
    1479. 

  1479.       <tr>
    1480. 

  1480.         <th>@_breadcrumbs-font-size</th>
    1481. 

  1481.         <td>@breadcrumbs__font-size</td>
    1482. 

  1482.         <td class="vars_value">@font-size__s</td>
    1483. 

  1483.         <td class="vars_value">'' | false | value</td>
    1484. 

  1484.         <td>Breadcrumbs font size</td>
    1485. 

  1485.       </tr>
    1486. 

  1486.       <tr>
    1487. 

  1487.         <th>@_breadcrumbs-display</th>
    1488. 

  1488.         <td>@breadcrumbs__display</td>
    1489. 

  1489.         <td class="vars_value">false</td>
    1490. 

  1490.         <td class="vars_value">'' | false | inline | block | inline-block</td>
    1491. 

  1491.         <td>Breadcrumbs links display property</td>
    1492. 

  1492.       </tr>
    1493. 

  1493.       <tr>
    1494. 

  1494.         <th>@_breadcrumbs__container-margin</th>
    1495. 

  1495.         <td>@breadcrumbs__container-margin</td>
    1496. 

  1496.         <td class="vars_value"> 0 0 @indent__base</td>
    1497. 

  1497.         <td class="vars_value">'' | false | value</td>
    1498. 

  1498.         <td>Breadcrumbs items padding</td>
    1499. 

  1499.       </tr>
    1500. 

  1500.       <tr>
    1501. 

  1501.         <th>@_breadcrumbs-padding</th>
    1502. 

  1502.         <td>@breadcrumbs__padding</td>
    1503. 

  1503.         <td class="vars_value">false</td>
    1504. 

  1504.         <td class="vars_value">'' | false | value</td>
    1505. 

  1505.         <td>Breadcrumbs items padding</td>
    1506. 

  1506.       </tr>
    1507. 

  1507.       <tr>
    1508. 

  1508.         <th colspan="5" class="vars_section">Breadcrumbs - separator symbol</th>
    1509. 

  1509.       </tr>
    1510. 

  1510.       <tr>
    1511. 

  1511.         <th>@_breadcrumbs-separator-symbol</th>
    1512. 

  1512.         <td>@breadcrumbs-separator__symbol</td>
    1513. 

  1513.         <td class="vars_value">false</td>
    1514. 

  1514.         <td class="vars_value">'' | false | any symbol</td>
    1515. 

  1515.         <td>Breadcrumbs separating symbol</td>
    1516. 

  1516.       </tr>
    1517. 

  1517.       <tr>
    1518. 

  1518.         <th>@_breadcrumbs-separator-color</th>
    1519. 

  1519.         <td>@breadcrumbs-separator__color</td>
    1520. 

  1520.         <td class="vars_value" nowrap="nowrap">@breadcrumbs-current__color</td>
    1521. 

  1521.         <td class="vars_value">'' | false | value</td>
    1522. 

  1522.         <td>Breadcrumbs separating symbol color</td>
    1523. 

  1523.       </tr>
    1524. 

  1524.      <tr>
    1525. 

  1525.         <th>@_breadcrumbs-icon-use</th>
    1526. 

  1526.         <td>@breadcrumbs-icon__use</td>
    1527. 

  1527.         <td class="vars_value">true</td>
    1528. 

  1528.         <td class="vars_value">true | false</td>
    1529. 

  1529.         <td>Breadcrumbs separating symbol is an icon</td>
    1530. 

  1530.       </tr>
    1531. 

  1531.       <tr>
    1532. 

  1532.         <th>@_breadcrumbs-icon-font-content</th>
    1533. 

  1533.         <td>@breadcrumbs-icon__font-content</td>
    1534. 

  1534.         <td class="vars_value">@icon-next</td>
    1535. 

  1535.         <td class="vars_value">'' | false | icon</td>
    1536. 

  1536.         <td>Breadcrumbs separating icon symbol</td>
    1537. 

  1537.       </tr>
    1538. 

  1538.       <tr>
    1539. 

  1539.         <th>@_icon-font</th>
    1540. 

  1540.         <td>@breadcrumbs-icon__font</td>
    1541. 

  1541.         <td class="vars_value">@icon-font</td>
    1542. 

  1542.         <td class="vars_value">'' | false | font</td>
    1543. 

  1543.         <td>Breadcrumbs separating icon font</td>
    1544. 

  1544.       </tr>
    1545. 

  1545.       <tr>
    1546. 

  1546.         <th>@_icon-font-size</th>
    1547. 

  1547.         <td>@breadcrumbs-icon__font-size</td>
    1548. 

  1548.         <td class="vars_value">24px</td>
    1549. 

  1549.         <td class="vars_value">'' | false | value</td>
    1550. 

  1550.         <td>Breadcrumbs separating icon font size</td>
    1551. 

  1551.       </tr>
    1552. 

  1552.       <tr>
    1553. 

  1553.         <th>@_icon-font-line-height</th>
    1554. 

  1554.         <td>@breadcrumbs-icon__font-line-height</td>
    1555. 

  1555.         <td class="vars_value">18px</td>
    1556. 

  1556.         <td class="vars_value">'' | false | value</td>
    1557. 

  1557.         <td>Breadcrumbs separating icon line height</td>
    1558. 

  1558.       </tr>
    1559. 

  1559.       <tr>
    1560. 

  1560.         <th>@_icon-font-color</th>
    1561. 

  1561.         <td>@breadcrumbs-icon__font-color</td>
    1562. 

  1562.         <td class="vars_value">false</td>
    1563. 

  1563.         <td class="vars_value">'' | false | value</td>
    1564. 

  1564.         <td>Breadcrumbs separating icon color</td>
    1565. 

  1565.       </tr>
    1566. 

  1566.       <tr>
    1567. 

  1567.         <th>@_icon-font-margin</th>
    1568. 

  1568.         <td>@breadcrumbs-icon__font-margin</td>
    1569. 

  1569.         <td class="vars_value">0</td>
    1570. 

  1570.         <td class="vars_value">'' | false | value</td>
    1571. 

  1571.         <td>Breadcrumbs separating icon margin</td>
    1572. 

  1572.       </tr>
    1573. 

  1573.       <tr>
    1574. 

  1574.         <th>@_icon-font-vertical-align</th>
    1575. 

  1575.         <td>@breadcrumbs-icon__font-vertical-align</td>
    1576. 

  1576.         <td class="vars_value">top</td>
    1577. 

  1577.         <td class="vars_value">'' | false | value</td>
    1578. 

  1578.         <td>Breadcrumbs separating icon vertical align</td>
    1579. 

  1579.       </tr>
    1580. 

  1580.       <tr>
    1581. 

  1581.         <th colspan="5" class="vars_section">Breadcrumbs - current page</th>
    1582. 

  1582.       </tr>
    1583. 

  1583.       <tr>
    1584. 

  1584.         <th>@_breadcrumbs-current-color</th>
    1585. 

  1585.         <td>@breadcrumbs-current__color</td>
    1586. 

  1586.         <td class="vars_value">#a3a3a3</td>
    1587. 

  1587.         <td class="vars_value">'' | false | value</td>
    1588. 

  1588.         <td>Breadcrumbs current page color</td>
    1589. 

  1589.       </tr>
    1590. 

  1590.       <tr>
    1591. 

  1591.         <th>@_breadcrumbs-current-font-weight</th>
    1592. 

  1592.         <td>@breadcrumbs-current__font-weight</td>
    1593. 

  1593.         <td class="vars_value">@font-weight__regular</td>
    1594. 

  1594.         <td class="vars_value">'' | false | value</td>
    1595. 

  1595.         <td>Breadcrumbs current page font weight</td>
    1596. 

  1596.       </tr>
    1597. 

  1597.       <tr>
    1598. 

  1598.         <th>@_breadcrumbs-current-background</th>
    1599. 

  1599.         <td>@breadcrumbs-current__background</td>
    1600. 

  1600.         <td class="vars_value">false</td>
    1601. 

  1601.         <td class="vars_value">'' | false | value</td>
    1602. 

  1602.         <td>Breadcrumbs current page background</td>
    1603. 

  1603.       </tr>
    1604. 

  1604.       <tr>
    1605. 

  1605.         <th>@_breadcrumbs-current-border</th>
    1606. 

  1606.         <td>@breadcrumbs-current__border</td>
    1607. 

  1607.         <td class="vars_value">false</td>
    1608. 

  1608.         <td class="vars_value">'' | false | value</td>
    1609. 

  1609.         <td>Breadcrumbs current page border</td>
    1610. 

  1610.       </tr>
    1611. 

  1611.       <tr>
    1612. 

  1612.         <th>@_breadcrumbs-current-gradient</th>
    1613. 

  1613.         <td>@breadcrumbs-current__gradient</td>
    1614. 

  1614.         <td class="vars_value">false</td>
    1615. 

  1615.         <td class="vars_value">true | false</td>
    1616. 

  1616.         <td>Breadcrumbs current page have gradient background</td>
    1617. 

  1617.       </tr>
    1618. 

  1618.       <tr>
    1619. 

  1619.         <th>@_breadcrumbs-current-gradient-direction</th>
    1620. 

  1620.         <td>@breadcrumbs-current__gradient-direction</td>
    1621. 

  1621.         <td class="vars_value">false</td>
    1622. 

  1622.         <td class="vars_value">'' | false | vertical | horizontal</td>
    1623. 

  1623.         <td>Direction of breadcrumbs current page background gradient (if there is any)</td>
    1624. 

  1624.       </tr>
    1625. 

  1625.       <tr>
    1626. 

  1626.         <th>@_breadcrumbs-current-gradient-color-start</th>
    1627. 

  1627.         <td>@breadcrumbs-current__gradient-color-start</td>
    1628. 

  1628.         <td class="vars_value">false</td>
    1629. 

  1629.         <td class="vars_value">'' | false | value</td>
    1630. 

  1630.         <td>Breadcrumbs current page gradient start color</td>
    1631. 

  1631.       </tr>
    1632. 

  1632.       <tr>
    1633. 

  1633.         <th>@_breadcrumbs-current-gradient-color-end</th>
    1634. 

  1634.         <td>@breadcrumbs-current__gradient-color-end</td>
    1635. 

  1635.         <td class="vars_value">false</td>
    1636. 

  1636.         <td class="vars_value">'' | false | value</td>
    1637. 

  1637.         <td>Breadcrumbs current page gradient end color</td>
    1638. 

  1638.       </tr>
    1639. 

  1639.       <tr>
    1640. 

  1640.         <th colspan="5" class="vars_section">Breadcrumbs link</th>
    1641. 

  1641.       </tr>
    1642. 

  1642.       <tr>
    1643. 

  1643.         <th>@_breadcrumbs-link-gradient</th>
    1644. 

  1644.         <td>@breadcrumbs-link__gradient</td>
    1645. 

  1645.         <td class="vars_value">false</td>
    1646. 

  1646.         <td class="vars_value">true | false</td>
    1647. 

  1647.         <td>Breadcrumbs items have gradient background</td>
    1648. 

  1648.       </tr>
    1649. 

  1649.       <tr>
    1650. 

  1650.         <th>@_breadcrumbs-link-gradient-direction</th>
    1651. 

  1651.         <td>@breadcrumbs-link__gradient-direction</td>
    1652. 

  1652.         <td class="vars_value">false</td>
    1653. 

  1653.         <td class="vars_value">'' | false | vertical | horizontal</td>
    1654. 

  1654.         <td>Direction of breadcrumbs item background gradient (if there is any)</td>
    1655. 

  1655.       </tr>
    1656. 

  1656.       <tr>
    1657. 

  1657.         <th colspan="5" class="vars_section">Breadcrumbs link - default</th>
    1658. 

  1658.       </tr>
    1659. 

  1659.       <tr>
    1660. 

  1660.         <th>@_breadcrumbs-link-color</th>
    1661. 

  1661.         <td>@breadcrumbs-link__color</td>
    1662. 

  1662.         <td class="vars_value">@primary__color</td>
    1663. 

  1663.         <td class="vars_value">'' | false | value</td>
    1664. 

  1664.         <td>Breadcrumbs item color</td>
    1665. 

  1665.       </tr>
    1666. 

  1666.       <tr>
    1667. 

  1667.         <th>@_breadcrumbs-link-background</th>
    1668. 

  1668.         <td>@breadcrumbs-link__background</td>
    1669. 

  1669.         <td class="vars_value">false</td>
    1670. 

  1670.         <td class="vars_value">'' | false | value</td>
    1671. 

  1671.         <td>Breadcrumbs item background</td>
    1672. 

  1672.       </tr>
    1673. 

  1673.       <tr>
    1674. 

  1674.         <th>@_breadcrumbs-link-border</th>
    1675. 

  1675.         <td>@breadcrumbs-link__border</td>
    1676. 

  1676.         <td class="vars_value">false</td>
    1677. 

  1677.         <td class="vars_value">'' | false | value</td>
    1678. 

  1678.         <td>Breadcrumbs item border</td>
    1679. 

  1679.       </tr>
    1680. 

  1680.       <tr>
    1681. 

  1681.         <th>@_breadcrumbs-link-text-decoration</th>
    1682. 

  1682.         <td>@breadcrumbs-link__text-decoration</td>
    1683. 

  1683.         <td class="vars_value">none</td>
    1684. 

  1684.         <td class="vars_value">'' | false | value</td>
    1685. 

  1685.         <td>Breadcrumbs item text decoration</td>
    1686. 

  1686.       </tr>
    1687. 

  1687.       <tr>
    1688. 

  1688.         <th>@_breadcrumbs-link-gradient-color-start</th>
    1689. 

  1689.         <td>@breadcrumbs-link__gradient-color-start</td>
    1690. 

  1690.         <td class="vars_value">false</td>
    1691. 

  1691.         <td class="vars_value">'' | false | value</td>
    1692. 

  1692.         <td>Breadcrumbs item gradient start color</td>
    1693. 

  1693.       </tr>
    1694. 

  1694.       <tr>
    1695. 

  1695.         <th>@_breadcrumbs-link-gradient-color-end</th>
    1696. 

  1696.         <td>@breadcrumbs-link__gradient-color-end</td>
    1697. 

  1697.         <td class="vars_value">false</td>
    1698. 

  1698.         <td class="vars_value">'' | false | value</td>
    1699. 

  1699.         <td>Breadcrumbs item gradient end color</td>
    1700. 

  1700.       </tr>
    1701. 

  1701.       <tr>
    1702. 

  1702.         <th colspan="5" class="vars_section">Breadcrumbs link - visited</th>
    1703. 

  1703.       </tr>
    1704. 

  1704.       <tr>
    1705. 

  1705.         <th>@_breadcrumbs-link-color-visited</th>
    1706. 

  1706.         <td>@breadcrumbs-link__visited__color</td>
    1707. 

  1707.         <td class="vars_value">@primary__color</td>
    1708. 

  1708.         <td class="vars_value">'' | false | value</td>
    1709. 

  1709.         <td>Breadcrumbs item visited color</td>
    1710. 

  1710.       </tr>
    1711. 

  1711.       <tr>
    1712. 

  1712.         <th>@_breadcrumbs-link-background-visited</th>
    1713. 

  1713.         <td>@breadcrumbs-link__visited__background</td>
    1714. 

  1714.         <td class="vars_value">@breadcrumbs-link__background</td>
    1715. 

  1715.         <td class="vars_value">'' | false | value</td>
    1716. 

  1716.         <td>Breadcrumbs item visited background</td>
    1717. 

  1717.       </tr>
    1718. 

  1718.       <tr>
    1719. 

  1719.         <th>@_breadcrumbs-link-border-visited</th>
    1720. 

  1720.         <td>@breadcrumbs-link__visited__border</td>
    1721. 

  1721.         <td class="vars_value">@breadcrumbs-link__border</td>
    1722. 

  1722.         <td class="vars_value">'' | false | value</td>
    1723. 

  1723.         <td>Breadcrumbs item visited border</td>
    1724. 

  1724.       </tr>
    1725. 

  1725.       <tr>
    1726. 

  1726.         <th>@_breadcrumbs-link-text-decoration-visited</th>
    1727. 

  1727.         <td>@breadcrumbs-link__visited__text-decoration</td>
    1728. 

  1728.         <td class="vars_value">none</td>
    1729. 

  1729.         <td class="vars_value">'' | false | value</td>
    1730. 

  1730.         <td>Breadcrumbs item text decoration</td>
    1731. 

  1731.       </tr>
    1732. 

  1732.       <tr>
    1733. 

  1733.         <th>@_breadcrumbs-link-gradient-color-start-visited</th>
    1734. 

  1734.         <td>@breadcrumbs-link__visited__gradient-color-start</td>
    1735. 

  1735.         <td class="vars_value">false</td>
    1736. 

  1736.         <td class="vars_value">'' | false | value</td>
    1737. 

  1737.         <td>Breadcrumbs item visited gradient start color</td>
    1738. 

  1738.       </tr>
    1739. 

  1739.       <tr>
    1740. 

  1740.         <th>@_breadcrumbs-link-gradient-color-end-visited</th>
    1741. 

  1741.         <td>@breadcrumbs-link__visited__gradient-color-end</td>
    1742. 

  1742.         <td class="vars_value">false</td>
    1743. 

  1743.         <td class="vars_value">'' | false | value</td>
    1744. 

  1744.         <td>Breadcrumbs item visited gradient end color</td>
    1745. 

  1745.       </tr>
    1746. 

  1746.       <tr>
    1747. 

  1747.         <th colspan="5" class="vars_section">Breadcrumbs link - hover</th>
    1748. 

  1748.       </tr>
    1749. 

  1749.       <tr>
    1750. 

  1750.         <th>@_breadcrumbs-link-color-hover</th>
    1751. 

  1751.         <td>@breadcrumbs-link__hover__color</td>
    1752. 

  1752.         <td class="vars_value">@primary__color</td>
    1753. 

  1753.         <td class="vars_value">'' | false | value</td>
    1754. 

  1754.         <td>Breadcrumbs item hover color</td>
    1755. 

  1755.       </tr>
    1756. 

  1756.       <tr>
    1757. 

  1757.         <th>@_breadcrumbs-link-background-hover</th>
    1758. 

  1758.         <td>@breadcrumbs-link__hover__background</td>
    1759. 

  1759.         <td class="vars_value">false</td>
    1760. 

  1760.         <td class="vars_value">'' | false | value</td>
    1761. 

  1761.         <td>Breadcrumbs item hover background</td>
    1762. 

  1762.       </tr>
    1763. 

  1763.       <tr>
    1764. 

  1764.         <th>@_breadcrumbs-link-border-hover</th>
    1765. 

  1765.         <td>@breadcrumbs-link__hover__border</td>
    1766. 

  1766.         <td class="vars_value">@breadcrumbs-link__border</td>
    1767. 

  1767.         <td class="vars_value">'' | false | value</td>
    1768. 

  1768.         <td>Breadcrumbs item hover border</td>
    1769. 

  1769.       </tr>
    1770. 

  1770.       <tr>
    1771. 

  1771.         <th>@_breadcrumbs-link-text-decoration-hover</th>
    1772. 

  1772.         <td>@breadcrumbs-link__hover__text-decoration</td>
    1773. 

  1773.         <td class="vars_value">underline</td>
    1774. 

  1774.         <td class="vars_value">'' | false | value</td>
    1775. 

  1775.         <td>Breadcrumbs item hover text decoration</td>
    1776. 

  1776.       </tr>
    1777. 

  1777.       <tr>
    1778. 

  1778.         <th>@_breadcrumbs-link-gradient-color-start-hover</th>
    1779. 

  1779.         <td>@breadcrumbs-link__hover__gradient-color-start</td>
    1780. 

  1780.         <td class="vars_value">false</td>
    1781. 

  1781.         <td class="vars_value">'' | false | value</td>
    1782. 

  1782.         <td>Breadcrumbs item hover gradient start color</td>
    1783. 

  1783.       </tr>
    1784. 

  1784.       <tr>
    1785. 

  1785.         <th>@_breadcrumbs-link-gradient-color-end-hover</th>
    1786. 

  1786.         <td>@breadcrumbs-link__hover__gradient-color-end</td>
    1787. 

  1787.         <td class="vars_value">false</td>
    1788. 

  1788.         <td class="vars_value">'' | false | value</td>
    1789. 

  1789.         <td>Breadcrumbs item hover gradient end color</td>
    1790. 

  1790.       </tr>
    1791. 

  1791.       <tr>
    1792. 

  1792.         <th colspan="5" class="vars_section">Breadcrumbs link - active</th>
    1793. 

  1793.       </tr>
    1794. 

  1794.       <tr>
    1795. 

  1795.         <th>@_breadcrumbs-link-color-active</th>
    1796. 

  1796.         <td>@breadcrumbs-link__active__color</td>
    1797. 

  1797.         <td class="vars_value">@primary__color</td>
    1798. 

  1798.         <td class="vars_value">'' | false | value</td>
    1799. 

  1799.         <td>Breadcrumbs item active color</td>
    1800. 

  1800.       </tr>
    1801. 

  1801.       <tr>
    1802. 

  1802.         <th>@_breadcrumbs-link-background-active</th>
    1803. 

  1803.         <td>@breadcrumbs-link__active__background</td>
    1804. 

  1804.         <td class="vars_value">@breadcrumbs-link__background</td>
    1805. 

  1805.         <td class="vars_value">'' | false | value</td>
    1806. 

  1806.         <td>Breadcrumbs item active background</td>
    1807. 

  1807.       </tr>
    1808. 

  1808.       <tr>
    1809. 

  1809.         <th>@_breadcrumbs-link-border-active</th>
    1810. 

  1810.         <td>@breadcrumbs-link__active__border</td>
    1811. 

  1811.         <td class="vars_value">@breadcrumbs-link__border</td>
    1812. 

  1812.         <td class="vars_value">'' | false | value</td>
    1813. 

  1813.         <td>Breadcrumbs item active border</td>
    1814. 

  1814.       </tr>
    1815. 

  1815.       <tr>
    1816. 

  1816.         <th>@_breadcrumbs-link-text-decoration-active</th>
    1817. 

  1817.         <td>@breadcrumbs-link__active__text-decoration</td>
    1818. 

  1818.         <td class="vars_value">none</td>
    1819. 

  1819.         <td class="vars_value">'' | false | value</td>
    1820. 

  1820.         <td>Breadcrumbs item active text decoration</td>
    1821. 

  1821.       </tr>
    1822. 

  1822.       <tr>
    1823. 

  1823.         <th nowrap="nowrap">@_breadcrumbs-link-gradient-color-start-active</th>
    1824. 

  1824.         <td>@breadcrumbs-link__active__gradient-color-start</td>
    1825. 

  1825.         <td class="vars_value">false</td>
    1826. 

  1826.         <td class="vars_value">'' | false | value</td>
    1827. 

  1827.         <td>Breadcrumbs item active gradient start color</td>
    1828. 

  1828.       </tr>
    1829. 

  1829.       <tr>
    1830. 

  1830.         <th>@_breadcrumbs-link-gradient-color-end-active</th>
    1831. 

  1831.         <td>@breadcrumbs-link__active__gradient-color-end</td>
    1832. 

  1832.         <td class="vars_value">false</td>
    1833. 

  1833.         <td class="vars_value">'' | false | value</td>
    1834. 

  1834.         <td>Breadcrumbs item active gradient end color</td>
    1835. 

  1835.       </tr>
    1836. 

  1836.     </table>
    1837. 

  1837.   </pre>
    1838. 

  1838. 

  1839. <h2 id="button-variables">Button variables</h2>
    1840. 

  1840. <h4 id="the-codelibbuttoncode-mixin-variables">The <code>.lib-button()</code> mixin variables</h4>
    1841. 

  1841.   <pre>
    1842. 

  1842.     <table>
    1843. 

  1843.       <tr>
    1844. 

  1844.         <th class="vars_head">Mixin variable</th>
    1845. 

  1845.         <th class="vars_head">Global variable</th>
    1846. 

  1846.         <th class="vars_head">Default value</th>
    1847. 

  1847.         <th class="vars_head">Allowed values</th>
    1848. 

  1848.         <th class="vars_head">Comment</th>
    1849. 

  1849.       </tr>
    1850. 

  1850.       <tr>
    1851. 

  1851.         <th>@_button-font-family</th>
    1852. 

  1852.         <td>@button__font-family</td>
    1853. 

  1853.         <td class="vars_value">@font-family__base</td>
    1854. 

  1854.         <td class="vars_value">'' | false | value</td>
    1855. 

  1855.         <td>Button font family</td>
    1856. 

  1856.       </tr>
    1857. 

  1857.       <tr>
    1858. 

  1858.         <th>@_button-font-size</th>
    1859. 

  1859.         <td>@button__font-size</td>
    1860. 

  1860.         <td class="vars_value">@font-size__base</td>
    1861. 

  1861.         <td class="vars_value">'' | false | value</td>
    1862. 

  1862.         <td>Button font size</td>
    1863. 

  1863.       </tr>
    1864. 

  1864.       <tr>
    1865. 

  1865.         <th>@_button-font-weight</th>
    1866. 

  1866.         <td>@button__font-weight</td>
    1867. 

  1867.         <td class="vars_value">@font-weight__bold</td>
    1868. 

  1868.         <td class="vars_value">'' | false | value</td>
    1869. 

  1869.         <td>Button font weight</td>
    1870. 

  1870.       </tr>
    1871. 

  1871.       <tr>
    1872. 

  1872.         <th>@_button-cursor</th>
    1873. 

  1873.         <td>@button__cursor</td>
    1874. 

  1874.         <td class="vars_value">pointer</td>
    1875. 

  1875.         <td class="vars_value">'' | false | value</td>
    1876. 

  1876.         <td>Button cursor</td>
    1877. 

  1877.       </tr>
    1878. 

  1878.       <tr>
    1879. 

  1879.         <th>@_button-display</th>
    1880. 

  1880.         <td>@button__display</td>
    1881. 

  1881.         <td class="vars_value">inline-block</td>
    1882. 

  1882.         <td class="vars_value">'' | false | value</td>
    1883. 

  1883.         <td>Button display</td>
    1884. 

  1884.       </tr>
    1885. 

  1885.       <tr>
    1886. 

  1886.         <th>@_button-disabled-opacity</th>
    1887. 

  1887.         <td>@button__disabled__opacity</td>
    1888. 

  1888.         <td class="vars_value">.5</td>
    1889. 

  1889.         <td class="vars_value">'' | false | value</td>
    1890. 

  1890.         <td>Button disabled opacity</td>
    1891. 

  1891.       </tr>
    1892. 

  1892.       <tr>
    1893. 

  1893.         <th>@_button-line-height</th>
    1894. 

  1894.         <td>@button__line-height</td>
    1895. 

  1895.         <td class="vars_value">@font-size__base + 2</td>
    1896. 

  1896.         <td class="vars_value">'' | false | value</td>
    1897. 

  1897.         <td>Button height</td>
    1898. 

  1898.       </tr>
    1899. 

  1899.       <tr>
    1900. 

  1900.         <th>@_button-width</th>
    1901. 

  1901.         <td>@button__width</td>
    1902. 

  1902.         <td class="vars_value">false</td>
    1903. 

  1903.         <td class="vars_value">'' | false | value</td>
    1904. 

  1904.         <td>Button width</td>
    1905. 

  1905.       </tr>
    1906. 

  1906.       <tr>
    1907. 

  1907.         <th>@_button-margin</th>
    1908. 

  1908.         <td>@button__margin</td>
    1909. 

  1909.         <td class="vars_value">0</td>
    1910. 

  1910.         <td class="vars_value">'' | false | value</td>
    1911. 

  1911.         <td>Button margin</td>
    1912. 

  1912.       </tr>
    1913. 

  1913.       <tr>
    1914. 

  1914.         <th>@_button-padding</th>
    1915. 

  1915.         <td>@button__padding</td>
    1916. 

  1916.         <td class="vars_value">7px 15px</td>
    1917. 

  1917.         <td class="vars_value">'' | false | value</td>
    1918. 

  1918.         <td>Button padding</td>
    1919. 

  1919.       </tr>
    1920. 

  1920.       <tr>
    1921. 

  1921.         <th>@_button-gradient</th>
    1922. 

  1922.         <td>@button__gradient</td>
    1923. 

  1923.         <td class="vars_value">false</td>
    1924. 

  1924.         <td class="vars_value">'' | false | true</td>
    1925. 

  1925.         <td>Button has gradient background</td>
    1926. 

  1926.       </tr>
    1927. 

  1927.       <tr>
    1928. 

  1928.         <th>@_button-gradient-direction</th>
    1929. 

  1929.         <td>@button__gradient-direction</td>
    1930. 

  1930.         <td class="vars_value">false</td>
    1931. 

  1931.         <td class="vars_value">'' | false | vertical | horizontal</td>
    1932. 

  1932.         <td>Direction of button background gradient (if there is any)</td>
    1933. 

  1933.       </tr>
    1934. 

  1934.       <tr>
    1935. 

  1935.         <th colspan="5" class="vars_section">Button default state</th>
    1936. 

  1936.       </tr>
    1937. 

  1937.       <tr>
    1938. 

  1938.         <th>@_button-color</th>
    1939. 

  1939.         <td>@button__color</td>
    1940. 

  1940.         <td class="vars_value">@primary__color</td>
    1941. 

  1941.         <td class="vars_value">'' | false | value</td>
    1942. 

  1942.         <td>Button text color</td>
    1943. 

  1943.       </tr>
    1944. 

  1944.       <tr>
    1945. 

  1945.         <th>@_button-background</th>
    1946. 

  1946.         <td>@button__background</td>
    1947. 

  1947.         <td class="vars_value">#f2f2f2</td>
    1948. 

  1948.         <td class="vars_value">'' | false | value</td>
    1949. 

  1949.         <td>Button background</td>
    1950. 

  1950.       </tr>
    1951. 

  1951.       <tr>
    1952. 

  1952.         <th>@_button-border</th>
    1953. 

  1953.         <td>@button__border</td>
    1954. 

  1954.         <td class="vars_value">1px solid #cdcdcd</td>
    1955. 

  1955.         <td class="vars_value">'' | false | value</td>
    1956. 

  1956.         <td>Button border</td>
    1957. 

  1957.       </tr>
    1958. 

  1958.       <tr>
    1959. 

  1959.         <th>@_button-gradient-color-start</th>
    1960. 

  1960.         <td>@button__gradient-color-start</td>
    1961. 

  1961.         <td class="vars_value">false</td>
    1962. 

  1962.         <td class="vars_value">'' | false | value</td>
    1963. 

  1963.         <td>Gradient background start color</td>
    1964. 

  1964.       </tr>
    1965. 

  1965.       <tr>
    1966. 

  1966.         <th>@_button-gradient-color-end</th>
    1967. 

  1967.         <td>@button__gradient-color-end</td>
    1968. 

  1968.         <td class="vars_value">false</td>
    1969. 

  1969.         <td class="vars_value">'' | false | value</td>
    1970. 

  1970.         <td>Gradient background end color</td>
    1971. 

  1971.       </tr>
    1972. 

  1972.       <tr>
    1973. 

  1973.         <th colspan="5" class="vars_section">Button hover state</th>
    1974. 

  1974.       </tr>
    1975. 

  1975.       <tr>
    1976. 

  1976.         <th>@_button-color-hover</th>
    1977. 

  1977.         <td>@button__hover__color</td>
    1978. 

  1978.         <td class="vars_value">#555</td>
    1979. 

  1979.         <td class="vars_value">'' | false | value</td>
    1980. 

  1980.         <td>Hovered button text color</td>
    1981. 

  1981.       </tr>
    1982. 

  1982.       <tr>
    1983. 

  1983.         <th>@_button-background-hover</th>
    1984. 

  1984.         <td>@button__hover__background</td>
    1985. 

  1985.         <td class="vars_value">#e2e2e2</td>
    1986. 

  1986.         <td class="vars_value">'' | false | value</td>
    1987. 

  1987.         <td>Hovered button background</td>
    1988. 

  1988.       </tr>
    1989. 

  1989.       <tr>
    1990. 

  1990.         <th>@_button-border-hover</th>
    1991. 

  1991.         <td>@button__hover__border</td>
    1992. 

  1992.         <td class="vars_value">@button__border</td>
    1993. 

  1993.         <td class="vars_value">'' | false | value</td>
    1994. 

  1994.         <td>Hovered button border</td>
    1995. 

  1995.       </tr>
    1996. 

  1996.       <tr>
    1997. 

  1997.         <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
    1998. 

  1998.         <td>@button__hover__gradient-color-start</td>
    1999. 

  1999.         <td class="vars_value">false</td>
    2000. 

  2000.         <td class="vars_value">'' | false | value</td>
    2001. 

  2001.         <td>Hovered button gradient background start color</td>
    2002. 

  2002.       </tr>
    2003. 

  2003.       <tr>
    2004. 

  2004.         <th>@_button-gradient-color-end-hover</th>
    2005. 

  2005.         <td>@button__hover__gradient-color-end</td>
    2006. 

  2006.         <td class="vars_value">false</td>
    2007. 

  2007.         <td class="vars_value">'' | false | value</td>
    2008. 

  2008.         <td>Hovered button gradient background end color</td>
    2009. 

  2009.       </tr>
    2010. 

  2010.       <tr>
    2011. 

  2011.         <th colspan="5" class="vars_section">Button active state</th>
    2012. 

  2012.       </tr>
    2013. 

  2013.       <tr>
    2014. 

  2014.         <th>@_button-color-active</th>
    2015. 

  2015.         <td>@button__active__color</td>
    2016. 

  2016.         <td class="vars_value">@button__color</td>
    2017. 

  2017.         <td class="vars_value">'' | false | value</td>
    2018. 

  2018.         <td>Active button text color</td>
    2019. 

  2019.       </tr>
    2020. 

  2020.       <tr>
    2021. 

  2021.         <th>@_button-background-active</th>
    2022. 

  2022.         <td>@button__active__background</td>
    2023. 

  2023.         <td class="vars_value">@button__hover__background</td>
    2024. 

  2024.         <td class="vars_value">'' | false | value</td>
    2025. 

  2025.         <td>Active button background</td>
    2026. 

  2026.       </tr>
    2027. 

  2027.       <tr>
    2028. 

  2028.         <th>@_button-border-active</th>
    2029. 

  2029.         <td>@button__active__border</td>
    2030. 

  2030.         <td class="vars_value">@button__border</td>
    2031. 

  2031.         <td class="vars_value">'' | false | value</td>
    2032. 

  2032.         <td>Active button border</td>
    2033. 

  2033.       </tr>
    2034. 

  2034.       <tr>
    2035. 

  2035.         <th>@_button-gradient-color-start-active<br /></th>
    2036. 

  2036.         <td>@button__active__gradient-color-start</td>
    2037. 

  2037.         <td class="vars_value">false</td>
    2038. 

  2038.         <td class="vars_value">'' | false | value</td>
    2039. 

  2039.         <td>Active button gradient background start color</td>
    2040. 

  2040.       </tr>
    2041. 

  2041.       <tr>
    2042. 

  2042.         <th>@_button-gradient-color-end-active</th>
    2043. 

  2043.         <td>@button__active__gradient-color-end</td>
    2044. 

  2044.         <td class="vars_value">false</td>
    2045. 

  2045.         <td class="vars_value">'' | false | value</td>
    2046. 

  2046.         <td>Active button gradient background end color</td>
    2047. 

  2047.       </tr>
    2048. 

  2048.       <tr>
    2049. 

  2049.         <th colspan="5" class="vars_section">Button with icon</th>
    2050. 

  2050.       </tr>
    2051. 

  2051.       <tr>
    2052. 

  2052.         <th>@_button-icon-use</th>
    2053. 

  2053.         <td>@button-icon__use</td>
    2054. 

  2054.         <td class="vars_value">false</td>
    2055. 

  2055.         <td class="vars_value">'' | false | true</td>
    2056. 

  2056.         <td>Button has an icon</td>
    2057. 

  2057.       </tr>
    2058. 

  2058.       <tr>
    2059. 

  2059.         <th>@_button-font-content</th>
    2060. 

  2060.         <td>@button-icon__content</td>
    2061. 

  2061.         <td class="vars_value">@icon-settings</td>
    2062. 

  2062.         <td class="vars_value">'' | false | value</td>
    2063. 

  2063.         <td>Button icon symbol</td>
    2064. 

  2064.       </tr>
    2065. 

  2065.       <tr>
    2066. 

  2066.         <th>@_button-icon-font</th>
    2067. 

  2067.         <td>@button-icon__font</td>
    2068. 

  2068.         <td class="vars_value">@icon-font</td>
    2069. 

  2069.         <td class="vars_value">'' | false | value</td>
    2070. 

  2070.         <td>Button icon font</td>
    2071. 

  2071.       </tr>
    2072. 

  2072.       <tr>
    2073. 

  2073.         <th>@_button-icon-font-size</th>
    2074. 

  2074.         <td>@button-icon__font-size</td>
    2075. 

  2075.         <td class="vars_value">22px</td>
    2076. 

  2076.         <td class="vars_value">'' | false | value</td>
    2077. 

  2077.         <td>Button icon font size</td>
    2078. 

  2078.       </tr>
    2079. 

  2079.       <tr>
    2080. 

  2080.         <th>@_button-icon-font-line-height</th>
    2081. 

  2081.         <td>@button-icon__line-height</td>
    2082. 

  2082.         <td class="vars_value" nowrap="nowrap">@button-icon__font-size</td>
    2083. 

  2083.         <td class="vars_value">'' | false | value</td>
    2084. 

  2084.         <td>Button icon line height</td>
    2085. 

  2085.       </tr>
    2086. 

  2086.       <tr>
    2087. 

  2087.         <th>@_button-icon-font-color</th>
    2088. 

  2088.         <td>@button-icon__color</td>
    2089. 

  2089.         <td class="vars_value">inherit</td>
    2090. 

  2090.         <td class="vars_value">'' | false | value</td>
    2091. 

  2091.         <td>Button icon color</td>
    2092. 

  2092.       </tr>
    2093. 

  2093.       <tr>
    2094. 

  2094.         <th>@_button-icon-font-color-hover</th>
    2095. 

  2095.         <td>@button-icon__hover__font-color</td>
    2096. 

  2096.         <td class="vars_value">inherit</td>
    2097. 

  2097.         <td class="vars_value">'' | false | value</td>
    2098. 

  2098.         <td>Hovered button icon color</td>
    2099. 

  2099.       </tr>
    2100. 

  2100.       <tr>
    2101. 

  2101.         <th>@_button-icon-font-color-active</th>
    2102. 

  2102.         <td>@button-icon__active__font-color</td>
    2103. 

  2103.         <td class="vars_value">inherit</td>
    2104. 

  2104.         <td class="vars_value">'' | false | value</td>
    2105. 

  2105.         <td>Active button icon color</td>
    2106. 

  2106.       </tr>
    2107. 

  2107.       <tr>
    2108. 

  2108.         <th>@_button-icon-font-margin</th>
    2109. 

  2109.         <td>@button-icon__margin</td>
    2110. 

  2110.         <td class="vars_value">0</td>
    2111. 

  2111.         <td class="vars_value">'' | false | value</td>
    2112. 

  2112.         <td>Button icon margin</td>
    2113. 

  2113.       </tr>
    2114. 

  2114.       <tr>
    2115. 

  2115.         <th>@_button-icon-font-vertical-align</th>
    2116. 

  2116.         <td>@button-icon__vertical-align</td>
    2117. 

  2117.         <td class="vars_value">top</td>
    2118. 

  2118.         <td class="vars_value">'' | false | value</td>
    2119. 

  2119.         <td>Button icon vertical align</td>
    2120. 

  2120.       </tr>
    2121. 

  2121.       <tr>
    2122. 

  2122.         <th>@_button-icon-font-position</th>
    2123. 

  2123.         <td>@button-icon__position</td>
    2124. 

  2124.         <td class="vars_value">@icon__position</td>
    2125. 

  2125.         <td class="vars_value">'' | false | before | after</td>
    2126. 

  2126.         <td>Button icon font position</td>
    2127. 

  2127.       </tr>
    2128. 

  2128.       <tr>
    2129. 

  2129.         <th>@_button-icon-font-text-hide</th>
    2130. 

  2130.         <td>@button-icon__text-hide</td>
    2131. 

  2131.         <td class="vars_value">false</td>
    2132. 

  2132.         <td class="vars_value">'' | false | true</td>
    2133. 

  2133.         <td>Button icon text hide</td>
    2134. 

  2134.       </tr>
    2135. 

  2135.     </table>
    2136. 

  2136.   </pre>
    2137. 

  2137. 

  2138. <h4 id="the-codelibbuttonprimarycode-mixin-variables">The <code>.lib-button-primary()</code> mixin variables</h4>
    2139. 

  2139. <p>  In the variables list primary buttons are configured with <code>@button-primary<strong></code> prefix. So for example to configure primary button background you should use <code>@_button-background</code> variable of the mixin or <code>@button-primary</strong>background</code> of the global variables list.</p>
    2140. 

  2140.   <pre>
    2141. 

  2141.     <table>
    2142. 

  2142.         <tr>
    2143. 

  2143.             <th class="vars_head">Mixin variable</th>
    2144. 

  2144.             <th class="vars_head">Global variable</th>
    2145. 

  2145.             <th class="vars_head">Default value</th>
    2146. 

  2146.             <th class="vars_head">Allowed values</th>
    2147. 

  2147.             <th class="vars_head">Comment</th>
    2148. 

  2148.         </tr>
    2149. 

  2149.         <tr>
    2150. 

  2150.             <th>@_button-line-height</th>
    2151. 

  2151.             <td>@button-primary__line-height</td>
    2152. 

  2152.             <td class="vars_value">false</td>
    2153. 

  2153.             <td class="vars_value">'' | false | value</td>
    2154. 

  2154.             <td>Button line-height</td>
    2155. 

  2155.         </tr>
    2156. 

  2156.         <tr>
    2157. 

  2157.             <th>@_button-width</th>
    2158. 

  2158.             <td>@button-primary__width</td>
    2159. 

  2159.             <td class="vars_value">false</td>
    2160. 

  2160.             <td class="vars_value">'' | false | value</td>
    2161. 

  2161.             <td>Button width</td>
    2162. 

  2162.         </tr>
    2163. 

  2163.         <tr>
    2164. 

  2164.             <th>@_button-margin</th>
    2165. 

  2165.             <td>@button-primary__margin</td>
    2166. 

  2166.             <td class="vars_value">false</td>
    2167. 

  2167.             <td class="vars_value">'' | false | value</td>
    2168. 

  2168.             <td>Button margin</td>
    2169. 

  2169.         </tr>
    2170. 

  2170.         <tr>
    2171. 

  2171.             <th>@_button-padding</th>
    2172. 

  2172.             <td>@button-primary__padding</td>
    2173. 

  2173.             <td class="vars_value">@button__padding</td>
    2174. 

  2174.             <td class="vars_value">'' | false | value</td>
    2175. 

  2175.             <td>Button padding</td>
    2176. 

  2176.         </tr>
    2177. 

  2177.         <tr>
    2178. 

  2178.             <th>@_button-gradient</th>
    2179. 

  2179.             <td>@button-primary__gradient</td>
    2180. 

  2180.             <td class="vars_value">false</td>
    2181. 

  2181.             <td class="vars_value">'' | false | true</td>
    2182. 

  2182.             <td>Button has gradient background</td>
    2183. 

  2183.         </tr>
    2184. 

  2184.         <tr>
    2185. 

  2185.             <th>@_button-gradient-direction</th>
    2186. 

  2186.             <td>@button-primary__gradient-direction</td>
    2187. 

  2187.             <td class="vars_value">false</td>
    2188. 

  2188.             <td class="vars_value">'' | false | vertical | horizontal</td>
    2189. 

  2189.             <td>Direction of button background gradient (if there is any)</td>
    2190. 

  2190.         </tr>
    2191. 

  2191.         <tr>
    2192. 

  2192.             <th colspan="5" class="vars_section">Button default state</th>
    2193. 

  2193.         </tr>
    2194. 

  2194.         <tr>
    2195. 

  2195.             <th>@_button-background</th>
    2196. 

  2196.             <td>@button-primary__background</td>
    2197. 

  2197.             <td class="vars_value">#1979c3</td>
    2198. 

  2198.             <td class="vars_value">'' | false | value</td>
    2199. 

  2199.             <td>Button background</td>
    2200. 

  2200.         </tr>
    2201. 

  2201.         <tr>
    2202. 

  2202.             <th>@_button-border</th>
    2203. 

  2203.             <td>@button-primary__border</td>
    2204. 

  2204.             <td class="vars_value">1px solid #1979c3</td>
    2205. 

  2205.             <td class="vars_value">'' | false | value</td>
    2206. 

  2206.             <td>Button border</td>
    2207. 

  2207.         </tr>
    2208. 

  2208.         <tr>
    2209. 

  2209.             <th>@_button-color</th>
    2210. 

  2210.             <td>@button-primary__color</td>
    2211. 

  2211.             <td class="vars_value">#fff</td>
    2212. 

  2212.             <td class="vars_value">'' | false | value</td>
    2213. 

  2213.             <td>Button text color</td>
    2214. 

  2214.         </tr>
    2215. 

  2215.         <tr>
    2216. 

  2216.             <th>@_button-gradient-color-start</th>
    2217. 

  2217.             <td>@button-primary__gradient-color-start</td>
    2218. 

  2218.             <td class="vars_value">false</td>
    2219. 

  2219.             <td class="vars_value">'' | false | value</td>
    2220. 

  2220.             <td>Gradient background start color</td>
    2221. 

  2221.         </tr>
    2222. 

  2222.         <tr>
    2223. 

  2223.             <th>@_button-gradient-color-end</th>
    2224. 

  2224.             <td>@button-primary__gradient-color-end</td>
    2225. 

  2225.             <td class="vars_value">false</td>
    2226. 

  2226.             <td class="vars_value">'' | false | value</td>
    2227. 

  2227.             <td>Gradient background end color</td>
    2228. 

  2228.         </tr>
    2229. 

  2229.         <tr>
    2230. 

  2230.             <th colspan="5" class="vars_section">Button hover state</th>
    2231. 

  2231.         </tr>
    2232. 

  2232.         <tr>
    2233. 

  2233.             <th>@_button-background-hover</th>
    2234. 

  2234.             <td>@button-primary__hover__background</td>
    2235. 

  2235.             <td class="vars_value">#006bb4</td>
    2236. 

  2236.             <td class="vars_value">'' | false | value</td>
    2237. 

  2237.             <td>Hovered button background</td>
    2238. 

  2238.         </tr>
    2239. 

  2239.         <tr>
    2240. 

  2240.             <th>@_button-border-hover</th>
    2241. 

  2241.             <td>@button-primary__hover__border</td>
    2242. 

  2242.             <td class="vars_value">1px solid #006bb4</td>
    2243. 

  2243.             <td class="vars_value">'' | false | value</td>
    2244. 

  2244.             <td>Hovered button border</td>
    2245. 

  2245.         </tr>
    2246. 

  2246.         <tr>
    2247. 

  2247.             <th>@_button-color-hover</th>
    2248. 

  2248.             <td>@button-primary__hover__color</td>
    2249. 

  2249.             <td class="vars_value">@button-primary__color</td>
    2250. 

  2250.             <td class="vars_value">'' | false | value</td>
    2251. 

  2251.             <td>Hovered button text color</td>
    2252. 

  2252.         </tr>
    2253. 

  2253.         <tr>
    2254. 

  2254.             <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
    2255. 

  2255.             <td>@button-primary__hover__gradient-color-start</td>
    2256. 

  2256.             <td class="vars_value">false</td>
    2257. 

  2257.             <td class="vars_value">'' | false | value</td>
    2258. 

  2258.             <td>Hovered button gradient background start color</td>
    2259. 

  2259.         </tr>
    2260. 

  2260.         <tr>
    2261. 

  2261.             <th>@_button-gradient-color-end-hover</th>
    2262. 

  2262.             <td>@button-primary__hover__gradient-color-end</td>
    2263. 

  2263.             <td class="vars_value">false</td>
    2264. 

  2264.             <td class="vars_value">'' | false | value</td>
    2265. 

  2265.             <td>Hovered button gradient background end color</td>
    2266. 

  2266.         </tr>
    2267. 

  2267.         <tr>
    2268. 

  2268.             <th colspan="5" class="vars_section">Button active state</th>
    2269. 

  2269.         </tr>
    2270. 

  2270.         <tr>
    2271. 

  2271.             <th>@_button-background-active</th>
    2272. 

  2272.             <td>@button-primary__active__background</td>
    2273. 

  2273.             <td class="vars_value">@button-primary__hover__background</td>
    2274. 

  2274.             <td class="vars_value">'' | false | value</td>
    2275. 

  2275.             <td>Active button background</td>
    2276. 

  2276.         </tr>
    2277. 

  2277.         <tr>
    2278. 

  2278.             <th>@_button-border-active</th>
    2279. 

  2279.             <td>@button-primary__active__border</td>
    2280. 

  2280.             <td class="vars_value">@button-primary__hover__border</td>
    2281. 

  2281.             <td class="vars_value">'' | false | value</td>
    2282. 

  2282.             <td>Active button border</td>
    2283. 

  2283.         </tr>
    2284. 

  2284.         <tr>
    2285. 

  2285.             <th>@_button-color-active</th>
    2286. 

  2286.             <td>@button-primary__active__color</td>
    2287. 

  2287.             <td class="vars_value">@button-primary__color</td>
    2288. 

  2288.             <td class="vars_value">'' | false | value</td>
    2289. 

  2289.             <td>Active button text color</td>
    2290. 

  2290.         </tr>
    2291. 

  2291.         <tr>
    2292. 

  2292.             <th>@_button-gradient-color-start-active</th>
    2293. 

  2293.             <td>@button-primary__active__gradient-color-start</td>
    2294. 

  2294.             <td class="vars_value">false</td>
    2295. 

  2295.             <td class="vars_value">'' | false | value</td>
    2296. 

  2296.             <td>Active button gradient background start color</td>
    2297. 

  2297.         </tr>
    2298. 

  2298.         <tr>
    2299. 

  2299.             <th>@_button-gradient-color-end-active</th>
    2300. 

  2300.             <td>@button-primary__active__gradient-color-end</td>
    2301. 

  2301.             <td class="vars_value">false</td>
    2302. 

  2302.             <td class="vars_value">'' | false | value</td>
    2303. 

  2303.             <td>Active button gradient background end color</td>
    2304. 

  2304.         </tr>
    2305. 

  2305.     </table>
    2306. 

  2306.   </pre>
    2307. 

  2307. 

  2308. <h4 id="the-codelibbuttonrevertsecondarycolorcode-mixin-variables">The <code>.lib-button-revert-secondary-color()</code> mixin variables</h4>
    2309. 

  2309. <p>  The <code>.lib-button-revert-secondary-color()</code> mixin is used to revert button styles to secondary color styles.</p>
    2310. 

  2310.   <pre>
    2311. 

  2311.     <table>
    2312. 

  2312.       <tr>
    2313. 

  2313.         <th class="vars_head">Mixin variable</th>
    2314. 

  2314.         <th class="vars_head">Global variable</th>
    2315. 

  2315.         <th class="vars_head">Default value</th>
    2316. 

  2316.         <th class="vars_head">Allowed values</th>
    2317. 

  2317.         <th class="vars_head">Comment</th>
    2318. 

  2318.       </tr>
    2319. 

  2319.       <tr>
    2320. 

  2320.         <th>@_button-color</th>
    2321. 

  2321.         <td>@button__color</td>
    2322. 

  2322.         <td class="vars_value">@button__color</td>
    2323. 

  2323.         <td class="vars_value">'' | false | value</td>
    2324. 

  2324.         <td>Button color</td>
    2325. 

  2325.       </tr>
    2326. 

  2326.       <tr>
    2327. 

  2327.         <th>@_button-background</th>
    2328. 

  2328.         <td>@button__background</td>
    2329. 

  2329.         <td class="vars_value">@button__background</td>
    2330. 

  2330.         <td class="vars_value">'' | false | value</td>
    2331. 

  2331.         <td>Button background</td>
    2332. 

  2332.       </tr>
    2333. 

  2333.       <tr>
    2334. 

  2334.         <th>@_button-border</th>
    2335. 

  2335.         <td>@button__border</td>
    2336. 

  2336.         <td class="vars_value">@button__border</td>
    2337. 

  2337.         <td class="vars_value">'' | false | value</td>
    2338. 

  2338.         <td>Button border</td>
    2339. 

  2339.       </tr>
    2340. 

  2340.       <tr>
    2341. 

  2341.         <th>@_button-color-hover</th>
    2342. 

  2342.         <td>@button__hover__color</td>
    2343. 

  2343.         <td class="vars_value">@button__hover__color</td>
    2344. 

  2344.         <td class="vars_value">'' | false | value</td>
    2345. 

  2345.         <td>Button hover color</td>
    2346. 

  2346.       </tr>
    2347. 

  2347.       <tr>
    2348. 

  2348.         <th>@_button-background-hover</th>
    2349. 

  2349.         <td>@button__hover__background</td>
    2350. 

  2350.         <td class="vars_value">@button__hover__background</td>
    2351. 

  2351.         <td class="vars_value">'' | false | value</td>
    2352. 

  2352.         <td>Button hover background</td>
    2353. 

  2353.       </tr>
    2354. 

  2354.       <tr>
    2355. 

  2355.         <th>@_button-border-hover</th>
    2356. 

  2356.         <td>@button__hover__border</td>
    2357. 

  2357.         <td class="vars_value">@button__hover__border</td>
    2358. 

  2358.         <td class="vars_value">'' | false | value</td>
    2359. 

  2359.         <td>Button hover border</td>
    2360. 

  2360.       </tr>
    2361. 

  2361.       <tr>
    2362. 

  2362.         <th>@_button-color-active</th>
    2363. 

  2363.         <td>@button__active__color</td>
    2364. 

  2364.         <td class="vars_value">@button__active__color</td>
    2365. 

  2365.         <td class="vars_value">'' | false | value</td>
    2366. 

  2366.         <td>Button active color</td>
    2367. 

  2367.       </tr>
    2368. 

  2368.       <tr>
    2369. 

  2369.         <th>@_button-background-active</th>
    2370. 

  2370.         <td>@button__active__background</td>
    2371. 

  2371.         <td class="vars_value">@button__active__background</td>
    2372. 

  2372.         <td class="vars_value">'' | false | value</td>
    2373. 

  2373.         <td>Button active background</td>
    2374. 

  2374.       </tr>
    2375. 

  2375.       <tr>
    2376. 

  2376.         <th>@_button-border-active</th>
    2377. 

  2377.         <td>@button__active__border</td>
    2378. 

  2378.         <td class="vars_value">@button__active__border</td>
    2379. 

  2379.         <td class="vars_value">'' | false | value</td>
    2380. 

  2380.         <td>Button active border</td>
    2381. 

  2381.       </tr>
    2382. 

  2382.     </table>
    2383. 

  2383.   </pre>
    2384. 

  2384. 

  2385. <h4 id="the-codelibbuttonrevertsecondarysizecode-mixin-variables">The <code>.lib-button-revert-secondary-size()</code> mixin variables</h4>
    2386. 

  2386. <p>  The <code>.lib-button-revert-secondary-size()</code> mixin is used to revert button sizes to secondary button sizes.</p>
    2387. 

  2387.   <pre>
    2388. 

  2388.     <table>
    2389. 

  2389.       <tr>
    2390. 

  2390.         <th class="vars_head">Mixin variable</th>
    2391. 

  2391.         <th class="vars_head">Global variable</th>
    2392. 

  2392.         <th class="vars_head">Default value</th>
    2393. 

  2393.         <th class="vars_head">Allowed values</th>
    2394. 

  2394.         <th class="vars_head">Comment</th>
    2395. 

  2395.       </tr>
    2396. 

  2396.       <tr>
    2397. 

  2397.         <th>@_button-font-size</th>
    2398. 

  2398.         <td>@button__font-size</td>
    2399. 

  2399.         <td class="vars_value">@button__font-size</td>
    2400. 

  2400.         <td class="vars_value">'' | value</td>
    2401. 

  2401.         <td>Button font size</td>
    2402. 

  2402.       </tr>
    2403. 

  2403.       <tr>
    2404. 

  2404.         <th>@_button-line-height</th>
    2405. 

  2405.         <td>@button__line-height</td>
    2406. 

  2406.         <td class="vars_value">@button__line-height</td>
    2407. 

  2407.         <td class="vars_value">'' | value</td>
    2408. 

  2408.         <td>Button line-height</td>
    2409. 

  2409.       </tr>
    2410. 

  2410.       <tr>
    2411. 

  2411.         <th>@_button-padding</th>
    2412. 

  2412.         <td>@button__padding</td>
    2413. 

  2413.         <td class="vars_value">@button__padding</td>
    2414. 

  2414.         <td class="vars_value">'' | value</td>
    2415. 

  2415.         <td>Button padding</td>
    2416. 

  2416.       </tr>
    2417. 

  2417.     </table>
    2418. 

  2418.   </pre>
    2419. 

  2419. 

  2420. <h4 id="the-codelibbuttonaslinkcode-mixin-variables">The <code>.lib-button-as-link()</code> mixin variables</h4>
    2421. 

  2421. <p>  The <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.</p>
    2422. 

  2422.   <pre>
    2423. 

  2423.     <table>
    2424. 

  2424.         <tr>
    2425. 

  2425.             <th class="vars_head">Mixin variable</th>
    2426. 

  2426.             <th class="vars_head">Global variable</th>
    2427. 

  2427.             <th class="vars_head">Default value</th>
    2428. 

  2428.             <th class="vars_head">Allowed values</th>
    2429. 

  2429.             <th class="vars_head">Comment</th>
    2430. 

  2430.         </tr>
    2431. 

  2431.         <tr>
    2432. 

  2432.             <th>@_link-color</th>
    2433. 

  2433.             <td>@link__color</td>
    2434. 

  2434.             <td class="vars_value">@link-color</td>
    2435. 

  2435.             <td class="vars_value">'' | false | value</td>
    2436. 

  2436.             <td>Button as a link color</td>
    2437. 

  2437.         </tr>
    2438. 

  2438.         <tr>
    2439. 

  2439.             <th>@_link-color-hover</th>
    2440. 

  2440.             <td>@link__hover__color</td>
    2441. 

  2441.             <td class="vars_value">@link-color-hover</td>
    2442. 

  2442.             <td class="vars_value">'' | false | value</td>
    2443. 

  2443.             <td>Button as a link hovered color</td>
    2444. 

  2444.         </tr>
    2445. 

  2445.         <tr>
    2446. 

  2446.             <th>@_line-height</th>
    2447. 

  2447.             <td>@line-height__base</td>
    2448. 

  2448.             <td class="vars_value">@line-height-base</td>
    2449. 

  2449.             <td class="vars_value">'' | false | value</td>
    2450. 

  2450.             <td>Button as a link line height</td>
    2451. 

  2451.         </tr>
    2452. 

  2452.         <tr>
    2453. 

  2453.             <th>@_margin</th>
    2454. 

  2454.             <td>-</td>
    2455. 

  2455.             <td class="vars_value">0</td>
    2456. 

  2456.             <td class="vars_value">'' | false | value</td>
    2457. 

  2457.             <td>Button as a link margin</td>
    2458. 

  2458.         </tr>
    2459. 

  2459.         <tr>
    2460. 

  2460.             <th>@_padding</th>
    2461. 

  2461.             <td>-</td>
    2462. 

  2462.             <td class="vars_value">0</td>
    2463. 

  2463.             <td class="vars_value">'' | false | value</td>
    2464. 

  2464.             <td>Button as a link padding</td>
    2465. 

  2465.         </tr>
    2466. 

  2466.         <tr>
    2467. 

  2467.             <th>@_disabled_opacity</th>
    2468. 

  2468.             <td>@button__disabled__opacity</td>
    2469. 

  2469.             <td class="vars_value">.5</td>
    2470. 

  2470.             <td class="vars_value">range between .1 and .9</td>
    2471. 

  2471.             <td>Button as a link opacity</td>
    2472. 

  2472.         </tr>
    2473. 

  2473.     </table>
    2474. 

  2474.   </pre>
    2475. 

  2475. 

  2476. <h2 id="dropdown-variables">Drop-down variables</h2>
    2477. 

  2477. <h4 id="the-codelibdropdowncode-mixin-variables">The <code>.lib-dropdown()</code> mixin variables</h4>
    2478. 

  2478.   <pre>
    2479. 

  2479.     <table>
    2480. 

  2480.         <tr>
    2481. 

  2481.             <th class="vars_head">Mixin variable</th>
    2482. 

  2482.             <th class="vars_head">Global variable</th>
    2483. 

  2483.             <th class="vars_head">Default value</th>
    2484. 

  2484.             <th class="vars_head">Allowed values</th>
    2485. 

  2485.             <th class="vars_head">Comment</th>
    2486. 

  2486.         </tr>
    2487. 

  2487.         <tr>
    2488. 

  2488.             <th>@_toggle-selector</th>
    2489. 

  2489.             <td>-</td>
    2490. 

  2490.             <td class="vars_value">~".action.toggle"</td>
    2491. 

  2491.             <td class="vars_value">Selector</td>
    2492. 

  2492.             <td>Toggle selector</td>
    2493. 

  2493.         </tr>
    2494. 

  2494.         <tr>
    2495. 

  2495.             <th>@_options-selector</th>
    2496. 

  2496.             <td>-</td>
    2497. 

  2497.             <td class="vars_value">~"ul.dropdown"</td>
    2498. 

  2498.             <td class="vars_value">Selector</td>
    2499. 

  2499.             <td>Options selector</td>
    2500. 

  2500.         </tr>
    2501. 

  2501.         <tr>
    2502. 

  2502.             <th>@_dropdown-actions-padding</th>
    2503. 

  2503.             <td>@dropdown-actions__padding</td>
    2504. 

  2504.             <td class="vars_value">false</td>
    2505. 

  2505.             <td class="vars_value">'' | false | value</td>
    2506. 

  2506.             <td>Drop-down toggle element padding</td>
    2507. 

  2507.         </tr>
    2508. 

  2508.         <tr>
    2509. 

  2509.             <th>@_dropdown-list-min-width</th>
    2510. 

  2510.             <td>@dropdown-list__min-width</td>
    2511. 

  2511.             <td class="vars_value">100%</td>
    2512. 

  2512.             <td class="vars_value">'' | false | value</td>
    2513. 

  2513.             <td>Drop-down min width value</td>
    2514. 

  2514.         </tr>
    2515. 

  2515.         <tr>
    2516. 

  2516.             <th>@_dropdown-list-width</th>
    2517. 

  2517.             <td>@dropdown-list__width</td>
    2518. 

  2518.             <td class="vars_value">false</td>
    2519. 

  2519.             <td class="vars_value">'' | false | value</td>
    2520. 

  2520.             <td>Drop-down list width value</td>
    2521. 

  2521.         </tr>
    2522. 

  2522.         <tr>
    2523. 

  2523.             <th>@_dropdown-list-height</th>
    2524. 

  2524.             <td>@dropdown-list__height</td>
    2525. 

  2525.             <td class="vars_value">false</td>
    2526. 

  2526.             <td class="vars_value">'' | false | value</td>
    2527. 

  2527.             <td>Drop-down list height value</td>
    2528. 

  2528.         </tr>
    2529. 

  2529.         <tr>
    2530. 

  2530.             <th>@_dropdown-list-margin-top</th>
    2531. 

  2531.             <td>@dropdown-list__margin-top</td>
    2532. 

  2532.             <td class="vars_value">4px</td>
    2533. 

  2533.             <td class="vars_value">'' | false | value</td>
    2534. 

  2534.             <td>Drop-down list margin-top value</td>
    2535. 

  2535.         </tr>
    2536. 

  2536.         <tr>
    2537. 

  2537.             <th colspan="5" class="vars_section">Drop-down list</th>
    2538. 

  2538.         </tr>
    2539. 

  2539.         <tr>
    2540. 

  2540.             <th>@_dropdown-list-position-top</th>
    2541. 

  2541.             <td>@dropdown-list__position-top</td>
    2542. 

  2542.             <td class="vars_value">100%</td>
    2543. 

  2543.             <td class="vars_value">'' | false | value</td>
    2544. 

  2544.             <td>Drop-down list position: top</td>
    2545. 

  2545.         </tr>
    2546. 

  2546.         <tr>
    2547. 

  2547.             <th>@_dropdown-list-position-right</th>
    2548. 

  2548.             <td>@dropdown-list__position-right</td>
    2549. 

  2549.             <td class="vars_value">false</td>
    2550. 

  2550.             <td class="vars_value">'' | false | value</td>
    2551. 

  2551.             <td>Drop-down list position: right</td>
    2552. 

  2552.         </tr>
    2553. 

  2553.         <tr>
    2554. 

  2554.             <th>@_dropdown-list-position-bottom</th>
    2555. 

  2555.             <td>@dropdown-list__position-bottom</td>
    2556. 

  2556.             <td class="vars_value">false</td>
    2557. 

  2557.             <td class="vars_value">'' | false | value</td>
    2558. 

  2558.             <td>Drop-down list position: bottom</td>
    2559. 

  2559.         </tr>
    2560. 

  2560.         <tr>
    2561. 

  2561.             <th>@_dropdown-list-position-left</th>
    2562. 

  2562.             <td>@dropdown-list__position-left</td>
    2563. 

  2563.             <td class="vars_value">false</td>
    2564. 

  2564.             <td class="vars_value">'' | false | value</td>
    2565. 

  2565.             <td>Drop-down list position: left</td>
    2566. 

  2566.         </tr>
    2567. 

  2567.         <tr>
    2568. 

  2568.             <th>@_dropdown-list-background</th>
    2569. 

  2569.             <td>@dropdown-list__background</td>
    2570. 

  2570.             <td class="vars_value">@color-white</td>
    2571. 

  2571.             <td class="vars_value">'' | false | value</td>
    2572. 

  2572.             <td>Drop-down list background</td>
    2573. 

  2573.         </tr>
    2574. 

  2574.         <tr>
    2575. 

  2575.             <th>@_dropdown-list-border</th>
    2576. 

  2576.             <td>@dropdown-list__border</td>
    2577. 

  2577.             <td class="vars_value">1px solid #bbb</td>
    2578. 

  2578.             <td class="vars_value">'' | false | value</td>
    2579. 

  2579.             <td>Drop-down list border</td>
    2580. 

  2580.         </tr>
    2581. 

  2581.         <tr>
    2582. 

  2582.             <th>@_dropdown-list-pointer</th>
    2583. 

  2583.             <td>@dropdown-list__pointer</td>
    2584. 

  2584.             <td class="vars_value">true</td>
    2585. 

  2585.             <td class="vars_value">true | false</td>
    2586. 

  2586.             <td>Drop-down list pointer is visible</td>
    2587. 

  2587.         </tr>
    2588. 

  2588.         <tr>
    2589. 

  2589.             <th>@_dropdown-list-pointer-border</th>
    2590. 

  2590.             <td>@dropdown-list-pointer__border</td>
    2591. 

  2591.             <td class="vars_value">#bbb</td>
    2592. 

  2592.             <td class="vars_value">'' | false | value</td>
    2593. 

  2593.             <td>Drop-down list pointer border</td>
    2594. 

  2594.         </tr>
    2595. 

  2595.         <tr>
    2596. 

  2596.             <th>@_dropdown-list-pointer-position</th>
    2597. 

  2597.             <td>@dropdown-list-pointer__position</td>
    2598. 

  2598.             <td class="vars_value">left</td>
    2599. 

  2599.             <td class="vars_value">left | right</td>
    2600. 

  2600.             <td>Drop-down pointer position</td>
    2601. 

  2601.         </tr>
    2602. 

  2602.         <tr>
    2603. 

  2603.             <th>@_dropdown-list-pointer-position-top</th>
    2604. 

  2604.             <td>@dropdown-list-pointer__position-top</td>
    2605. 

  2605.             <td class="vars_value">-12px</td>
    2606. 

  2606.             <td class="vars_value">value</td>
    2607. 

  2607.             <td>Drop-down pointer top position</td>
    2608. 

  2608.         </tr>
    2609. 

  2609.         <tr>
    2610. 

  2610.             <th>@_dropdown-list-pointer-position-left-right</th>
    2611. 

  2611.             <td>@dropdown-list-pointer__position-left-right</td>
    2612. 

  2612.             <td class="vars_value">10px</td>
    2613. 

  2613.             <td class="vars_value">value</td>
    2614. 

  2614.             <td>Drop-down pointer left or right position</td>
    2615. 

  2615.         </tr>
    2616. 

  2616.         <tr>
    2617. 

  2617.             <th>@_dropdown-list-item-border</th>
    2618. 

  2618.             <td>@dropdown-list-item__border</td>
    2619. 

  2619.             <td class="vars_value">0</td>
    2620. 

  2620.             <td class="vars_value">'' | false | value</td>
    2621. 

  2621.             <td>Drop-down list item border</td>
    2622. 

  2622.         </tr>
    2623. 

  2623.         <tr>
    2624. 

  2624.             <th>@_dropdown-list-item-padding</th>
    2625. 

  2625.             <td>@dropdown-list-item__padding</td>
    2626. 

  2626.             <td class="vars_value">3px @indent__xs</td>
    2627. 

  2627.             <td class="vars_value">'' | false | value</td>
    2628. 

  2628.             <td>Drop-down list item padding</td>
    2629. 

  2629.         </tr>
    2630. 

  2630.         <tr>
    2631. 

  2631.             <th>@_dropdown-list-item-margin</th>
    2632. 

  2632.             <td>@dropdown-list-item__margin</td>
    2633. 

  2633.             <td class="vars_value">0</td>
    2634. 

  2634.             <td class="vars_value">'' | false | value</td>
    2635. 

  2635.             <td>Drop-down list item margin</td>
    2636. 

  2636.         </tr>
    2637. 

  2637.         <tr>
    2638. 

  2638.             <th>@_dropdown-list-item-hover</th>
    2639. 

  2639.             <td>@dropdown-list-item__hover</td>
    2640. 

  2640.             <td class="vars_value">#e8e8e8</td>
    2641. 

  2641.             <td class="vars_value">'' | false | value</td>
    2642. 

  2642.             <td>Drop-down list item hovered background</td>
    2643. 

  2643.         </tr>
    2644. 

  2644.         <tr>
    2645. 

  2645.             <th>@_dropdown-list-shadow</th>
    2646. 

  2646.             <td>@dropdown-list__shadow</td>
    2647. 

  2647.             <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
    2648. 

  2648.             <td class="vars_value">'' | false | value</td>
    2649. 

  2649.             <td>Drop-down list shadow</td>
    2650. 

  2650.         </tr>
    2651. 

  2651.         <tr>
    2652. 

  2652.             <th>@_dropdown-list-z-index</th>
    2653. 

  2653.             <td>@dropdown-list__z-index</td>
    2654. 

  2654.             <td class="vars_value">100</td>
    2655. 

  2655.             <td class="vars_value">'' | false | value</td>
    2656. 

  2656.             <td>Drop-down list z-index</td>
    2657. 

  2657.         </tr>
    2658. 

  2658.         <tr>
    2659. 

  2659.             <th colspan="5" class="vars_section">Drop-down icon</th>
    2660. 

  2660.         </tr>
    2661. 

  2661.         <tr>
    2662. 

  2662.             <th>@_dropdown-toggle-icon-content</th>
    2663. 

  2663.             <td>@dropdown-toggle-icon__content</td>
    2664. 

  2664.             <td class="vars_value">@icon-pointer-down</td>
    2665. 

  2665.             <td class="vars_value">'' | false | value</td>
    2666. 

  2666.             <td>Drop-down toggle icon symbol code for default state</td>
    2667. 

  2667.         </tr>
    2668. 

  2668.         <tr>
    2669. 

  2669.             <th nowrap>@_dropdown-toggle-active-icon-content</th>
    2670. 

  2670.             <td>@dropdown-toggle-icon__active__content</td>
    2671. 

  2671.             <td class="vars_value">@icon-pointer-up</td>
    2672. 

  2672.             <td class="vars_value">'' | false | value</td>
    2673. 

  2673.             <td>Drop-down toggle icon symbol code for active state</td>
    2674. 

  2674.         </tr>
    2675. 

  2675.         <tr>
    2676. 

  2676.             <th>@_icon-font</th>
    2677. 

  2677.             <td>@dropdown-toggle-icon__font</td>
    2678. 

  2678.             <td class="vars_value">@button-icon__font</td>
    2679. 

  2679.             <td class="vars_value">'' | false | value</td>
    2680. 

  2680.             <td>Drop-down toggle icon font</td>
    2681. 

  2681.         </tr>
    2682. 

  2682.         <tr>
    2683. 

  2683.             <th>@_icon-font-size</th>
    2684. 

  2684.             <td>@dropdown-toggle-icon__font-size</td>
    2685. 

  2685.             <td class="vars_value">@button-icon__font-size</td>
    2686. 

  2686.             <td class="vars_value">'' | false | value</td>
    2687. 

  2687.             <td>Drop-down toggle icon font size</td>
    2688. 

  2688.         </tr>
    2689. 

  2689.         <tr>
    2690. 

  2690.             <th>@_icon-font-line-height</th>
    2691. 

  2691.             <td>@dropdown-toggle-icon__font-line-height</td>
    2692. 

  2692.             <td class="vars_value">@button-icon__line-height</td>
    2693. 

  2693.             <td class="vars_value">'' | false | value</td>
    2694. 

  2694.             <td>Drop-down toggle icon line height</td>
    2695. 

  2695.         </tr>
    2696. 

  2696.         <tr>
    2697. 

  2697.             <th>@_icon-font-color</th>
    2698. 

  2698.             <td>@dropdown-toggle-icon__font-color</td>
    2699. 

  2699.             <td class="vars_value">@button-icon__color</td>
    2700. 

  2700.             <td class="vars_value">'' | false | value</td>
    2701. 

  2701.             <td>Drop-down toggle icon color</td>
    2702. 

  2702.         </tr>
    2703. 

  2703.         <tr>
    2704. 

  2704.             <th>@_icon-font-color-hover</th>
    2705. 

  2705.             <td>@dropdown-toggle-icon__font-color-hover</td>
    2706. 

  2706.             <td class="vars_value">@button-icon__hover__font-color</td>
    2707. 

  2707.             <td class="vars_value">'' | false | value</td>
    2708. 

  2708.             <td>Drop-down toggle icon hovered color</td>
    2709. 

  2709.         </tr>
    2710. 

  2710.         <tr>
    2711. 

  2711.             <th>@_icon-font-color-active</th>
    2712. 

  2712.             <td>@dropdown-toggle-icon__font-color-active</td>
    2713. 

  2713.             <td class="vars_value">@button-icon__active__font-color</td>
    2714. 

  2714.             <td class="vars_value">'' | false | value</td>
    2715. 

  2715.             <td>Drop-down toggle icon active color</td>
    2716. 

  2716.         </tr>
    2717. 

  2717.         <tr>
    2718. 

  2718.             <th>@_icon-font-margin</th>
    2719. 

  2719.             <td>@dropdown-toggle-icon__font-margin</td>
    2720. 

  2720.             <td class="vars_value">@button-icon__margin</td>
    2721. 

  2721.             <td class="vars_value">'' | false | value</td>
    2722. 

  2722.             <td>Drop-down toggle icon margin</td>
    2723. 

  2723.         </tr>
    2724. 

  2724.         <tr>
    2725. 

  2725.             <th>@_icon-font-position</th>
    2726. 

  2726.             <td>@dropdown-toggle-icon__position</td>
    2727. 

  2727.             <td class="vars_value">after</td>
    2728. 

  2728.             <td class="vars_value">before | after</td>
    2729. 

  2729.             <td>Drop-down toggle icon position</td>
    2730. 

  2730.         </tr>
    2731. 

  2731.         <tr>
    2732. 

  2732.             <th>@_icon-font-vertical-align</th>
    2733. 

  2733.             <td>@dropdown-toggle-icon__font-vertical-align</td>
    2734. 

  2734.             <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
    2735. 

  2735.             <td class="vars_value">'' | false | value</td>
    2736. 

  2736.             <td>Drop-down toggle icon vertical align</td>
    2737. 

  2737.         </tr>
    2738. 

  2738.         <tr>
    2739. 

  2739.             <th>@_icon-font-text-hide</th>
    2740. 

  2740.             <td>@dropdown-toggle-icon__text-hide</td>
    2741. 

  2741.             <td class="vars_value">@button-icon__text-hide</td>
    2742. 

  2742.             <td class="vars_value">true | false</td>
    2743. 

  2743.             <td>Text in the tag, that contains icon, is hidden</td>
    2744. 

  2744.         </tr>
    2745. 

  2745.     </table>
    2746. 

  2746.   </pre>
    2747. 

  2747. 

  2748. <h2 id="split-button-variables">Split button variables</h2>
    2749. 

  2749. <h4 id="the-codelibdropdownsplitcode-mixin-variables">The <code>.lib-dropdown-split()</code> mixin variables</h4>
    2750. 

  2750.   <pre>
    2751. 

  2751.     <table>
    2752. 

  2752.         <tr>
    2753. 

  2753.             <th class="vars_head">Mixin variable</th>
    2754. 

  2754.             <th class="vars_head">Global variable</th>
    2755. 

  2755.             <th class="vars_head">Default value</th>
    2756. 

  2756.             <th class="vars_head">Allowed values</th>
    2757. 

  2757.             <th class="vars_head">Comment</th>
    2758. 

  2758.         </tr>
    2759. 

  2759.         <tr>
    2760. 

  2760.             <th>@_toggle-selector</th>
    2761. 

  2761.             <td>-</td>
    2762. 

  2762.             <td class="vars_value">~".action.toggle"</td>
    2763. 

  2763.             <td class="vars_value">selector</td>
    2764. 

  2764.             <td>Split button action toggle selector</td>
    2765. 

  2765.         </tr>
    2766. 

  2766.         <tr>
    2767. 

  2767.             <th>@_options-selector</th>
    2768. 

  2768.             <td>-</td>
    2769. 

  2769.             <td class="vars_value">~"ul.dropdown"</td>
    2770. 

  2770.             <td class="vars_value">selector</td>
    2771. 

  2771.             <td>Split button options selector</td>
    2772. 

  2772.         </tr>
    2773. 

  2773.         <tr>
    2774. 

  2774.             <th>@_button-selector</th>
    2775. 

  2775.             <td>-</td>
    2776. 

  2776.             <td class="vars_value">~".action.split"</td>
    2777. 

  2777.             <td class="vars_value">selector</td>
    2778. 

  2778.             <td>Split button selector</td>
    2779. 

  2779.         </tr>
    2780. 

  2780.         <tr>
    2781. 

  2781.             <th>@_dropdown-split-actions-padding</th>
    2782. 

  2782.             <td>@dropdown-split-actions__padding</td>
    2783. 

  2783.             <td class="vars_value">0 @indent__xs</td>
    2784. 

  2784.             <td class="vars_value">'' | false | value</td>
    2785. 

  2785.             <td>Split button toggle element padding</td>
    2786. 

  2786.         </tr>
    2787. 

  2787.         <tr>
    2788. 

  2788.             <th>@_dropdown-split-button-actions-padding</th>
    2789. 

  2789.             <td>@dropdown-split-button__actions__padding</td>
    2790. 

  2790.             <td class="vars_value">false</td>
    2791. 

  2791.             <td class="vars_value">'' | false | value</td>
    2792. 

  2792.             <td>Split button actions padding</td>
    2793. 

  2793.         </tr>
    2794. 

  2794.         <tr>
    2795. 

  2795.             <th>@_dropdown-split-toggle-actions-padding</th>
    2796. 

  2796.             <td>@dropdown-split-toggle__actions__padding</td>
    2797. 

  2797.             <td class="vars_value">4px @indent__xs</td>
    2798. 

  2798.             <td class="vars_value">'' | false | value</td>
    2799. 

  2799.             <td>Split button toggle padding</td>
    2800. 

  2800.         </tr>
    2801. 

  2801.         <tr>
    2802. 

  2802.             <th>@_dropdown-split-toggle-position</th>
    2803. 

  2803.             <td>@dropdown-split-toggle__position</td>
    2804. 

  2804.             <td class="vars_value">right</td>
    2805. 

  2805.             <td class="vars_value">'' | false | value</td>
    2806. 

  2806.             <td>Split button toggle element position</td>
    2807. 

  2807.         </tr>
    2808. 

  2808.         <tr>
    2809. 

  2809.             <th colspan="5" class="vars_section">Drop-down list</th>
    2810. 

  2810.         </tr>
    2811. 

  2811.         <tr>
    2812. 

  2812.             <th>@_dropdown-split-list-min-width</th>
    2813. 

  2813.             <td>@dropdown-split-list__min-width</td>
    2814. 

  2814.             <td class="vars_value">100%</td>
    2815. 

  2815.             <td class="vars_value">'' | false | value</td>
    2816. 

  2816.             <td>Split button min width</td>
    2817. 

  2817.         </tr>
    2818. 

  2818.         <tr>
    2819. 

  2819.             <th>@_dropdown-split-list-width</th>
    2820. 

  2820.             <td>@dropdown-split-list__width</td>
    2821. 

  2821.             <td class="vars_value">100%</td>
    2822. 

  2822.             <td class="vars_value">'' | false | value</td>
    2823. 

  2823.             <td>Split button width</td>
    2824. 

  2824.         </tr>
    2825. 

  2825.         <tr>
    2826. 

  2826.             <th>@_dropdown-split-list-height</th>
    2827. 

  2827.             <td>@dropdown-split-list__height</td>
    2828. 

  2828.             <td class="vars_value">false</td>
    2829. 

  2829.             <td class="vars_value">'' | false | value</td>
    2830. 

  2830.             <td>Split button height</td>
    2831. 

  2831.         </tr>
    2832. 

  2832.         <tr>
    2833. 

  2833.             <th>@_dropdown-split-list-margin-top</th>
    2834. 

  2834.             <td>@dropdown-split-list__margin-top</td>
    2835. 

  2835.             <td class="vars_value">4px</td>
    2836. 

  2836.             <td class="vars_value">'' | false | value</td>
    2837. 

  2837.             <td>Split button margin-top</td>
    2838. 

  2838.         </tr>
    2839. 

  2839.         <tr>
    2840. 

  2840.             <th>@_dropdown-split-list-position-top</th>
    2841. 

  2841.             <td>@dropdown-split-list__position-top</td>
    2842. 

  2842.             <td class="vars_value">@dropdown-list__position-top</td>
    2843. 

  2843.             <td class="vars_value">'' | false | value</td>
    2844. 

  2844.             <td>Split button drop-down list position: top</td>
    2845. 

  2845.         </tr>
    2846. 

  2846.         <tr>
    2847. 

  2847.             <th>@_dropdown-split-list-position-right</th>
    2848. 

  2848.             <td>@dropdown-split-list__position-right</td>
    2849. 

  2849.             <td class="vars_value">@dropdown-list__position-right</td>
    2850. 

  2850.             <td class="vars_value">'' | false | value</td>
    2851. 

  2851.             <td>Split button drop-down list position: right</td>
    2852. 

  2852.         </tr>
    2853. 

  2853.         <tr>
    2854. 

  2854.             <th>@_dropdown-split-list-position-bottom</th>
    2855. 

  2855.             <td>@dropdown-split-list__position-bottom</td>
    2856. 

  2856.             <td class="vars_value">@dropdown-list__position-bottom</td>
    2857. 

  2857.             <td class="vars_value">'' | false | value</td>
    2858. 

  2858.             <td>Split button drop-down list position: bottom</td>
    2859. 

  2859.         </tr>
    2860. 

  2860.         <tr>
    2861. 

  2861.             <th>@_dropdown-split-list-position-left</th>
    2862. 

  2862.             <td>@dropdown-split-list__position-left</td>
    2863. 

  2863.             <td class="vars_value">@dropdown-list__position-left</td>
    2864. 

  2864.             <td class="vars_value">'' | false | value</td>
    2865. 

  2865.             <td>Split button drop-down list position: left</td>
    2866. 

  2866.         </tr>
    2867. 

  2867.         <tr>
    2868. 

  2868.             <th>@_dropdown-split-list-background</th>
    2869. 

  2869.             <td>@dropdown-split-list__background</td>
    2870. 

  2870.             <td class="vars_value">@dropdown-list__background</td>
    2871. 

  2871.             <td class="vars_value">'' | false | value</td>
    2872. 

  2872.             <td>Split button drop-down background</td>
    2873. 

  2873.         </tr>
    2874. 

  2874.         <tr>
    2875. 

  2875.             <th>@_dropdown-split-list-border</th>
    2876. 

  2876.             <td>@dropdown-split-list__border</td>
    2877. 

  2877.             <td class="vars_value">@dropdown-list__border</td>
    2878. 

  2878.             <td class="vars_value">'' | false | value</td>
    2879. 

  2879.             <td>Split button drop-down border</td>
    2880. 

  2880.         </tr>
    2881. 

  2881.         <tr>
    2882. 

  2882.             <th>@_dropdown-split-list-pointer</th>
    2883. 

  2883.             <td>@dropdown-split-list__pointer</td>
    2884. 

  2884.             <td class="vars_value">@dropdown-list__pointer</td>
    2885. 

  2885.             <td class="vars_value">'' | false | value</td>
    2886. 

  2886.             <td>Split button drop-down list pointer</td>
    2887. 

  2887.         </tr>
    2888. 

  2888.         <tr>
    2889. 

  2889.             <th>@_dropdown-split-list-pointer-border</th>
    2890. 

  2890.             <td>@dropdown-split-list__pointer-border</td>
    2891. 

  2891.             <td class="vars_value">@dropdown-list-pointer__border</td>
    2892. 

  2892.             <td class="vars_value">'' | false | value</td>
    2893. 

  2893.             <td>Split button drop-down list pointer border</td>
    2894. 

  2894.         </tr>
    2895. 

  2895.         <tr>
    2896. 

  2896.             <th>@_dropdown-split-button-border-radius-fix</th>
    2897. 

  2897.             <td>@dropdown-split-button__border-radius-fix</td>
    2898. 

  2898.             <td class="vars_value">false</td>
    2899. 

  2899.             <td class="vars_value">true | false</td>
    2900. 

  2900.             <td>Split button drop-down list item border</td>
    2901. 

  2901.         </tr>
    2902. 

  2902.         <tr>
    2903. 

  2903.             <th>@_dropdown-split-list-item-border</th>
    2904. 

  2904.             <td>@dropdown-split-list__item-border</td>
    2905. 

  2905.             <td class="vars_value">@dropdown-list-item__border</td>
    2906. 

  2906.             <td class="vars_value">'' | false | value</td>
    2907. 

  2907.             <td>Split button drop-down list item border</td>
    2908. 

  2908.         </tr>
    2909. 

  2909.         <tr>
    2910. 

  2910.             <th>@_dropdown-split-list-item-padding</th>
    2911. 

  2911.             <td>@dropdown-split-list__item-padding</td>
    2912. 

  2912.             <td class="vars_value">@dropdown-list-item__padding</td>
    2913. 

  2913.             <td class="vars_value">'' | false | value</td>
    2914. 

  2914.             <td>Split button drop-down list item padding</td>
    2915. 

  2915.         </tr>
    2916. 

  2916.         <tr>
    2917. 

  2917.             <th>@_dropdown-split-list-item-margin</th>
    2918. 

  2918.             <td>@dropdown-split-list__item-margin</td>
    2919. 

  2919.             <td class="vars_value">@dropdown-list-item__margin</td>
    2920. 

  2920.             <td class="vars_value">'' | false | value</td>
    2921. 

  2921.             <td>Split button drop-down list item margin</td>
    2922. 

  2922.         </tr>
    2923. 

  2923.         <tr>
    2924. 

  2924.             <th>@_dropdown-split-list-item-hover</th>
    2925. 

  2925.             <td>@dropdown-split-list__item-hover</td>
    2926. 

  2926.             <td class="vars_value">@dropdown-list-item__hover</td>
    2927. 

  2927.             <td class="vars_value">'' | false | value</td>
    2928. 

  2928.             <td>Split button drop-down list item hovered background</td>
    2929. 

  2929.         </tr>
    2930. 

  2930.         <tr>
    2931. 

  2931.             <th>@_dropdown-split-list-pointer-position</th>
    2932. 

  2932.             <td>@dropdown-split-list__pointer-position</td>
    2933. 

  2933.             <td class="vars_value">right</td>
    2934. 

  2934.             <td class="vars_value">left | right</td>
    2935. 

  2935.             <td>Split button drop-down list pointer position</td>
    2936. 

  2936.         </tr>
    2937. 

  2937.         <tr>
    2938. 

  2938.             <th>@_dropdown-split-list-pointer-position-top</th>
    2939. 

  2939.             <td>@dropdown-split-list__pointer-position-top</td>
    2940. 

  2940.             <td class="vars_value">-12px</td>
    2941. 

  2941.             <td class="vars_value">'' | false | value</td>
    2942. 

  2942.             <td>Split button drop-down list pointer position top</td>
    2943. 

  2943.         </tr>
    2944. 

  2944.         <tr>
    2945. 

  2945.             <th>@_dropdown-split-list-pointer-position-left-right</th>
    2946. 

  2946.             <td>@dropdown-split-list__pointer-position-left-right</td>
    2947. 

  2947.             <td class="vars_value">10px</td>
    2948. 

  2948.             <td class="vars_value">'' | false | value</td>
    2949. 

  2949.             <td>Split button drop-down list pointer left or right position</td>
    2950. 

  2950.         </tr>
    2951. 

  2951.         <tr>
    2952. 

  2952.             <th>@_dropdown-split-list-shadow</th>
    2953. 

  2953.             <td>@dropdown-split-list__shadow</td>
    2954. 

  2954.             <td class="vars_value">@dropdown-list__shadow</td>
    2955. 

  2955.             <td class="vars_value">'' | false | value</td>
    2956. 

  2956.             <td>Split button drop-down list shadow</td>
    2957. 

  2957.         </tr>
    2958. 

  2958.         <tr>
    2959. 

  2959.             <th>@_dropdown-split-list-z-index</th>
    2960. 

  2960.             <td>@dropdown-split-list__z-index</td>
    2961. 

  2961.             <td class="vars_value">@dropdown-list__z-index</td>
    2962. 

  2962.             <td class="vars_value">'' | false | value</td>
    2963. 

  2963.             <td>Split button drop-down list z-index</td>
    2964. 

  2964.         </tr>
    2965. 

  2965.         <tr>
    2966. 

  2966.             <th colspan="5" class="vars_section">Dropdown icon</th>
    2967. 

  2967.         </tr>
    2968. 

  2968.         <tr>
    2969. 

  2969.             <th>@_dropdown-split-toggle-icon-content</th>
    2970. 

  2970.             <td>@dropdown-split-toggle-icon__content</td>
    2971. 

  2971.             <td class="vars_value">@dropdown-toggle-icon__content</td>
    2972. 

  2972.             <td class="vars_value">'' | false | value</td>
    2973. 

  2973.             <td>Split button drop-down toggle icon - default state</td>
    2974. 

  2974.         </tr>
    2975. 

  2975.         <tr>
    2976. 

  2976.             <th nowrap="nowrap">@_dropdown-split-toggle-active-icon-content</th>
    2977. 

  2977.             <td>@dropdown-split-toggle-icon__active__content</td>
    2978. 

  2978.             <td class="vars_value" nowrap="nowrap">@dropdown-toggle-icon__active__content</td>
    2979. 

  2979.             <td class="vars_value">'' | false | value</td>
    2980. 

  2980.             <td>Split button drop-down toggle icon - active state</td>
    2981. 

  2981.         </tr>
    2982. 

  2982.         <tr>
    2983. 

  2983.             <th>@_icon-font</th>
    2984. 

  2984.             <td>@dropdown-split-toggle-icon__font</td>
    2985. 

  2985.             <td class="vars_value">@button-icon__font</td>
    2986. 

  2986.             <td class="vars_value">'' | false | value</td>
    2987. 

  2987.             <td>Split button drop-down toggle icon font</td>
    2988. 

  2988.         </tr>
    2989. 

  2989.         <tr>
    2990. 

  2990.             <th>@_icon-font-size</th>
    2991. 

  2991.             <td>@dropdown-split-toggle-icon__font-size</td>
    2992. 

  2992.             <td class="vars_value">@button-icon__font-size</td>
    2993. 

  2993.             <td class="vars_value">'' | false | value</td>
    2994. 

  2994.             <td>Split button drop-down toggle icon font size</td>
    2995. 

  2995.         </tr>
    2996. 

  2996.         <tr>
    2997. 

  2997.             <th>@_icon-font-line-height</th>
    2998. 

  2998.             <td>@dropdown-split-toggle-icon__font-line-height</td>
    2999. 

  2999.             <td class="vars_value">@button-icon__line-height</td>
    3000. 

  3000.             <td class="vars_value">'' | false | value</td>
    3001. 

  3001.             <td>Split button drop-down toggle icon line height</td>
    3002. 

  3002.         </tr>
    3003. 

  3003.         <tr>
    3004. 

  3004.             <th>@_icon-font-color</th>
    3005. 

  3005.             <td>@dropdown-split-toggle-icon__font-color</td>
    3006. 

  3006.             <td class="vars_value">@button-icon__color</td>
    3007. 

  3007.             <td class="vars_value">'' | false | value</td>
    3008. 

  3008.             <td>Split button drop-down toggle icon color</td>
    3009. 

  3009.         </tr>
    3010. 

  3010.         <tr>
    3011. 

  3011.             <th>@_icon-font-color-hover</th>
    3012. 

  3012.             <td>@dropdown-split-toggle-icon__font-color-hover</td>
    3013. 

  3013.             <td class="vars_value">@button-icon__hover__font-color</td>
    3014. 

  3014.             <td class="vars_value">'' | false | value</td>
    3015. 

  3015.             <td>Split button drop-down toggle icon hovered color</td>
    3016. 

  3016.         </tr>
    3017. 

  3017.         <tr>
    3018. 

  3018.             <th>@_icon-font-color-active</th>
    3019. 

  3019.             <td>@dropdown-split-toggle-icon__font-color-active</td>
    3020. 

  3020.             <td class="vars_value">@button-icon__active__font-color</td>
    3021. 

  3021.             <td class="vars_value">'' | false | value</td>
    3022. 

  3022.             <td>Split button drop-down toggle icon active color</td>
    3023. 

  3023.         </tr>
    3024. 

  3024.         <tr>
    3025. 

  3025.             <th>@_icon-font-margin</th>
    3026. 

  3026.             <td>@dropdown-split-toggle-icon__font-margin</td>
    3027. 

  3027.             <td class="vars_value">@button-icon__margin</td>
    3028. 

  3028.             <td class="vars_value">'' | false | value</td>
    3029. 

  3029.             <td>Split button drop-down toggle icon margin</td>
    3030. 

  3030.         </tr>
    3031. 

  3031.         <tr>
    3032. 

  3032.             <th>@_icon-font-position</th>
    3033. 

  3033.             <td>@dropdown-split-toggle-icon__position</td>
    3034. 

  3034.             <td class="vars_value">after</td>
    3035. 

  3035.             <td class="vars_value">before | after</td>
    3036. 

  3036.             <td>Split button drop-down toggle icon position</td>
    3037. 

  3037.         </tr>
    3038. 

  3038.         <tr>
    3039. 

  3039.             <th>@_icon-font-vertical-align</th>
    3040. 

  3040.             <td>@dropdown-split-toggle-icon__font-vertical-align</td>
    3041. 

  3041.             <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
    3042. 

  3042.             <td class="vars_value">'' | false | value</td>
    3043. 

  3043.             <td>Split button drop-down toggle icon vertical align</td>
    3044. 

  3044.         </tr>
    3045. 

  3045.         <tr>
    3046. 

  3046.             <th>@_icon-font-text-hide</th>
    3047. 

  3047.             <td>@dropdown-split-toggle-icon__text-hide</td>
    3048. 

  3048.             <td class="vars_value">@button-icon__text-hide</td>
    3049. 

  3049.             <td class="vars_value">true | false</td>
    3050. 

  3050.             <td>The text in the toggle tag is hidden</td>
    3051. 

  3051.         </tr>
    3052. 

  3052.     </table>
    3053. 

  3053.   </pre>
    3054. 

  3054. 

  3055. <h2 id="forms-variables">Forms variables</h2>
    3056. 

  3056. <h4 id="the-codelibformfieldsetcode-mixin-variables">The <code>.lib-form-fieldset()</code> mixin variables</h4>
    3057. 

  3057.   <pre>
    3058. 

  3058.     <table>
    3059. 

  3059.         <tr>
    3060. 

  3060.             <th class="vars_head">Mixin variable</th>
    3061. 

  3061.             <th class="vars_head">Global variable</th>
    3062. 

  3062.             <th class="vars_head">Default value</th>
    3063. 

  3063.             <th class="vars_head">Comment</th>
    3064. 

  3064.         </tr>
    3065. 

  3065.         <tr>
    3066. 

  3066.             <th>@_border</th>
    3067. 

  3067.             <td class="vars_value">@form-fieldset__border</td>
    3068. 

  3068.             <td class="vars_value">0</td>
    3069. 

  3069.             <td>Fieldset border</td>
    3070. 

  3070.         </tr>
    3071. 

  3071.         <tr>
    3072. 

  3072.             <th>@_margin</th>
    3073. 

  3073.             <td class="vars_value">@form-fieldset__margin</td>
    3074. 

  3074.             <td class="vars_value"> 0 0 @indent__xl</td>
    3075. 

  3075.             <td>Fieldset margin</td>
    3076. 

  3076.         </tr>
    3077. 

  3077.         <tr>
    3078. 

  3078.             <th>@_padding</th>
    3079. 

  3079.             <td class="vars_value">@form-fieldset__padding</td>
    3080. 

  3080.             <td class="vars_value">0</td>
    3081. 

  3081.             <td>Fieldset padding</td>
    3082. 

  3082.         </tr>
    3083. 

  3083.         <tr>
    3084. 

  3084.             <th>@_legend-color</th>
    3085. 

  3085.             <td class="vars_value">@form-fieldset-legend__color</td>
    3086. 

  3086.             <td class="vars_value">false</td>
    3087. 

  3087.             <td>Legend color</td>
    3088. 

  3088.         </tr>
    3089. 

  3089.         <tr>
    3090. 

  3090.             <th>@_legend-font-size</th>
    3091. 

  3091.             <td class="vars_value">@form-fieldset-legend__font-size</td>
    3092. 

  3092.             <td class="vars_value">20px</td>
    3093. 

  3093.             <td>Legend font size</td>
    3094. 

  3094.         </tr>
    3095. 

  3095.         <tr>
    3096. 

  3096.             <th>@_legend-font-family</th>
    3097. 

  3097.             <td class="vars_value">@form-fieldset-legend__font-family</td>
    3098. 

  3098.             <td class="vars_value">false</td>
    3099. 

  3099.             <td>Legend font family</td>
    3100. 

  3100.         </tr>
    3101. 

  3101.         <tr>
    3102. 

  3102.             <th>@_legend-font-weight</th>
    3103. 

  3103.             <td class="vars_value">@form-fieldset-legend__font-weight</td>
    3104. 

  3104.             <td class="vars_value">false</td>
    3105. 

  3105.             <td>Legend font weight</td>
    3106. 

  3106.         </tr>
    3107. 

  3107.         <tr>
    3108. 

  3108.             <th>@_legend-font-style</th>
    3109. 

  3109.             <td class="vars_value">@form-fieldset-legend__font-style</td>
    3110. 

  3110.             <td class="vars_value">false</td>
    3111. 

  3111.             <td>Legend font style</td>
    3112. 

  3112.         </tr>
    3113. 

  3113.         <tr>
    3114. 

  3114.             <th>@_legend-line-height</th>
    3115. 

  3115.             <td class="vars_value">@form-fieldset-legend__line-height</td>
    3116. 

  3116.             <td class="vars_value">1.2</td>
    3117. 

  3117.             <td>Legend line height</td>
    3118. 

  3118.         </tr>
    3119. 

  3119.         <tr>
    3120. 

  3120.             <th>@_legend-margin</th>
    3121. 

  3121.             <td class="vars_value">@form-fieldset-legend__margin</td>
    3122. 

  3122.             <td class="vars_value">0 0 @indent__m</td>
    3123. 

  3123.             <td>Legend margin</td>
    3124. 

  3124.         </tr>
    3125. 

  3125.         <tr>
    3126. 

  3126.             <th>@_legend-padding</th>
    3127. 

  3127.             <td class="vars_value">@form-fieldset-legend__padding</td>
    3128. 

  3128.             <td class="vars_value">0</td>
    3129. 

  3129.             <td>Legend padding</td>
    3130. 

  3130.         </tr>
    3131. 

  3131.         <tr>
    3132. 

  3132.             <th>@_legend-width</th>
    3133. 

  3133.             <td class="vars_value">@form-fieldset-legend__width</td>
    3134. 

  3134.             <td class="vars_value">false</td>
    3135. 

  3135.             <td>Legend width</td>
    3136. 

  3136.         </tr>
    3137. 

  3137.     </table>
    3138. 

  3138.   </pre>
    3139. 

  3139. 

  3140. <h4 id="the-codelibformfieldcode-mixin-variables">The <code>.lib-form-field()</code> mixin variables</h4>
    3141. 

  3141.   <pre>
    3142. 

  3142.     <table>
    3143. 

  3143.         <tr>
    3144. 

  3144.             <th class="vars_head">Mixin variable</th>
    3145. 

  3145.             <th class="vars_head">Global variable</th>
    3146. 

  3146.             <th class="vars_head">Default values [Allowed values]</th>
    3147. 

  3147.             <th class="vars_head">Comment</th>
    3148. 

  3148.         </tr>
    3149. 

  3149.         <tr>
    3150. 

  3150.             <th>@_type</th>
    3151. 

  3151.             <td class="vars_value">@form-field-type</td>
    3152. 

  3152.             <td class="vars_value">inline [inline | block]</td>
    3153. 

  3153.             <td>How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control</td>
    3154. 

  3154.         </tr>
    3155. 

  3155.         <tr>
    3156. 

  3156.             <th>@_border</th>
    3157. 

  3157.             <td class="vars_value">@form-field__border</td>
    3158. 

  3158.             <td class="vars_value">false</td>
    3159. 

  3159.             <td>Border of the &lt;div class=&quot;field&quot;&gt; element</td>
    3160. 

  3160.         </tr>
    3161. 

  3161.         <tr>
    3162. 

  3162.             <th>@_column</th>
    3163. 

  3163.             <td class="vars_value">@form-field-column</td>
    3164. 

  3164.             <td class="vars_value">false [true | false]</td>
    3165. 

  3165.             <td>Form fields are displayed in columns</td>
    3166. 

  3166.         </tr>
    3167. 

  3167.         <tr>
    3168. 

  3168.             <th>@_column-padding</th>
    3169. 

  3169.             <td class="vars_value">@form-field-column__padding</td>
    3170. 

  3170.             <td class="vars_value">0 12px 0 0</td>
    3171. 

  3171.             <td>Form fields column padding</td>
    3172. 

  3172.         </tr>
    3173. 

  3173.         <tr>
    3174. 

  3174.             <th>@_column-number</th>
    3175. 

  3175.             <td class="vars_value">@form-field-column__number</td>
    3176. 

  3176.             <td class="vars_value">2</td>
    3177. 

  3177.             <td>Form fields number of columns</td>
    3178. 

  3178.         </tr>
    3179. 

  3179.         <tr>
    3180. 

  3180.             <th>@_type-block-margin</th>
    3181. 

  3181.             <td class="vars_value">@form-field-type-block__margin</td>
    3182. 

  3182.             <td class="vars_value">0 0 @form-field__vertical-indent</td>
    3183. 

  3183.             <td>Form fields margin if @form-field-type set to is 'block'</td>
    3184. 

  3184.         </tr>
    3185. 

  3185.         <tr>
    3186. 

  3186.             <th>@_type-inline-margin</th>
    3187. 

  3187.             <td class="vars_value">@form-field-type-inline__margin</td>
    3188. 

  3188.             <td class="vars_value">0 0 @form-field__vertical-indent</td>
    3189. 

  3189.             <td>Form fields margin if @form-field-type is set to 'inline'</td>
    3190. 

  3190.         </tr>
    3191. 

  3191.         <tr>
    3192. 

  3192.             <th colspan="4" class="vars_section">Form field label</th>
    3193. 

  3193.         </tr>
    3194. 

  3194.         <tr>
    3195. 

  3195.             <th>@_label-color</th>
    3196. 

  3196.             <td class="vars_value">@form-field-label__align</td>
    3197. 

  3197.             <td class="vars_value">false</td>
    3198. 

  3198.             <td>Field label text color</td>
    3199. 

  3199.         </tr>
    3200. 

  3200.         <tr>
    3201. 

  3201.             <th>@_label-color</th>
    3202. 

  3202.             <td class="vars_value">@form-field-label__color</td>
    3203. 

  3203.             <td class="vars_value">false</td>
    3204. 

  3204.             <td>Field label text color</td>
    3205. 

  3205.         </tr>
    3206. 

  3206.         <tr>
    3207. 

  3207.             <th>@_label-font-size</th>
    3208. 

  3208.             <td class="vars_value">@form-field-label__font-size</td>
    3209. 

  3209.             <td class="vars_value">false</td>
    3210. 

  3210.             <td>Field label font size</td>
    3211. 

  3211.         </tr>
    3212. 

  3212.         <tr>
    3213. 

  3213.             <th>@_label-font-family</th>
    3214. 

  3214.             <td class="vars_value">@form-field-label__font-family</td>
    3215. 

  3215.             <td class="vars_value">false</td>
    3216. 

  3216.             <td>Field label font family</td>
    3217. 

  3217.         </tr>
    3218. 

  3218.         <tr>
    3219. 

  3219.             <th>@_label-font-weight</th>
    3220. 

  3220.             <td class="vars_value">@form-field-label__font-weight</td>
    3221. 

  3221.             <td class="vars_value">@font-weight__bold</td>
    3222. 

  3222.             <td>Field label font weight</td>
    3223. 

  3223.         </tr>
    3224. 

  3224.         <tr>
    3225. 

  3225.             <th>@_label-font-style</th>
    3226. 

  3226.             <td class="vars_value">@form-field-label__font-style</td>
    3227. 

  3227.             <td class="vars_value">false</td>
    3228. 

  3228.             <td>Field label font style</td>
    3229. 

  3229.         </tr>
    3230. 

  3230.         <tr>
    3231. 

  3231.             <th>@_label-line-height</th>
    3232. 

  3232.             <td class="vars_value">@form-field-label__line-height</td>
    3233. 

  3233.             <td class="vars_value">false</td>
    3234. 

  3234.             <td>Field label line height</td>
    3235. 

  3235.         </tr>
    3236. 

  3236.         <tr>
    3237. 

  3237.             <th>@_type-block-label-margin</th>
    3238. 

  3238.             <td class="vars_value">@form-field-type-label-block__margin</td>
    3239. 

  3239.             <td class="vars_value">0 0 @indent__xs</td>
    3240. 

  3240.             <td>Field label margin if @form-field-type is set to 'block'</td>
    3241. 

  3241.         </tr>
    3242. 

  3242.         <tr>
    3243. 

  3243.             <th>@_type-inline-label-padding</th>
    3244. 

  3244.             <td class="vars_value">@form-field-type-label-inline__padding</td>
    3245. 

  3245.             <td class="vars_value" nowrap>@form-field-type-label-inline__padding-top 15px 0 0</td>
    3246. 

  3246.             <td>Field label padding if @form-field-type is set to 'inline'</td>
    3247. 

  3247.         </tr>
    3248. 

  3248.         <tr>
    3249. 

  3249.             <th>@_type-inline-label-width</th>
    3250. 

  3250.             <td class="vars_value">@form-field-type-label-inline__width</td>
    3251. 

  3251.             <td class="vars_value">25.8%</td>
    3252. 

  3252.             <td>Field label width if @form-field-type is set to 'inline'</td>
    3253. 

  3253.         </tr>
    3254. 

  3254.         <tr>
    3255. 

  3255.             <th>@_type-inline-control-width</th>
    3256. 

  3256.             <td class="vars_value">@form-field-type-control-inline__width</td>
    3257. 

  3257.             <td class="vars_value">74.2%</td>
    3258. 

  3258.             <td>Field control width if @form-field-type is set to 'inline'</td>
    3259. 

  3259.         </tr>
    3260. 

  3260.         <tr>
    3261. 

  3261.             <th colspan="4" class="vars_section">Label &quot;required&quot; asterisk</th>
    3262. 

  3262.         </tr>
    3263. 

  3263.         <tr>
    3264. 

  3264.             <th>@_label-asterisk-color</th>
    3265. 

  3265.             <td class="vars_value">@form-field-label-asterisk__color</td>
    3266. 

  3266.             <td class="vars_value">#da370a</td>
    3267. 

  3267.             <td>Label asterisk color</td>
    3268. 

  3268.         </tr>
    3269. 

  3269.         <tr>
    3270. 

  3270.             <th>@_label-asterisk-font-size</th>
    3271. 

  3271.             <td class="vars_value">@form-field-label-asterisk__font-size</td>
    3272. 

  3272.             <td class="vars_value">@font-size__s</td>
    3273. 

  3273.             <td>Label asterisk font size</td>
    3274. 

  3274.         </tr>
    3275. 

  3275.         <tr>
    3276. 

  3276.             <th>@_label-asterisk-font-family</th>
    3277. 

  3277.             <td class="vars_value">@form-field-label-asterisk__font-family</td>
    3278. 

  3278.             <td class="vars_value">false</td>
    3279. 

  3279.             <td>Label asterisk font family</td>
    3280. 

  3280.         </tr>
    3281. 

  3281.         <tr>
    3282. 

  3282.             <th>@_label-asterisk-font-weight</th>
    3283. 

  3283.             <td class="vars_value">@form-field-label-asterisk__font-weight</td>
    3284. 

  3284.             <td class="vars_value">false</td>
    3285. 

  3285.             <td>Label asterisk font weight</td>
    3286. 

  3286.         </tr>
    3287. 

  3287.         <tr>
    3288. 

  3288.             <th>@_label-asterisk-font-style</th>
    3289. 

  3289.             <td class="vars_value">@form-field-label-asterisk__font-style</td>
    3290. 

  3290.             <td class="vars_value">false</td>
    3291. 

  3291.             <td>Label asterisk font style</td>
    3292. 

  3292.         </tr>
    3293. 

  3293.         <tr>
    3294. 

  3294.             <th>@_label-asterisk-line-height</th>
    3295. 

  3295.             <td class="vars_value">@form-field-label-asterisk__line-height</td>
    3296. 

  3296.             <td class="vars_value">false</td>
    3297. 

  3297.             <td>Label asterisk line height</td>
    3298. 

  3298.         </tr>
    3299. 

  3299.         <tr>
    3300. 

  3300.             <th>@_label-asterisk-margin</th>
    3301. 

  3301.             <td class="vars_value">@form-field-label-asterisk__margin</td>
    3302. 

  3302.             <td class="vars_value">0 0 0 @indent__xs</td>
    3303. 

  3303.             <td>Label asterisk margin</td>
    3304. 

  3304.         </tr>
    3305. 

  3305.         <tr>
    3306. 

  3306.             <th colspan="4" class="vars_section">Field note</th>
    3307. 

  3307.         </tr>
    3308. 

  3308.         <tr>
    3309. 

  3309.             <th>@_note-color</th>
    3310. 

  3310.             <td class="vars_value">@form-field-note__color</td>
    3311. 

  3311.             <td class="vars_value">false</td>
    3312. 

  3312.             <td>Field note text color</td>
    3313. 

  3313.         </tr>
    3314. 

  3314.         <tr>
    3315. 

  3315.             <th>@_note-font-size</th>
    3316. 

  3316.             <td class="vars_value">@form-field-note__font-size</td>
    3317. 

  3317.             <td class="vars_value">@font-size__s</td>
    3318. 

  3318.             <td>Field note font size</td>
    3319. 

  3319.         </tr>
    3320. 

  3320.         <tr>
    3321. 

  3321.             <th>@_note-font-family</th>
    3322. 

  3322.             <td class="vars_value">@form-field-note__font-family</td>
    3323. 

  3323.             <td class="vars_value">false</td>
    3324. 

  3324.             <td>Field note font family</td>
    3325. 

  3325.         </tr>
    3326. 

  3326.         <tr>
    3327. 

  3327.             <th>@_note-font-weight</th>
    3328. 

  3328.             <td class="vars_value">@form-field-note__font-weight</td>
    3329. 

  3329.             <td class="vars_value">false</td>
    3330. 

  3330.             <td>Field note font weight</td>
    3331. 

  3331.         </tr>
    3332. 

  3332.         <tr>
    3333. 

  3333.             <th>@_note-font-style</th>
    3334. 

  3334.             <td class="vars_value">@form-field-note__font-style</td>
    3335. 

  3335.             <td class="vars_value">false</td>
    3336. 

  3336.             <td>Field note font style</td>
    3337. 

  3337.         </tr>
    3338. 

  3338.         <tr>
    3339. 

  3339.             <th>@_note-line-height</th>
    3340. 

  3340.             <td class="vars_value">@form-field-note__line-height</td>
    3341. 

  3341.             <td class="vars_value">false</td>
    3342. 

  3342.             <td>Field note line height</td>
    3343. 

  3343.         </tr>
    3344. 

  3344.         <tr>
    3345. 

  3345.             <th>@_note-margin</th>
    3346. 

  3346.             <td class="vars_value">@form-field-note__margin</td>
    3347. 

  3347.             <td class="vars_value">3px 0 0</td>
    3348. 

  3348.             <td>Field note margin</td>
    3349. 

  3349.         </tr>
    3350. 

  3350.         <tr>
    3351. 

  3351.             <th>@_note-padding</th>
    3352. 

  3352.             <td class="vars_value">@form-field-note__padding</td>
    3353. 

  3353.             <td class="vars_value">0</td>
    3354. 

  3354.             <td>Field note padding</td>
    3355. 

  3355.         </tr>
    3356. 

  3356.         <tr>
    3357. 

  3357.             <th>@_note-icon-font-content</th>
    3358. 

  3358.             <td class="vars_value">@form-field-note-icon-font__content</td>
    3359. 

  3359.             <td class="vars_value">@icon-pointer-up</td>
    3360. 

  3360.             <td>Field note icon code</td>
    3361. 

  3361.         </tr>
    3362. 

  3362.         <tr>
    3363. 

  3363.             <th>@_note-icon-font</th>
    3364. 

  3364.             <td class="vars_value">@form-field-note-icon-font</td>
    3365. 

  3365.             <td class="vars_value">@icon-font</td>
    3366. 

  3366.             <td>Field note icon font</td>
    3367. 

  3367.         </tr>
    3368. 

  3368.         <tr>
    3369. 

  3369.             <th>@_note-icon-font-size</th>
    3370. 

  3370.             <td class="vars_value">@form-field-note-icon-font__size</td>
    3371. 

  3371.             <td class="vars_value">@form-field-note__font-size*2</td>
    3372. 

  3372.             <td>Field note icon font size</td>
    3373. 

  3373.         </tr>
    3374. 

  3374.         <tr>
    3375. 

  3375.             <th>@_note-icon-font-line-height</th>
    3376. 

  3376.             <td class="vars_value">@form-field-note-icon-font__line-height</td>
    3377. 

  3377.             <td class="vars_value">@form-field-note__font-size</td>
    3378. 

  3378.             <td>Field note icon line height</td>
    3379. 

  3379.         </tr>
    3380. 

  3380.         <tr>
    3381. 

  3381.             <th>@_note-icon-font-color</th>
    3382. 

  3382.             <td class="vars_value">@form-field-note-icon-font__color</td>
    3383. 

  3383.             <td class="vars_value">@form-field-note__color</td>
    3384. 

  3384.             <td>Field note icon color</td>
    3385. 

  3385.         </tr>
    3386. 

  3386.         <tr>
    3387. 

  3387.             <th>@_note-icon-font-color-hover</th>
    3388. 

  3388.             <td class="vars_value">@form-field-note-icon-font__color-hover</td>
    3389. 

  3389.             <td class="vars_value">false</td>
    3390. 

  3390.             <td>Field note icon hovered color</td>
    3391. 

  3391.         </tr>
    3392. 

  3392.         <tr>
    3393. 

  3393.             <th>@_note-icon-font-color-active</th>
    3394. 

  3394.             <td class="vars_value">@form-field-note-icon-font__color-active</td>
    3395. 

  3395.             <td class="vars_value">false</td>
    3396. 

  3396.             <td>Field note icon active color</td>
    3397. 

  3397.         </tr>
    3398. 

  3398.         <tr>
    3399. 

  3399.             <th>@_note-icon-font-margin</th>
    3400. 

  3400.             <td class="vars_value">@form-field-note-icon-font__margin</td>
    3401. 

  3401.             <td class="vars_value">false</td>
    3402. 

  3402.             <td>Field note icon margin</td>
    3403. 

  3403.         </tr>
    3404. 

  3404.         <tr>
    3405. 

  3405.             <th nowrap="nowrap">@_note-icon-font-vertical-align</th>
    3406. 

  3406.             <td class="vars_value" nowrap="nowrap">@form-field-note-icon-font__vertical-align</td>
    3407. 

  3407.             <td class="vars_value">@icon-font__vertical-align</td>
    3408. 

  3408.             <td>Field note icon vertical align</td>
    3409. 

  3409.         </tr>
    3410. 

  3410.         <tr>
    3411. 

  3411.             <th>@_note-icon-font-position</th>
    3412. 

  3412.             <td class="vars_value">@form-field-note-icon-font__position</td>
    3413. 

  3413.             <td class="vars_value">@icon-font__position [before | after]</td>
    3414. 

  3414.             <td>Field note icon position</td>
    3415. 

  3415.         </tr>
    3416. 

  3416.         <tr>
    3417. 

  3417.             <th>@_note-icon-font-text-hide</th>
    3418. 

  3418.             <td class="vars_value">@form-field-note-icon-font__text-hide</td>
    3419. 

  3419.             <td class="vars_value">@icon-font__text-hide [true | false]</td>
    3420. 

  3420.             <td>Field note icon text hide</td>
    3421. 

  3421.         </tr>
    3422. 

  3422.     </table>
    3423. 

  3423.   </pre>
    3424. 

  3424. 

  3425. <h4 id="the-codelibformhasrequiredcode-mixin-variables">The <code>.lib-form-hasrequired()</code> mixin variables</h4>
    3426. 

  3426.   <pre>
    3427. 

  3427.     <table>
    3428. 

  3428.         <tr>
    3429. 

  3429.             <th class="vars_head">Mixin variable</th>
    3430. 

  3430.             <th class="vars_head">Global variable</th>
    3431. 

  3431.             <th class="vars_head">Default values [Allowed values]</th>
    3432. 

  3432.             <th class="vars_head">Comment</th>
    3433. 

  3433.         </tr>
    3434. 

  3434.         <tr>
    3435. 

  3435.             <th>@_position</th>
    3436. 

  3436.             <td class="vars_value">@form-hasrequired__position</td>
    3437. 

  3437.             <td class="vars_value">top [top | bottom]</td>
    3438. 

  3438.             <td>Position of &quot;required fields&quot; notice</td>
    3439. 

  3439.         </tr>
    3440. 

  3440.         <tr>
    3441. 

  3441.             <th>@_color</th>
    3442. 

  3442.             <td class="vars_value">@form-hasrequired__color</td>
    3443. 

  3443.             <td class="vars_value">@form-field-label-asterisk__color</td>
    3444. 

  3444.             <td>Text color of &quot;required fields&quot; notice</td>
    3445. 

  3445.         </tr>
    3446. 

  3446.         <tr>
    3447. 

  3447.             <th>@_font-size</th>
    3448. 

  3448.             <td class="vars_value">@form-hasrequired__font-size</td>
    3449. 

  3449.             <td class="vars_value">@font-size__s</td>
    3450. 

  3450.             <td>Font size of &quot;required fields&quot; notice</td>
    3451. 

  3451.         </tr>
    3452. 

  3452.         <tr>
    3453. 

  3453.             <th>@_font-family</th>
    3454. 

  3454.             <td class="vars_value">@form-hasrequired__font-family</td>
    3455. 

  3455.             <td class="vars_value">false</td>
    3456. 

  3456.             <td>Font family of &quot;required fields&quot; notice</td>
    3457. 

  3457.         </tr>
    3458. 

  3458.         <tr>
    3459. 

  3459.             <th>@_font-weight</th>
    3460. 

  3460.             <td class="vars_value">@form-hasrequired__font-weight</td>
    3461. 

  3461.             <td class="vars_value">false</td>
    3462. 

  3462.             <td>Font weight of &quot;required fields&quot; notice</td>
    3463. 

  3463.         </tr>
    3464. 

  3464.         <tr>
    3465. 

  3465.             <th>@_font-style</th>
    3466. 

  3466.             <td class="vars_value">@form-hasrequired__font-style</td>
    3467. 

  3467.             <td class="vars_value">false</td>
    3468. 

  3468.             <td>Font style of &quot;required fields&quot; notice</td>
    3469. 

  3469.         </tr>
    3470. 

  3470.         <tr>
    3471. 

  3471.             <th>@_line-height</th>
    3472. 

  3472.             <td class="vars_value">@form-hasrequired__line-height</td>
    3473. 

  3473.             <td class="vars_value">false</td>
    3474. 

  3474.             <td>Line height of &quot;required fields&quot; notice</td>
    3475. 

  3475.         </tr>
    3476. 

  3476.         <tr>
    3477. 

  3477.             <th>@_border</th>
    3478. 

  3478.             <td class="vars_value">@form-hasrequired__border</td>
    3479. 

  3479.             <td class="vars_value">false</td>
    3480. 

  3480.             <td>Border of &quot;required fields&quot; notice</td>
    3481. 

  3481.         </tr>
    3482. 

  3482.         <tr>
    3483. 

  3483.             <th>@_margin</th>
    3484. 

  3484.             <td class="vars_value">@form-hasrequired__margin</td>
    3485. 

  3485.             <td class="vars_value">@indent__s 0 0</td>
    3486. 

  3486.             <td>Margin of &quot;required fields&quot; notice</td>
    3487. 

  3487.         </tr>
    3488. 

  3488.         <tr>
    3489. 

  3489.             <th>@_padding</th>
    3490. 

  3490.             <td class="vars_value">@form-hasrequired__padding</td>
    3491. 

  3491.             <td class="vars_value">false</td>
    3492. 

  3492.             <td>Padding of &quot;required fields&quot; notice</td>
    3493. 

  3493.         </tr>
    3494. 

  3494.     </table>
    3495. 

  3495.   </pre>
    3496. 

  3496. 

  3497. <h4 id="the-codelibformelementinputcoed-mixin-variables">The <code>.lib-form-element-input()</coed> mixin variables</h4>
    3498. 

  3498.   <pre>
    3499. 

  3499.     <table>
    3500. 

  3500.         <tr>
    3501. 

  3501.             <th class="vars_head">Mixin variable</th>
    3502. 

  3502.             <th class="vars_head">Global variable</th>
    3503. 

  3503.             <th class="vars_head">Default value [Allowed value]</th>
    3504. 

  3504.             <th class="vars_head">Comment</th>
    3505. 

  3505.         </tr>
    3506. 

  3506.         <tr>
    3507. 

  3507.             <th>@_type</th>
    3508. 

  3508.             <td class="vars_value">@form-element-input-type</td>
    3509. 

  3509.             <td class="vars_value">'' [input-text | select | textarea | input-radio | input-checkbox]</td>
    3510. 

  3510.             <td>Form control type.<br/><strong>@form-element-input__[]</strong> global variables are used to set up all form elements style. Control-specific global variables use these <strong>@form-element-input__[]</strong> variables by default. Control-specific global variables can be set up separately.<br/><strong>@input-text__[]</strong> is used to set up input-text controls style<br/><strong>@select__[]</strong> is used to set up selects style<br/><strong>@textarea__[]</strong> is used to set up textarea style</td>
    3511. 

  3511.         </tr>
    3512. 

  3512.         <tr>
    3513. 

  3513.             <th>@_background</th>
    3514. 

  3514.             <td class="vars_value">@form-element-input__background<br/>@input-text__background<br/>@selectbackground<br/>@textarea__background</td>
    3515. 

  3515.             <td class="vars_value">@color-white<br/>@form-element-input__background<br/>@form-element-input__background<br/>@form-element-input__background</td>
    3516. 

  3516.             <td>Form control background</td>
    3517. 

  3517.         </tr>
    3518. 

  3518.         <tr>
    3519. 

  3519.             <th>@_border</th>
    3520. 

  3520.             <td class="vars_value">@form-element-input__border<br/>@input-text__border<br/>@select__border<br/>@textarea__border</td>
    3521. 

  3521.             <td class="vars_value" nowrap="nowrap">1px solid @form-element-input__border-color<br/>@form-element-input__border<br/>@form-element-input__border<br/>@form-element-input__border</td>
    3522. 

  3522.             <td>Form control border</td>
    3523. 

  3523.         </tr>
    3524. 

  3524.         <tr>
    3525. 

  3525.             <th>@_border-radius</th>
    3526. 

  3526.             <td class="vars_value" nowrap="nowrap">@form-element-input__border-radius<br/>@input-textborder-radius<br/>@select__border-radius<br/>@textarea__border-radius</td>
    3527. 

  3527.             <td class="vars_value">1px<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius</td>
    3528. 

  3528.             <td>Form control border radius</td>
    3529. 

  3529.         </tr>
    3530. 

  3530.         <tr>
    3531. 

  3531.             <th>@_height</th>
    3532. 

  3532.             <td class="vars_value">@form-element-input__height<br/>@input-text__height<br/>@select__height<br/>@textarea__height</td>
    3533. 

  3533.             <td class="vars_value">32px<br/>@form-element-input__height<br/>@form-element-input__height<br/>auto</td>
    3534. 

  3534.             <td>Form control height</td>
    3535. 

  3535.         </tr>
    3536. 

  3536.         <tr>
    3537. 

  3537.             <th>@_width</th>
    3538. 

  3538.             <td class="vars_value">@form-element-input__width<br/>@input-text__width<br/>@select__width<br/>@textarea__width</td>
    3539. 

  3539.             <td class="vars_value">100%<br/>@form-element-input__width<br/>@form-element-input__width<br/>@form-element-input__width</td>
    3540. 

  3540.             <td>Form control width</td>
    3541. 

  3541.         </tr>
    3542. 

  3542.         <tr>
    3543. 

  3543.             <th>@_margin</th>
    3544. 

  3544.             <td class="vars_value">@form-element-input__margin<br/>@input-text__margin<br/>@select__margin<br/>@textarea__margin</td>
    3545. 

  3545.             <td class="vars_value">false [true | false]<br/>@form-element-input__margin<br/>@form-element-input__margin<br/>0</td>
    3546. 

  3546.             <td>Form control margin</td>
    3547. 

  3547.         </tr>
    3548. 

  3548.         <tr>
    3549. 

  3549.             <th>@_padding</th>
    3550. 

  3550.             <td class="vars_value">@form-element-input__padding<br/>@input-text__padding <br/>@select__padding<br/>@textarea__padding</td>
    3551. 

  3551.             <td class="vars_value">0 9px<br/>@form-element-input__padding<br/>5px 10px 4px<br/>@indent__s</td>
    3552. 

  3552.             <td>Form control padding</td>
    3553. 

  3553.         </tr>
    3554. 

  3554.         <tr>
    3555. 

  3555.             <th>@_vertical-align</th>
    3556. 

  3556.             <td class="vars_value">@form-element-input__vertical-align<br/>@input-text__vertical-align<br/>@select__vertical-align<br/>@textarea__vertical-align</td>
    3557. 

  3557.             <td class="vars_value">baseline<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align</td>
    3558. 

  3558.             <td>Form control vertical align</td>
    3559. 

  3559.         </tr>
    3560. 

  3560.         <tr>
    3561. 

  3561.             <th>@_background-clip</th>
    3562. 

  3562.             <td class="vars_value">@form-element-input__background-clip<br/><br/>@input-text__background-clip<br/>@select__background-clip<br/>@textarea__background-clip</td>
    3563. 

  3563.             <td class="vars_value">padding-box<br/>[padding-box | border-box | content-box]<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip</td>
    3564. 

  3564.             <td>Form control background clip</td>
    3565. 

  3565.         </tr>
    3566. 

  3566.         <tr>
    3567. 

  3567.             <th colspan="4" class="vars_section">Text settings</th>
    3568. 

  3568.         </tr>
    3569. 

  3569.         <tr>
    3570. 

  3570.             <th>@_color</th>
    3571. 

  3571.             <td class="vars_value">@form-element-input__color<br/>@input-text__color<br/>@select__color<br/>@textarea__color</td>
    3572. 

  3572.             <td class="vars_value">false<br/>@form-element-input__color<br/>@form-element-input__color<br/>@form-element-input__color</td>
    3573. 

  3573.             <td>Form control text color</td>
    3574. 

  3574.         </tr>
    3575. 

  3575.         <tr>
    3576. 

  3576.             <th>@_font-size</th>
    3577. 

  3577.             <td class="vars_value">@form-element-input__font-size<br/>@input-text__font-size<br/>@select__font-size<br/>@textarea__font-size</td>
    3578. 

  3578.             <td class="vars_value">@font-size__base<br/>@form-element-input__font-size<br/>@form-element-input__font-size<br/>@form-element-input__font-size</td>
    3579. 

  3579.             <td>Form control font size</td>
    3580. 

  3580.         </tr>
    3581. 

  3581.         <tr>
    3582. 

  3582.             <th>@_font-family</th>
    3583. 

  3583.             <td class="vars_value">@form-element-input__font-family<br/>@input-text__font-family<br/>@select__font-family<br/>@textarea__font-family</td>
    3584. 

  3584.             <td class="vars_value">@font-family__base<br/>@form-element-input__font-family<br/>@form-element-input__font-family<br/>@form-element-input__font-family</td>
    3585. 

  3585.             <td>Form control font family</td>
    3586. 

  3586.         </tr>
    3587. 

  3587.         <tr>
    3588. 

  3588.             <th>@_font-weight</th>
    3589. 

  3589.             <td class="vars_value">@form-element-input__font-weight<br/>@input-text__font-weight<br/>@select__font-weight<br/>@textarea__font-weight</td>
    3590. 

  3590.             <td class="vars_value">false<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight</td>
    3591. 

  3591.             <td>Form control font weight</td>
    3592. 

  3592.         </tr>
    3593. 

  3593.         <tr>
    3594. 

  3594.             <th>@_font-style</th>
    3595. 

  3595.             <td class="vars_value">@form-element-input__font-style<br/>@input-text__font-style<br/>@selectfont-style<br/>@textarea__font-style</td>
    3596. 

  3596.             <td class="vars_value">false<br/>@form-element-input__font-style<br/>@form-element-input__font-style<br/>@form-element-input__font-style</td>
    3597. 

  3597.             <td>Form control font style</td>
    3598. 

  3598.         </tr>
    3599. 

  3599.         <tr>
    3600. 

  3600.             <th>@_line-height</th>
    3601. 

  3601.             <td class="vars_value">@form-element-input__line-height<br/>@input-text__line-height<br/>@select__line-height<br/>@textarea__line-height</td>
    3602. 

  3602.             <td class="vars_value">@line-height__base<br/>@form-element-input__line-height<br/>@form-element-input__line-height<br/>@form-element-input__line-height</td>
    3603. 

  3603.             <td>Form control line height</td>
    3604. 

  3604.         </tr>
    3605. 

  3605.         <tr>
    3606. 

  3606.             <th colspan="4" class="vars_section">Placeholder</th>
    3607. 

  3607.         </tr>
    3608. 

  3608.         <tr>
    3609. 

  3609.             <th>@_placeholder-color</th>
    3610. 

  3610.             <td class="vars_value">@form-element-input-placeholder__color<br/>@input-text-placeholder__color<br/>@select-placeholder__color<br/>@textarea-placeholder__color</td>
    3611. 

  3611.             <td class="vars_value">#c2c2c2<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color</td>
    3612. 

  3612.             <td>Form control placeholder color</td>
    3613. 

  3613.         </tr>
    3614. 

  3614.         <tr>
    3615. 

  3615.             <th nowrap>@_placeholder-font-style</th>
    3616. 

  3616.             <td class="vars_value" nowrap="nowrap">@form-element-input-placeholder__font-style<br/>@inputtext-placeholder-font-style<br/>@select-placeholder__font-style<br/>@textarea-placeholder__font-style</td>
    3617. 

  3617.             <td class="vars_value">@form-element-input__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style</td>
    3618. 

  3618.             <td>Form control placeholder font style</td>
    3619. 

  3619.         </tr>
    3620. 

  3620.         <tr>
    3621. 

  3621.             <th colspan="4" class="vars_section">Disabled element</th>
    3622. 

  3622.         </tr>
    3623. 

  3623.         <tr>
    3624. 

  3624.             <th>@_disabled-background</th>
    3625. 

  3625.             <td class="vars_value" nowrap="nowrap">@form-element-input__disabled__background<br/>@inputtextdisabled-background<br/>@select__disabled__background<br/>@textarea__disabled__background</td>
    3626. 

  3626.             <td class="vars_value">@form-element-input__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background</td>
    3627. 

  3627.             <td>Disabled form element background</td>
    3628. 

  3628.         </tr>
    3629. 

  3629.         <tr>
    3630. 

  3630.             <th>@_disabled-border</th>
    3631. 

  3631.             <td class="vars_value">@form-element-input__disabled__border<br/>@input-text__disabled__border<br/>@select__disabled__border<br/>@textarea__disabled__border</td>
    3632. 

  3632.             <td class="vars_value">@form-element-input__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border</td>
    3633. 

  3633.             <td>Disabled form element border</td>
    3634. 

  3634.         </tr>
    3635. 

  3635.         <tr>
    3636. 

  3636.             <th>@_disabled-opacity</th>
    3637. 

  3637.             <td class="vars_value">@form-element-input__disabled__opacity<br/>@input-text__disabled__opacity<br/>@select__disabled__opacity<br/>@textarea__disabled__opacity</td>
    3638. 

  3638.             <td class="vars_value">.5<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity</td>
    3639. 

  3639.             <td>Disabled form element opacity</td>
    3640. 

  3640.         </tr>
    3641. 

  3641.         <tr>
    3642. 

  3642.             <th>@_disabled-color</th>
    3643. 

  3643.             <td class="vars_value">@form-element-input__disabled__color<br/>@input-text__disabled__color<br/>@select__disabled__color<br/>@textarea__disabled__color</td>
    3644. 

  3644.             <td class="vars_value">@form-element-input__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color</td>
    3645. 

  3645.             <td>Disabled form element text color</td>
    3646. 

  3646.         </tr>
    3647. 

  3647.         <tr>
    3648. 

  3648.             <th nowrap="nowrap">@_disabled-font-style</th>
    3649. 

  3649.             <td class="vars_value">@form-element-input__disabled__font-style<br/>@input-text__disabled__font-style<br/>@select__disabled__font-style<br/>@textarea__disabled__font-style</td>
    3650. 

  3650.             <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style</td>
    3651. 

  3651.             <td>Disabled form element font style</td>
    3652. 

  3652.         </tr>
    3653. 

  3653.         <tr>
    3654. 

  3654.             <th colspan="4" class="vars_section">Focused elements</th>
    3655. 

  3655.         </tr>
    3656. 

  3656.         <tr>
    3657. 

  3657.             <th>@_focus-background</th>
    3658. 

  3658.             <td class="vars_value">@form-element-input__focus__background<br/>@input-text__focus__background<br/>@select__focus__background<br/>@textarea__focus__background</td>
    3659. 

  3659.             <td class="vars_value">@form-element-input__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background</td>
    3660. 

  3660.             <td>Focused form element background</td>
    3661. 

  3661.         </tr>
    3662. 

  3662.         <tr>
    3663. 

  3663.             <th>@_focus-border</th>
    3664. 

  3664.             <td class="vars_value">@form-element-input__focus__border<br/>@input-text__focus__border<br/>@select__focus__border<br/>@textarea__focus__border</td>
    3665. 

  3665.             <td class="vars_value">@form-element-input__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border</td>
    3666. 

  3666.             <td>Focused form element border</td>
    3667. 

  3667.         </tr>
    3668. 

  3668.         <tr>
    3669. 

  3669.             <th>@_focus-color</th>
    3670. 

  3670.             <td class="vars_value">@form-element-input__focus__color<br/>@input-text__focus__color<br/>@select__focus__color<br/>@textarea__focus__color</td>
    3671. 

  3671.             <td class="vars_value">@form-element-input__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color</td>
    3672. 

  3672.             <td>Focused form element color</td>
    3673. 

  3673.         </tr>
    3674. 

  3674.         <tr>
    3675. 

  3675.             <th>@_focus-font-style</th>
    3676. 

  3676.             <td class="vars_value">@form-element-input__focus__font-style<br/>@input-text__focus__font-style<br/>@select__focus__font-style<br/>@textarea__focus__font-style</td>
    3677. 

  3677.             <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style</td>
    3678. 

  3678.             <td>Focused form element font style</td>
    3679. 

  3679.         </tr>
    3680. 

  3680.     </table>
    3681. 

  3681.   </pre>
    3682. 

  3682. 

  3683. <h4 id="the-codelibformelementchoisecode-mixin-variables">The <code>.lib-form-element-choise()</code> mixin variables</h4>
    3684. 

  3684.   <pre>
    3685. 

  3685.     <table>
    3686. 

  3686.         <tr>
    3687. 

  3687.             <th class="vars_head">Mixin variable</th>
    3688. 

  3688.             <th class="vars_head">Global variable</th>
    3689. 

  3689.             <th class="vars_head">Default values [Allowed values]</th>
    3690. 

  3690.             <th class="vars_head">Comment</th>
    3691. 

  3691.         </tr>
    3692. 

  3692.         <tr>
    3693. 

  3693.             <th>@_type</th>
    3694. 

  3694.             <td class="vars_value">@form-element-choice__type</td>
    3695. 

  3695.             <td class="vars_value">'' ['' | radio | checkbox]</td>
    3696. 

  3696.             <td>Choice element type</td>
    3697. 

  3697.         </tr>
    3698. 

  3698.         <tr>
    3699. 

  3699.             <th>@_vertical-align</th>
    3700. 

  3700.             <td class="vars_value">@form-element-choice__vertical-align<br>@input-radio__vertical-align<br>@input-checkbox__vertical-align</td>
    3701. 

  3701.             <td class="vars_value">false<br/>@form-element-choice__vertical-align<br/>@form-element-choice__vertical-align</td>
    3702. 

  3702.             <td>Choice element vertical align</td>
    3703. 

  3703.         </tr>
    3704. 

  3704.         <tr>
    3705. 

  3705.             <th>@_margin</th>
    3706. 

  3706.             <td class="vars_value">@form-element-choice__margin<br>@input-radio__margin<br>@input-checkbox__margin</td>
    3707. 

  3707.             <td class="vars_value">2px @indent__xs 0 0<br/>@form-element-choice__margin<br/>@form-element-choice__margin</td>
    3708. 

  3708.             <td>Choice element margin</td>
    3709. 

  3709.         </tr>
    3710. 

  3710.         <tr>
    3711. 

  3711.             <th>@_disabled-opacity</th>
    3712. 

  3712.             <td class="vars_value">@form-element-choice__disabled__opacity<br>@input-radio__disabled__opacity<br>@input-checkbox__disabled__opacity</td>
    3713. 

  3713.             <td class="vars_value">@form-element-input__disabled__opacity<br/>@form-element-choice__disabled__opacity<br/>@form-element-choice__disabled__opacity</td>
    3714. 

  3714.             <td>Disabled choice element opacity</td>
    3715. 

  3715.         </tr>
    3716. 

  3716.     </table>
    3717. 

  3717.   </pre>
    3718. 

  3718. 

  3719. <h4 id="the-codelibformvalidationnotecode-mixin">The <code>.lib-form-validation-note()</code> mixin</h4>
    3720. 

  3720.   <pre>
    3721. 

  3721.     <table>
    3722. 

  3722.         <tr>
    3723. 

  3723.             <th class="vars_head">Mixin variable</th>
    3724. 

  3724.             <th class="vars_head">Global variable</th>
    3725. 

  3725.             <th class="vars_head">Default values [Allowed values]</th>
    3726. 

  3726.             <th class="vars_head">Comment</th>
    3727. 

  3727.         </tr>
    3728. 

  3728.         <tr>
    3729. 

  3729.             <th>@_note-color</th>
    3730. 

  3730.             <td class="vars_value">@form-validation-note__color-error</td>
    3731. 

  3731.             <td class="vars_value">@error__color</td>
    3732. 

  3732.             <td>Validation note text color</td>
    3733. 

  3733.         </tr>
    3734. 

  3734.         <tr>
    3735. 

  3735.             <th>@_note-font-size</th>
    3736. 

  3736.             <td class="vars_value">@form-validation-note__font-size</td>
    3737. 

  3737.             <td class="vars_value">@font-size__s</td>
    3738. 

  3738.             <td>Validation note font size</td>
    3739. 

  3739.         </tr>
    3740. 

  3740.         <tr>
    3741. 

  3741.             <th>@_note-font-family</th>
    3742. 

  3742.             <td class="vars_value">@form-validation-note__font-family</td>
    3743. 

  3743.             <td class="vars_value">false</td>
    3744. 

  3744.             <td>Validation note font family</td>
    3745. 

  3745.         </tr>
    3746. 

  3746.         <tr>
    3747. 

  3747.             <th>@_note-font-style</th>
    3748. 

  3748.             <td class="vars_value">@form-validation-note__font-style</td>
    3749. 

  3749.             <td class="vars_value">false</td>
    3750. 

  3750.             <td>Validation note font style</td>
    3751. 

  3751.         </tr>
    3752. 

  3752.         <tr>
    3753. 

  3753.             <th>@_note-font-weight</th>
    3754. 

  3754.             <td class="vars_value">@form-validation-note__font-weight</td>
    3755. 

  3755.             <td class="vars_value">false</td>
    3756. 

  3756.             <td>Validation note font weight</td>
    3757. 

  3757.         </tr>
    3758. 

  3758.         <tr>
    3759. 

  3759.             <th>@_note-line-height</th>
    3760. 

  3760.             <td class="vars_value">@form-validation-note__line-height</td>
    3761. 

  3761.             <td class="vars_value">false</td>
    3762. 

  3762.             <td>Validation note line height</td>
    3763. 

  3763.         </tr>
    3764. 

  3764.         <tr>
    3765. 

  3765.             <th>@_note-margin</th>
    3766. 

  3766.             <td class="vars_value">@form-validation-note__margin</td>
    3767. 

  3767.             <td class="vars_value">3px 0 0</td>
    3768. 

  3768.             <td>Validation note margin</td>
    3769. 

  3769.         </tr>
    3770. 

  3770.         <tr>
    3771. 

  3771.             <th>@_note-padding</th>
    3772. 

  3772.             <td class="vars_value">@form-validation-note__padding</td>
    3773. 

  3773.             <td class="vars_value">false</td>
    3774. 

  3774.             <td>Validation note padding</td>
    3775. 

  3775.         </tr>
    3776. 

  3776.         <tr>
    3777. 

  3777.             <th>@_note-icon-use</th>
    3778. 

  3778.             <td class="vars_value">@form-validation-note-icon__use</td>
    3779. 

  3779.             <td class="vars_value">false [true | false]</td>
    3780. 

  3780.             <td>Show validation note icon</td>
    3781. 

  3781.         </tr>
    3782. 

  3782.         <tr>
    3783. 

  3783.             <th>@_note-icon-font-content</th>
    3784. 

  3784.             <td class="vars_value">@form-validation-note-icon__font-content</td>
    3785. 

  3785.             <td class="vars_value">@icon-pointer-up</td>
    3786. 

  3786.             <td>Validation note icon code</td>
    3787. 

  3787.         </tr>
    3788. 

  3788.         <tr>
    3789. 

  3789.             <th>@_note-icon-font</th>
    3790. 

  3790.             <td class="vars_value">@form-validation-note-icon__font</td>
    3791. 

  3791.             <td class="vars_value">@icon-font</td>
    3792. 

  3792.             <td>Validation note icon font</td>
    3793. 

  3793.         </tr>
    3794. 

  3794.         <tr>
    3795. 

  3795.             <th>@_note-icon-font-size</th>
    3796. 

  3796.             <td class="vars_value">@form-validation-note-icon__font-size</td>
    3797. 

  3797.             <td class="vars_value">@form-validation-note__font-size * 2</td>
    3798. 

  3798.             <td>Validation note icon font size</td>
    3799. 

  3799.         </tr>
    3800. 

  3800.         <tr>
    3801. 

  3801.             <th>@_note-icon-font-line-height</th>
    3802. 

  3802.             <td class="vars_value">@form-validation-note-icon__font-line-height</td>
    3803. 

  3803.             <td class="vars_value">@form-validation-note__font-size</td>
    3804. 

  3804.             <td>Validation note icon line height</td>
    3805. 

  3805.         </tr>
    3806. 

  3806.         <tr>
    3807. 

  3807.             <th>@_note-icon-font-color</th>
    3808. 

  3808.             <td class="vars_value">@form-validation-note-icon__font-color</td>
    3809. 

  3809.             <td class="vars_value">@form-validation-note__color-error</td>
    3810. 

  3810.             <td>Validation note icon color</td>
    3811. 

  3811.         </tr>
    3812. 

  3812.         <tr>
    3813. 

  3813.             <th>@_note-icon-font-color-hover</th>
    3814. 

  3814.             <td class="vars_value">@form-validation-note-icon__font-color-hover</td>
    3815. 

  3815.             <td class="vars_value">false</td>
    3816. 

  3816.             <td>Hovered validation note icon color</td>
    3817. 

  3817.         </tr>
    3818. 

  3818.         <tr>
    3819. 

  3819.             <th>@_note-icon-font-color-active</th>
    3820. 

  3820.             <td class="vars_value">@form-validation-note-icon__font-color-active</td>
    3821. 

  3821.             <td class="vars_value">false</td>
    3822. 

  3822.             <td>Active validation note icon color</td>
    3823. 

  3823.         </tr>
    3824. 

  3824.         <tr>
    3825. 

  3825.             <th>@_note-icon-font-margin</th>
    3826. 

  3826.             <td class="vars_value">@form-validation-note-icon__font-margin</td>
    3827. 

  3827.             <td class="vars_value">false</td>
    3828. 

  3828.             <td>Validation note icon margin</td>
    3829. 

  3829.         </tr>
    3830. 

  3830.         <tr>
    3831. 

  3831.             <th>@_note-icon-font-vertical-align</th>
    3832. 

  3832.             <td class="vars_value">@form-validation-note-icon__font-vertical-align</td>
    3833. 

  3833.             <td class="vars_value">@icon-font__vertical-align</td>
    3834. 

  3834.             <td>Validation note icon vertical align</td>
    3835. 

  3835.         </tr>
    3836. 

  3836.         <tr>
    3837. 

  3837.             <th>@_note-icon-font-position</th>
    3838. 

  3838.             <td class="vars_value">@form-validation-note-icon__font-position</td>
    3839. 

  3839.             <td class="vars_value">@icon-font__position</td>
    3840. 

  3840.             <td>Validation note icon position</td>
    3841. 

  3841.         </tr>
    3842. 

  3842.         <tr>
    3843. 

  3843.             <th>@_note-icon-font-text-hide</th>
    3844. 

  3844.             <td class="vars_value">@form-validation-note-icon__font-text-hide</td>
    3845. 

  3845.             <td class="vars_value">@icon-font__text-hide</td>
    3846. 

  3846.             <td>Validation note icon text hide</td>
    3847. 

  3847.         </tr>
    3848. 

  3848.     </table>
    3849. 

  3849.   </pre>
    3850. 

  3850. 

  3851. <h2 id="font-icon-variables">Font icon variables</h2>
    3852. 

  3852. <h4 id="the-codelibiconfontcode-mixin-variables">The <code>.lib-icon-font()</code> mixin variables</h4>
    3853. 

  3853.   <pre>
    3854. 

  3854.     <table>
    3855. 

  3855.       <tr>
    3856. 

  3856.         <th class="vars_head">Mixin variable</th>
    3857. 

  3857.         <th class="vars_head">Global variable</th>
    3858. 

  3858.         <th class="vars_head">Default value</th>
    3859. 

  3859.         <th class="vars_head">Allowed values</th>
    3860. 

  3860.         <th class="vars_head">Comment</th>
    3861. 

  3861.       </tr>
    3862. 

  3862.       <tr>
    3863. 

  3863.         <th>@_icon-font-content</th>
    3864. 

  3864.         <td>-</td>
    3865. 

  3865.         <td class="vars_value">&nbsp;</td>
    3866. 

  3866.         <td class="vars_value">'' | icon code | icon variables</td>
    3867. 

  3867.         <td>Font icon code</td>
    3868. 

  3868.       </tr>
    3869. 

  3869.       <tr>
    3870. 

  3870.         <th nowrap="nowrap">@_icon-font</th>
    3871. 

  3871.         <td>@icon-font</td>
    3872. 

  3872.         <td class="vars_value">@icons__font-name</td>
    3873. 

  3873.         <td class="vars_value">'' | false | value</td>
    3874. 

  3874.         <td>The icon font</td>
    3875. 

  3875.       </tr>
    3876. 

  3876.       <tr>
    3877. 

  3877.         <th>@_icon-font-size</th>
    3878. 

  3878.         <td>@icon-font__size</td>
    3879. 

  3879.         <td class="vars_value">inherit</td>
    3880. 

  3880.         <td class="vars_value">'' | false | value</td>
    3881. 

  3881.         <td>Font icon size</td>
    3882. 

  3882.       </tr>
    3883. 

  3883.       <tr>
    3884. 

  3884.         <th>@_icon-font-line-height</th>
    3885. 

  3885.         <td>@icon-font__line-height</td>
    3886. 

  3886.         <td class="vars_value">@icon-font__size</td>
    3887. 

  3887.         <td class="vars_value">'' | false | value</td>
    3888. 

  3888.         <td>Font icon line height</td>
    3889. 

  3889.       </tr>
    3890. 

  3890.       <tr>
    3891. 

  3891.         <th nowrap="nowrap">@_icon-font-color</th>
    3892. 

  3892.         <td>@icon-font__color</td>
    3893. 

  3893.         <td class="vars_value">inherit</td>
    3894. 

  3894.         <td class="vars_value">'' | inherit | color code</td>
    3895. 

  3895.         <td>Font icon color</td>
    3896. 

  3896.       </tr>
    3897. 

  3897.       <tr>
    3898. 

  3898.         <th>@_icon-font-color-hover</th>
    3899. 

  3899.         <td>@icon-font__color-hover</td>
    3900. 

  3900.         <td class="vars_value">false</td>
    3901. 

  3901.         <td class="vars_value">'' | inherit | color code</td>
    3902. 

  3902.         <td>Font icon color - hover state</td>
    3903. 

  3903.       </tr>
    3904. 

  3904.       <tr>
    3905. 

  3905.         <th>@_icon-font-color-active</th>
    3906. 

  3906.         <td>@icon-font__color-active</td>
    3907. 

  3907.         <td class="vars_value">false</td>
    3908. 

  3908.         <td class="vars_value">'' | inherit | color code</td>
    3909. 

  3909.         <td>Font icon color - active state</td>
    3910. 

  3910.       </tr>
    3911. 

  3911.       <tr>
    3912. 

  3912.         <th nowrap="nowrap">@_icon-font-margin</th>
    3913. 

  3913.         <td>@icon-font__margin</td>
    3914. 

  3914.         <td class="vars_value">@icon__margin</td>
    3915. 

  3915.         <td class="vars_value">'' | false | value</td>
    3916. 

  3916.         <td>Font icon margin</td>
    3917. 

  3917.       </tr>
    3918. 

  3918.       <tr>
    3919. 

  3919.         <th nowrap="nowrap">@_icon-font-vertical-align</th>
    3920. 

  3920.         <td>@icon-font__vertical-align</td>
    3921. 

  3921.         <td class="vars_value" nowrap="nowrap">@icon__vertical-align</td>
    3922. 

  3922.         <td class="vars_value">'' | false | value</td>
    3923. 

  3923.         <td>Font icon vertical align</td>
    3924. 

  3924.       </tr>
    3925. 

  3925.       <tr>
    3926. 

  3926.         <th nowrap="nowrap">@_icon-font-position</th>
    3927. 

  3927.         <td>@icon-font__position</td>
    3928. 

  3928.         <td class="vars_value">@icon__position</td>
    3929. 

  3929.         <td class="vars_value">before | after</td>
    3930. 

  3930.         <td>Font icon position</td>
    3931. 

  3931.       </tr>
    3932. 

  3932.       <tr>
    3933. 

  3933.         <th>@_icon-font-text-hide</th>
    3934. 

  3934.         <td>@icon-font__text-hide</td>
    3935. 

  3935.         <td class="vars_value">@icon__text-hide</td>
    3936. 

  3936.         <td class="vars_value">true | false</td>
    3937. 

  3937.         <td>The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)</td>
    3938. 

  3938.       </tr>
    3939. 

  3939.       <tr>
    3940. 

  3940.         <th>@_icon-font-display</th>
    3941. 

  3941.         <td>@icon-font__display</td>
    3942. 

  3942.         <td class="vars_value">inline-block</td>
    3943. 

  3943.         <td class="vars_value">'' | false | value</td>
    3944. 

  3944.         <td>The 'display' property of the icon container</td>
    3945. 

  3945.       </tr>
    3946. 

  3946.     </table>
    3947. 

  3947.   </pre>
    3948. 

  3948. 

  3949. <h2 id="icon-with-image-or-sprite-variables">Icon with image or sprite variables</h2>
    3950. 

  3950. <h4 id="the-codelibiconimagecode-mixin-variables">The <code>.lib-icon-image()</code> mixin variables</h4>
    3951. 

  3951.   <pre>
    3952. 

  3952.     <table>
    3953. 

  3953.       <tr>
    3954. 

  3954.         <th class="vars_head">Mixin variable</th>
    3955. 

  3955.         <th class="vars_head">Global variable</th>
    3956. 

  3956.         <th class="vars_head">Default value</th>
    3957. 

  3957.         <th class="vars_head">Allowed values</th>
    3958. 

  3958.         <th class="vars_head">Comment</th>
    3959. 

  3959.       </tr>
    3960. 

  3960.       <tr>
    3961. 

  3961.         <th>@_icon-image</th>
    3962. 

  3962.         <td></td>
    3963. 

  3963.         <td class="vars_value">-</td>
    3964. 

  3964.         <td class="vars_value">'' | false | value</td>
    3965. 

  3965.         <td>A link to an image or sprite, mandatory parameter</td>
    3966. 

  3966.       </tr>
    3967. 

  3967.       <tr>
    3968. 

  3968.         <th>@_icon-image-height</th>
    3969. 

  3969.         <td>@icon__height</td>
    3970. 

  3970.         <td class="vars_value">26px</td>
    3971. 

  3971.         <td class="vars_value">'' | false | value</td>
    3972. 

  3972.         <td>Icon image height</td>
    3973. 

  3973.       </tr>
    3974. 

  3974.       <tr>
    3975. 

  3975.         <th>@_icon-image-width</th>
    3976. 

  3976.         <td>@icon__width</td>
    3977. 

  3977.         <td class="vars_value">26px</td>
    3978. 

  3978.         <td class="vars_value">'' | false | value</td>
    3979. 

  3979.         <td>Icon image width</td>
    3980. 

  3980.       </tr>
    3981. 

  3981.       <tr>
    3982. 

  3982.         <th>@_icon-image-margin</th>
    3983. 

  3983.         <td>@icon__margin</td>
    3984. 

  3984.         <td class="vars_value">0</td>
    3985. 

  3985.         <td class="vars_value">'' | false | value</td>
    3986. 

  3986.         <td>Icon image margin</td>
    3987. 

  3987.       </tr>
    3988. 

  3988.       <tr>
    3989. 

  3989.         <th nowrap="nowrap">@_icon-image-vertical-align</th>
    3990. 

  3990.         <td>@icon__vertical-align</td>
    3991. 

  3991.         <td class="vars_value">middle</td>
    3992. 

  3992.         <td class="vars_value">'' | false | value</td>
    3993. 

  3993.         <td>Icon image vertical align</td>
    3994. 

  3994.       </tr>
    3995. 

  3995.       <tr>
    3996. 

  3996.         <th>@_icon-image-position-x</th>
    3997. 

  3997.         <td>@icon-image__position-x</td>
    3998. 

  3998.         <td class="vars_value">0</td>
    3999. 

  3999.         <td class="vars_value">'' | false | value</td>
    4000. 

  4000.         <td>Horizontal image position</td>
    4001. 

  4001.       </tr>
    4002. 

  4002.       <tr>
    4003. 

  4003.         <th>@_icon-image-position-y</th>
    4004. 

  4004.         <td>@icon-image__position-y</td>
    4005. 

  4005.         <td class="vars_value">0</td>
    4006. 

  4006.         <td class="vars_value">'' | false | value</td>
    4007. 

  4007.         <td>Vertical image position</td>
    4008. 

  4008.       </tr>
    4009. 

  4009.       <tr>
    4010. 

  4010.         <th>@_icon-image-position</th>
    4011. 

  4011.         <td>@icon__position</td>
    4012. 

  4012.         <td class="vars_value">before</td>
    4013. 

  4013.         <td class="vars_value">before | after</td>
    4014. 

  4014.         <td>Icon image position</td>
    4015. 

  4015.       </tr>
    4016. 

  4016.       <tr>
    4017. 

  4017.         <th>@_icon-image-text-hide</th>
    4018. 

  4018.         <td>@icon__text-hide</td>
    4019. 

  4019.         <td class="vars_value">false</td>
    4020. 

  4020.         <td class="vars_value">true | false</td>
    4021. 

  4021.         <td>The text in the &lt;span&gt; tag should be hidden</td>
    4022. 

  4022.       </tr>
    4023. 

  4023.     </table>
    4024. 

  4024.   </pre>
    4025. 

  4025. 

  4026. <h2 id="icon-position-for-an-icon-with-image-or-sprite-variables">Icon position for an icon with image or sprite variables</h2>
    4027. 

  4027. <h4 id="the-codelibiconimagepositioncode-mixin-variables">The <code>.lib-icon-image-position()</code> mixin variables</h4>
    4028. 

  4028.   <pre>
    4029. 

  4029.     <table>
    4030. 

  4030.       <tr>
    4031. 

  4031.         <th class="vars_head">Mixin variable</th>
    4032. 

  4032.         <th class="vars_head">Global variable</th>
    4033. 

  4033.         <th class="vars_head">Default value</th>
    4034. 

  4034.         <th class="vars_head">Allowed values</th>
    4035. 

  4035.         <th class="vars_head">Comment</th>
    4036. 

  4036.       </tr>
    4037. 

  4037.       <tr>
    4038. 

  4038.         <th>@_icon-image-position-x</th>
    4039. 

  4039.         <td>@icon-image__position-x</td>
    4040. 

  4040.         <td class="vars_value">0</td>
    4041. 

  4041.         <td class="vars_value">'' | false | value</td>
    4042. 

  4042.         <td>Horizontal starting position of icon image</td>
    4043. 

  4043.       </tr>
    4044. 

  4044.       <tr>
    4045. 

  4045.         <th nowrap="nowrap">@_icon-image-position-y</th>
    4046. 

  4046.         <td>@icon-image__position-y</td>
    4047. 

  4047.         <td class="vars_value">0</td>
    4048. 

  4048.         <td class="vars_value">'' | false | value</td>
    4049. 

  4049.         <td>Vertical starting position of icon image</td>
    4050. 

  4050.       </tr>
    4051. 

  4051.       <tr>
    4052. 

  4052.         <th>@_icon-image-position</th>
    4053. 

  4053.         <td>-</td>
    4054. 

  4054.         <td class="vars_value">-</td>
    4055. 

  4055.         <td class="vars_value">before | after</td>
    4056. 

  4056.         <td>Position of the icon which is set for the element</td>
    4057. 

  4057.       </tr>
    4058. 

  4058.     </table>
    4059. 

  4059.   </pre>
    4060. 

  4060. 

  4061. <h2 id="icon-sprite-position-variables">Icon sprite position variables</h2>
    4062. 

  4062. <h4 id="the-codelibiconspritepositioncode-mixin-variables">The <code>.lib-icon-sprite-position()</code> mixin variables</h4>
    4063. 

  4063.   <pre>
    4064. 

  4064.     <table>
    4065. 

  4065.     <tr>
    4066. 

  4066.         <th class="vars_head">Mixin variable</th>
    4067. 

  4067.         <th class="vars_head">Global variable</th>
    4068. 

  4068.         <th class="vars_head">Default value</th>
    4069. 

  4069.         <th class="vars_head">Allowed values</th>
    4070. 

  4070.         <th class="vars_head">Comment</th>
    4071. 

  4071.       </tr>
    4072. 

  4072.       <tr>
    4073. 

  4073.         <th>@_icon-sprite-position-x</th>
    4074. 

  4074.         <td>@icon-sprite__position-x</td>
    4075. 

  4075.         <td class="vars_value">0</td>
    4076. 

  4076.         <td class="vars_value">'' | false | value</td>
    4077. 

  4077.         <td>The x coordinate of the desired image on the grid</td>
    4078. 

  4078.       </tr>
    4079. 

  4079.       <tr>
    4080. 

  4080.         <th nowrap="nowrap">@_icon-sprite-position-y</th>
    4081. 

  4081.         <td>@icon-sprite__position-y</td>
    4082. 

  4082.         <td class="vars_value">0</td>
    4083. 

  4083.         <td class="vars_value">'' | false | value</td>
    4084. 

  4084.         <td>The y coordinate of the desired image on the grid</td>
    4085. 

  4085.       </tr>
    4086. 

  4086.       <tr>
    4087. 

  4087.         <th>@_icon-sprite-grid</th>
    4088. 

  4088.         <td>@icon-sprite__grid</td>
    4089. 

  4089.         <td class="vars_value">26px</td>
    4090. 

  4090.         <td class="vars_value">'' | false | value</td>
    4091. 

  4091.         <td>The size of the grid (in pixels) that the individal images are placed on</td>
    4092. 

  4092.       </tr>
    4093. 

  4093.       <tr>
    4094. 

  4094.         <th>@_icon-sprite-position</th>
    4095. 

  4095.         <td>@icon__position</td>
    4096. 

  4096.         <td class="vars_value">before</td>
    4097. 

  4097.         <td class="vars_value">before | after</td>
    4098. 

  4098.         <td>Icon image position</td>
    4099. 

  4099.       </tr>
    4100. 

  4100.     </table>
    4101. 

  4101.   </pre>
    4102. 

  4102. 

  4103. <h2 id="imagesprite-icon-size-variables">Image/sprite icon size variables</h2>
    4104. 

  4104. <h4 id="the-codelibiconimagesizecode-mixin-variables">The <code>.lib-icon-image-size()</code> mixin variables</h4>
    4105. 

  4105.   <pre>
    4106. 

  4106.     <table>
    4107. 

  4107.       <tr>
    4108. 

  4108.         <th class="vars_head">Mixin variable</th>
    4109. 

  4109.         <th class="vars_head">Global variable</th>
    4110. 

  4110.         <th class="vars_head">Default value</th>
    4111. 

  4111.         <th class="vars_head">Allowed values</th>
    4112. 

  4112.         <th class="vars_head">Comment</th>
    4113. 

  4113.       </tr>
    4114. 

  4114.       <tr>
    4115. 

  4115.         <th>@_icon-image-width</th>
    4116. 

  4116.         <td>@icon__width</td>
    4117. 

  4117.         <td class="vars_value">26px</td>
    4118. 

  4118.         <td class="vars_value">'' | false | value</td>
    4119. 

  4119.         <td>Icon image width</td>
    4120. 

  4120.       </tr>
    4121. 

  4121.       <tr>
    4122. 

  4122.         <th nowrap="nowrap">@_icon-image-height</th>
    4123. 

  4123.         <td>@icon__height</td>
    4124. 

  4124.         <td class="vars_value">26px</td>
    4125. 

  4125.         <td class="vars_value">'' | false | value</td>
    4126. 

  4126.         <td>Icon image height</td>
    4127. 

  4127.       </tr>
    4128. 

  4128.       <tr>
    4129. 

  4129.         <th>@_icon-image-position</th>
    4130. 

  4130.         <td>@icon__position</td>
    4131. 

  4131.         <td class="vars_value">before</td>
    4132. 

  4132.         <td class="vars_value">before | after</td>
    4133. 

  4133.         <td>Icon image position</td>
    4134. 

  4134.       </tr>
    4135. 

  4135.     </table>
    4136. 

  4136.   </pre>
    4137. 

  4137. 

  4138. <h2 id="layout-variables">Layout variables</h2>
    4139. 

  4139.   <pre>
    4140. 

  4140.     <table>
    4141. 

  4141.         <tr>
    4142. 

  4142.             <th class="vars_head">Variables list names</th>
    4143. 

  4143.             <th class="vars_head">Default value</th>
    4144. 

  4144.             <th class="vars_head">Allowed values</th>
    4145. 

  4145.             <th class="vars_head">Comment</th>
    4146. 

  4146.         </tr>
    4147. 

  4147.         <tr>
    4148. 

  4148.             <th>@layout__width</th>
    4149. 

  4149.             <td class="vars_value">''</td>
    4150. 

  4150.             <td class="vars_value">'' | false | value</td>
    4151. 

  4151.             <td>Page minimum width</td>
    4152. 

  4152.         </tr>
    4153. 

  4153.         <tr>
    4154. 

  4154.             <th>@layout__max-width</th>
    4155. 

  4155.             <td class="vars_value">1280px</td>
    4156. 

  4156.             <td class="vars_value">'' | false | value</td>
    4157. 

  4157.             <td>Page maximum width</td>
    4158. 

  4158.         </tr>
    4159. 

  4159.         <tr>
    4160. 

  4160.             <th>@layout-indent__width</th>
    4161. 

  4161.             <td class="vars_value">20px</td>
    4162. 

  4162.             <td class="vars_value">'' | false | value</td>
    4163. 

  4163.             <td>Page indents on the left and right</td>
    4164. 

  4164.         </tr>
    4165. 

  4165.         <tr>
    4166. 

  4166.             <th colspan="4" class="vars_section">Class names defining different layouts</th>
    4167. 

  4167.         </tr>
    4168. 

  4168.         <tr>
    4169. 

  4169.             <th>@layout-class-1column</th>
    4170. 

  4170.             <td class="vars_value">page-layout-1column</td>
    4171. 

  4171.             <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
    4172. 

  4172.             <td>Class name for one column layout</td>
    4173. 

  4173.         </tr>
    4174. 

  4174.         <tr>
    4175. 

  4175.             <th>@layout-class-2columns__left</th>
    4176. 

  4176.             <td class="vars_value">page-layout-2columns-left</td>
    4177. 

  4177.             <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
    4178. 

  4178.             <td>Class name for two columns layout with left sidebar</td>
    4179. 

  4179.         </tr>
    4180. 

  4180.         <tr>
    4181. 

  4181.             <th nowrap="nowrap">@layout-class-2columns__right</th>
    4182. 

  4182.             <td class="vars_value">page-layout-2columns-right</td>
    4183. 

  4183.             <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
    4184. 

  4184.             <td>Class name for two columns layout with right sidebar</td>
    4185. 

  4185.         </tr>
    4186. 

  4186.         <tr>
    4187. 

  4187.             <th>@layout-class-3columns</th>
    4188. 

  4188.             <td class="vars_value">page-layout-3columns</td>
    4189. 

  4189.             <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
    4190. 

  4190.             <td>Class name for three columns layout with left sidebar</td>
    4191. 

  4191.         </tr>
    4192. 

  4192.         <tr>
    4193. 

  4193.             <th colspan="4" class="vars_section">Variables used for layout grid</th>
    4194. 

  4194.         </tr>
    4195. 

  4195.         <tr>
    4196. 

  4196.             <th>@total-columns</th>
    4197. 

  4197.             <td class="vars_value">12</td>
    4198. 

  4198.             <td class="vars_value">'' | false | value</td>
    4199. 

  4199.             <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
    4200. 

  4200.         </tr>
    4201. 

  4201.         <tr>
    4202. 

  4202.             <th>@gutter-width</th>
    4203. 

  4203.             <td class="vars_value">0</td>
    4204. 

  4204.             <td class="vars_value">'' | false | value</td>
    4205. 

  4205.             <td>Distanse between columns</td>
    4206. 

  4206.         </tr>
    4207. 

  4207.         <tr>
    4208. 

  4208.             <th colspan="4" class="vars_section">Variables for layout columns</th>
    4209. 

  4209.         </tr>
    4210. 

  4210.         <tr>
    4211. 

  4211.             <th>@layout-column__width</th>
    4212. 

  4212.             <td class="vars_value">@total-columns</td>
    4213. 

  4213.             <td class="vars_value">'' | false | value</td>
    4214. 

  4214.             <td>Sets base columns number</td>
    4215. 

  4215.         </tr>
    4216. 

  4216.         <tr>
    4217. 

  4217.             <th>@layout-column__sidebar-width</th>
    4218. 

  4218.             <td class="vars_value">2</td>
    4219. 

  4219.             <td class="vars_value">'' | false | value</td>
    4220. 

  4220.             <td>Sets sidebar width</td>
    4221. 

  4221.         </tr>
    4222. 

  4222.         <tr>
    4223. 

  4223.             <th>@layout-column__left-width</th>
    4224. 

  4224.             <td class="vars_value">@layout-column__sidebar-width</td>
    4225. 

  4225.             <td class="vars_value">'' | false | value</td>
    4226. 

  4226.             <td>Sets left column width</td>
    4227. 

  4227.         </tr>
    4228. 

  4228.         <tr>
    4229. 

  4229.             <th>@layout-column__right-width</th>
    4230. 

  4230.             <td class="vars_value">@layout-column__sidebar-width</td>
    4231. 

  4231.             <td class="vars_value">'' | false | value</td>
    4232. 

  4232.             <td>Sets right column width</td>
    4233. 

  4233.         </tr>
    4234. 

  4234.         <tr>
    4235. 

  4235.             <th colspan="4" class="vars_section">Variables for layout columns depending on layout used</th>
    4236. 

  4236.         </tr>
    4237. 

  4237.         <tr>
    4238. 

  4238.             <th>@layout-column-main__width-1</th>
    4239. 

  4239.             <td class="vars_value">100%</td>
    4240. 

  4240.             <td class="vars_value">'' | false | value</td>
    4241. 

  4241.             <td>Sets one column width</td>
    4242. 

  4242.         </tr>
    4243. 

  4243.         <tr>
    4244. 

  4244.             <th>@layout-column-main__width-2-left</th>
    4245. 

  4245.             <td class="vars_value">@layout-column__width - @layout-column__left-width</td>
    4246. 

  4246.             <td class="vars_value">'' | false | value</td>
    4247. 

  4247.             <td>Sets left column width</td>
    4248. 

  4248.         </tr>
    4249. 

  4249.         <tr>
    4250. 

  4250.             <th nowrap="nowrap">@layout-column-main__width-2-right</th>
    4251. 

  4251.             <td class="vars_value">@layout-column__width - @layout-column__right-width</td>
    4252. 

  4252.             <td class="vars_value">'' | false | value</td>
    4253. 

  4253.             <td>Sets right column width</td>
    4254. 

  4254.         </tr>
    4255. 

  4255.         <tr>
    4256. 

  4256.             <th>@layout-column-main__width-3</th>
    4257. 

  4257.             <td class="vars_value">@layout-column__width - @layout-column__left-width - @layout-column__right-width</td>
    4258. 

  4258.             <td class="vars_value">'' | false | value</td>
    4259. 

  4259.             <td>Sets three columns layout main column width</td>
    4260. 

  4260.         </tr>
    4261. 

  4261.         <tr>
    4262. 

  4262.             <th colspan="4" class="vars_section">Settings variables</th>
    4263. 

  4263.         </tr>
    4264. 

  4264.         <tr>
    4265. 

  4265.             <th>@use-flex</th>
    4266. 

  4266.             <td class="vars_value">true</td>
    4267. 

  4267.             <td class="vars_value">'' | true | false</td>
    4268. 

  4268.             <td>Sets compatibility for browsers not supporting flex</td>
    4269. 

  4269.         </tr>
    4270. 

  4270.         <tr>
    4271. 

  4271.             <th>@responsive</th>
    4272. 

  4272.             <td class="vars_value">true</td>
    4273. 

  4273.             <td class="vars_value">'' | true | false</td>
    4274. 

  4274.             <td>Is set to true if theme has responsive layout</td>
    4275. 

  4275.         </tr>
    4276. 

  4276.     </table>
    4277. 

  4277.   </pre>
    4278. 

  4278. 

  4279. <h2 id="loader-variables">Loader variables</h2>
    4280. 

  4280. <h4 id="the-codelibloadercode-mixin-variables">The <code>.lib-loader()</code> mixin variables</h4>
    4281. 

  4281.   <pre>
    4282. 

  4282.     <table>
    4283. 

  4283.       <tr>
    4284. 

  4284.         <th class="vars_head">Mixin variable</th>
    4285. 

  4285.         <th class="vars_head">Global variable</th>
    4286. 

  4286.         <th class="vars_head">Default value</th>
    4287. 

  4287.         <th class="vars_head">Allowed values</th>
    4288. 

  4288.         <th class="vars_head">Comment</th>
    4289. 

  4289.       </tr>
    4290. 

  4290.       <tr>
    4291. 

  4291.         <th>@_loader-overlay-background-color</th>
    4292. 

  4292.         <td>@loader-overlay__background-color</td>
    4293. 

  4293.         <td class="vars_value">rgba(255, 255, 255, .5)</td>
    4294. 

  4294.         <td class="vars_value">'' | false | value</td>
    4295. 

  4295.         <td>Loader overlay background color</td>
    4296. 

  4296.       </tr>
    4297. 

  4297.       <tr>
    4298. 

  4298.         <th>@_loader-overlay-z-index</th>
    4299. 

  4299.         <td>@loader-overlay__z-index</td>
    4300. 

  4300.         <td class="vars_value">9999</td>
    4301. 

  4301.         <td class="vars_value">'' | false | value</td>
    4302. 

  4302.         <td>Loader overlay background z-index</td>
    4303. 

  4303.       </tr>
    4304. 

  4304.       <tr>
    4305. 

  4305.         <th>@_loader-icon-width</th>
    4306. 

  4306.         <td>@loader-icon__width</td>
    4307. 

  4307.         <td class="vars_value">160px</td>
    4308. 

  4308.         <td class="vars_value">'' | false | value</td>
    4309. 

  4309.         <td>Loader icon width</td>
    4310. 

  4310.       </tr>
    4311. 

  4311.       <tr>
    4312. 

  4312.         <th>@_loader-icon-height</th>
    4313. 

  4313.         <td>@loader-icon__height</td>
    4314. 

  4314.         <td class="vars_value">160px</td>
    4315. 

  4315.         <td class="vars_value">'' | false | value</td>
    4316. 

  4316.         <td>Loader icon height</td>
    4317. 

  4317.       </tr>
    4318. 

  4318.       <tr>
    4319. 

  4319.         <th>@_loader-icon-background-color</th>
    4320. 

  4320.         <td>@loader-icon__background-color</td>
    4321. 

  4321.         <td class="vars_value">transparent</td>
    4322. 

  4322.         <td class="vars_value">'' | false | value</td>
    4323. 

  4323.         <td>Loader icon background color</td>
    4324. 

  4324.       </tr>
    4325. 

  4325.       <tr>
    4326. 

  4326.         <th>@_loader-icon-background-image</th>
    4327. 

  4327.         <td>@loader-icon__background-image</td>
    4328. 

  4328.         <td class="vars_value">url('@{baseDir}images/loader-2.gif')</td>
    4329. 

  4329.         <td class="vars_value">'' | false | value</td>
    4330. 

  4330.         <td>Loader icon ackground image</td>
    4331. 

  4331.       </tr>
    4332. 

  4332.       <tr>
    4333. 

  4333.         <th nowrap="nowrap">@_loader-icon-background-position</th>
    4334. 

  4334.         <td>@loader-icon__background-position</td>
    4335. 

  4335.         <td class="vars_value">50% 50%</td>
    4336. 

  4336.         <td class="vars_value">'' | false | value</td>
    4337. 

  4337.         <td>Loader icon background position</td>
    4338. 

  4338.       </tr>
    4339. 

  4339.       <tr>
    4340. 

  4340.         <th nowrap="nowrap">@_loader-icon-border-radius</th>
    4341. 

  4341.         <td>@loader-icon__border-radius</td>
    4342. 

  4342.         <td class="vars_value">5px</td>
    4343. 

  4343.         <td class="vars_value">'' | false | value</td>
    4344. 

  4344.         <td>Loader icon border radius</td>
    4345. 

  4345.       </tr>
    4346. 

  4346.       <tr>
    4347. 

  4347.         <th nowrap="nowrap">@_loader-icon-padding</th>
    4348. 

  4348.         <td>@loader-icon__padding</td>
    4349. 

  4349.         <td class="vars_value">''</td>
    4350. 

  4350.         <td class="vars_value">'' | false | value</td>
    4351. 

  4351.         <td>Loader icon icon padding</td>
    4352. 

  4352.       </tr>
    4353. 

  4353.       <tr>
    4354. 

  4354.         <th nowrap="nowrap">@_loader-text</th>
    4355. 

  4355.         <td>@loader-text</td>
    4356. 

  4356.         <td class="vars_value">false</td>
    4357. 

  4357.         <td class="vars_value">'' | false | value</td>
    4358. 

  4358.         <td>Loader text presence</td>
    4359. 

  4359.       </tr>
    4360. 

  4360.       <tr>
    4361. 

  4361.         <th nowrap="nowrap">@_loader-text-color</th>
    4362. 

  4362.         <td>@loader-text__color</td>
    4363. 

  4363.         <td class="vars_value">@primary__color</td>
    4364. 

  4364.         <td class="vars_value">'' | false | value</td>
    4365. 

  4365.         <td>Loader text color</td>
    4366. 

  4366.       </tr>
    4367. 

  4367.       <tr>
    4368. 

  4368.         <th nowrap="nowrap">@_loader-text-font-size</th>
    4369. 

  4369.         <td>@loader-text__font-size</td>
    4370. 

  4370.         <td class="vars_value">@font-size__base</td>
    4371. 

  4371.         <td class="vars_value">'' | false | value</td>
    4372. 

  4372.         <td>Loader text font size</td>
    4373. 

  4373.       </tr>
    4374. 

  4374.       <tr>
    4375. 

  4375.         <th nowrap="nowrap">@_loader-text-font-family</th>
    4376. 

  4376.         <td>@loader-text__font-family</td>
    4377. 

  4377.         <td class="vars_value">@font-family__base</td>
    4378. 

  4378.         <td class="vars_value">'' | false | value</td>
    4379. 

  4379.         <td>Loader text font family</td>
    4380. 

  4380.       </tr>
    4381. 

  4381.       <tr>
    4382. 

  4382.         <th nowrap="nowrap">@_loader-text-font-weight</th>
    4383. 

  4383.         <td>@loader-text__font-weight</td>
    4384. 

  4384.         <td class="vars_value">@font-weight__regular</td>
    4385. 

  4385.         <td class="vars_value">'' | false | value</td>
    4386. 

  4386.         <td>Loader text font weight</td>
    4387. 

  4387.       </tr>
    4388. 

  4388.       <tr>
    4389. 

  4389.         <th nowrap="nowrap">@_loader-text-font-style</th>
    4390. 

  4390.         <td>@loader-text__font-style</td>
    4391. 

  4391.         <td class="vars_value">@font-style__base</td>
    4392. 

  4392.         <td class="vars_value">'' | false | value</td>
    4393. 

  4393.         <td>Loader text font style</td>
    4394. 

  4394.       </tr>
    4395. 

  4395.       <tr>
    4396. 

  4396.         <th nowrap="nowrap">@_loader-text-padding</th>
    4397. 

  4397.         <td>@loader-text__padding</td>
    4398. 

  4398.         <td class="vars_value">130px 0 0</td>
    4399. 

  4399.         <td class="vars_value">'' | false | value</td>
    4400. 

  4400.         <td>Loader text padding</td>
    4401. 

  4401.       </tr>
    4402. 

  4402.     </table>
    4403. 

  4403.   </pre>
    4404. 

  4404. 

  4405. <h2 id="loading-variables">Loading variables</h2>
    4406. 

  4406. <h4 id="the-codelibloadingcode-mixin-variables">The <code>.lib-loading()</code> mixin variables</h4>
    4407. 

  4407.   <pre>
    4408. 

  4408.     <table>
    4409. 

  4409.       <tr>
    4410. 

  4410.         <th class="vars_head">Mixin variable</th>
    4411. 

  4411.         <th class="vars_head">Global variable</th>
    4412. 

  4412.         <th class="vars_head">Default value</th>
    4413. 

  4413.         <th class="vars_head">Allowed values</th>
    4414. 

  4414.         <th class="vars_head">Comment</th>
    4415. 

  4415.       </tr>
    4416. 

  4416.       <tr>
    4417. 

  4417.         <th>@_loading-background-color</th>
    4418. 

  4418.         <td>@loading__background-color</td>
    4419. 

  4419.         <td class="vars_value">@loader-overlay__background-color</td>
    4420. 

  4420.         <td class="vars_value">'' | false | value</td>
    4421. 

  4421.         <td>Loading overlay background color</td>
    4422. 

  4422.       </tr>
    4423. 

  4423.       <tr>
    4424. 

  4424.         <th>@_loading-background-image</th>
    4425. 

  4425.         <td>@loading__background-image</td>
    4426. 

  4426.         <td class="vars_value">@loader-icon__background-image</td>
    4427. 

  4427.         <td class="vars_value">'' | false | value</td>
    4428. 

  4428.         <td>Loading overlay background z-index</td>
    4429. 

  4429.       </tr>
    4430. 

  4430.     </table>
    4431. 

  4431.   </pre>
    4432. 

  4432. 

  4433. <h2 id="messages-variables">Messages variables</h2>
    4434. 

  4434. <h4 id="the-codelibmessagecode-mixin-variables">The <code>.lib-message()</code> mixin variables</h4>
    4435. 

  4435.   <pre>
    4436. 

  4436.     <table>
    4437. 

  4437.         <tr>
    4438. 

  4438.             <th class="vars_head">Mixin variable</th>
    4439. 

  4439.             <th class="vars_head">Default value</th>
    4440. 

  4440.             <th class="vars_head">Allowed values</th>
    4441. 

  4441.             <th class="vars_head">Comment</th>
    4442. 

  4442.         </tr>
    4443. 

  4443.         <tr>
    4444. 

  4444.             <th>@message__padding</th>
    4445. 

  4445.             <td class="vars_value">@indent__s @indent__base</td>
    4446. 

  4446.             <td class="vars_value">'' | value</td>
    4447. 

  4447.             <td>Message padding</td>
    4448. 

  4448.         </tr>
    4449. 

  4449.         <tr>
    4450. 

  4450.             <th>@message__margin</th>
    4451. 

  4451.             <td class="vars_value">@indent__xs 0</td>
    4452. 

  4452.             <td class="vars_value">'' | value</td>
    4453. 

  4453.             <td>Message margin</td>
    4454. 

  4454.         </tr>
    4455. 

  4455.         <tr>
    4456. 

  4456.             <th>@message__color</th>
    4457. 

  4457.             <td class="vars_value">false</td>
    4458. 

  4458.             <td class="vars_value">true | false</td>
    4459. 

  4459.             <td>Each message type has its own message color</td>
    4460. 

  4460.         </tr>
    4461. 

  4461.         <tr>
    4462. 

  4462.             <th colspan="4" class="vars_section">Messages font style</th>
    4463. 

  4463.         </tr>
    4464. 

  4464.         <tr>
    4465. 

  4465.             <th>@message__font-size</th>
    4466. 

  4466.             <td class="vars_value">13px</td>
    4467. 

  4467.             <td class="vars_value">'' | false | value</td>
    4468. 

  4468.             <td>Message font size</td>
    4469. 

  4469.         </tr>
    4470. 

  4470.         <tr>
    4471. 

  4471.             <th>@message__font-family</th>
    4472. 

  4472.             <td class="vars_value">false</td>
    4473. 

  4473.             <td class="vars_value">'' | false | value</td>
    4474. 

  4474.             <td>Message font family</td>
    4475. 

  4475.         </tr>
    4476. 

  4476.         <tr>
    4477. 

  4477.             <th>@message__font-style</th>
    4478. 

  4478.             <td class="vars_value">false</td>
    4479. 

  4479.             <td class="vars_value">'' | false | value</td>
    4480. 

  4480.             <td>Message font style</td>
    4481. 

  4481.         </tr>
    4482. 

  4482.         <tr>
    4483. 

  4483.             <th>@message__font-weight</th>
    4484. 

  4484.             <td class="vars_value">false</td>
    4485. 

  4485.             <td class="vars_value">'' | false | value</td>
    4486. 

  4486.             <td>Message font weight</td>
    4487. 

  4487.         </tr>
    4488. 

  4488.         <tr>
    4489. 

  4489.             <th>@message__line-height</th>
    4490. 

  4490.             <td class="vars_value">1.2em</td>
    4491. 

  4491.             <td class="vars_value">'' | false | value</td>
    4492. 

  4492.             <td>Message line height</td>
    4493. 

  4493.         </tr>
    4494. 

  4494.         <tr>
    4495. 

  4495.             <th colspan="4" class="vars_section">Message icon setup</th>
    4496. 

  4496.         </tr>
    4497. 

  4497.         <tr>
    4498. 

  4498.             <th>@message-icon__font-size</th>
    4499. 

  4499.             <td class="vars_value">ceil(@message__font-size * 2 + 2)</td>
    4500. 

  4500.             <td class="vars_value">'' | false | value</td>
    4501. 

  4501.             <td>Message icon font size</td>
    4502. 

  4502.         </tr>
    4503. 

  4503.         <tr>
    4504. 

  4504.             <th>@message-icon__font-line-height</th>
    4505. 

  4505.             <td class="vars_value">@message-icon__font-size</td>
    4506. 

  4506.             <td class="vars_value">'' | false | value</td>
    4507. 

  4507.             <td>Message icon line height</td>
    4508. 

  4508.         </tr>
    4509. 

  4509.         <tr>
    4510. 

  4510.             <th>@message-icon__inner-padding-left</th>
    4511. 

  4511.             <td class="vars_value">40px</td>
    4512. 

  4512.             <td class="vars_value">'' | false | value</td>
    4513. 

  4513.             <td>Message icon padding left</td>
    4514. 

  4514.         </tr>
    4515. 

  4515.         <tr>
    4516. 

  4516.             <th>@message-icon__lateral-width</th>
    4517. 

  4517.             <td class="vars_value">30px</td>
    4518. 

  4518.             <td class="vars_value">'' | false | value</td>
    4519. 

  4519.             <td>Message icon lateral width</td>
    4520. 

  4520.         </tr>
    4521. 

  4521.         <tr>
    4522. 

  4522.             <th>@message-icon__lateral-arrow-size</th>
    4523. 

  4523.             <td class="vars_value">5px</td>
    4524. 

  4524.             <td class="vars_value">'' | false | value</td>
    4525. 

  4525.             <td>Message icon arrow size</td>
    4526. 

  4526.         </tr>
    4527. 

  4527.         <tr>
    4528. 

  4528.             <th>@message-icon__top</th>
    4529. 

  4529.             <td class="vars_value">18px</td>
    4530. 

  4530.             <td class="vars_value">'' | false | value</td>
    4531. 

  4531.             <td>Message icon top position</td>
    4532. 

  4532.         </tr>
    4533. 

  4533.         <tr>
    4534. 

  4534.             <th>@message-icon__right</th>
    4535. 

  4535.             <td class="vars_value">false</td>
    4536. 

  4536.             <td class="vars_value">'' | false | value</td>
    4537. 

  4537.             <td>Message icon right position</td>
    4538. 

  4538.         </tr>
    4539. 

  4539.         <tr>
    4540. 

  4540.             <th>@message-icon__bottom</th>
    4541. 

  4541.             <td class="vars_value">false</td>
    4542. 

  4542.             <td class="vars_value">'' | false | value</td>
    4543. 

  4543.             <td>Message icon bottom position</td>
    4544. 

  4544.         </tr>
    4545. 

  4545.         <tr>
    4546. 

  4546.             <th>@message-icon__left</th>
    4547. 

  4547.             <td class="vars_value">0</td>
    4548. 

  4548.             <td class="vars_value">'' | false | value</td>
    4549. 

  4549.             <td>Message icon left position</td>
    4550. 

  4550.         </tr>
    4551. 

  4551.         <tr>
    4552. 

  4552.             <th colspan="4" class="vars_section">Message border</th>
    4553. 

  4553.         </tr>
    4554. 

  4554.         <tr>
    4555. 

  4555.             <th>@message__border-width</th>
    4556. 

  4556.             <td class="vars_value">false</td>
    4557. 

  4557.             <td class="vars_value">'' | false | value</td>
    4558. 

  4558.             <td>Message border width</td>
    4559. 

  4559.         </tr>
    4560. 

  4560.         <tr>
    4561. 

  4561.             <th>@message__border-color</th>
    4562. 

  4562.             <td class="vars_value">false</td>
    4563. 

  4563.             <td class="vars_value">'' | false | value</td>
    4564. 

  4564.             <td>Message border color</td>
    4565. 

  4565.         </tr>
    4566. 

  4566.         <tr>
    4567. 

  4567.             <th>@message__border-style</th>
    4568. 

  4568.             <td class="vars_value">false</td>
    4569. 

  4569.             <td class="vars_value">'' | false | value</td>
    4570. 

  4570.             <td>Message border style</td>
    4571. 

  4571.         </tr>
    4572. 

  4572.         <tr>
    4573. 

  4573.             <th>@message__border-radius</th>
    4574. 

  4574.             <td class="vars_value">false</td>
    4575. 

  4575.             <td class="vars_value">'' | false | value</td>
    4576. 

  4576.             <td>Message border radius</td>
    4577. 

  4577.         </tr>
    4578. 

  4578.         <tr>
    4579. 

  4579.             <th colspan="4" class="vars_section">Information message</th>
    4580. 

  4580.         </tr>
    4581. 

  4581.         <tr>
    4582. 

  4582.             <th>@message-info__color</th>
    4583. 

  4583.             <td class="vars_value">#6f4400</td>
    4584. 

  4584.             <td class="vars_value">'' | false | value</td>
    4585. 

  4585.             <td>Information message text color</td>
    4586. 

  4586.         </tr>
    4587. 

  4587.         <tr>
    4588. 

  4588.             <th>@message-info__background</th>
    4589. 

  4589.             <td class="vars_value">#fdf0d5</td>
    4590. 

  4590.             <td class="vars_value">'' | false | value</td>
    4591. 

  4591.             <td>Information message background</td>
    4592. 

  4592.         </tr>
    4593. 

  4593.         <tr>
    4594. 

  4594.             <th>@message-info-link__color</th>
    4595. 

  4595.             <td class="vars_value">@link__color</td>
    4596. 

  4596.             <td class="vars_value">'' | false | value</td>
    4597. 

  4597.             <td>Information message link color</td>
    4598. 

  4598.         </tr>
    4599. 

  4599.         <tr>
    4600. 

  4600.             <th>@message-info-link__color-hover</th>
    4601. 

  4601.             <td class="vars_value">@link__hover__color</td>
    4602. 

  4602.             <td class="vars_value">'' | false | value</td>
    4603. 

  4603.             <td>Information message hovered link color</td>
    4604. 

  4604.         </tr>
    4605. 

  4605.         <tr>
    4606. 

  4606.             <th>@message-info-link__color-active</th>
    4607. 

  4607.             <td class="vars_value">@link__hover__color</td>
    4608. 

  4608.             <td class="vars_value">'' | false | value</td>
    4609. 

  4609.             <td>Information message active link color </td>
    4610. 

  4610.         </tr>
    4611. 

  4611.         <tr>
    4612. 

  4612.             <th>@message-info__border-color</th>
    4613. 

  4613.             <td class="vars_value">@message__border-color</td>
    4614. 

  4614.             <td class="vars_value">'' | false | value</td>
    4615. 

  4615.             <td>Information message border color</td>
    4616. 

  4616.         </tr>
    4617. 

  4617.         <tr>
    4618. 

  4618.             <th>@message-info-icon</th>
    4619. 

  4619.             <td class="vars_value">@icon-warning</td>
    4620. 

  4620.             <td class="vars_value">'' | false | value</td>
    4621. 

  4621.             <td>Information message icon symbol code</td>
    4622. 

  4622.         </tr>
    4623. 

  4623.         <tr>
    4624. 

  4624.             <th>@message-info-icon__color-inner</th>
    4625. 

  4625.             <td class="vars_value">#c07600</td>
    4626. 

  4626.             <td class="vars_value">'' | false | value</td>
    4627. 

  4627.             <td>Information message icon symbol color </td>
    4628. 

  4628.         </tr>
    4629. 

  4629.         <tr>
    4630. 

  4630.             <th>@message-info-icon__color-lateral</th>
    4631. 

  4631.             <td class="vars_value">@color-white</td>
    4632. 

  4632.             <td class="vars_value">'' | false | value</td>
    4633. 

  4633.             <td>Information message lateral icon symbol color</td>
    4634. 

  4634.         </tr>
    4635. 

  4635.         <tr>
    4636. 

  4636.             <th>@message-info-icon__background</th>
    4637. 

  4637.             <td class="vars_value">#6f4400</td>
    4638. 

  4638.             <td class="vars_value">'' | false | value</td>
    4639. 

  4639.             <td>Information message icon background</td>
    4640. 

  4640.         </tr>
    4641. 

  4641.         <tr>
    4642. 

  4642.             <th>@message-info-icon__top</th>
    4643. 

  4643.             <td class="vars_value">@message-icon__top</td>
    4644. 

  4644.             <td class="vars_value">'' | false | value</td>
    4645. 

  4645.             <td>Message icon top position</td>
    4646. 

  4646.         </tr>
    4647. 

  4647.         <tr>
    4648. 

  4648.             <th>@message-info-icon__right</th>
    4649. 

  4649.             <td class="vars_value">@message-icon__right</td>
    4650. 

  4650.             <td class="vars_value">'' | false | value</td>
    4651. 

  4651.             <td>Message icon right position</td>
    4652. 

  4652.         </tr>
    4653. 

  4653.         <tr>
    4654. 

  4654.             <th>@message-info-icon__bottom</th>
    4655. 

  4655.             <td class="vars_value">@message-icon__bottom</td>
    4656. 

  4656.             <td class="vars_value">'' | false | value</td>
    4657. 

  4657.             <td>Message icon bottom position</td>
    4658. 

  4658.         </tr>
    4659. 

  4659.         <tr>
    4660. 

  4660.             <th>@message-info-icon__left</th>
    4661. 

  4661.             <td class="vars_value">@message-icon__left</td>
    4662. 

  4662.             <td class="vars_value">'' | false | value</td>
    4663. 

  4663.             <td>Message icon left position</td>
    4664. 

  4664.         </tr>
    4665. 

  4665.         <tr>
    4666. 

  4666.             <th colspan="4" class="vars_section">Warning message</th>
    4667. 

  4667.         </tr>
    4668. 

  4668.         <tr>
    4669. 

  4669.             <th>@message-warning__color</th>
    4670. 

  4670.             <td class="vars_value">@message-info__color</td>
    4671. 

  4671.             <td class="vars_value">'' | false | value</td>
    4672. 

  4672.             <td>Warning message text color</td>
    4673. 

  4673.         </tr>
    4674. 

  4674.         <tr>
    4675. 

  4675.             <th>@message-warning__background</th>
    4676. 

  4676.             <td class="vars_value">@message-info__background</td>
    4677. 

  4677.             <td class="vars_value">'' | false | value</td>
    4678. 

  4678.             <td>Warning message background</td>
    4679. 

  4679.         </tr>
    4680. 

  4680.         <tr>
    4681. 

  4681.             <th>@message-warning-link__color</th>
    4682. 

  4682.             <td class="vars_value">@message-info-link__color</td>
    4683. 

  4683.             <td class="vars_value">'' | false | value</td>
    4684. 

  4684.             <td>Warning message link color</td>
    4685. 

  4685.         </tr>
    4686. 

  4686.         <tr>
    4687. 

  4687.             <th>@message-warning-link__color-hover</th>
    4688. 

  4688.             <td class="vars_value">@message-info-link__color-hover</td>
    4689. 

  4689.             <td class="vars_value">'' | false | value</td>
    4690. 

  4690.             <td>Warning message hovered link color</td>
    4691. 

  4691.         </tr>
    4692. 

  4692.         <tr>
    4693. 

  4693.             <th>@message-warning-link__color-active</th>
    4694. 

  4694.             <td class="vars_value">@message-info-link__color-active</td>
    4695. 

  4695.             <td class="vars_value">'' | false | value</td>
    4696. 

  4696.             <td>Warning message active link color </td>
    4697. 

  4697.         </tr>
    4698. 

  4698.         <tr>
    4699. 

  4699.             <th>@message-info__border-color</th>
    4700. 

  4700.             <td class="vars_value">@message-info__border-color</td>
    4701. 

  4701.             <td class="vars_value">'' | false | value</td>
    4702. 

  4702.             <td>Warning message border color</td>
    4703. 

  4703.         </tr>
    4704. 

  4704.         <tr>
    4705. 

  4705.             <th>@message-warning-icon</th>
    4706. 

  4706.             <td class="vars_value">@message-info-icon</td>
    4707. 

  4707.             <td class="vars_value">'' | false | value</td>
    4708. 

  4708.             <td>Warning message icon symbol code</td>
    4709. 

  4709.         </tr>
    4710. 

  4710.         <tr>
    4711. 

  4711.             <th>@message-warning-icon__color-inner</th>
    4712. 

  4712.             <td class="vars_value">@message-info-icon__color-inner</td>
    4713. 

  4713.             <td class="vars_value">'' | false | value</td>
    4714. 

  4714.             <td>Warning message icon symbol color </td>
    4715. 

  4715.         </tr>
    4716. 

  4716.         <tr>
    4717. 

  4717.             <th nowrap="nowrap">@message-warning-icon__color-lateral</th>
    4718. 

  4718.             <td class="vars_value" nowrap="nowrap">@message-info-icon__color-lateral</td>
    4719. 

  4719.             <td class="vars_value">'' | false | value</td>
    4720. 

  4720.             <td>Warning message lateral icon symbol color</td>
    4721. 

  4721.         </tr>
    4722. 

  4722.         <tr>
    4723. 

  4723.             <th>@message-warning-icon__background</th>
    4724. 

  4724.             <td class="vars_value">@message-info-icon__background</td>
    4725. 

  4725.             <td class="vars_value">'' | false | value</td>
    4726. 

  4726.             <td>Warning message icon background</td>
    4727. 

  4727.         </tr>
    4728. 

  4728.         <tr>
    4729. 

  4729.             <th>@message-warning-icon__top</th>
    4730. 

  4730.             <td class="vars_value">@message-icon__top</td>
    4731. 

  4731.             <td class="vars_value">'' | false | value</td>
    4732. 

  4732.             <td>Message icon top position</td>
    4733. 

  4733.         </tr>
    4734. 

  4734.         <tr>
    4735. 

  4735.             <th>@message-warning-icon__right</th>
    4736. 

  4736.             <td class="vars_value">@message-icon__right</td>
    4737. 

  4737.             <td class="vars_value">'' | false | value</td>
    4738. 

  4738.             <td>Message icon right position</td>
    4739. 

  4739.         </tr>
    4740. 

  4740.         <tr>
    4741. 

  4741.             <th>@message-warning-icon__bottom</th>
    4742. 

  4742.             <td class="vars_value">@message-icon__bottom</td>
    4743. 

  4743.             <td class="vars_value">'' | false | value</td>
    4744. 

  4744.             <td>Message icon bottom position</td>
    4745. 

  4745.         </tr>
    4746. 

  4746.         <tr>
    4747. 

  4747.             <th>@message-warning-icon__left</th>
    4748. 

  4748.             <td class="vars_value">@message-icon__left</td>
    4749. 

  4749.             <td class="vars_value">'' | false | value</td>
    4750. 

  4750.             <td>Message icon left position</td>
    4751. 

  4751.         </tr>
    4752. 

  4752.         <tr>
    4753. 

  4753.             <th colspan="4" class="vars_section">Error message</th>
    4754. 

  4754.         </tr>
    4755. 

  4755.         <tr>
    4756. 

  4756.             <th>@message-error__color</th>
    4757. 

  4757.             <td class="vars_value">@error__color</td>
    4758. 

  4758.             <td class="vars_value">'' | false | value</td>
    4759. 

  4759.             <td>Error message text color</td>
    4760. 

  4760.         </tr>
    4761. 

  4761.         <tr>
    4762. 

  4762.             <th>@message-error__background</th>
    4763. 

  4763.             <td class="vars_value">#fae5e5</td>
    4764. 

  4764.             <td class="vars_value">'' | false | value</td>
    4765. 

  4765.             <td>Error message background</td>
    4766. 

  4766.         </tr>
    4767. 

  4767.         <tr>
    4768. 

  4768.             <th>@message-error-link__color</th>
    4769. 

  4769.             <td class="vars_value">@link__color</td>
    4770. 

  4770.             <td class="vars_value">'' | false | value</td>
    4771. 

  4771.             <td>Error message link color</td>
    4772. 

  4772.         </tr>
    4773. 

  4773.         <tr>
    4774. 

  4774.             <th>@message-error-link__color-hover</th>
    4775. 

  4775.             <td class="vars_value">@link__hover__color</td>
    4776. 

  4776.             <td class="vars_value">'' | false | value</td>
    4777. 

  4777.             <td>Error message hovered link color</td>
    4778. 

  4778.         </tr>
    4779. 

  4779.         <tr>
    4780. 

  4780.             <th>@message-error-link__color-active</th>
    4781. 

  4781.             <td class="vars_value">@link__hover__color</td>
    4782. 

  4782.             <td class="vars_value">'' | false | value</td>
    4783. 

  4783.             <td>Error message active link color </td>
    4784. 

  4784.         </tr>
    4785. 

  4785.         <tr>
    4786. 

  4786.             <th>@message-error__border-color</th>
    4787. 

  4787.             <td class="vars_value">@message__border-color</td>
    4788. 

  4788.             <td class="vars_value">'' | false | value</td>
    4789. 

  4789.             <td>Error message border color</td>
    4790. 

  4790.         </tr>
    4791. 

  4791.         <tr>
    4792. 

  4792.             <th>@message-error-icon</th>
    4793. 

  4793.             <td class="vars_value">@icon-warning</td>
    4794. 

  4794.             <td class="vars_value">'' | false | value</td>
    4795. 

  4795.             <td>Error message icon symbol code</td>
    4796. 

  4796.         </tr>
    4797. 

  4797.         <tr>
    4798. 

  4798.             <th>@message-error-icon__color-inner</th>
    4799. 

  4799.             <td class="vars_value">#b30000</td>
    4800. 

  4800.             <td class="vars_value">'' | false | value</td>
    4801. 

  4801.             <td>Error message icon symbol color </td>
    4802. 

  4802.         </tr>
    4803. 

  4803.         <tr>
    4804. 

  4804.             <th>@message-error-icon__color-lateral</th>
    4805. 

  4805.             <td class="vars_value">@color-white</td>
    4806. 

  4806.             <td class="vars_value">'' | false | value</td>
    4807. 

  4807.             <td>Error message lateral icon symbol color</td>
    4808. 

  4808.         </tr>
    4809. 

  4809.         <tr>
    4810. 

  4810.             <th>@message-error-icon__background</th>
    4811. 

  4811.             <td class="vars_value">#b30000</td>
    4812. 

  4812.             <td class="vars_value">'' | false | value</td>
    4813. 

  4813.             <td>Error message icon background</td>
    4814. 

  4814.         </tr>
    4815. 

  4815.         <tr>
    4816. 

  4816.             <th>@message-error-icon__top</th>
    4817. 

  4817.             <td class="vars_value">@message-icon__top</td>
    4818. 

  4818.             <td class="vars_value">'' | false | value</td>
    4819. 

  4819.             <td>Message icon top position</td>
    4820. 

  4820.         </tr>
    4821. 

  4821.         <tr>
    4822. 

  4822.             <th>@message-error-icon__right</th>
    4823. 

  4823.             <td class="vars_value">@message-icon__right</td>
    4824. 

  4824.             <td class="vars_value">'' | false | value</td>
    4825. 

  4825.             <td>Message icon right position</td>
    4826. 

  4826.         </tr>
    4827. 

  4827.         <tr>
    4828. 

  4828.             <th>@message-error-icon__bottom</th>
    4829. 

  4829.             <td class="vars_value">@message-icon__bottom</td>
    4830. 

  4830.             <td class="vars_value">'' | false | value</td>
    4831. 

  4831.             <td>Message icon bottom position</td>
    4832. 

  4832.         </tr>
    4833. 

  4833.         <tr>
    4834. 

  4834.             <th>@message-error-icon__left</th>
    4835. 

  4835.             <td class="vars_value">@message-icon__left</td>
    4836. 

  4836.             <td class="vars_value">'' | false | value</td>
    4837. 

  4837.             <td>Message icon left position</td>
    4838. 

  4838.         </tr>
    4839. 

  4839.         <tr>
    4840. 

  4840.             <th colspan="4" class="vars_section">Success message</th>
    4841. 

  4841.         </tr>
    4842. 

  4842.         <tr>
    4843. 

  4843.             <th>@message-success__color</th>
    4844. 

  4844.             <td class="vars_value">#006400</td>
    4845. 

  4845.             <td class="vars_value">'' | false | value</td>
    4846. 

  4846.             <td>Success message text color</td>
    4847. 

  4847.         </tr>
    4848. 

  4848.         <tr>
    4849. 

  4849.             <th>@message-success__background</th>
    4850. 

  4850.             <td class="vars_value">#e5efe5</td>
    4851. 

  4851.             <td class="vars_value">'' | false | value</td>
    4852. 

  4852.             <td>Success message background</td>
    4853. 

  4853.         </tr>
    4854. 

  4854.         <tr>
    4855. 

  4855.             <th>@message-success-link__color</th>
    4856. 

  4856.             <td class="vars_value">@link__color</td>
    4857. 

  4857.             <td class="vars_value">'' | false | value</td>
    4858. 

  4858.             <td>Success message link color</td>
    4859. 

  4859.         </tr>
    4860. 

  4860.         <tr>
    4861. 

  4861.             <th>@message-success-link__color-hover</th>
    4862. 

  4862.             <td class="vars_value">@link__hover__color</td>
    4863. 

  4863.             <td class="vars_value">'' | false | value</td>
    4864. 

  4864.             <td>Success message hovered link color</td>
    4865. 

  4865.         </tr>
    4866. 

  4866.         <tr>
    4867. 

  4867.             <th>@message-success-link__color-active</th>
    4868. 

  4868.             <td class="vars_value">@link__hover__color</td>
    4869. 

  4869.             <td class="vars_value">'' | false | value</td>
    4870. 

  4870.             <td>Success message active link color </td>
    4871. 

  4871.         </tr>
    4872. 

  4872.         <tr>
    4873. 

  4873.             <th>@message-success__border-color</th>
    4874. 

  4874.             <td class="vars_value">@message__border-color</td>
    4875. 

  4875.             <td class="vars_value">'' | false | value</td>
    4876. 

  4876.             <td>Success message border color</td>
    4877. 

  4877.         </tr>
    4878. 

  4878.         <tr>
    4879. 

  4879.             <th>@message-success-icon</th>
    4880. 

  4880.             <td class="vars_value">@icon-checkmark</td>
    4881. 

  4881.             <td class="vars_value">'' | false | value</td>
    4882. 

  4882.             <td>Success message icon symbol code</td>
    4883. 

  4883.         </tr>
    4884. 

  4884.         <tr>
    4885. 

  4885.             <th>@message-success-icon__color-inner</th>
    4886. 

  4886.             <td class="vars_value">#006400</td>
    4887. 

  4887.             <td class="vars_value">'' | false | value</td>
    4888. 

  4888.             <td>Success message icon symbol color </td>
    4889. 

  4889.         </tr>
    4890. 

  4890.         <tr>
    4891. 

  4891.             <th>@message-success-icon__color-lateral</th>
    4892. 

  4892.             <td class="vars_value">@color-white</td>
    4893. 

  4893.             <td class="vars_value">'' | false | value</td>
    4894. 

  4894.             <td>Success message lateral icon symbol color</td>
    4895. 

  4895.         </tr>
    4896. 

  4896.         <tr>
    4897. 

  4897.             <th>@message-success-icon__background</th>
    4898. 

  4898.             <td class="vars_value">#006400</td>
    4899. 

  4899.             <td class="vars_value">'' | false | value</td>
    4900. 

  4900.             <td>Success message icon background</td>
    4901. 

  4901.         </tr>
    4902. 

  4902.         <tr>
    4903. 

  4903.             <th>@message-success-icon__top</th>
    4904. 

  4904.             <td class="vars_value">@message-icon__top</td>
    4905. 

  4905.             <td class="vars_value">'' | false | value</td>
    4906. 

  4906.             <td>Message icon top position</td>
    4907. 

  4907.         </tr>
    4908. 

  4908.         <tr>
    4909. 

  4909.             <th>@message-success-icon__right</th>
    4910. 

  4910.             <td class="vars_value">@message-icon__right</td>
    4911. 

  4911.             <td class="vars_value">'' | false | value</td>
    4912. 

  4912.             <td>Message icon right position</td>
    4913. 

  4913.         </tr>
    4914. 

  4914.         <tr>
    4915. 

  4915.             <th>@message-success-icon__bottom</th>
    4916. 

  4916.             <td class="vars_value">@message-icon__bottom</td>
    4917. 

  4917.             <td class="vars_value">'' | false | value</td>
    4918. 

  4918.             <td>Message icon bottom position</td>
    4919. 

  4919.         </tr>
    4920. 

  4920.         <tr>
    4921. 

  4921.             <th>@message-success-icon__left</th>
    4922. 

  4922.             <td class="vars_value">@message-icon__left</td>
    4923. 

  4923.             <td class="vars_value">'' | false | value</td>
    4924. 

  4924.             <td>Message icon left position</td>
    4925. 

  4925.         </tr>
    4926. 

  4926.         <tr>
    4927. 

  4927.             <th colspan="4" class="vars_section">Notice message</th>
    4928. 

  4928.         </tr>
    4929. 

  4929.         <tr>
    4930. 

  4930.             <th>@message-notice__color</th>
    4931. 

  4931.             <td class="vars_value">@message-info__color</td>
    4932. 

  4932.             <td class="vars_value">'' | false | value</td>
    4933. 

  4933.             <td>Notice message text color</td>
    4934. 

  4934.         </tr>
    4935. 

  4935.         <tr>
    4936. 

  4936.             <th>@message-notice__background</th>
    4937. 

  4937.             <td class="vars_value">@message-info__background</td>
    4938. 

  4938.             <td class="vars_value">'' | false | value</td>
    4939. 

  4939.             <td>Notice message background</td>
    4940. 

  4940.         </tr>
    4941. 

  4941.         <tr>
    4942. 

  4942.             <th>@message-notice-link__color</th>
    4943. 

  4943.             <td class="vars_value">@message-info-link__color</td>
    4944. 

  4944.             <td class="vars_value">'' | false | value</td>
    4945. 

  4945.             <td>Notice message link color</td>
    4946. 

  4946.         </tr>
    4947. 

  4947.         <tr>
    4948. 

  4948.             <th>@message-notice-link__color-hover</th>
    4949. 

  4949.             <td class="vars_value">@message-info-link__color-hover</td>
    4950. 

  4950.             <td class="vars_value">'' | false | value</td>
    4951. 

  4951.             <td>Notice message hovered link color</td>
    4952. 

  4952.         </tr>
    4953. 

  4953.         <tr>
    4954. 

  4954.             <th>@message-notice-link__color-active</th>
    4955. 

  4955.             <td class="vars_value">@message-info-link__color-active</td>
    4956. 

  4956.             <td class="vars_value">'' | false | value</td>
    4957. 

  4957.             <td>Notice message active link color </td>
    4958. 

  4958.         </tr>
    4959. 

  4959.         <tr>
    4960. 

  4960.             <th>@message-notice__border-color</th>
    4961. 

  4961.             <td class="vars_value">@message-info__border-color</td>
    4962. 

  4962.             <td class="vars_value">'' | false | value</td>
    4963. 

  4963.             <td>Notice message border color</td>
    4964. 

  4964.         </tr>
    4965. 

  4965.         <tr>
    4966. 

  4966.             <th>@message-notice-icon</th>
    4967. 

  4967.             <td class="vars_value">@message-info-icon</td>
    4968. 

  4968.             <td class="vars_value">'' | false | value</td>
    4969. 

  4969.             <td>Notice message icon symbol code</td>
    4970. 

  4970.         </tr>
    4971. 

  4971.         <tr>
    4972. 

  4972.             <th>@message-notice-icon__color-inner</th>
    4973. 

  4973.             <td class="vars_value">@message-info-icon__color-inner</td>
    4974. 

  4974.             <td class="vars_value">'' | false | value</td>
    4975. 

  4975.             <td>Notice message icon symbol color </td>
    4976. 

  4976.         </tr>
    4977. 

  4977.         <tr>
    4978. 

  4978.             <th>@message-notice-icon__color-lateral</th>
    4979. 

  4979.             <td class="vars_value">@message-info-icon__color-lateral</td>
    4980. 

  4980.             <td class="vars_value">'' | false | value</td>
    4981. 

  4981.             <td>Notice message lateral icon symbol color</td>
    4982. 

  4982.         </tr>
    4983. 

  4983.         <tr>
    4984. 

  4984.             <th>@message-notice-icon__background</th>
    4985. 

  4985.             <td class="vars_value">@message-info-icon__background</td>
    4986. 

  4986.             <td class="vars_value">'' | false | value</td>
    4987. 

  4987.             <td>Notice message icon background</td>
    4988. 

  4988.         </tr>
    4989. 

  4989.         <tr>
    4990. 

  4990.             <th>@message-notice-icon__top</th>
    4991. 

  4991.             <td class="vars_value">@message-icon__top</td>
    4992. 

  4992.             <td class="vars_value">'' | false | value</td>
    4993. 

  4993.             <td>Message icon top position</td>
    4994. 

  4994.         </tr>
    4995. 

  4995.         <tr>
    4996. 

  4996.             <th>@message-notice-icon__right</th>
    4997. 

  4997.             <td class="vars_value">@message-icon__right</td>
    4998. 

  4998.             <td class="vars_value">'' | false | value</td>
    4999. 

  4999.             <td>Message icon right position</td>
    5000. 

  5000.         </tr>
    5001. 

  5001.         <tr>
    5002. 

  5002.             <th>@message-notice-icon__bottom</th>
    5003. 

  5003.             <td class="vars_value">@message-icon__bottom</td>
    5004. 

  5004.             <td class="vars_value">'' | false | value</td>
    5005. 

  5005.             <td>Message icon bottom position</td>
    5006. 

  5006.         </tr>
    5007. 

  5007.         <tr>
    5008. 

  5008.             <th>@message-notice-icon__left</th>
    5009. 

  5009.             <td class="vars_value">@message-icon__left</td>
    5010. 

  5010.             <td class="vars_value">'' | false | value</td>
    5011. 

  5011.             <td>Message icon left position</td>
    5012. 

  5012.         </tr>
    5013. 

  5013.     </table>
    5014. 

  5014.   </pre>
    5015. 

  5015. 

  5016. <h2 id="pagination-variables">Pagination variables</h2>
    5017. 

  5017. <h4 id="the-codelibpagercode-mixin-variables">The <code>.lib-pager()</code> mixin variables</h4>
    5018. 

  5018.   <pre>
    5019. 

  5019.     <table>
    5020. 

  5020.         <tr>
    5021. 

  5021.             <th class="vars_head">Mixin variable</th>
    5022. 

  5022.             <th class="vars_head">Global variable</th>
    5023. 

  5023.             <th class="vars_head">Default value</th>
    5024. 

  5024.             <th class="vars_head">Allowed values</th>
    5025. 

  5025.             <th class="vars_head">Comment</th>
    5026. 

  5026.         </tr>
    5027. 

  5027.         <tr>
    5028. 

  5028.             <th nowrap="nowrap">@_pager-label-display</th>
    5029. 

  5029.             <td>@pager-label__display</td>
    5030. 

  5030.             <td class="vars_value">none</td>
    5031. 

  5031.             <td class="vars_value">none | block | inline-block</td>
    5032. 

  5032.             <td>The 'page' label is displayed</td>
    5033. 

  5033.         </tr>
    5034. 

  5034.         <tr>
    5035. 

  5035.             <th nowrap="nowrap">@_pager-item-display</th>
    5036. 

  5036.             <td>@pager-item__display</td>
    5037. 

  5037.             <td class="vars_value">inline-block</td>
    5038. 

  5038.             <td class="vars_value">none | block | inline-block</td>
    5039. 

  5039.             <td>The pager item label is displayed</td>
    5040. 

  5040.         </tr>
    5041. 

  5041.         <tr>
    5042. 

  5042.             <th nowrap="nowrap">@_pager-reset-spaces</th>
    5043. 

  5043.             <td>@pager-reset-spaces</td>
    5044. 

  5044.             <td class="vars_value">true</td>
    5045. 

  5045.             <td class="vars_value">true | false</td>
    5046. 

  5046.             <td>Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'</td>
    5047. 

  5047.         </tr>
    5048. 

  5048.         <tr>
    5049. 

  5049.             <th nowrap="nowrap">@_pager-font-size</th>
    5050. 

  5050.             <td>@pager__font-size</td>
    5051. 

  5051.             <td class="vars_value">@font-size__s</td>
    5052. 

  5052.             <td class="vars_value">'' | false | value</td>
    5053. 

  5053.             <td>Pager font size</td>
    5054. 

  5054.         </tr>
    5055. 

  5055.         <tr>
    5056. 

  5056.             <th nowrap="nowrap">@_pager-font-weight</th>
    5057. 

  5057.             <td>@pager__font-weight</td>
    5058. 

  5058.             <td class="vars_value">@font-weight__bold</td>
    5059. 

  5059.             <td class="vars_value">'' | false | value</td>
    5060. 

  5060.             <td>Pager font weight</td>
    5061. 

  5061.         </tr>
    5062. 

  5062.         <tr>
    5063. 

  5063.             <th nowrap="nowrap">@_pager-line-height</th>
    5064. 

  5064.             <td>@pager__line-height</td>
    5065. 

  5065.             <td class="vars_value">32px</td>
    5066. 

  5066.             <td class="vars_value">'' | false | value</td>
    5067. 

  5067.             <td>Pager line height</td>
    5068. 

  5068.         </tr>
    5069. 

  5069.         <tr>
    5070. 

  5070.             <th nowrap="nowrap">@_pager-item-margin</th>
    5071. 

  5071.             <td>@pager-item__margin</td>
    5072. 

  5072.             <td class="vars_value">0 2px 0 0</td>
    5073. 

  5073.             <td class="vars_value">'' | false | value</td>
    5074. 

  5074.             <td>Pager item margin</td>
    5075. 

  5075.         </tr>
    5076. 

  5076.         <tr>
    5077. 

  5077.             <th nowrap="nowrap">@_pager-item-padding</th>
    5078. 

  5078.             <td>@pager-item__padding</td>
    5079. 

  5079.             <td class="vars_value">0 4px</td>
    5080. 

  5080.             <td class="vars_value">'' | false | value</td>
    5081. 

  5081.             <td>Pager item padding</td>
    5082. 

  5082.         </tr>
    5083. 

  5083.         <tr>
    5084. 

  5084.             <th>@_pager-actions-padding</th>
    5085. 

  5085.             <td>@pager-actions__padding</td>
    5086. 

  5086.             <td class="vars_value">0</td>
    5087. 

  5087.             <td class="vars_value">'' | false | value</td>
    5088. 

  5088.             <td>Pager actions padding</td>
    5089. 

  5089.         </tr>
    5090. 

  5090.         <tr>
    5091. 

  5091.             <th colspan="5" class="vars_section">Pager current page</th>
    5092. 

  5092.         </tr>
    5093. 

  5093.         <tr>
    5094. 

  5094.             <th>@_pager-current-font-weight</th>
    5095. 

  5095.             <td>@pager-current__font-weight</td>
    5096. 

  5096.             <td class="vars_value">@font-weight__bold;</td>
    5097. 

  5097.             <td class="vars_value">'' | false | value</td>
    5098. 

  5098.             <td>Current page number font weight</td>
    5099. 

  5099.         </tr>
    5100. 

  5100.         <tr>
    5101. 

  5101.             <th>@_pager-current-color</th>
    5102. 

  5102.             <td>@pager-current__color</td>
    5103. 

  5103.             <td class="vars_value">@primary__color</td>
    5104. 

  5104.             <td class="vars_value">'' | false | value</td>
    5105. 

  5105.             <td>Current page number color</td>
    5106. 

  5106.         </tr>
    5107. 

  5107.         <tr>
    5108. 

  5108.             <th>@_pager-current-border</th>
    5109. 

  5109.             <td>@pager-current__border</td>
    5110. 

  5110.             <td class="vars_value">false</td>
    5111. 

  5111.             <td class="vars_value">'' | false | value</td>
    5112. 

  5112.             <td>Current page number border</td>
    5113. 

  5113.         </tr>
    5114. 

  5114.         <tr>
    5115. 

  5115.             <th>@_pager-current-background</th>
    5116. 

  5116.             <td>@pager-current__background</td>
    5117. 

  5117.             <td class="vars_value">false</td>
    5118. 

  5118.             <td class="vars_value">'' | false | value</td>
    5119. 

  5119.             <td>Current page number background</td>
    5120. 

  5120.         </tr>
    5121. 

  5121.         <tr>
    5122. 

  5122.             <th>@_pager-current-gradient</th>
    5123. 

  5123.             <td>@pager-current__gradient</td>
    5124. 

  5124.             <td class="vars_value">false</td>
    5125. 

  5125.             <td class="vars_value">true | false</td>
    5126. 

  5126.             <td>Current page number has gradient background</td>
    5127. 

  5127.         </tr>
    5128. 

  5128.         <tr>
    5129. 

  5129.             <th>@_pager-current-gradient-direction</th>
    5130. 

  5130.             <td>@pager-current__gradient-direction</td>
    5131. 

  5131.             <td class="vars_value">false</td>
    5132. 

  5132.             <td class="vars_value">'' | false | vertical | horizontal</td>
    5133. 

  5133.             <td>Direction of current page number background gradient (if there is any)</td>
    5134. 

  5134.         </tr>
    5135. 

  5135.         <tr>
    5136. 

  5136.             <th>@_pager-current-gradient-color-start</th>
    5137. 

  5137.             <td>@pager-current__gradient-color-start</td>
    5138. 

  5138.             <td class="vars_value">false</td>
    5139. 

  5139.             <td class="vars_value">'' | false | value</td>
    5140. 

  5140.             <td>Current page number gradient start color</td>
    5141. 

  5141.         </tr>
    5142. 

  5142.         <tr>
    5143. 

  5143.             <th>@_pager-current-gradient-color-end</th>
    5144. 

  5144.             <td>@pager-current__gradient-color-end</td>
    5145. 

  5145.             <td class="vars_value">false</td>
    5146. 

  5146.             <td class="vars_value">'' | false | value</td>
    5147. 

  5147.             <td>Current page number gradient end color</td>
    5148. 

  5148.         </tr>
    5149. 

  5149.         <tr>
    5150. 

  5150.             <th colspan="5" class="vars_section">Link to page number</th>
    5151. 

  5151.         </tr>
    5152. 

  5152.         <tr>
    5153. 

  5153.             <th>@_pager-gradient</th>
    5154. 

  5154.             <td>@pager__gradient</td>
    5155. 

  5155.             <td class="vars_value">false</td>
    5156. 

  5156.             <td class="vars_value">true | false</td>
    5157. 

  5157.             <td>Pager items have gradient background</td>
    5158. 

  5158.         </tr>
    5159. 

  5159.         <tr>
    5160. 

  5160.             <th>@_pager-gradient-direction</th>
    5161. 

  5161.             <td>@pager__gradient-direction</td>
    5162. 

  5162.             <td class="vars_value">'false</td>
    5163. 

  5163.             <td class="vars_value">'' | false | vertical | horizontal</td>
    5164. 

  5164.             <td>Direction of background gradient (if there is any) of pager item</td>
    5165. 

  5165.         </tr>
    5166. 

  5166.         <tr>
    5167. 

  5167.             <th colspan="5" class="vars_section">Link to page number - default</th>
    5168. 

  5168.         </tr>
    5169. 

  5169.         <tr>
    5170. 

  5170.             <th>@_pager-color</th>
    5171. 

  5171.             <td>@pager__color</td>
    5172. 

  5172.             <td class="vars_value">@link__color</td>
    5173. 

  5173.             <td class="vars_value">'' | false | value</td>
    5174. 

  5174.             <td>Pager item color</td>
    5175. 

  5175.         </tr>
    5176. 

  5176.         <tr>
    5177. 

  5177.             <th>@_pager-border</th>
    5178. 

  5178.             <td>@pager__border</td>
    5179. 

  5179.             <td class="vars_value">false</td>
    5180. 

  5180.             <td class="vars_value">'' | false | value</td>
    5181. 

  5181.             <td>Pager item border</td>
    5182. 

  5182.         </tr>
    5183. 

  5183.         <tr>
    5184. 

  5184.             <th>@_pager-text-decoration</th>
    5185. 

  5185.             <td>@pager__text-decoration</td>
    5186. 

  5186.             <td class="vars_value">none</td>
    5187. 

  5187.             <td class="vars_value">'' | false | value</td>
    5188. 

  5188.             <td>Pager item text decoration</td>
    5189. 

  5189.         </tr>
    5190. 

  5190.         <tr>
    5191. 

  5191.             <th>@_pager-background</th>
    5192. 

  5192.             <td>@pager__background</td>
    5193. 

  5193.             <td class="vars_value">false</td>
    5194. 

  5194.             <td class="vars_value">'' | false | value</td>
    5195. 

  5195.             <td>Pager item background</td>
    5196. 

  5196.         </tr>
    5197. 

  5197.         <tr>
    5198. 

  5198.             <th>@_pager-gradient-color-start</th>
    5199. 

  5199.             <td>@pager__gradient-color-start</td>
    5200. 

  5200.             <td class="vars_value">false</td>
    5201. 

  5201.             <td class="vars_value">'' | false | value</td>
    5202. 

  5202.             <td>Pager item gradient start color</td>
    5203. 

  5203.         </tr>
    5204. 

  5204.         <tr>
    5205. 

  5205.             <th>@_pager-gradient-color-end</th>
    5206. 

  5206.             <td>@pager__gradient-color-end</td>
    5207. 

  5207.             <td class="vars_value">false</td>
    5208. 

  5208.             <td class="vars_value">'' | false | value</td>
    5209. 

  5209.             <td>Pager item gradient end color</td>
    5210. 

  5210.         </tr>
    5211. 

  5211.         <tr>
    5212. 

  5212.             <th colspan="5" class="vars_section">Link to page number - visited</th>
    5213. 

  5213.         </tr>
    5214. 

  5214.         <tr>
    5215. 

  5215.             <th>@_pager-color-visited</th>
    5216. 

  5216.             <td>@pager__visited__color</td>
    5217. 

  5217.             <td class="vars_value">@link__visited__color</td>
    5218. 

  5218.             <td class="vars_value">'' | false | value</td>
    5219. 

  5219.             <td>Pager item visited color</td>
    5220. 

  5220.         </tr>
    5221. 

  5221.         <tr>
    5222. 

  5222.             <th>@_pager-border-visited</th>
    5223. 

  5223.             <td>@pager__visited__border</td>
    5224. 

  5224.             <td class="vars_value">false</td>
    5225. 

  5225.             <td class="vars_value">'' | false | value</td>
    5226. 

  5226.             <td>Pager item visited border</td>
    5227. 

  5227.         </tr>
    5228. 

  5228.         <tr>
    5229. 

  5229.             <th>@_pager-background-visited</th>
    5230. 

  5230.             <td>@pager__visited__background</td>
    5231. 

  5231.             <td class="vars_value">false</td>
    5232. 

  5232.             <td class="vars_value">'' | false | value</td>
    5233. 

  5233.             <td>Pager item visited background</td>
    5234. 

  5234.         </tr>
    5235. 

  5235.         <tr>
    5236. 

  5236.             <th>@_pager-gradient-color-start-visited</th>
    5237. 

  5237.             <td>@pager__visited__gradient-color-start</td>
    5238. 

  5238.             <td class="vars_value">false</td>
    5239. 

  5239.             <td class="vars_value">'' | false | value</td>
    5240. 

  5240.             <td>Pager item visited gradient start color</td>
    5241. 

  5241.         </tr>
    5242. 

  5242.         <tr>
    5243. 

  5243.             <th>@_pager-gradient-color-end-visited</th>
    5244. 

  5244.             <td>@pager__visited__gradient-color-end</td>
    5245. 

  5245.             <td class="vars_value">false</td>
    5246. 

  5246.             <td class="vars_value">'' | false | value</td>
    5247. 

  5247.             <td>Pager item visited gradient end color</td>
    5248. 

  5248.         </tr>
    5249. 

  5249.         <tr>
    5250. 

  5250.             <th colspan="5" class="vars_section">Link to page number - hover</th>
    5251. 

  5251.         </tr>
    5252. 

  5252.         <tr>
    5253. 

  5253.             <th>@_pager-color-hover</th>
    5254. 

  5254.             <td>@pager__hover__color</td>
    5255. 

  5255.             <td class="vars_value">@link__hover__color</td>
    5256. 

  5256.             <td class="vars_value">&nbsp;</td>
    5257. 

  5257.             <td>Pager item hover color</td>
    5258. 

  5258.         </tr>
    5259. 

  5259.         <tr>
    5260. 

  5260.             <th>@_pager-border-hover</th>
    5261. 

  5261.             <td>@pager__hover__border</td>
    5262. 

  5262.             <td class="vars_value">false</td>
    5263. 

  5263.             <td class="vars_value">'' | false | value</td>
    5264. 

  5264.             <td>Pager item hover border</td>
    5265. 

  5265.         </tr>
    5266. 

  5266.         <tr>
    5267. 

  5267.             <th>@_pager-text-decoration-hover</th>
    5268. 

  5268.             <td>@pager__text-decoration</td>
    5269. 

  5269.             <td class="vars_value">none</td>
    5270. 

  5270.             <td class="vars_value">'' | false | value</td>
    5271. 

  5271.             <td>Pager item hover text decoration</td>
    5272. 

  5272.         </tr>
    5273. 

  5273.         <tr>
    5274. 

  5274.             <th>@_pager-background-hover</th>
    5275. 

  5275.             <td>@pager__hover__background</td>
    5276. 

  5276.             <td class="vars_value">false</td>
    5277. 

  5277.             <td class="vars_value">'' | false | value</td>
    5278. 

  5278.             <td>Pager item hover background</td>
    5279. 

  5279.         </tr>
    5280. 

  5280.         <tr>
    5281. 

  5281.             <th>@_pager-gradient-color-start-hover</th>
    5282. 

  5282.             <td>@pager__hover__gradient-color-start</td>
    5283. 

  5283.             <td class="vars_value">false</td>
    5284. 

  5284.             <td class="vars_value">'' | false | value</td>
    5285. 

  5285.             <td>Pager item hover gradient start color</td>
    5286. 

  5286.         </tr>
    5287. 

  5287.         <tr>
    5288. 

  5288.             <th>@_pager-gradient-color-end-hover</th>
    5289. 

  5289.             <td>@pager__hover__gradient-color-end</td>
    5290. 

  5290.             <td class="vars_value">false</td>
    5291. 

  5291.             <td class="vars_value">'' | false | value</td>
    5292. 

  5292.             <td>Pager item hover gradient end color</td>
    5293. 

  5293.         </tr>
    5294. 

  5294.         <tr>
    5295. 

  5295.             <th colspan="5" class="vars_section">Link to page number - active</th>
    5296. 

  5296.         </tr>
    5297. 

  5297.         <tr>
    5298. 

  5298.             <th>@_pager-color-active</th>
    5299. 

  5299.             <td>@pager__active__color</td>
    5300. 

  5300.             <td class="vars_value">@link__hover__color</td>
    5301. 

  5301.             <td class="vars_value">'' | false | value</td>
    5302. 

  5302.             <td>Pager item active color</td>
    5303. 

  5303.         </tr>
    5304. 

  5304.         <tr>
    5305. 

  5305.             <th>@_pager-border-active</th>
    5306. 

  5306.             <td>@pager__active__border</td>
    5307. 

  5307.             <td class="vars_value">false</td>
    5308. 

  5308.             <td class="vars_value">'' | false | value</td>
    5309. 

  5309.             <td>Pager item active border</td>
    5310. 

  5310.         </tr>
    5311. 

  5311.         <tr>
    5312. 

  5312.             <th>@_pager-background-active</th>
    5313. 

  5313.             <td>@pager__active__background</td>
    5314. 

  5314.             <td class="vars_value">false</td>
    5315. 

  5315.             <td class="vars_value">'' | false | value</td>
    5316. 

  5316.             <td>Pager item active background</td>
    5317. 

  5317.         </tr>
    5318. 

  5318.         <tr>
    5319. 

  5319.             <th>@_pager-gradient-color-start-active</th>
    5320. 

  5320.             <td>@pager__active__gradient-color-start</td>
    5321. 

  5321.             <td class="vars_value">false</td>
    5322. 

  5322.             <td class="vars_value">'' | false | value</td>
    5323. 

  5323.             <td>Pager item active  gradient start color</td>
    5324. 

  5324.         </tr>
    5325. 

  5325.         <tr>
    5326. 

  5326.             <th>@_pager-gradient-color-end-active</th>
    5327. 

  5327.             <td>@pager__active__gradient-color-end</td>
    5328. 

  5328.             <td class="vars_value">false</td>
    5329. 

  5329.             <td class="vars_value">'' | false | value</td>
    5330. 

  5330.             <td>Pager item active  gradient end color</td>
    5331. 

  5331.         </tr>
    5332. 

  5332.         <tr>
    5333. 

  5333.             <th colspan="5" class="vars_section">Previous/next action links - icons</th>
    5334. 

  5334.         </tr>
    5335. 

  5335.         <tr>
    5336. 

  5336.             <th>@_pager-icon-use</th>
    5337. 

  5337.             <td>@pager-icon__use</td>
    5338. 

  5338.             <td class="vars_value">true</td>
    5339. 

  5339.             <td class="vars_value">true | false</td>
    5340. 

  5340.             <td>previous/next links have icons</td>
    5341. 

  5341.         </tr>
    5342. 

  5342.         <tr>
    5343. 

  5343.             <th>@_pager-icon-previous-content</th>
    5344. 

  5344.             <td>@pager-icon__previous-content</td>
    5345. 

  5345.             <td class="vars_value">@icon-prev</td>
    5346. 

  5346.             <td class="vars_value">'' | false | value</td>
    5347. 

  5347.             <td>&quot;previous&quot; link icon</td>
    5348. 

  5348.         </tr>
    5349. 

  5349.         <tr>
    5350. 

  5350.             <th>@_pager-icon-next-content</th>
    5351. 

  5351.             <td>@pager-icon__next-content</td>
    5352. 

  5352.             <td class="vars_value">@icon-next</td>
    5353. 

  5353.             <td class="vars_value">'' | false | value</td>
    5354. 

  5354.             <td>&quot;next&quot; link icon</td>
    5355. 

  5355.         </tr>
    5356. 

  5356.         <tr>
    5357. 

  5357.             <th>@_pager-icon-text-hide</th>
    5358. 

  5358.             <td></td>
    5359. 

  5359.             <td class="vars_value">true</td>
    5360. 

  5360.             <td class="vars_value">true | false</td>
    5361. 

  5361.             <td>The &quot;previous&quot; and &quot;next&quot; words are hidden</td>
    5362. 

  5362.         </tr>
    5363. 

  5363.         <tr>
    5364. 

  5364.             <th>@_pager-icon-position</th>
    5365. 

  5365.             <td></td>
    5366. 

  5366.             <td class="vars_value">before</td>
    5367. 

  5367.             <td class="vars_value">before | after</td>
    5368. 

  5368.             <td>Icon position</td>
    5369. 

  5369.         </tr>
    5370. 

  5370.         <tr>
    5371. 

  5371.             <th>@_pager-icon-font</th>
    5372. 

  5372.             <td>@pager-icon__font</td>
    5373. 

  5373.             <td class="vars_value">@icon-font</td>
    5374. 

  5374.             <td class="vars_value">'' | false | value</td>
    5375. 

  5375.             <td>Icon font</td>
    5376. 

  5376.         </tr>
    5377. 

  5377.         <tr>
    5378. 

  5378.             <th>@_pager-icon-font-margin</th>
    5379. 

  5379.             <td>@pager-icon__font-margin</td>
    5380. 

  5380.             <td class="vars_value">0 0 0 -6px</td>
    5381. 

  5381.             <td class="vars_value">'' | false | value</td>
    5382. 

  5382.             <td>Icon font margin</td>
    5383. 

  5383.         </tr>
    5384. 

  5384.         <tr>
    5385. 

  5385.             <th>@_pager-icon-font-vertical-align</th>
    5386. 

  5386.             <td>@pager-icon__font-vertical-align</td>
    5387. 

  5387.             <td class="vars_value">top</td>
    5388. 

  5388.             <td class="vars_value">'' | false | value</td>
    5389. 

  5389.             <td>Icon font vertical align</td>
    5390. 

  5390.         </tr>
    5391. 

  5391.         <tr>
    5392. 

  5392.             <th>@_pager-icon-font-size</th>
    5393. 

  5393.             <td>@pager-icon__font-size</td>
    5394. 

  5394.             <td class="vars_value">46px</td>
    5395. 

  5395.             <td class="vars_value">'' | false | value</td>
    5396. 

  5396.             <td>Icon font size</td>
    5397. 

  5397.         </tr>
    5398. 

  5398.         <tr>
    5399. 

  5399.             <th>@_pager-icon-font-line-height</th>
    5400. 

  5400.             <td>@pager-icon__font-line-height</td>
    5401. 

  5401.             <td class="vars_value">@icon-font__line-height</td>
    5402. 

  5402.             <td class="vars_value">'' | false | value</td>
    5403. 

  5403.             <td>Icon font line height</td>
    5404. 

  5404.         </tr>
    5405. 

  5405.         <tr>
    5406. 

  5406.             <th colspan="5" class="vars_section">Previous/next action links</th>
    5407. 

  5407.         </tr>
    5408. 

  5408.         <tr>
    5409. 

  5409.             <th>@_pager-action-gradient</th>
    5410. 

  5410.             <td>@pager__gradient</td>
    5411. 

  5411.             <td class="vars_value">false</td>
    5412. 

  5412.             <td class="vars_value">true | false</td>
    5413. 

  5413.             <td>Previous/next links have gradient background</td>
    5414. 

  5414.         </tr>
    5415. 

  5415.         <tr>
    5416. 

  5416.             <th>@_pager-action-gradient-direction</th>
    5417. 

  5417.             <td>@pager__gradient-direction</td>
    5418. 

  5418.             <td class="vars_value">false</td>
    5419. 

  5419.             <td class="vars_value">'' | false | vertical | horizontal</td>
    5420. 

  5420.             <td>Direction of background gradient (if there is any) of previous/next links</td>
    5421. 

  5421.         </tr>
    5422. 

  5422.         <tr>
    5423. 

  5423.             <th colspan="5" class="vars_section">Previous/next action links - default</th>
    5424. 

  5424.         </tr>
    5425. 

  5425.         <tr>
    5426. 

  5426.             <th>@_pager-action-color</th>
    5427. 

  5427.             <td>@pager-action__color</td>
    5428. 

  5428.             <td class="vars_value">@text__color__muted</td>
    5429. 

  5429.             <td class="vars_value">'' | false | value</td>
    5430. 

  5430.             <td>Pager action color</td>
    5431. 

  5431.         </tr>
    5432. 

  5432.         <tr>
    5433. 

  5433.             <th>@_pager-action-border</th>
    5434. 

  5434.             <td>@pager-action__border</td>
    5435. 

  5435.             <td class="vars_value">@border-width__base solid @border-color__base</td>
    5436. 

  5436.             <td class="vars_value">'' | false | value</td>
    5437. 

  5437.             <td>Pager action border</td>
    5438. 

  5438.         </tr>
    5439. 

  5439.         <tr>
    5440. 

  5440.             <th>@_pager-action-text-decoration</th>
    5441. 

  5441.             <td>@pager-action__text-decoration</td>
    5442. 

  5442.             <td class="vars_value">@pager__text-decoration</td>
    5443. 

  5443.             <td class="vars_value">'' | false | value</td>
    5444. 

  5444.             <td>Pager action text decoration</td>
    5445. 

  5445.         </tr>
    5446. 

  5446.         <tr>
    5447. 

  5447.             <th>@_pager-action-background</th>
    5448. 

  5448.             <td>@pager-action__background</td>
    5449. 

  5449.             <td class="vars_value">@pager__background</td>
    5450. 

  5450.             <td class="vars_value">'' | false | value</td>
    5451. 

  5451.             <td>Pager action background</td>
    5452. 

  5452.         </tr>
    5453. 

  5453.         <tr>
    5454. 

  5454.             <th>@_pager-action-gradient-color-start</th>
    5455. 

  5455.             <td>@pager__gradient-color-start</td>
    5456. 

  5456.             <td class="vars_value">false</td>
    5457. 

  5457.             <td class="vars_value">'' | false | value</td>
    5458. 

  5458.             <td>Pager action gradient start color</td>
    5459. 

  5459.         </tr>
    5460. 

  5460.         <tr>
    5461. 

  5461.             <th>@_pager-action-gradient-color-end</th>
    5462. 

  5462.             <td>@pager__gradient-color-end</td>
    5463. 

  5463.             <td class="vars_value">false</td>
    5464. 

  5464.             <td class="vars_value">'' | false | value</td>
    5465. 

  5465.             <td>Pager action gradient end color</td>
    5466. 

  5466.         </tr>
    5467. 

  5467.         <tr>
    5468. 

  5468.             <th colspan="5" class="vars_section">Previous/next action links - visited</th>
    5469. 

  5469.         </tr>
    5470. 

  5470.         <tr>
    5471. 

  5471.             <th>@_pager-action-color-visited</th>
    5472. 

  5472.             <td>@pager-action__visited__color</td>
    5473. 

  5473.             <td class="vars_value">@pager-action__color</td>
    5474. 

  5474.             <td class="vars_value">'' | false | value</td>
    5475. 

  5475.             <td>Pager action visited color</td>
    5476. 

  5476.         </tr>
    5477. 

  5477.         <tr>
    5478. 

  5478.             <th>@_pager-action-border-visited</th>
    5479. 

  5479.             <td>@pager-action__visited__border</td>
    5480. 

  5480.             <td class="vars_value">false</td>
    5481. 

  5481.             <td class="vars_value">'' | false | value</td>
    5482. 

  5482.             <td>Pager action visited border</td>
    5483. 

  5483.         </tr>
    5484. 

  5484.         <tr>
    5485. 

  5485.             <th>@_pager-action-background-visited</th>
    5486. 

  5486.             <td>@pager-action__visited__background</td>
    5487. 

  5487.             <td class="vars_value">false</td>
    5488. 

  5488.             <td class="vars_value">'' | false | value</td>
    5489. 

  5489.             <td>Pager action visited background</td>
    5490. 

  5490.         </tr>
    5491. 

  5491.         <tr>
    5492. 

  5492.             <th nowrap="nowrap">@_pager-action-gradient-color-start-visited</th>
    5493. 

  5493.             <td>@pager__visited__gradient-color-start</td>
    5494. 

  5494.             <td class="vars_value">false</td>
    5495. 

  5495.             <td class="vars_value">'' | false | value</td>
    5496. 

  5496.             <td>Pager action visited gradient start color</td>
    5497. 

  5497.         </tr>
    5498. 

  5498.         <tr>
    5499. 

  5499.             <th>@_pager-action-gradient-color-end-visited</th>
    5500. 

  5500.             <td>@pager__visited__gradient-color-end</td>
    5501. 

  5501.             <td class="vars_value">false</td>
    5502. 

  5502.             <td class="vars_value">'' | false | value</td>
    5503. 

  5503.             <td>Pager action visited gradient end color</td>
    5504. 

  5504.         </tr>
    5505. 

  5505.         <tr>
    5506. 

  5506.             <th colspan="5" class="vars_section">Previous/next action links - hover</th>
    5507. 

  5507.         </tr>
    5508. 

  5508.         <tr>
    5509. 

  5509.             <th>@_pager-action-color-hover</th>
    5510. 

  5510.             <td>@pager-action__hover__color</td>
    5511. 

  5511.             <td class="vars_value">@pager-action__color</td>
    5512. 

  5512.             <td class="vars_value">'' | false | value</td>
    5513. 

  5513.             <td>Pager action hover color</td>
    5514. 

  5514.         </tr>
    5515. 

  5515.         <tr>
    5516. 

  5516.             <th>@_pager-action-border-hover</th>
    5517. 

  5517.             <td>@pager-action__hover__border</td>
    5518. 

  5518.             <td class="vars_value">false</td>
    5519. 

  5519.             <td class="vars_value">'' | false | value</td>
    5520. 

  5520.             <td>Pager action hover border</td>
    5521. 

  5521.         </tr>
    5522. 

  5522.         <tr>
    5523. 

  5523.             <th>@_pager-action-text-decoration-hover</th>
    5524. 

  5524.             <td>@pager-action__hover__text-decoration</td>
    5525. 

  5525.             <td class="vars_value" nowrap="nowrap">@pager__hover__text-decoration</td>
    5526. 

  5526.             <td class="vars_value">'' | false | value</td>
    5527. 

  5527.             <td>Pager action hover text decoration</td>
    5528. 

  5528.         </tr>
    5529. 

  5529.         <tr>
    5530. 

  5530.             <th>@_pager-action-background-hover</th>
    5531. 

  5531.             <td>@pager-action__hover__background</td>
    5532. 

  5532.             <td class="vars_value">false</td>
    5533. 

  5533.             <td class="vars_value">'' | false | value</td>
    5534. 

  5534.             <td>Pager action hover background</td>
    5535. 

  5535.         </tr>
    5536. 

  5536.         <tr>
    5537. 

  5537.             <th nowrap="nowrap">@_pager-action-gradient-color-start-hover</th>
    5538. 

  5538.             <td>@pager__hover__gradient-color-start</td>
    5539. 

  5539.             <td class="vars_value">false</td>
    5540. 

  5540.             <td class="vars_value">'' | false | value</td>
    5541. 

  5541.             <td>Pager action hover gradient start color</td>
    5542. 

  5542.         </tr>
    5543. 

  5543.         <tr>
    5544. 

  5544.             <th nowrap="nowrap">@_pager-action-gradient-color-end-hover</th>
    5545. 

  5545.             <td>@pager__hover__gradient-color-end</td>
    5546. 

  5546.             <td class="vars_value">false</td>
    5547. 

  5547.             <td class="vars_value">'' | false | value</td>
    5548. 

  5548.             <td>Pager action hover gradient end color</td>
    5549. 

  5549.         </tr>
    5550. 

  5550.         <tr>
    5551. 

  5551.             <th colspan="5" class="vars_section">Previous/next action links - active</th>
    5552. 

  5552.         </tr>
    5553. 

  5553.         <tr>
    5554. 

  5554.             <th>@_pager-action-color-active</th>
    5555. 

  5555.             <td>@pager-action__active__color</td>
    5556. 

  5556.             <td class="vars_value">@pager-action__color</td>
    5557. 

  5557.             <td class="vars_value">'' | false | value</td>
    5558. 

  5558.             <td>Pager action active color</td>
    5559. 

  5559.         </tr>
    5560. 

  5560.         <tr>
    5561. 

  5561.             <th>@_pager-action-border-active</th>
    5562. 

  5562.             <td>@pager-action__active__border</td>
    5563. 

  5563.             <td class="vars_value">false</td>
    5564. 

  5564.             <td class="vars_value">'' | false | value</td>
    5565. 

  5565.             <td>Pager action active border</td>
    5566. 

  5566.         </tr>
    5567. 

  5567.         <tr>
    5568. 

  5568.             <th>@_pager-action-background-active</th>
    5569. 

  5569.             <td>@pager-action__active__background</td>
    5570. 

  5570.             <td class="vars_value">false</td>
    5571. 

  5571.             <td class="vars_value">'' | false | value</td>
    5572. 

  5572.             <td>Pager action active background</td>
    5573. 

  5573.         </tr>
    5574. 

  5574.         <tr>
    5575. 

  5575.             <th nowrap="nowrap">@_pager-action-gradient-color-start-active</th>
    5576. 

  5576.             <td>@pager__active__gradient-color-start</td>
    5577. 

  5577.             <td class="vars_value">false</td>
    5578. 

  5578.             <td class="vars_value">'' | false | value</td>
    5579. 

  5579.             <td>Pager action active gradient start color</td>
    5580. 

  5580.         </tr>
    5581. 

  5581.         <tr>
    5582. 

  5582.             <th nowrap="nowrap">@_pager-action-gradient-color-end-active</th>
    5583. 

  5583.             <td>@pager__active__gradient-color-end</td>
    5584. 

  5584.             <td class="vars_value">false</td>
    5585. 

  5585.             <td class="vars_value">'' | false | value</td>
    5586. 

  5586.             <td>Pager action active gradient end color</td>
    5587. 

  5587.         </tr>
    5588. 

  5588.       </table>
    5589. 

  5589.   </pre>
    5590. 

  5590. 

  5591. <h2 id="popup-variables">Popup variables</h2>
    5592. 

  5592. <h4 id="the-codelibpopupcode-mixin-variables">The <code>.lib-popup()</code> mixin variables</h4>
    5593. 

  5593.  <pre>
    5594. 

  5594.     <table>
    5595. 

  5595.       <tr>
    5596. 

  5596.         <th class="vars_head">Mixin variable</th>
    5597. 

  5597.         <th class="vars_head">Global variable</th>
    5598. 

  5598.         <th class="vars_head">Default value</th>
    5599. 

  5599.         <th class="vars_head">Allowed values</th>
    5600. 

  5600.         <th class="vars_head">Comment</th>
    5601. 

  5601.       </tr>
    5602. 

  5602.       <tr>
    5603. 

  5603.         <th>@_popup-width</th>
    5604. 

  5604.         <td>@popup__width</td>
    5605. 

  5605.         <td class="vars_value">auto</td>
    5606. 

  5606.         <td class="vars_value">'' | false | value</td>
    5607. 

  5607.         <td>Popup width</td>
    5608. 

  5608.       </tr>
    5609. 

  5609.       <tr>
    5610. 

  5610.         <th>@_popup-height</th>
    5611. 

  5611.         <td>@popup__height</td>
    5612. 

  5612.         <td class="vars_value">auto</td>
    5613. 

  5613.         <td class="vars_value">'' | false | value</td>
    5614. 

  5614.         <td>Popup height</td>
    5615. 

  5615.       </tr>
    5616. 

  5616.       <tr>
    5617. 

  5617.         <th>@_popup-padding</th>
    5618. 

  5618.         <td>@popup__padding</td>
    5619. 

  5619.         <td class="vars_value">22px</td>
    5620. 

  5620.         <td class="vars_value">'' | false | value</td>
    5621. 

  5621.         <td>Inner popup padding</td>
    5622. 

  5622.       </tr>
    5623. 

  5623.       <tr>
    5624. 

  5624.         <th>@_popup-background</th>
    5625. 

  5625.         <td>@popup__background</td>
    5626. 

  5626.         <td class="vars_value">@color-white</td>
    5627. 

  5627.         <td class="vars_value">'' | false | value</td>
    5628. 

  5628.         <td>Popup background</td>
    5629. 

  5629.       </tr>
    5630. 

  5630.       <tr>
    5631. 

  5631.         <th>@_popup-border</th>
    5632. 

  5632.         <td>@popup__border</td>
    5633. 

  5633.         <td class="vars_value">1px solid #aeaeae</td>
    5634. 

  5634.         <td class="vars_value">'' | false | value</td>
    5635. 

  5635.         <td>Popup border</td>
    5636. 

  5636.       </tr>
    5637. 

  5637.       <tr>
    5638. 

  5638.         <th>@_popup-shadow</th>
    5639. 

  5639.         <td>@popup__shadow</td>
    5640. 

  5640.         <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
    5641. 

  5641.         <td class="vars_value">'' | false | none | value</td>
    5642. 

  5642.         <td>Popup shadow</td>
    5643. 

  5643.       </tr>
    5644. 

  5644.       <tr>
    5645. 

  5645.         <th>@_popup-fade</th>
    5646. 

  5646.         <td>@popup__fade</td>
    5647. 

  5647.         <td class="vars_value">opacity .3s linear</td>
    5648. 

  5648.         <td class="vars_value">'' | false | value</td>
    5649. 

  5649.         <td>Popup overlay opacity</td>
    5650. 

  5650.       </tr>
    5651. 

  5651.       <tr>
    5652. 

  5652.         <th>@_popup-z-index</th>
    5653. 

  5653.         <td>@popup__z-index</td>
    5654. 

  5654.         <td class="vars_value">1001</td>
    5655. 

  5655.         <td class="vars_value">'' | false | value</td>
    5656. 

  5656.         <td>Popup z-index</td>
    5657. 

  5657.       </tr>
    5658. 

  5658.       <tr>
    5659. 

  5659.         <th colspan="5" class="vars_section">Popup position</th>
    5660. 

  5660.       </tr>
    5661. 

  5661.       <tr>
    5662. 

  5662.         <th>@_popup-position</th>
    5663. 

  5663.         <td>@popup__position</td>
    5664. 

  5664.         <td class="vars_value">fixed</td>
    5665. 

  5665.         <td class="vars_value">'' | false | value</td>
    5666. 

  5666.         <td>Popup position</td>
    5667. 

  5667.       </tr>
    5668. 

  5668.       <tr>
    5669. 

  5669.         <th>@_popup-position-top</th>
    5670. 

  5670.         <td>@popup__position-top</td>
    5671. 

  5671.         <td class="vars_value">0</td>
    5672. 

  5672.         <td class="vars_value">'' | false | value</td>
    5673. 

  5673.         <td>Popup top</td>
    5674. 

  5674.       </tr>
    5675. 

  5675.       <tr>
    5676. 

  5676.         <th>@_popup-position-right</th>
    5677. 

  5677.         <td>@popup__position-right</td>
    5678. 

  5678.         <td class="vars_value">0</td>
    5679. 

  5679.         <td class="vars_value">'' | false | value</td>
    5680. 

  5680.         <td>Popup right</td>
    5681. 

  5681.       </tr>
    5682. 

  5682.       <tr>
    5683. 

  5683.         <th>@_popup-position-bottom</th>
    5684. 

  5684.         <td>@popup__position-bottom</td>
    5685. 

  5685.         <td class="vars_value">0</td>
    5686. 

  5686.         <td class="vars_value">'' | false | value</td>
    5687. 

  5687.         <td>Popup bottom</td>
    5688. 

  5688.       </tr>
    5689. 

  5689.       <tr>
    5690. 

  5690.         <th>@_popup-position-left</th>
    5691. 

  5691.         <td>@popup__position-left</td>
    5692. 

  5692.         <td class="vars_value">0</td>
    5693. 

  5693.         <td class="vars_value">'' | false | value</td>
    5694. 

  5694.         <td>Popup left</td>
    5695. 

  5695.       </tr>
    5696. 

  5696.       <tr>
    5697. 

  5697.         <th colspan="5" class="vars_section">Popup margin</th>
    5698. 

  5698.       </tr>
    5699. 

  5699. 

  5700.       <tr>
    5701. 

  5701.         <th>@_popup-margin-top</th>
    5702. 

  5702.         <td>@popup__margin-top</td>
    5703. 

  5703.         <td class="vars_value">false</td>
    5704. 

  5704.         <td class="vars_value">'' | false | value</td>
    5705. 

  5705.         <td>Popup top margin</td>
    5706. 

  5706.       </tr>
    5707. 

  5707.       <tr>
    5708. 

  5708.         <th>@_popup-margin-right</th>
    5709. 

  5709.         <td>@popup__margin-right</td>
    5710. 

  5710.         <td class="vars_value">false</td>
    5711. 

  5711.         <td class="vars_value">'' | false | value</td>
    5712. 

  5712.         <td>Popup right margin</td>
    5713. 

  5713.       </tr>
    5714. 

  5714.       <tr>
    5715. 

  5715.         <th>@_popup-margin-bottom</th>
    5716. 

  5716.         <td>@popup__margin-bottom</td>
    5717. 

  5717.         <td class="vars_value">false</td>
    5718. 

  5718.         <td class="vars_value">'' | false | value</td>
    5719. 

  5719.         <td>Popup bottom margin</td>
    5720. 

  5720.       </tr>
    5721. 

  5721.       <tr>
    5722. 

  5722.         <th>@_popup-margin-left</th>
    5723. 

  5723.         <td>@popup__margin-left</td>
    5724. 

  5724.         <td class="vars_value">false</td>
    5725. 

  5725.         <td class="vars_value">'' | false | value</td>
    5726. 

  5726.         <td>Popup left margin</td>
    5727. 

  5727.       </tr>
    5728. 

  5728.       <tr>
    5729. 

  5729.         <th>@_popup-content-height</th>
    5730. 

  5730.         <td>@popup-content__height</td>
    5731. 

  5731.         <td class="vars_value">auto</td>
    5732. 

  5732.         <td class="vars_value">'' | false | value</td>
    5733. 

  5733.         <td>Popup content height</td>
    5734. 

  5734.       </tr>
    5735. 

  5735.       <tr>
    5736. 

  5736.         <th>@_popup-header-margin</th>
    5737. 

  5737.         <td>@popup-header__margin</td>
    5738. 

  5738.         <td class="vars_value">0 0 25px</td>
    5739. 

  5739.         <td class="vars_value">'' | false | value</td>
    5740. 

  5740.         <td>Popup header margin</td>
    5741. 

  5741.       </tr>
    5742. 

  5742.       <tr>
    5743. 

  5743.         <th>@_popup-content-margin</th>
    5744. 

  5744.         <td>@popup-content__margin</td>
    5745. 

  5745.         <td class="vars_value">false</td>
    5746. 

  5746.         <td class="vars_value">'' | false | value</td>
    5747. 

  5747.         <td>Popup content margin</td>
    5748. 

  5748.       </tr>
    5749. 

  5749.       <tr>
    5750. 

  5750.         <th>@_popup-footer-margin</th>
    5751. 

  5751.         <td>@popup-footer__margin</td>
    5752. 

  5752.         <td class="vars_value">false</td>
    5753. 

  5753.         <td class="vars_value">'' | false | value</td>
    5754. 

  5754.         <td>Popup footer margin</td>
    5755. 

  5755.       </tr>
    5756. 

  5756.       <tr>
    5757. 

  5757.         <th>@_popup-title-headings</th>
    5758. 

  5758.         <td>@popup-title-headings</td>
    5759. 

  5759.         <td class="vars_value">true</td>
    5760. 

  5760.         <td class="vars_value">true | false</td>
    5761. 

  5761.         <td>Popup title has the same style as one of page headings</td>
    5762. 

  5762.       </tr>
    5763. 

  5763.       <tr>
    5764. 

  5764.         <th>@_popup-title-headings-level</th>
    5765. 

  5765.         <td>@popup-title-headings__level</td>
    5766. 

  5766.         <td class="vars_value">h3</td>
    5767. 

  5767.         <td class="vars_value">h1 | h2 | h3 | h4 | h5 | h6</td>
    5768. 

  5768.         <td>What heading style is applied to the popup title</td>
    5769. 

  5769.       </tr>
    5770. 

  5770.       <tr>
    5771. 

  5771.         <th colspan="5" class="vars_section">Popup close button</th>
    5772. 

  5772.       </tr>
    5773. 

  5773.       <tr>
    5774. 

  5774.         <th>@_popup-button-close-icon</th>
    5775. 

  5775.         <td>@popup-button-close__icon</td>
    5776. 

  5776.         <td class="vars_value">true</td>
    5777. 

  5777.         <td class="vars_value">true | false</td>
    5778. 

  5778.         <td>Popup close button has an icon</td>
    5779. 

  5779.       </tr>
    5780. 

  5780.       <tr>
    5781. 

  5781.         <th>@_popup-button-close-reset</th>
    5782. 

  5782.         <td>@popup-button-close__reset</td>
    5783. 

  5783.         <td class="vars_value">true</td>
    5784. 

  5784.         <td class="vars_value">true | false</td>
    5785. 

  5785.         <td>Reset popup close button default styles</td>
    5786. 

  5786.       </tr>
    5787. 

  5787.       <tr>
    5788. 

  5788.         <th>@_popup-button-close-position</th>
    5789. 

  5789.         <td>@popup-button-close__position</td>
    5790. 

  5790.         <td class="vars_value">absolute</td>
    5791. 

  5791.         <td class="vars_value">'' | false | value</td>
    5792. 

  5792.         <td>Popup button close position</td>
    5793. 

  5793.       </tr>
    5794. 

  5794.       <tr>
    5795. 

  5795.         <th>@_popup-button-close-position-top</th>
    5796. 

  5796.         <td>@popup-button-close__position-top</td>
    5797. 

  5797.         <td class="vars_value">10px</td>
    5798. 

  5798.         <td class="vars_value">'' | false | value</td>
    5799. 

  5799.         <td>Popup button close top position</td>
    5800. 

  5800.       </tr>
    5801. 

  5801.       <tr>
    5802. 

  5802.         <th>@_popup-button-close-position-right</th>
    5803. 

  5803.         <td>@popup-button-close__position-right</td>
    5804. 

  5804.         <td class="vars_value">10px</td>
    5805. 

  5805.         <td class="vars_value">'' | false | value</td>
    5806. 

  5806.         <td>Popup button close right position</td>
    5807. 

  5807.       </tr>
    5808. 

  5808.       <tr>
    5809. 

  5809.         <th>@_popup-button-close-position-bottom</th>
    5810. 

  5810.         <td>@popup-button-close__position-bottom</td>
    5811. 

  5811.         <td class="vars_value">''</td>
    5812. 

  5812.         <td class="vars_value">'' | false | value</td>
    5813. 

  5813.         <td>Popup button close bottom position</td>
    5814. 

  5814.       </tr>
    5815. 

  5815.       <tr>
    5816. 

  5816.         <th>@_popup-button-close-position-left</th>
    5817. 

  5817.         <td>@popup-button-close__position-left</td>
    5818. 

  5818.         <td class="vars_value">''</td>
    5819. 

  5819.         <td class="vars_value">'' | false | value</td>
    5820. 

  5820.         <td>Popup button close left position</td>
    5821. 

  5821.       </tr>
    5822. 

  5822.       <tr>
    5823. 

  5823.         <th colspan="5" class="vars_section">Popup icons parameters</th>
    5824. 

  5824.       </tr>
    5825. 

  5825.       <tr>
    5826. 

  5826.         <th>@_popup-icon-font-content</th>
    5827. 

  5827.         <td>@popup-icon-font__content</td>
    5828. 

  5828.         <td class="vars_value">@icon-remove</td>
    5829. 

  5829.         <td class="vars_value">'' | false | value</td>
    5830. 

  5830.         <td>Popup icon code</td>
    5831. 

  5831.       </tr>
    5832. 

  5832.       <tr>
    5833. 

  5833.         <th>@_popup-icon-font</th>
    5834. 

  5834.         <td>@popup-icon-font</td>
    5835. 

  5835.         <td class="vars_value">@button-icon__font</td>
    5836. 

  5836.         <td class="vars_value">'' | false | value</td>
    5837. 

  5837.         <td>Popup icon font</td>
    5838. 

  5838.       </tr>
    5839. 

  5839.       <tr>
    5840. 

  5840.         <th>@_popup-icon-font-size</th>
    5841. 

  5841.         <td>@popup-icon-font__size</td>
    5842. 

  5842.         <td class="vars_value">@button-icon__font-size</td>
    5843. 

  5843.         <td class="vars_value">'' | false | value</td>
    5844. 

  5844.         <td>Popup icon font size</td>
    5845. 

  5845.       </tr>
    5846. 

  5846.       <tr>
    5847. 

  5847.         <th>@_popup-icon-font-line-height</th>
    5848. 

  5848.         <td>@popup-icon-font__line-height</td>
    5849. 

  5849.         <td class="vars_value">@button-icon__line-height</td>
    5850. 

  5850.         <td class="vars_value">'' | false | value</td>
    5851. 

  5851.         <td>Popup icon line height</td>
    5852. 

  5852.       </tr>
    5853. 

  5853.       <tr>
    5854. 

  5854.         <th>@_popup-icon-font-color</th>
    5855. 

  5855.         <td>@popup-icon-font__color</td>
    5856. 

  5856.         <td class="vars_value">@button-icon__color</td>
    5857. 

  5857.         <td class="vars_value">'' | false | value</td>
    5858. 

  5858.         <td>Popup icon color</td>
    5859. 

  5859.       </tr>
    5860. 

  5860.       <tr>
    5861. 

  5861.         <th>@_popup-icon-font-color-hover</th>
    5862. 

  5862.         <td>@popup-icon-font__color-hover</td>
    5863. 

  5863.         <td class="vars_value">@button-icon__hover__font-color</td>
    5864. 

  5864.         <td class="vars_value">'' | false | value</td>
    5865. 

  5865.         <td>Hovered popup icon color</td>
    5866. 

  5866.       </tr>
    5867. 

  5867.       <tr>
    5868. 

  5868.         <th>@_popup-icon-font-color-active</th>
    5869. 

  5869.         <td>@popup-icon-font__color-active</td>
    5870. 

  5870.         <td class="vars_value">@popup-icon-font__color-active</td>
    5871. 

  5871.         <td class="vars_value">'' | false | value</td>
    5872. 

  5872.         <td>Active popup icon color</td>
    5873. 

  5873.       </tr>
    5874. 

  5874.       <tr>
    5875. 

  5875.         <th>@_popup-icon-font-margin</th>
    5876. 

  5876.         <td>@popup-icon-font__margin</td>
    5877. 

  5877.         <td class="vars_value">@button-icon__margin</td>
    5878. 

  5878.         <td class="vars_value">'' | false | value</td>
    5879. 

  5879.         <td>Popup icon  margin</td>
    5880. 

  5880.       </tr>
    5881. 

  5881.       <tr>
    5882. 

  5882.         <th>@_popup-icon-font-vertical-align</th>
    5883. 

  5883.         <td>@popup-icon-font__vertical-align</td>
    5884. 

  5884.         <td class="vars_value">@button-icon__vertical-align</td>
    5885. 

  5885.         <td class="vars_value">'' | false | value</td>
    5886. 

  5886.         <td>Popup icon vertical align</td>
    5887. 

  5887.       </tr>
    5888. 

  5888.       <tr>
    5889. 

  5889.         <th>@_popup-icon-font-position</th>
    5890. 

  5890.         <td>@popup-icon-font__position</td>
    5891. 

  5891.         <td class="vars_value">@button-icon__position</td>
    5892. 

  5892.         <td class="vars_value">'' | false | value</td>
    5893. 

  5893.         <td>Popup icon position</td>
    5894. 

  5894.       </tr>
    5895. 

  5895.       <tr>
    5896. 

  5896.         <th>@_popup-icon-font-text-hide</th>
    5897. 

  5897.         <td>@popup-icon-font__text-hide</td>
    5898. 

  5898.         <td class="vars_value">true</td>
    5899. 

  5899.         <td class="vars_value">true | false</td>
    5900. 

  5900.         <td>Popup icon hide text</td>
    5901. 

  5901.       </tr>
    5902. 

  5902.       <tr>
    5903. 

  5903.         <th colspan="5" class="vars_section">Actions toolbar parameters</th>
    5904. 

  5904.       </tr>
    5905. 

  5905.       <tr>
    5906. 

  5906.         <th>@_popup-actions-toolbar</th>
    5907. 

  5907.         <td>@popup-actions-toolbar</td>
    5908. 

  5908.         <td class="vars_value">false</td>
    5909. 

  5909.         <td class="vars_value">true | false</td>
    5910. 

  5910.         <td>Actions toolbar is displayed</td>
    5911. 

  5911.       </tr>
    5912. 

  5912.       <tr>
    5913. 

  5913.         <th>@_popup-actions-toolbar-actions-position</th>
    5914. 

  5914.         <td>@popup-actions-toolbar-actions__position</td>
    5915. 

  5915.         <td class="vars_value">@actions-toolbar-actions__position</td>
    5916. 

  5916.         <td class="vars_value">justify | left | right | center</td>
    5917. 

  5917.         <td>Actions toolbar position</td>
    5918. 

  5918.       </tr>
    5919. 

  5919.       <tr>
    5920. 

  5920.         <th>@_popup-actions-toolbar-actions-reverse</th>
    5921. 

  5921.         <td>@popup-actions-toolbar-actions__reverse</td>
    5922. 

  5922.         <td class="vars_value">@actions-toolbar-actions__reverse</td>
    5923. 

  5923.         <td class="vars_value">true | false</td>
    5924. 

  5924.         <td>Actions toolbar reverse</td>
    5925. 

  5925.       </tr>
    5926. 

  5926.       <tr>
    5927. 

  5927.         <th>@_popup-actions-toolbar-margin</th>
    5928. 

  5928.         <td>@popup-actions-toolbar__margin</td>
    5929. 

  5929.         <td class="vars_value">@actions-toolbar__margin</td>
    5930. 

  5930.         <td class="vars_value">'' | false | value</td>
    5931. 

  5931.         <td>Actions toolbar margin</td>
    5932. 

  5932.       </tr>
    5933. 

  5933.       <tr>
    5934. 

  5934.         <th>@_popup-actions-toolbar-padding</th>
    5935. 

  5935.         <td>@popup-actions-toolbar__padding</td>
    5936. 

  5936.         <td class="vars_value">@actions-toolbar__padding</td>
    5937. 

  5937.         <td class="vars_value">'' | false | value</td>
    5938. 

  5938.         <td>Actions toolbar padding</td>
    5939. 

  5939.       </tr>
    5940. 

  5940.       <tr>
    5941. 

  5941.         <th>@_popup-actions-toolbar-actions-margin</th>
    5942. 

  5942.         <td>@popup-actions-toolbar-actions__margin</td>
    5943. 

  5943.         <td class="vars_value">@actions-toolbar-actions__margin</td>
    5944. 

  5944.         <td class="vars_value">'' | false | value</td>
    5945. 

  5945.         <td>Actions toolbar actions margin</td>
    5946. 

  5946.       </tr>
    5947. 

  5947.       <tr>
    5948. 

  5948.         <th>@_popup-actions-toolbar-primary-actions-margin</th>
    5949. 

  5949.         <td>@popup-actions-toolbar-actions-primary__margin</td>
    5950. 

  5950.         <td class="vars_value">@actions-toolbar-actions-primary__margin</td>
    5951. 

  5951.         <td class="vars_value">'' | false | value</td>
    5952. 

  5952.         <td>Actions toolbar primary actions margin</td>
    5953. 

  5953.       </tr>
    5954. 

  5954.       <tr>
    5955. 

  5955.         <th nowrap="nowrap">@_popup-actions-toolbar-secondary-actions-margin</th>
    5956. 

  5956.         <td>@popup-actions-toolbar-actions-secondary__margin</td>
    5957. 

  5957.         <td class="vars_value"nowrap="nowrap">@actions-toolbar-actions-secondary__margin</td>
    5958. 

  5958.         <td class="vars_value">'' | false | value</td>
    5959. 

  5959.         <td>Actions toolbar secondary actions margin</td>
    5960. 

  5960.       </tr>
    5961. 

  5961.       <tr>
    5962. 

  5962.         <th>@_popup-actions-toolbar-actions-links-margin-top</th>
    5963. 

  5963.         <td>@popup-actions-toolbar-actions-links__margin-top</td>
    5964. 

  5964.         <td class="vars_value">@actions-toolbar-actions-links__margin-top</td>
    5965. 

  5965.         <td class="vars_value">'' | false | value</td>
    5966. 

  5966.         <td>Actions toolbar links top margin</td>
    5967. 

  5967.       </tr>
    5968. 

  5968.       <tr>
    5969. 

  5969.         <th>@_popup-actions-toolbar-primary-actions-links-margin-top</th>
    5970. 

  5970.         <td>@popup-actions-toolbar-actions-links-primary__margin-top</td>
    5971. 

  5971.         <td class="vars_value">@actions-toolbar-actions-links-primary__margin-top</td>
    5972. 

  5972.         <td class="vars_value">'' | false | value</td>
    5973. 

  5973.         <td>Actions toolbar primary actions links top margin</td>
    5974. 

  5974.       </tr>
    5975. 

  5975.       <tr>
    5976. 

  5976.         <th>@_popup-actions-toolbar-secondary-links-margin-top</th>
    5977. 

  5977.         <td>@popup-actions-toolbar-actions-links-secondary__margin-top</td>
    5978. 

  5978.         <td class="vars_value">@actions-toolbar-actions-links-secondary__margin-top</td>
    5979. 

  5979.         <td class="vars_value">'' | false | value</td>
    5980. 

  5980.         <td>Actions toolbar secondary links top margin</td>
    5981. 

  5981.       </tr>
    5982. 

  5982.     </table>
    5983. 

  5983.  </pre>
    5984. 

  5984. 

  5985. <h2 id="window-overlay-variables">Window overlay variables</h2>
    5986. 

  5986.   <pre>
    5987. 

  5987.     <table>
    5988. 

  5988.       <tr>
    5989. 

  5989.         <th class="vars_head">Mixin variable</th>
    5990. 

  5990.         <th class="vars_head">Global variable</th>
    5991. 

  5991.         <th class="vars_head">Default value</th>
    5992. 

  5992.         <th class="vars_head">Allowed values</th>
    5993. 

  5993.         <th class="vars_head">Comment</th>
    5994. 

  5994.       </tr>
    5995. 

  5995.       <tr>
    5996. 

  5996.         <th>@_overlay-background</th>
    5997. 

  5997.         <td>@overlay__background</td>
    5998. 

  5998.         <td class="vars_value">#000</td>
    5999. 

  5999.         <td class="vars_value">'' | false | value</td>
    6000. 

  6000.         <td>Overlay background color</td>
    6001. 

  6001.       </tr>
    6002. 

  6002.       <tr>
    6003. 

  6003.         <th>@_overlay-opacity</th>
    6004. 

  6004.         <td>@overlay__opacity</td>
    6005. 

  6005.         <td class="vars_value">.5</td>
    6006. 

  6006.         <td class="vars_value">'' | false | value</td>
    6007. 

  6007.         <td>Overlay opacity</td>
    6008. 

  6008.       </tr>
    6009. 

  6009.       <tr>
    6010. 

  6010.         <th>@_overlay-opacity-old</th>
    6011. 

  6011.         <td>@overlay__opacity-old</td>
    6012. 

  6012.         <td class="vars_value">50</td>
    6013. 

  6013.         <td class="vars_value">'' | false | value</td>
    6014. 

  6014.         <td>Overlay opacity for old browsers</td>
    6015. 

  6015.       </tr>
    6016. 

  6016.       <tr>
    6017. 

  6017.         <th>@_overlay-fade</th>
    6018. 

  6018.         <td>@overlay__fade</td>
    6019. 

  6019.         <td class="vars_value">opacity .15s linear</td>
    6020. 

  6020.         <td class="vars_value">'' | false | value</td>
    6021. 

  6021.         <td>Overlay fade</td>
    6022. 

  6022.       </tr>
    6023. 

  6023.       <tr>
    6024. 

  6024.         <th>@_overlay-z-index</th>
    6025. 

  6025.         <td>@overlay__z-index</td>
    6026. 

  6026.         <td class="vars_value">1000</td>
    6027. 

  6027.         <td class="vars_value">'' | value</td>
    6028. 

  6028.         <td>Overlay z-index</td>
    6029. 

  6029.       </tr>
    6030. 

  6030.     </table>
    6031. 

  6031.   </pre>
    6032. 

  6032. 

  6033. <h2 id="rating-variables">Rating variables</h2>
    6034. 

  6034. <h4 id="the-codelibratingvotecode-and-codelibratingsummarycode-mixin-variables">The <code>.lib-rating-vote()</code> and <code>.lib-rating-summary()</code> mixin variables</h4>
    6035. 

  6035.   <pre>
    6036. 

  6036.     <table>
    6037. 

  6037.         <tr>
    6038. 

  6038.             <th class="vars_head">Mixin variable</th>
    6039. 

  6039.             <th class="vars_head">Global variable</th>
    6040. 

  6040.             <th class="vars_head">Default value</th>
    6041. 

  6041.             <th class="vars_head">Allowed values</th>
    6042. 

  6042.             <th class="vars_head">Comment</th>
    6043. 

  6043.         </tr>
    6044. 

  6044.         <tr>
    6045. 

  6045.             <th>@_icon-content</th>
    6046. 

  6046.             <td>@rating-icon__content</td>
    6047. 

  6047.             <td class="vars_value">@icon-star</td>
    6048. 

  6048.             <td class="vars_value">'' | false | icon code</td>
    6049. 

  6049.             <td>Rating icon symbol code</td>
    6050. 

  6050.         </tr>
    6051. 

  6051.         <tr>
    6052. 

  6052.             <th>@_icon-count</th>
    6053. 

  6053.             <td>@rating-icon__count</td>
    6054. 

  6054.             <td class="vars_value">5</td>
    6055. 

  6055.             <td class="vars_value">'' | value</td>
    6056. 

  6056.             <td>Number of rating icon symbols</td>
    6057. 

  6057.         </tr>
    6058. 

  6058.         <tr>
    6059. 

  6059.             <th>@_icon-font</th>
    6060. 

  6060.             <td>@rating-icon__font</td>
    6061. 

  6061.             <td class="vars_value">@icon-font</td>
    6062. 

  6062.             <td class="vars_value">'' | false | value</td>
    6063. 

  6063.             <td>Icon font</td>
    6064. 

  6064.         </tr>
    6065. 

  6065.         <tr>
    6066. 

  6066.             <th>@_icon-font-size</th>
    6067. 

  6067.             <td>@rating-icon__font-size</td>
    6068. 

  6068.             <td class="vars_value">28px</td>
    6069. 

  6069.             <td class="vars_value">'' | false | value</td>
    6070. 

  6070.             <td>Icon font size</td>
    6071. 

  6071.         </tr>
    6072. 

  6072.         <tr>
    6073. 

  6073.             <th>@_icon-letter-spacing</th>
    6074. 

  6074.             <td>@rating-icon__letter-spacing</td>
    6075. 

  6075.             <td class="vars_value">-10px</td>
    6076. 

  6076.             <td class="vars_value">'' | false | value</td>
    6077. 

  6077.             <td>Icon letter spacing</td>
    6078. 

  6078.         </tr>
    6079. 

  6079.         <tr>
    6080. 

  6080.             <th>@_icon-color</th>
    6081. 

  6081.             <td>@rating-icon__color</td>
    6082. 

  6082.             <td class="vars_value">#c7c7c7</td>
    6083. 

  6083.             <td class="vars_value">'' | false | value</td>
    6084. 

  6084.             <td>Unselected icons color</td>
    6085. 

  6085.         </tr>
    6086. 

  6086.         <tr>
    6087. 

  6087.             <th>@_icon-color-active</th>
    6088. 

  6088.             <td>@rating-icon__active__color</td>
    6089. 

  6089.             <td class="vars_value">#ff5601</td>
    6090. 

  6090.             <td class="vars_value">'' | false | value</td>
    6091. 

  6091.             <td>Selected and hovered icons color</td>
    6092. 

  6092.         </tr>
    6093. 

  6093.         <tr>
    6094. 

  6094.             <th>@_label-hide</th>
    6095. 

  6095.             <td>@rating-label__hide</td>
    6096. 

  6096.             <td class="vars_value">false</td>
    6097. 

  6097.             <td class="vars_value">true | false</td>
    6098. 

  6098.             <td>Rating label is displayed</td>
    6099. 

  6099.         </tr>
    6100. 

  6100.     </table>
    6101. 

  6101.   </pre>
    6102. 

  6102. 

  6103. <h2 id="tabs-variables">Tabs variables</h2>
    6104. 

  6104. <h4 id="the-codelibdatatabscode-mixin-variables">The <code>.lib-data-tabs()</code> mixin variables</h4>
    6105. 

  6105.   <pre>
    6106. 

  6106.     <table>
    6107. 

  6107.         <tr>
    6108. 

  6108.             <th class="vars_head">Mixin variable</th>
    6109. 

  6109.             <th class="vars_head">Global variable</th>
    6110. 

  6110.             <th class="vars_head">Default value</th>
    6111. 

  6111.             <th class="vars_head">Allowed values</th>
    6112. 

  6112.             <th class="vars_head">Comment</th>
    6113. 

  6113.         </tr>
    6114. 

  6114.         <tr>
    6115. 

  6115.             <th>@_tab-control-font-family</th>
    6116. 

  6116.             <td>@tab-control__font-family</td>
    6117. 

  6117.             <td class="vars_value">false</td>
    6118. 

  6118.             <td class="vars_value" nowrap>'' | false | value</td>
    6119. 

  6119.             <td>Tabs font family</td>
    6120. 

  6120.         </tr>
    6121. 

  6121.         <tr>
    6122. 

  6122.             <th>@_tab-control-font-size</th>
    6123. 

  6123.             <td>@tab-control__font-size</td>
    6124. 

  6124.             <td class="vars_value">@font-size__base</td>
    6125. 

  6125.             <td class="vars_value">'' | false | value</td>
    6126. 

  6126.             <td>Tabs font size</td>
    6127. 

  6127.         </tr>
    6128. 

  6128.         <tr>
    6129. 

  6129.             <th>@_tab-control-font-weight</th>
    6130. 

  6130.             <td>@tab-control__font-weight</td>
    6131. 

  6131.             <td class="vars_value">@font-weight__semibold</td>
    6132. 

  6132.             <td class="vars_value">'' | false | value</td>
    6133. 

  6133.             <td>Tabs font weight</td>
    6134. 

  6134.         </tr>
    6135. 

  6135.         <tr>
    6136. 

  6136.             <th>@_tab-control-font-style</th>
    6137. 

  6137.             <td>@tab-control__font-style</td>
    6138. 

  6138.             <td class="vars_value">false</td>
    6139. 

  6139.             <td class="vars_value">'' | false | value</td>
    6140. 

  6140.             <td>Tabs font style</td>
    6141. 

  6141.         </tr>
    6142. 

  6142.         <tr>
    6143. 

  6143.             <th>@_tab-control-line-height</th>
    6144. 

  6144.             <td>@tab-control__line-height</td>
    6145. 

  6145.             <td class="vars_value">@tab-control__height</td>
    6146. 

  6146.             <td class="vars_value">'' | false | value</td>
    6147. 

  6147.             <td>Tabs line height</td>
    6148. 

  6148.         </tr>
    6149. 

  6149.         <tr>
    6150. 

  6150.             <th colspan="5" class="vars_section">Tabs controls settings</th>
    6151. 

  6151.         </tr>
    6152. 

  6152.         <tr>
    6153. 

  6153.             <th>@_tab-control-background-color</th>
    6154. 

  6154.             <td>@tab-control__background-color</td>
    6155. 

  6155.             <td class="vars_value">@panel__background-color</td>
    6156. 

  6156.             <td class="vars_value">'' | false | value</td>
    6157. 

  6157.             <td>Current tab background</td>
    6158. 

  6158.         </tr>
    6159. 

  6159.         <tr>
    6160. 

  6160.             <th>@_tab-control-color</th>
    6161. 

  6161.             <td>@tab-control__color</td>
    6162. 

  6162.             <td class="vars_value">@link__color</td>
    6163. 

  6163.             <td class="vars_value">'' | false | value</td>
    6164. 

  6164.             <td>Current tab text color</td>
    6165. 

  6165.         </tr>
    6166. 

  6166.         <tr>
    6167. 

  6167.             <th>@_tab-control-text-decoration</th>
    6168. 

  6168.             <td>@tab-control__text-decoration</td>
    6169. 

  6169.             <td class="vars_value">none</td>
    6170. 

  6170.             <td class="vars_value">'' | false | value</td>
    6171. 

  6171.             <td>Current tab text-decoration</td>
    6172. 

  6172.         </tr>
    6173. 

  6173.         <tr>
    6174. 

  6174.             <th>@_tab-control-background-color-hover</th>
    6175. 

  6175.             <td>@tab-control__hover__background-color</td>
    6176. 

  6176.             <td class="vars_value">lighten(@tab-control__background-color, 5%)</td>
    6177. 

  6177.             <td class="vars_value">'' | false | value</td>
    6178. 

  6178.             <td>Hovered tab background</td>
    6179. 

  6179.         </tr>
    6180. 

  6180.         <tr>
    6181. 

  6181.             <th>@_tab-control-color-visited</th>
    6182. 

  6182.             <td>@tab-control__color</td>
    6183. 

  6183.             <td class="vars_value">@text__color__muted</td>
    6184. 

  6184.             <td class="vars_value">'' | false | value</td>
    6185. 

  6185.             <td>Visited tab color</td>
    6186. 

  6186.         </tr>
    6187. 

  6187.         <tr>
    6188. 

  6188.             <th>@_tab-control-text-decoration-visited</th>
    6189. 

  6189.             <td>@tab-control__color</td>
    6190. 

  6190.             <td class="vars_value"></td>
    6191. 

  6191.             <td class="vars_value">'' | false | value</td>
    6192. 

  6192.             <td>Visited tab text-decoration</td>
    6193. 

  6193.         </tr>
    6194. 

  6194.         <tr>
    6195. 

  6195.             <th>@_tab-control-color-hover</th>
    6196. 

  6196.             <td>@tab-control__hover__color</td>
    6197. 

  6197.             <td class="vars_value">@tab-control__color</td>
    6198. 

  6198.             <td class="vars_value">'' | false | value</td>
    6199. 

  6199.             <td>Hovered tab text color</td>
    6200. 

  6200.         </tr>
    6201. 

  6201.         <tr>
    6202. 

  6202.             <th>@_tab-control-text-decoration-hover</th>
    6203. 

  6203.             <td>@tab-control__text-decoration</td>
    6204. 

  6204.             <td class="vars_value">@tab-control__text-decoration</td>
    6205. 

  6205.             <td class="vars_value">'' | false | value</td>
    6206. 

  6206.             <td>Hovered tab text-decoration</td>
    6207. 

  6207.         </tr>
    6208. 

  6208.         <tr>
    6209. 

  6209.             <th>@_tab-control-background-color-active</th>
    6210. 

  6210.             <td>@tab-control__active__background-color</td>
    6211. 

  6211.             <td class="vars_value">lighten(@tab-control__background-color, 15%)</td>
    6212. 

  6212.             <td class="vars_value">'' | false | value</td>
    6213. 

  6213.             <td>Active tab background</td>
    6214. 

  6214.         </tr>
    6215. 

  6215.         <tr>
    6216. 

  6216.             <th>@_tab-control-color-active</th>
    6217. 

  6217.             <td>@tab-control__active__color</td>
    6218. 

  6218.             <td class="vars_value">@text__color</td>
    6219. 

  6219.             <td class="vars_value">'' | false | value</td>
    6220. 

  6220.             <td>Active tab text color</td>
    6221. 

  6221.         </tr>
    6222. 

  6222.         <tr>
    6223. 

  6223.             <th>@_tab-control-text-decoration-active</th>
    6224. 

  6224.             <td>@tab-control__text-decoration</td>
    6225. 

  6225.             <td class="vars_value">@tab-control__text-decoration</td>
    6226. 

  6226.             <td class="vars_value">'' | false | value</td>
    6227. 

  6227.             <td>Active tab text-decoration</td>
    6228. 

  6228.         </tr>
    6229. 

  6229.         <tr>
    6230. 

  6230.             <th>@_tab-control-height</th>
    6231. 

  6231.             <td>@tab-control__height</td>
    6232. 

  6232.             <td class="vars_value">@indent__l</td>
    6233. 

  6233.             <td class="vars_value">'' | false | value</td>
    6234. 

  6234.             <td>Height of tab control</td>
    6235. 

  6235.         </tr>
    6236. 

  6236.         <tr>
    6237. 

  6237.             <th>@_tab-control-margin-right</th>
    6238. 

  6238.             <td>@tab-control__margin-right</td>
    6239. 

  6239.             <td class="vars_value">@indent__xs</td>
    6240. 

  6240.             <td class="vars_value">'' | false | value</td>
    6241. 

  6241.             <td>Right margin of tab title block</td>
    6242. 

  6242.         </tr>
    6243. 

  6243.         <tr>
    6244. 

  6244.             <th>@_tab-control-padding-top</th>
    6245. 

  6245.             <td>@tab-control__padding-top</td>
    6246. 

  6246.             <td class="vars_value">@indent__xs</td>
    6247. 

  6247.             <td class="vars_value">'' | false | value</td>
    6248. 

  6248.             <td>Tab control padding top</td>
    6249. 

  6249.         </tr>
    6250. 

  6250.         <tr>
    6251. 

  6251.             <th nowrap="nowrap">@_tab-control-padding-right</th>
    6252. 

  6252.             <td>@tab-control__padding-right</td>
    6253. 

  6253.             <td class="vars_value">@indent__base</td>
    6254. 

  6254.             <td class="vars_value">'' | false | value</td>
    6255. 

  6255.             <td>Tab control padding right</td>
    6256. 

  6256.         </tr>
    6257. 

  6257.         <tr>
    6258. 

  6258.             <th>@_tab-control-padding-bottom</th>
    6259. 

  6259.             <td>@tab-control__padding-bottom</td>
    6260. 

  6260.             <td class="vars_value">@tab-control__padding-bottom</td>
    6261. 

  6261.             <td class="vars_value">'' | false | value</td>
    6262. 

  6262.             <td>Tab control padding bottom</td>
    6263. 

  6263.         </tr>
    6264. 

  6264.         <tr>
    6265. 

  6265.             <th>@_tab-control-padding-left</th>
    6266. 

  6266.             <td>@tab-control__padding-left</td>
    6267. 

  6267.             <td class="vars_value">@tab-control__padding-left</td>
    6268. 

  6268.             <td class="vars_value">'' | false | value</td>
    6269. 

  6269.             <td>Tab control padding left</td>
    6270. 

  6270.         </tr>
    6271. 

  6271.         <tr>
    6272. 

  6272.             <th>@_tab-control-border-width</th>
    6273. 

  6273.             <td>@tab-control__border-width</td>
    6274. 

  6274.             <td class="vars_value">@border-width__base</td>
    6275. 

  6275.             <td class="vars_value">'' | false | value</td>
    6276. 

  6276.             <td>Tab control border width</td>
    6277. 

  6277.         </tr>
    6278. 

  6278.         <tr>
    6279. 

  6279.             <th>@_tab-control-border-color</th>
    6280. 

  6280.             <td>@tab-control__border-color</td>
    6281. 

  6281.             <td class="vars_value">@border-color__base</td>
    6282. 

  6282.             <td class="vars_value">'' | false | value</td>
    6283. 

  6283.             <td>Tab control border color</td>
    6284. 

  6284.         </tr>
    6285. 

  6285.         <tr>
    6286. 

  6286.             <th colspan="5" class="vars_section">Tab content settings</th>
    6287. 

  6287.         </tr>
    6288. 

  6288.         <tr>
    6289. 

  6289.             <th>@_tab-content-background-color</th>
    6290. 

  6290.             <td>@tab-content__background-color</td>
    6291. 

  6291.             <td class="vars_value">@tab-control__active__background-color</td>
    6292. 

  6292.             <td class="vars_value">'' | false | value</td>
    6293. 

  6293.             <td>Tab content background</td>
    6294. 

  6294.         </tr>
    6295. 

  6295.         <tr>
    6296. 

  6296.             <th>@_tab-content-border-top-status</th>
    6297. 

  6297.             <td>@tab-content__border-top-status</td>
    6298. 

  6298.             <td class="vars_value">false</td>
    6299. 

  6299.             <td class="vars_value">true | false</td>
    6300. 

  6300.             <td>Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders</td>
    6301. 

  6301.         </tr>
    6302. 

  6302.         <tr>
    6303. 

  6303.             <th>@_tab-content-border</th>
    6304. 

  6304.             <td>@tab-content__border</td>
    6305. 

  6305.             <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
    6306. 

  6306.             <td class="vars_value">'' | false | value</td>
    6307. 

  6307.             <td>Tab content border</td>
    6308. 

  6308.         </tr>
    6309. 

  6309.         <tr>
    6310. 

  6310.             <th>@_tab-content-margin-top</th>
    6311. 

  6311.             <td>@tab-content__margin-top</td>
    6312. 

  6312.             <td class="vars_value">@tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom</td>
    6313. 

  6313.             <td class="vars_value">'' | false | value</td>
    6314. 

  6314.             <td>Tab content top margin (it is the sum of tabs height and top border width)</td>
    6315. 

  6315.         </tr>
    6316. 

  6316.         <tr>
    6317. 

  6317.             <th>@_tab-content-padding-top</th>
    6318. 

  6318.             <td>@tab-content__padding-top</td>
    6319. 

  6319.             <td class="vars_value">@indent__base</td>
    6320. 

  6320.             <td class="vars_value">'' | false | value</td>
    6321. 

  6321.             <td>Tab content padding</td>
    6322. 

  6322.         </tr>
    6323. 

  6323.         <tr>
    6324. 

  6324.             <th>@_tab-content-padding-right</th>
    6325. 

  6325.             <td>@tab-content__padding-right</td>
    6326. 

  6326.             <td class="vars_value">@indent__base</td>
    6327. 

  6327.             <td class="vars_value">'' | false | value</td>
    6328. 

  6328.             <td>Tab content padding</td>
    6329. 

  6329.         </tr>
    6330. 

  6330.         <tr>
    6331. 

  6331.             <th>@_tab-content-padding-bottom</th>
    6332. 

  6332.             <td>@tab-content__padding-bottom</td>
    6333. 

  6333.             <td class="vars_value">@tab-content__padding-top</td>
    6334. 

  6334.             <td class="vars_value">'' | false | value</td>
    6335. 

  6335.             <td>Tab content padding</td>
    6336. 

  6336.         </tr>
    6337. 

  6337.         <tr>
    6338. 

  6338.             <th>@_tab-content-padding-left</th>
    6339. 

  6339.             <td>@tab-content__padding-left</td>
    6340. 

  6340.             <td class="vars_value">@tab-content__padding-right</td>
    6341. 

  6341.             <td class="vars_value">'' | false | value</td>
    6342. 

  6342.             <td>Tab content padding</td>
    6343. 

  6343.         </tr>
    6344. 

  6344.     </table>
    6345. 

  6345.   </pre>
    6346. 

  6346. 

  6347. <h2 id="accordion-variables">Accordion variables</h2>
    6348. 

  6348. <h4 id="the-codelibdataaccordioncode-mixin-variables">The <code>.lib-data-accordion()</code> mixin variables</h4>
    6349. 

  6349.   <pre>
    6350. 

  6350.     <table>
    6351. 

  6351.         <tr>
    6352. 

  6352.             <th class="vars_head">Mixin variable</th>
    6353. 

  6353.             <th class="vars_head">Global variable</th>
    6354. 

  6354.             <th class="vars_head">Default value</th>
    6355. 

  6355.             <th class="vars_head">Allowed values</th>
    6356. 

  6356.             <th class="vars_head">Comment</th>
    6357. 

  6357.         </tr>
    6358. 

  6358.         <tr>
    6359. 

  6359.             <th>@_accordion-control-font-family</th>
    6360. 

  6360.             <td>@accordion-control__font-family</td>
    6361. 

  6361.             <td class="vars_value">@tab-control__font-family</td>
    6362. 

  6362.             <td class="vars_value" nowrap>'' | false | value</td>
    6363. 

  6363.             <td>Accordion font family</td>
    6364. 

  6364.         </tr>
    6365. 

  6365.         <tr>
    6366. 

  6366.             <th>@_accordion-control-font-size</th>
    6367. 

  6367.             <td>@accordion-control__font-size</td>
    6368. 

  6368.             <td class="vars_value">@font-size__l</td>
    6369. 

  6369.             <td class="vars_value">'' | false | value</td>
    6370. 

  6370.             <td>Accordion font size</td>
    6371. 

  6371.         </tr>
    6372. 

  6372.         <tr>
    6373. 

  6373.             <th>@_accordion-control-font-style</th>
    6374. 

  6374.             <td>@accordion-control__font-style</td>
    6375. 

  6375.             <td class="vars_value">@tab-control__font-style</td>
    6376. 

  6376.             <td class="vars_value">'' | false | value</td>
    6377. 

  6377.             <td>Accordion font style</td>
    6378. 

  6378.         </tr>
    6379. 

  6379.         <tr>
    6380. 

  6380.             <th>@_accordion-control-font-weight</th>
    6381. 

  6381.             <td>@accordion-control__font-weight</td>
    6382. 

  6382.             <td class="vars_value">@tab-control__font-weight</td>
    6383. 

  6383.             <td class="vars_value">'' | false | value</td>
    6384. 

  6384.             <td>Accordion font weight</td>
    6385. 

  6385.         </tr>
    6386. 

  6386.         <tr>
    6387. 

  6387.             <th>@_accordion-control-line-height</th>
    6388. 

  6388.             <td>@accordion-control__line-height</td>
    6389. 

  6389.             <td class="vars_value">@accordion-control__height</td>
    6390. 

  6390.             <td class="vars_value">'' | false | value</td>
    6391. 

  6391.             <td>Accordion line height</td>
    6392. 

  6392.         </tr>
    6393. 

  6393.         <tr>
    6394. 

  6394.             <th colspan="5" class="vars_section">Accordion tabs controls settings</th>
    6395. 

  6395.         </tr>
    6396. 

  6396.         <tr>
    6397. 

  6397.             <th>@_accordion-control-border-top</th>
    6398. 

  6398.             <td>@accordion-control__border-top</td>
    6399. 

  6399.             <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
    6400. 

  6400.             <td class="vars_value">'' | false | value</td>
    6401. 

  6401.             <td>Accordion control border</td>
    6402. 

  6402.         </tr>
    6403. 

  6403.         <tr>
    6404. 

  6404.             <th>@_accordion-control-border-right</th>
    6405. 

  6405.             <td>@accordion-control__border-right</td>
    6406. 

  6406.             <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
    6407. 

  6407.             <td class="vars_value">'' | false | value</td>
    6408. 

  6408.             <td>Accordion control border</td>
    6409. 

  6409.         </tr>
    6410. 

  6410.         <tr>
    6411. 

  6411.             <th>@_accordion-control-border-bottom</th>
    6412. 

  6412.             <td>@accordion-control__border-bottom</td>
    6413. 

  6413.             <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
    6414. 

  6414.             <td class="vars_value">'' | false | value</td>
    6415. 

  6415.             <td>Accordion control border</td>
    6416. 

  6416.         </tr>
    6417. 

  6417.         <tr>
    6418. 

  6418.             <th>@_accordion-control-border-left</th>
    6419. 

  6419.             <td>@accordion-control__border-left</td>
    6420. 

  6420.             <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
    6421. 

  6421.             <td class="vars_value">'' | false | value</td>
    6422. 

  6422.             <td>Accordion control border</td>
    6423. 

  6423.         </tr>
    6424. 

  6424.         <tr>
    6425. 

  6425.             <th>@_accordion-control-background-color</th>
    6426. 

  6426.             <td>@accordion-control__background-color</td>
    6427. 

  6427.             <td class="vars_value">@tab-control__background-color</td>
    6428. 

  6428.             <td class="vars_value">'' | false | value</td>
    6429. 

  6429.             <td>Accordion control background</td>
    6430. 

  6430.         </tr>
    6431. 

  6431.         <tr>
    6432. 

  6432.             <th>@_accordion-control-color</th>
    6433. 

  6433.             <td>@accordion-control__color</td>
    6434. 

  6434.             <td class="vars_value">@tab-control__color</td>
    6435. 

  6435.             <td class="vars_value">'' | false | value</td>
    6436. 

  6436.             <td>Accordion control color</td>
    6437. 

  6437.         </tr>
    6438. 

  6438.         <tr>
    6439. 

  6439.             <th>@_accordion-control-text-decoration</th>
    6440. 

  6440.             <td>@accordion-control__text-decoration</td>
    6441. 

  6441.             <td class="vars_value">@tab-control__text-decoration</td>
    6442. 

  6442.             <td class="vars_value">'' | false | value</td>
    6443. 

  6443.             <td>Accordion control text decoration</td>
    6444. 

  6444.         </tr>
    6445. 

  6445.         <tr>
    6446. 

  6446.             <th>@_accordion-control-color-visited</th>
    6447. 

  6447.             <td>@accordion-control__color</td>
    6448. 

  6448.             <td class="vars_value">@accordion-control__color</td>
    6449. 

  6449.             <td class="vars_value">'' | false | value</td>
    6450. 

  6450.             <td>Accordion control visited link color</td>
    6451. 

  6451.         </tr>
    6452. 

  6452.         <tr>
    6453. 

  6453.             <th nowrap="nowrap">@_accordion-control-text-decoration-visited</th>
    6454. 

  6454.             <td>@accordion-control__text-decoration</td>
    6455. 

  6455.             <td class="vars_value">@accordion-control__text-decoration</td>
    6456. 

  6456.             <td class="vars_value">'' | false | value</td>
    6457. 

  6457.             <td>Accordion control visited link text-decoration</td>
    6458. 

  6458.         </tr>
    6459. 

  6459.         <tr>
    6460. 

  6460.             <th>@_accordion-control-background-color-hover</th>
    6461. 

  6461.             <td>@accordion-control__hover__background-color</td>
    6462. 

  6462.             <td class="vars_value">@tab-control__hover__background-color</td>
    6463. 

  6463.             <td class="vars_value">'' | false | value</td>
    6464. 

  6464.             <td>Hovered accordion control background</td>
    6465. 

  6465.         </tr>
    6466. 

  6466.         <tr>
    6467. 

  6467.             <th>@_accordion-control-color-hover</th>
    6468. 

  6468.             <td>@accordion-control__hover__color</td>
    6469. 

  6469.             <td class="vars_value">@tab-control__hover__color</td>
    6470. 

  6470.             <td class="vars_value">'' | false | value</td>
    6471. 

  6471.             <td>Hovered accordion control text color</td>
    6472. 

  6472.         </tr>
    6473. 

  6473.         <tr>
    6474. 

  6474.             <th>@_accordion-control-text-decoration-hover</th>
    6475. 

  6475.             <td>@accordion-control__hover__text-decoration</td>
    6476. 

  6476.             <td class="vars_value">@tab-control__hover__text-decoration</td>
    6477. 

  6477.             <td class="vars_value">'' | false | value</td>
    6478. 

  6478.             <td>Hovered accordion control text-decoration</td>
    6479. 

  6479.         </tr>
    6480. 

  6480.         <tr>
    6481. 

  6481.             <th>@_accordion-control-background-color-active</th>
    6482. 

  6482.             <td>@accordion-control__active__background-color</td>
    6483. 

  6483.             <td class="vars_value">@tab-control__active__background-color</td>
    6484. 

  6484.             <td class="vars_value">'' | false | value</td>
    6485. 

  6485.             <td>Active accordion control background</td>
    6486. 

  6486.         </tr>
    6487. 

  6487.         <tr>
    6488. 

  6488.             <th>@_accordion-control-color-active</th>
    6489. 

  6489.             <td>@accordion-control__active__color</td>
    6490. 

  6490.             <td class="vars_value">@tab-control__active__color</td>
    6491. 

  6491.             <td class="vars_value">'' | false | value</td>
    6492. 

  6492.             <td>Active accordion control text color</td>
    6493. 

  6493.         </tr>
    6494. 

  6494.         <tr>
    6495. 

  6495.             <th>@_accordion-control-text-decoration-active</th>
    6496. 

  6496.             <td>@accordion-control__active__text-decoration</td>
    6497. 

  6497.             <td class="vars_value">@tab-control__active__text-decoration</td>
    6498. 

  6498.             <td class="vars_value">'' | false | value</td>
    6499. 

  6499.             <td>Active accordion control text-decoration</td>
    6500. 

  6500.         </tr>
    6501. 

  6501.         <tr>
    6502. 

  6502.             <th>@_accordion-control-height</th>
    6503. 

  6503.             <td>@accordion-control__height</td>
    6504. 

  6504.             <td class="vars_value">@indent__xl</td>
    6505. 

  6505.             <td class="vars_value">'' | false | value</td>
    6506. 

  6506.             <td>Height of accordion control</td>
    6507. 

  6507.         </tr>
    6508. 

  6508.         <tr>
    6509. 

  6509.             <th>@_accordion-control-margin-bottom</th>
    6510. 

  6510.             <td>@accordion-control__margin-bottom</td>
    6511. 

  6511.             <td class="vars_value">@indent__xs</td>
    6512. 

  6512.             <td class="vars_value">'' | false | value</td>
    6513. 

  6513.             <td>Bottom margin of the accordion control</td>
    6514. 

  6514.         </tr>
    6515. 

  6515.         <tr>
    6516. 

  6516.             <th>@_accordion-control-padding-top</th>
    6517. 

  6517.             <td>@accordion-control__padding-top</td>
    6518. 

  6518.             <td class="vars_value">@tab-control__padding-top</td>
    6519. 

  6519.             <td class="vars_value">'' | false | value</td>
    6520. 

  6520.             <td>Accordion tab control padding top</td>
    6521. 

  6521.         </tr>
    6522. 

  6522.         <tr>
    6523. 

  6523.             <th nowrap="nowrap">@_accordion-control-padding-right</th>
    6524. 

  6524.             <td>@accordion-control__padding-right</td>
    6525. 

  6525.             <td class="vars_value">@indent__base</td>
    6526. 

  6526.             <td class="vars_value">'' | false | value</td>
    6527. 

  6527.             <td>Accordion tab control padding right</td>
    6528. 

  6528.         </tr>
    6529. 

  6529.         <tr>
    6530. 

  6530.             <th>@_accordion-control-padding-bottom</th>
    6531. 

  6531.             <td>@accordion-control__padding-bottom</td>
    6532. 

  6532.             <td class="vars_value">@tab-control__padding-bottom</td>
    6533. 

  6533.             <td class="vars_value">'' | false | value</td>
    6534. 

  6534.             <td>Accordion tab control padding bottom</td>
    6535. 

  6535.         </tr>
    6536. 

  6536.         <tr>
    6537. 

  6537.             <th>@_accordion-control-padding-left</th>
    6538. 

  6538.             <td>@accordion-control__padding-left</td>
    6539. 

  6539.             <td class="vars_value">@accordion-control__padding-right</td>
    6540. 

  6540.             <td class="vars_value">'' | false | value</td>
    6541. 

  6541.             <td>Accordion tab control padding left</td>
    6542. 

  6542.         </tr>
    6543. 

  6543.         <tr>
    6544. 

  6544.             <th colspan="5" class="vars_section">Accordion content settings</th>
    6545. 

  6545.         </tr>
    6546. 

  6546.         <tr>
    6547. 

  6547.             <th>@_accordion-content-background-color</th>
    6548. 

  6548.             <td>@accordion-content__background-color</td>
    6549. 

  6549.             <td class="vars_value">@tab-control__active__background-color</td>
    6550. 

  6550.             <td class="vars_value">'' | false | value</td>
    6551. 

  6551.             <td>Accordion tab content background</td>
    6552. 

  6552.         </tr>
    6553. 

  6553.         <tr>
    6554. 

  6554.             <th>@_accordion-content-border</th>
    6555. 

  6555.             <td>@accordion-content__border</td>
    6556. 

  6556.             <td class="vars_value">@tab-content__border</td>
    6557. 

  6557.             <td class="vars_value">'' | false | value</td>
    6558. 

  6558.             <td>Accordion tab content border</td>
    6559. 

  6559.         </tr>
    6560. 

  6560.         <tr>
    6561. 

  6561.             <th>@_accordion-content-margin</th>
    6562. 

  6562.             <td>@accordion-content__margin</td>
    6563. 

  6563.             <td class="vars_value">0 0 @indent__xs</td>
    6564. 

  6564.             <td class="vars_value">'' | false | value</td>
    6565. 

  6565.             <td>Accordion tab content margin</td>
    6566. 

  6566.         </tr>
    6567. 

  6567.         <tr>
    6568. 

  6568.             <th>@_accordion-content-padding</th>
    6569. 

  6569.             <td>@accordion-content__padding</td>
    6570. 

  6570.             <td class="vars_value">@tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left</td>
    6571. 

  6571.             <td class="vars_value">'' | false | value</td>
    6572. 

  6572.             <td>Accordion tab content padding</td>
    6573. 

  6573.         </tr>
    6574. 

  6574.     </table>
    6575. 

  6575.   </pre>
    6576. 

  6576. 

  6577. <h2 id="table-variables">Table variables</h2>
    6578. 

  6578. <h4 id="the-codelibtablecode-mixin-variables">The <code>.lib-table()</code> mixin variables</h4>
    6579. 

  6579.   <pre>
    6580. 

  6580.     <table>
    6581. 

  6581.         <tr>
    6582. 

  6582.             <th class="vars_head">Mixin variable</th>
    6583. 

  6583.             <th class="vars_head">Global variable</th>
    6584. 

  6584.             <th class="vars_head">Default value</th>
    6585. 

  6585.             <th class="vars_head">Allowed values</th>
    6586. 

  6586.             <th class="vars_head">Comment</th>
    6587. 

  6587.         </tr>
    6588. 

  6588.         <tr>
    6589. 

  6589.             <th>@_table-width</th>
    6590. 

  6590.             <td>@table__width</td>
    6591. 

  6591.             <td class="vars_value">100%</td>
    6592. 

  6592.             <td class="vars_value">'' | false | value</td>
    6593. 

  6593.             <td>Table width</td>
    6594. 

  6594.         </tr>
    6595. 

  6595.         <tr>
    6596. 

  6596.             <th>@_cell-padding-horizontal</th>
    6597. 

  6597.             <td>@table-cell__padding-horizontal</td>
    6598. 

  6598.             <td class="vars_value">@indent__s</td>
    6599. 

  6599.             <td class="vars_value">'' | false | value</td>
    6600. 

  6600.             <td>Table cell horizontal padding</td>
    6601. 

  6601.         </tr>
    6602. 

  6602.         <tr>
    6603. 

  6603.             <th>@_cell-padding-vertical</th>
    6604. 

  6604.             <td>@table-cell__padding-vertical</td>
    6605. 

  6605.             <td class="vars_value">8px</td>
    6606. 

  6606.             <td class="vars_value">'' | false | value</td>
    6607. 

  6607.             <td>Table cell vertical padding</td>
    6608. 

  6608.         </tr>
    6609. 

  6609.         <tr>
    6610. 

  6610.             <th>@_table-margin-bottom</th>
    6611. 

  6611.             <td>@table__margin-bottom</td>
    6612. 

  6612.             <td class="vars_value">false</td>
    6613. 

  6613.             <td class="vars_value">'' | false | value</td>
    6614. 

  6614.             <td>Table margin bottom</td>
    6615. 

  6615.         </tr>
    6616. 

  6616.     </table>
    6617. 

  6617.   </pre>
    6618. 

  6618. 

  6619. <h2 id="table-typography-variables">Table typography variables</h2>
    6620. 

  6620. <h4 id="the-codelibtabletypographycode-mixin-variables">The <code>.lib-table-typography()</code> mixin variables</h4>
    6621. 

  6621.   <pre>
    6622. 

  6622.     <table>
    6623. 

  6623.         <tr>
    6624. 

  6624.             <th class="vars_head">Mixin variable</th>
    6625. 

  6625.             <th class="vars_head">Default value</th>
    6626. 

  6626.             <th class="vars_head">Allowed values</th>
    6627. 

  6627.             <th class="vars_head">Comment</th>
    6628. 

  6628.         </tr>
    6629. 

  6629.         <tr>
    6630. 

  6630.             <th>@_table-td-font-size </th>
    6631. 

  6631.             <td class="vars_value">false</td>
    6632. 

  6632.             <td class="vars_value">'' | false | value</td>
    6633. 

  6633.             <td>Table cell font size</td>
    6634. 

  6634.         </tr>
    6635. 

  6635.         <tr>
    6636. 

  6636.             <th>@_table-td-color</th>
    6637. 

  6637.             <td class="vars_value">false</td>
    6638. 

  6638.             <td class="vars_value">'' | false | value</td>
    6639. 

  6639.             <td>Table cell font color</td>
    6640. 

  6640.         </tr>
    6641. 

  6641.         <tr>
    6642. 

  6642.             <th>@_table-td-font-family</th>
    6643. 

  6643.             <td class="vars_value">false</td>
    6644. 

  6644.             <td class="vars_value">'' | false | value</td>
    6645. 

  6645.             <td>Table cell font family</td>
    6646. 

  6646.         </tr>
    6647. 

  6647.         <tr>
    6648. 

  6648.             <th nowrap="nowrap">@_table-td-font-weight</th>
    6649. 

  6649.             <td class="vars_value">false</td>
    6650. 

  6650.             <td class="vars_value">'' | false | value</td>
    6651. 

  6651.             <td>Table cell font weight</td>
    6652. 

  6652.         </tr>
    6653. 

  6653.         <tr>
    6654. 

  6654.             <th>@_table-td-line-height</th>
    6655. 

  6655.             <td class="vars_value">false</td>
    6656. 

  6656.             <td class="vars_value">'' | false | value</td>
    6657. 

  6657.             <td>Table cell line height</td>
    6658. 

  6658.         </tr>
    6659. 

  6659.         <tr>
    6660. 

  6660.             <th>@_table-td-font-style</th>
    6661. 

  6661.             <td class="vars_value">false</td>
    6662. 

  6662.             <td class="vars_value">'' | false | value</td>
    6663. 

  6663.             <td>Table cell font style</td>
    6664. 

  6664.         </tr>
    6665. 

  6665.         <tr>
    6666. 

  6666.             <th>@_table-th-font-size</th>
    6667. 

  6667.             <td class="vars_value">false</td>
    6668. 

  6668.             <td class="vars_value">'' | false | value</td>
    6669. 

  6669.             <td>Table header cell font size</td>
    6670. 

  6670.         </tr>
    6671. 

  6671.         <tr>
    6672. 

  6672.             <th>@_table-th-color</th>
    6673. 

  6673.             <td class="vars_value">@text__color__intense</td>
    6674. 

  6674.             <td class="vars_value">'' | false | value</td>
    6675. 

  6675.             <td>Table header cell font color</td>
    6676. 

  6676.         </tr>
    6677. 

  6677.         <tr>
    6678. 

  6678.             <th>@_table-th-font-family</th>
    6679. 

  6679.             <td class="vars_value">false</td>
    6680. 

  6680.             <td class="vars_value">'' | false | value</td>
    6681. 

  6681.             <td>Table header cell font family</td>
    6682. 

  6682.         </tr>
    6683. 

  6683.         <tr>
    6684. 

  6684.             <th>@_table-th-font-weight</th>
    6685. 

  6685.             <td class="vars_value">@font-weight__bold</td>
    6686. 

  6686.             <td class="vars_value">'' | false | value</td>
    6687. 

  6687.             <td>Table header cell font weight</td>
    6688. 

  6688.         </tr>
    6689. 

  6689.         <tr>
    6690. 

  6690.             <th>@_table-th-line-height</th>
    6691. 

  6691.             <td class="vars_value">false</td>
    6692. 

  6692.             <td class="vars_value">'' | false | value</td>
    6693. 

  6693.             <td>Table header cell line height</td>
    6694. 

  6694.         </tr>
    6695. 

  6695.         <tr>
    6696. 

  6696.             <th>@_table-th-font-style</th>
    6697. 

  6697.             <td class="vars_value">false</td>
    6698. 

  6698.             <td class="vars_value">'' | false | value</td>
    6699. 

  6699.             <td>Table header cell font style</td>
    6700. 

  6700.         </tr>
    6701. 

  6701.     </table>
    6702. 

  6702.   </pre>
    6703. 

  6703. 

  6704. <h2 id="table-caption-variables">Table caption variables</h2>
    6705. 

  6705. <h4 id="the-codelibtablecaptioncode-mixin-variables">The <code>.lib-table-caption()</code> mixin variables</h4>
    6706. 

  6706.   <pre>
    6707. 

  6707.     <table>
    6708. 

  6708.         <tr>
    6709. 

  6709.             <th class="vars_head">Mixin variable</th>
    6710. 

  6710.             <th class="vars_head">Global variable</th>
    6711. 

  6711.             <th class="vars_head">Default value</th>
    6712. 

  6712.             <th class="vars_head">Allowed values</th>
    6713. 

  6713.             <th class="vars_head">Comment</th>
    6714. 

  6714.         </tr>
    6715. 

  6715.         <tr>
    6716. 

  6716.             <th>@_table-caption-hide</th>
    6717. 

  6717.             <td>@table-caption__hide</td>
    6718. 

  6718.             <td class="vars_value">true</td>
    6719. 

  6719.             <td class="vars_value">'' | false | value</td>
    6720. 

  6720.             <td>Table caption is visible</td>
    6721. 

  6721.         </tr>
    6722. 

  6722.         <tr>
    6723. 

  6723.             <th>@_table-caption-font-size</th>
    6724. 

  6724.             <td>@table-caption__font-size</td>
    6725. 

  6725.             <td class="vars_value">false</td>
    6726. 

  6726.             <td class="vars_value">'' | false | value</td>
    6727. 

  6727.             <td>Table caption font size</td>
    6728. 

  6728.         </tr>
    6729. 

  6729.         <tr>
    6730. 

  6730.             <th>@_table-caption-color</th>
    6731. 

  6731.             <td>@table-caption__color</td>
    6732. 

  6732.             <td class="vars_value">false</td>
    6733. 

  6733.             <td class="vars_value">'' | false | value</td>
    6734. 

  6734.             <td>Table caption text color</td>
    6735. 

  6735.         </tr>
    6736. 

  6736.         <tr>
    6737. 

  6737.             <th nowrap="nowrap">@_table-caption-font-family</th>
    6738. 

  6738.             <td>@table-caption__font-family</td>
    6739. 

  6739.             <td class="vars_value">false</td>
    6740. 

  6740.             <td class="vars_value">'' | false | value</td>
    6741. 

  6741.             <td>Table caption font family</td>
    6742. 

  6742.         </tr>
    6743. 

  6743.         <tr>
    6744. 

  6744.             <th>@_table-caption-font-weight</th>
    6745. 

  6745.             <td>@table-caption__font-weight</td>
    6746. 

  6746.             <td class="vars_value">false</td>
    6747. 

  6747.             <td class="vars_value">'' | false | value</td>
    6748. 

  6748.             <td>Table caption font weight</td>
    6749. 

  6749.         </tr>
    6750. 

  6750.         <tr>
    6751. 

  6751.             <th>@_table-caption-font-style</th>
    6752. 

  6752.             <td>@table-caption__font-style</td>
    6753. 

  6753.             <td class="vars_value">false</td>
    6754. 

  6754.             <td class="vars_value">'' | false | value</td>
    6755. 

  6755.             <td>Table caption font style</td>
    6756. 

  6756.         </tr>
    6757. 

  6757.         <tr>
    6758. 

  6758.             <th>@_table-caption-line-height</th>
    6759. 

  6759.             <td>@table-caption__line-height</td>
    6760. 

  6760.             <td class="vars_value">false</td>
    6761. 

  6761.             <td class="vars_value">'' | false | value</td>
    6762. 

  6762.             <td>Table caption line height</td>
    6763. 

  6763.         </tr>
    6764. 

  6764.         <tr>
    6765. 

  6765.             <th>@_table-caption-alignment</th>
    6766. 

  6766.             <td>@table-caption__alignment</td>
    6767. 

  6767.             <td class="vars_value">false</td>
    6768. 

  6768.             <td class="vars_value">'' | false | value</td>
    6769. 

  6769.             <td>Table caption alignment</td>
    6770. 

  6770.         </tr>
    6771. 

  6771.         <tr>
    6772. 

  6772.             <th>@_table-caption-margin-top</th>
    6773. 

  6773.             <td>@table-caption__margin-top</td>
    6774. 

  6774.             <td class="vars_value">false</td>
    6775. 

  6775.             <td class="vars_value">'' | false | value</td>
    6776. 

  6776.             <td>Table caption top margin</td>
    6777. 

  6777.         </tr>
    6778. 

  6778.         <tr>
    6779. 

  6779.             <th nowrap="nowrap">@_table-caption-margin-bottom</th>
    6780. 

  6780.             <td>@table-caption__margin-bottom</td>
    6781. 

  6781.             <td class="vars_value">false</td>
    6782. 

  6782.             <td class="vars_value">'' | false | value</td>
    6783. 

  6783.             <td>Table caption bottom margin</td>
    6784. 

  6784.         </tr>
    6785. 

  6785.     </table>
    6786. 

  6786.   </pre>
    6787. 

  6787. 

  6788. <h2 id="table-cells-resize-variables">Table cells resize variables</h2>
    6789. 

  6789. <h4 id="the-codelibtableresizecode-mixin-variables">The <code>.lib-table-resize()</code> mixin variables</h4>
    6790. 

  6790.   <pre>
    6791. 

  6791.     <table>
    6792. 

  6792.         <tr>
    6793. 

  6793.             <th class="vars_head">Mixin variable</th>
    6794. 

  6794.             <th class="vars_head">Global variable</th>
    6795. 

  6795.             <th class="vars_head">Default value</th>
    6796. 

  6796.             <th class="vars_head">Allowed values</th>
    6797. 

  6797.             <th class="vars_head">Comment</th>
    6798. 

  6798.         </tr>
    6799. 

  6799.         <tr>
    6800. 

  6800.             <th>@_th-padding-top</th>
    6801. 

  6801.             <td>@table-cell__padding-vertical / 2</td>
    6802. 

  6802.             <td class="vars_value">@_td-padding-top</td>
    6803. 

  6803.             <td class="vars_value">'' | false | value</td>
    6804. 

  6804.             <td>Table header cell top padding</td>
    6805. 

  6805.         </tr>
    6806. 

  6806.         <tr>
    6807. 

  6807.             <th>@_th-padding-right</th>
    6808. 

  6808.             <td>@table-cell__padding-horizontal / 2</td>
    6809. 

  6809.             <td class="vars_value">@_td-padding-right</td>
    6810. 

  6810.             <td class="vars_value">'' | false | value</td>
    6811. 

  6811.             <td>Table header cell right padding</td>
    6812. 

  6812.         </tr>
    6813. 

  6813.         <tr>
    6814. 

  6814.             <th>@_th-padding-bottom</th>
    6815. 

  6815.             <td>@table-cell__padding-vertical / 2</td>
    6816. 

  6816.             <td class="vars_value">@_td-padding-top</td>
    6817. 

  6817.             <td class="vars_value">'' | false | value</td>
    6818. 

  6818.             <td>Table header cell bottom padding</td>
    6819. 

  6819.         </tr>
    6820. 

  6820.         <tr>
    6821. 

  6821.             <th>@_th-padding-left</th>
    6822. 

  6822.             <td>@table-cell__padding-horizontal / 2</td>
    6823. 

  6823.             <td class="vars_value">@_td-padding-right</td>
    6824. 

  6824.             <td class="vars_value">'' | false | value</td>
    6825. 

  6825.             <td>Table header cell left padding</td>
    6826. 

  6826.         </tr>
    6827. 

  6827.         <tr>
    6828. 

  6828.             <th>@_td-padding-top</th>
    6829. 

  6829.             <td>@table-cell__padding-vertical / 2</td>
    6830. 

  6830.             <td class="vars_value">@table-cell__padding-vertical / 2</td>
    6831. 

  6831.             <td class="vars_value">'' | false | value</td>
    6832. 

  6832.             <td>Table cell top padding</td>
    6833. 

  6833.         </tr>
    6834. 

  6834.         <tr>
    6835. 

  6835.             <th>@_td-padding-right</th>
    6836. 

  6836.             <td>@table-cell__padding-horizontal / 2</td>
    6837. 

  6837.             <td class="vars_value">@table-cell__padding-horizontal / 2</td>
    6838. 

  6838.             <td class="vars_value">'' | false | value</td>
    6839. 

  6839.             <td>Table cell right padding</td>
    6840. 

  6840.         </tr>
    6841. 

  6841.         <tr>
    6842. 

  6842.             <th>@_td-padding-bottom</th>
    6843. 

  6843.             <td>@table-cell__padding-vertical / 2</td>
    6844. 

  6844.             <td class="vars_value">@_td-padding-top</td>
    6845. 

  6845.             <td class="vars_value">'' | false | value</td>
    6846. 

  6846.             <td>Table cell bottom padding</td>
    6847. 

  6847.         </tr>
    6848. 

  6848.         <tr>
    6849. 

  6849.             <th nowrap="nowrap">@_td-padding-left</th>
    6850. 

  6850.             <td>@table-cell__padding-horizontal / 2</td>
    6851. 

  6851.             <td class="vars_value" nowrap="nowrap">@_td-padding-right</td>
    6852. 

  6852.             <td class="vars_value">'' | false | value</td>
    6853. 

  6853.             <td>Table cell left padding</td>
    6854. 

  6854.         </tr>
    6855. 

  6855.     </table>
    6856. 

  6856.   </pre>
    6857. 

  6857. 

  6858. <h2 id="table-background-variables">Table background variables</h2>
    6859. 

  6859. <h4 id="the-codelibtablebackgroundcolorcode-mixin-variables">The <code>.lib-table-background-color()</code> mixin variables</h4>
    6860. 

  6860.   <pre>
    6861. 

  6861.     <table>
    6862. 

  6862.         <tr>
    6863. 

  6863.             <th class="vars_head">Mixin variable</th>
    6864. 

  6864.             <th class="vars_head">Global variable</th>
    6865. 

  6865.             <th class="vars_head">Allowed values</th>
    6866. 

  6866.             <th class="vars_head">Variables list names</th>
    6867. 

  6867.             <th class="vars_head">Comment</th>
    6868. 

  6868.         </tr>
    6869. 

  6869.         <tr>
    6870. 

  6870.             <th>@_table-background-color</th>
    6871. 

  6871.             <td>@table__background-color</td>
    6872. 

  6872.             <td class="vars_value">false</td>
    6873. 

  6873.             <td class="vars_value">'' | false | value</td>
    6874. 

  6874.             <td>Table background</td>
    6875. 

  6875.         </tr>
    6876. 

  6876.         <tr>
    6877. 

  6877.             <th>@_table-head-background-color</th>
    6878. 

  6878.             <td>@table-head__background-color</td>
    6879. 

  6879.             <td class="vars_value">@table__background-color</td>
    6880. 

  6880.             <td class="vars_value">'' | false | value</td>
    6881. 

  6881.             <td>Table thead background</td>
    6882. 

  6882.         </tr>
    6883. 

  6883.         <tr>
    6884. 

  6884.             <th>@_table-foot-background-color</th>
    6885. 

  6885.             <td>@table-foot__background-color</td>
    6886. 

  6886.             <td class="vars_value">@table__background-color</td>
    6887. 

  6887.             <td class="vars_value">'' | false | value</td>
    6888. 

  6888.             <td>Table tfoot background</td>
    6889. 

  6889.         </tr>
    6890. 

  6890.         <tr>
    6891. 

  6891.             <th>@_table-body-th-background-color</th>
    6892. 

  6892.             <td>@table-body-th__background-color</td>
    6893. 

  6893.             <td class="vars_value">@table__background-color</td>
    6894. 

  6894.             <td class="vars_value">'' | false | value</td>
    6895. 

  6895.             <td>Table header cells background</td>
    6896. 

  6896.         </tr>
    6897. 

  6897.         <tr>
    6898. 

  6898.             <th nowrap="nowrap">@_table-td-background-color</th>
    6899. 

  6899.             <td>@table-td__background-color</td>
    6900. 

  6900.             <td class="vars_value">@table__background-color</td>
    6901. 

  6901.             <td class="vars_value">'' | false | value</td>
    6902. 

  6902.             <td>Table cells background</td>
    6903. 

  6903.         </tr>
    6904. 

  6904.     </table>
    6905. 

  6905.   </pre>
    6906. 

  6906. 

  6907. <h2 id="table-borders-customization-variables">Table borders customization variables</h2>
    6908. 

  6908. <h4 id="the-codelibtableborderedcode-mixin-variables">The <code>.lib-table-bordered()</code> mixin variables</h4>
    6909. 

  6909.   <pre>
    6910. 

  6910.     <table>
    6911. 

  6911.         <tr>
    6912. 

  6912.             <th class="vars_head">Mixin variable</th>
    6913. 

  6913.             <th class="vars_head">Global variable</th>
    6914. 

  6914.             <th class="vars_head">Default value</th>
    6915. 

  6915.             <th class="vars_head">Allowed values</th>
    6916. 

  6916.             <th class="vars_head">Comment</th>
    6917. 

  6917.         </tr>
    6918. 

  6918.         <tr>
    6919. 

  6919.             <th>@_table_type</th>
    6920. 

  6920.             <td>-</td>
    6921. 

  6921.             <td class="vars_value">normal</td>
    6922. 

  6922.             <td class="vars_value">normal | horizontal | vertical | light | clear | horizontal_body</td>
    6923. 

  6923.             <td>Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody</td>
    6924. 

  6924.         </tr>
    6925. 

  6925.         <tr>
    6926. 

  6926.             <th>@_table_border-width</th>
    6927. 

  6927.             <td>@table__border-width</td>
    6928. 

  6928.             <td class="vars_value" nowrap="nowrap">@border-width__base</td>
    6929. 

  6929.             <td class="vars_value">'' | false | value</td>
    6930. 

  6930.             <td>Table border width</td>
    6931. 

  6931.         </tr>
    6932. 

  6932.         <tr>
    6933. 

  6933.             <th>@_table_border-style</th>
    6934. 

  6934.             <td>@table__border-style</td>
    6935. 

  6935.             <td class="vars_value">solid</td>
    6936. 

  6936.             <td class="vars_value">'' | false | value</td>
    6937. 

  6937.             <td>Table border style</td>
    6938. 

  6938.         </tr>
    6939. 

  6939.         <tr>
    6940. 

  6940.             <th nowrap="nowrap">@_table_border-color</th>
    6941. 

  6941.             <td>@table__border-color</td>
    6942. 

  6942.             <td class="vars_value">@border-color__base</td>
    6943. 

  6943.             <td class="vars_value">'' | false | value</td>
    6944. 

  6944.             <td>Table border color</td>
    6945. 

  6945.         </tr>
    6946. 

  6946.     </table>
    6947. 

  6947.   </pre>
    6948. 

  6948. 

  6949. <h2 id="striped-table-variable">Striped table variable</h2>
    6950. 

  6950. <h4 id="the-codelibtablestripedcode-mixin-variables">The <code>.lib-table-striped()</code> mixin variables</h4>
    6951. 

  6951.   <pre>
    6952. 

  6952.     <table>
    6953. 

  6953.         <tr>
    6954. 

  6954.             <th class="vars_head">Mixin variable</th>
    6955. 

  6955.             <th class="vars_head">Variables list names</th>
    6956. 

  6956.             <th class="vars_head">Default value</th>
    6957. 

  6957.             <th class="vars_head">Allowed values</th>
    6958. 

  6958.             <th class="vars_head">Comment</th>
    6959. 

  6959.         </tr>
    6960. 

  6960.         <tr>
    6961. 

  6961.             <th>@_stripped-background-color</th>
    6962. 

  6962.             <td class="vars_value">@table-cell-stripped__background-color</td>
    6963. 

  6963.             <td class="vars_value">lighten(@table-cell__hover__background-color, 15%)</td>
    6964. 

  6964.             <td class="vars_value">'' | false | value</td>
    6965. 

  6965.             <td>Striped cells background color</td>
    6966. 

  6966.         </tr>
    6967. 

  6967.         <tr>
    6968. 

  6968.             <th>@_stripped-color</th>
    6969. 

  6969.             <td class="vars_value">@table-cell-stripped__color</td>
    6970. 

  6970.             <td class="vars_value">@text__color</td>
    6971. 

  6971.             <td class="vars_value">'' | false | value</td>
    6972. 

  6972.             <td>Striped cells text color</td>
    6973. 

  6973.         </tr>
    6974. 

  6974.         <tr>
    6975. 

  6975.             <th>@_stripped-direction</th>
    6976. 

  6976.             <td class="vars_value">-</td>
    6977. 

  6977.             <td class="vars_value">horizontal</td>
    6978. 

  6978.             <td class="vars_value">horizontal | vertical</td>
    6979. 

  6979.             <td>Stripes direction</td>
    6980. 

  6980.         </tr>
    6981. 

  6981.         <tr>
    6982. 

  6982.             <th>@_stripped-highlight</th>
    6983. 

  6983.             <td class="vars_value">-</td>
    6984. 

  6984.             <td class="vars_value">odd</td>
    6985. 

  6985.             <td class="vars_value">odd | even</td>
    6986. 

  6986.             <td>Rows stripes are applied to</td>
    6987. 

  6987.         </tr>
    6988. 

  6988.     </table>
    6989. 

  6989.   </pre>
    6990. 

  6990. </div></article><article id="table-with-rows-hover-mixin-variables" class="section"><div class="docs"><a href="#table-with-rows-hover-mixin-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="table-with-rows-hover-mixin-variables">Table with rows hover mixin variables</h1>
    6991. 

  6991. <h4 id="the-codelibtablehovercode-mixin-variables">The <code>.lib-table-hover()</code> mixin variables</h4>
    6992. 

  6992.   <pre>
    6993. 

  6993.     <table>
    6994. 

  6994.         <tr>
    6995. 

  6995.             <th class="vars_head">Mixin variable</th>
    6996. 

  6996.             <th class="vars_head">Global variable</th>
    6997. 

  6997.             <th class="vars_head">Default value</th>
    6998. 

  6998.             <th class="vars_head">Allowed values</th>
    6999. 

  6999.             <th class="vars_head">Comment</th>
    7000. 

  7000.         </tr>
    7001. 

  7001.         <tr>
    7002. 

  7002.             <th>@_table_cell-background-color-hover</th>
    7003. 

  7003.             <td>@table-cell__hover__background-color</td>
    7004. 

  7004.             <td class="vars_value">@panel__background-color</td>
    7005. 

  7005.             <td class="vars_value">'' | false | value</td>
    7006. 

  7006.             <td>Hovered table row background</td>
    7007. 

  7007.         </tr>
    7008. 

  7008.         <tr>
    7009. 

  7009.             <th>@_table_cell-odd-background-color-hover</th>
    7010. 

  7010.             <td>@table-cell__hover__background-color</td>
    7011. 

  7011.             <td class="vars_value">@_table_cell-background-color-hover</td>
    7012. 

  7012.             <td class="vars_value">'' | false | value</td>
    7013. 

  7013.             <td>Hovered table odd row background</td>
    7014. 

  7014.         </tr>
    7015. 

  7015.     </table>
    7016. 

  7016.   </pre>
    7017. 

  7017. 

  7018. <h2 id="responsive-table-technics-2-variables">Responsive table technics #2 variables</h2>
    7019. 

  7019. <h4 id="the-codelibtableresponsivecode-mixin-variables">The <code>.lib-table-responsive()</code> mixin variables</h4>
    7020. 

  7020.   <pre>
    7021. 

  7021.     <table>
    7022. 

  7022.         <tr>
    7023. 

  7023.             <th class="vars_head">Mixin variable</th>
    7024. 

  7024.             <th class="vars_head">Variables list names</th>
    7025. 

  7025.             <th class="vars_head">Default value</th>
    7026. 

  7026.             <th class="vars_head">Allowed values</th>
    7027. 

  7027.             <th class="vars_head">Comment</th>
    7028. 

  7028.         </tr>
    7029. 

  7029.         <tr>
    7030. 

  7030.             <th>@_table-background-color-responsive</th>
    7031. 

  7031.             <td class="vars_value">@table-responsive__background-color</td>
    7032. 

  7032.             <td class="vars_value">@table__background-color</td>
    7033. 

  7033.             <td class="vars_value">'' | false | value</td>
    7034. 

  7034.             <td>Responsive table background</td>
    7035. 

  7035.         </tr>
    7036. 

  7036.         <tr>
    7037. 

  7037.             <th>@_table-th-background-color-responsive</th>
    7038. 

  7038.             <td class="vars_value">@table-responsive-th__background-color</td>
    7039. 

  7039.             <td class="vars_value">false</td>
    7040. 

  7040.             <td class="vars_value">'' | false | value</td>
    7041. 

  7041.             <td>Responsive table header cells background</td>
    7042. 

  7042.         </tr>
    7043. 

  7043.         <tr>
    7044. 

  7044.             <th>@_reset-table-striped</th>
    7045. 

  7045.             <td class="vars_value">false</td>
    7046. 

  7046.             <td class="vars_value">-</td>
    7047. 

  7047.             <td class="vars_value">true | false</td>
    7048. 

  7048.             <td>Responsive table striped cells</td>
    7049. 

  7049.         </tr>
    7050. 

  7050.         <tr>
    7051. 

  7051.             <th>@_reset-table-hover</th>
    7052. 

  7052.             <td class="vars_value">false</td>
    7053. 

  7053.             <td class="vars_value">-</td>
    7054. 

  7054.             <td class="vars_value">true | false</td>
    7055. 

  7055.             <td>Responsive table hovered table row background</td>
    7056. 

  7056.         </tr>
    7057. 

  7057.         <tr>
    7058. 

  7058.             <th>@_table-responsive-cell-padding</th>
    7059. 

  7059.             <td class="vars_value">@table-responsive-cell__padding</td>
    7060. 

  7060.             <td class="vars_value">@indent__xs 0</td>
    7061. 

  7061.             <td class="vars_value">true | false</td>
    7062. 

  7062.             <td>Responsive table cells padding</td>
    7063. 

  7063.         </tr>
    7064. 

  7064.     </table>
    7065. 

  7065.   </pre>
    7066. 

  7066. 

  7067. <h2 id="tooltips-variables">Tooltips variables</h2>
    7068. 

  7068. <h4 id="the-codelibtooltipcode-mixin-variables">The <code>.lib-tooltip()</code> mixin variables</h4>
    7069. 

  7069.   <pre>
    7070. 

  7070.     <table>
    7071. 

  7071.         <tr>
    7072. 

  7072.             <th class="vars_head">Mixin variable</th>
    7073. 

  7073.             <th class="vars_head">Global variable</th>
    7074. 

  7074.             <th class="vars_head">Default value</th>
    7075. 

  7075.             <th class="vars_head">Allowed values</th>
    7076. 

  7076.             <th class="vars_head">Comment</th>
    7077. 

  7077.         </tr>
    7078. 

  7078.         <tr>
    7079. 

  7079.             <th>@_tooltip-position</th>
    7080. 

  7080.             <td>-</td>
    7081. 

  7081.             <td class="vars_value">top</td>
    7082. 

  7082.             <td class="vars_value">top | right | bottom | left</td>
    7083. 

  7083.             <td>Side of the element tooltip is displayed on</td>
    7084. 

  7084.         </tr>
    7085. 

  7085.         <tr>
    7086. 

  7086.             <th>@_tooltip-selector-toggle</th>
    7087. 

  7087.             <td>-</td>
    7088. 

  7088.             <td class="vars_value">~".tooltip-toggle"</td>
    7089. 

  7089.             <td class="vars_value">'' | false | value</td>
    7090. 

  7090.             <td>The class name of the element that toggles tooltip</td>
    7091. 

  7091.         </tr>
    7092. 

  7092.         <tr>
    7093. 

  7093.             <th>@_tooltip-selector-content</th>
    7094. 

  7094.             <td>-</td>
    7095. 

  7095.             <td class="vars_value">~".tooltip-content"</td>
    7096. 

  7096.             <td class="vars_value">'' | false | value</td>
    7097. 

  7097.             <td>The tooltip content class name</td>
    7098. 

  7098.         </tr>
    7099. 

  7099.         <tr>
    7100. 

  7100.             <th>@_tooltip-background</th>
    7101. 

  7101.             <td>@tooltip__background</td>
    7102. 

  7102.             <td class="vars_value">@color-white</td>
    7103. 

  7103.             <td class="vars_value">'' | false | value</td>
    7104. 

  7104.             <td>Tooltip background color</td>
    7105. 

  7105.         </tr>
    7106. 

  7106.         <tr>
    7107. 

  7107.             <th>@_tooltip-border-color</th>
    7108. 

  7108.             <td>@tooltip__border-color</td>
    7109. 

  7109.             <td class="vars_value">#bbb</td>
    7110. 

  7110.             <td class="vars_value">'' | false | value</td>
    7111. 

  7111.             <td>Tooltip border color</td>
    7112. 

  7112.         </tr>
    7113. 

  7113.         <tr>
    7114. 

  7114.             <th>@_tooltip-border-width</th>
    7115. 

  7115.             <td>@tooltip__border-width</td>
    7116. 

  7116.             <td class="vars_value">1px</td>
    7117. 

  7117.             <td class="vars_value">'' | false | value</td>
    7118. 

  7118.             <td>Tooltip border width</td>
    7119. 

  7119.         </tr>
    7120. 

  7120.         <tr>
    7121. 

  7121.             <th>@_tooltip-border-radius</th>
    7122. 

  7122.             <td>@tooltip__border-radius</td>
    7123. 

  7123.             <td class="vars_value">false</td>
    7124. 

  7124.             <td class="vars_value">'' | false | value</td>
    7125. 

  7125.             <td>Tooltip border radius</td>
    7126. 

  7126.         </tr>
    7127. 

  7127.         <tr>
    7128. 

  7128.             <th>@_tooltip-color</th>
    7129. 

  7129.             <td>@tooltip__color</td>
    7130. 

  7130.             <td class="vars_value">@primary__color</td>
    7131. 

  7131.             <td class="vars_value">'' | false | value</td>
    7132. 

  7132.             <td>Tooltip text color</td>
    7133. 

  7133.         </tr>
    7134. 

  7134.         <tr>
    7135. 

  7135.             <th>@_tooltip-cursor</th>
    7136. 

  7136.             <td>@tooltip__cursor</td>
    7137. 

  7137.             <td class="vars_value">help</td>
    7138. 

  7138.             <td class="vars_value">'' | false | value</td>
    7139. 

  7139.             <td>Tooltip cursor</td>
    7140. 

  7140.         </tr>
    7141. 

  7141.         <tr>
    7142. 

  7142.             <th>@_tooltip-font-size</th>
    7143. 

  7143.             <td>@tooltip__font-size</td>
    7144. 

  7144.             <td class="vars_value">false</td>
    7145. 

  7145.             <td class="vars_value">'' | false | value</td>
    7146. 

  7146.             <td>Tooltip font size</td>
    7147. 

  7147.         </tr>
    7148. 

  7148.         <tr>
    7149. 

  7149.             <th>@_tooltip-font-family</th>
    7150. 

  7150.             <td>@tooltip__font-family</td>
    7151. 

  7151.             <td class="vars_value">false</td>
    7152. 

  7152.             <td class="vars_value">'' | false | value</td>
    7153. 

  7153.             <td>Tooltip font family</td>
    7154. 

  7154.         </tr>
    7155. 

  7155.         <tr>
    7156. 

  7156.             <th>@_tooltip-font-weight</th>
    7157. 

  7157.             <td>@tooltip__font-weight</td>
    7158. 

  7158.             <td class="vars_value">false</td>
    7159. 

  7159.             <td class="vars_value">'' | false | value</td>
    7160. 

  7160.             <td>Tooltip font weight</td>
    7161. 

  7161.         </tr>
    7162. 

  7162.         <tr>
    7163. 

  7163.             <th>@_tooltip-font-style</th>
    7164. 

  7164.             <td>@tooltip__font-style</td>
    7165. 

  7165.             <td class="vars_value">false</td>
    7166. 

  7166.             <td class="vars_value">'' | false | value</td>
    7167. 

  7167.             <td>Tooltip font style</td>
    7168. 

  7168.         </tr>
    7169. 

  7169.         <tr>
    7170. 

  7170.             <th>@_tooltip-line-height</th>
    7171. 

  7171.             <td>@tooltip__line-height</td>
    7172. 

  7172.             <td class="vars_value">1.4</td>
    7173. 

  7173.             <td class="vars_value">'' | false | value</td>
    7174. 

  7174.             <td>Tooltip line height</td>
    7175. 

  7175.         </tr>
    7176. 

  7176.         <tr>
    7177. 

  7177.             <th>@_tooltip-margin</th>
    7178. 

  7178.             <td>@tooltip__margin</td>
    7179. 

  7179.             <td class="vars_value">false</td>
    7180. 

  7180.             <td class="vars_value">'' | false | value</td>
    7181. 

  7181.             <td>Tooltip margin</td>
    7182. 

  7182.         </tr>
    7183. 

  7183.         <tr>
    7184. 

  7184.             <th>@_tooltip-padding</th>
    7185. 

  7185.             <td>@tooltip__padding</td>
    7186. 

  7186.             <td class="vars_value">12px 16px</td>
    7187. 

  7187.             <td class="vars_value">'' | false | value</td>
    7188. 

  7188.             <td>Tooltip padding</td>
    7189. 

  7189.         </tr>
    7190. 

  7190.         <tr>
    7191. 

  7191.             <th>@_tooltip-min-width</th>
    7192. 

  7192.             <td>@tooltip__min-width</td>
    7193. 

  7193.             <td class="vars_value">210px</td>
    7194. 

  7194.             <td class="vars_value">'' | false | value</td>
    7195. 

  7195.             <td>Tooltip minimal width</td>
    7196. 

  7196.         </tr>
    7197. 

  7197.         <tr>
    7198. 

  7198.             <th>@_tooltip-max-width</th>
    7199. 

  7199.             <td>@tooltip__max-width</td>
    7200. 

  7200.             <td class="vars_value">360px</td>
    7201. 

  7201.             <td class="vars_value">'' | false | value</td>
    7202. 

  7202.             <td>Tooltip maximal width</td>
    7203. 

  7203.         </tr>
    7204. 

  7204.         <tr>
    7205. 

  7205.             <th>@_tooltip-arrow-size</th>
    7206. 

  7206.             <td>@tooltip-arrow__size</td>
    7207. 

  7207.             <td class="vars_value">5px</td>
    7208. 

  7208.             <td class="vars_value">'' | false | value</td>
    7209. 

  7209.             <td>Tooltip arrow size</td>
    7210. 

  7210.         </tr>
    7211. 

  7211.         <tr>
    7212. 

  7212.             <th>@_tooltip-arrow-offset</th>
    7213. 

  7213.             <td>@tooltip-arrow__offset</td>
    7214. 

  7214.             <td class="vars_value">10px</td>
    7215. 

  7215.             <td class="vars_value">'' | false | value</td>
    7216. 

  7216.             <td>Tooltip arrow offset</td>
    7217. 

  7217.         </tr>
    7218. 

  7218.         <tr>
    7219. 

  7219.             <th>@_tooltip-z-index</th>
    7220. 

  7220.             <td>@tooltip__z-index</td>
    7221. 

  7221.             <td class="vars_value">100</td>
    7222. 

  7222.             <td class="vars_value">'' | false | value</td>
    7223. 

  7223.             <td>Tooltip z-index</td>
    7224. 

  7224.         </tr>
    7225. 

  7225.     </table>
    7226. 

  7226.   </pre>
    7227. 

  7227. 

  7228. <h2 id="components">Components</h2>
    7229. 

  7229. <h3 id="cross-components-variables">Cross Components variables</h3>
    7230. 

  7230.   <pre>
    7231. 

  7231.     <table>
    7232. 

  7232.         <tr>
    7233. 

  7233.             <th class="vars_head">Variable</th>
    7234. 

  7234.             <th class="vars_head">Default value</th>
    7235. 

  7235.             <th class="vars_head">Allowed values</th>
    7236. 

  7236.             <th class="vars_head">Comment</th>
    7237. 

  7237.         </tr>
    7238. 

  7238.       <tr>
    7239. 

  7239.         <th>@component__shadow-size__base</th>
    7240. 

  7240.         <td class="vars_value">5px</td>
    7241. 

  7241.         <td class="vars_value">constant</td>
    7242. 

  7242.         <td>Shadow size across all components. Used to count overlay zones sizes</td>
    7243. 

  7243.       </tr>
    7244. 

  7244.       <tr>
    7245. 

  7245.         <th>@component__box-shadow__base</th>
    7246. 

  7246.         <td class="vars_value">1px 1px @component__shadow-size__base rgba(0, 0, 0, .5)</td>
    7247. 

  7247.         <td class="vars_value">constant</td>
    7248. 

  7248.         <td>Shadow style</td>
    7249. 

  7249.       </tr>
    7250. 

  7250.       <tr>
    7251. 

  7251.         <th>@component-modal__opacity</th>
    7252. 

  7252.         <td class="vars_value">.98</td>
    7253. 

  7253.         <td class="vars_value">constant</td>
    7254. 

  7254.         <td>Default opacity for stacked components</td>
    7255. 

  7255.       </tr>
    7256. 

  7256.     </table>
    7257. 

  7257.   </pre>
    7258. 

  7258. 

  7259. <h2 id="utilities">Utilities</h2>
    7260. 

  7260. <h4 id="codelibcsscode-mixin-variables"><code>.lib-css()</code> mixin variables</h4>
    7261. 

  7261.   <pre>
    7262. 

  7262.     <table>
    7263. 

  7263.         <tr>
    7264. 

  7264.             <th class="vars_head">Mixin variable</th>
    7265. 

  7265.             <th class="vars_head">Default value </th>
    7266. 

  7266.             <th class="vars_head">Allowed values</th>
    7267. 

  7267.             <th class="vars_head">Comment</th>
    7268. 

  7268.         </tr>
    7269. 

  7269.         <tr>
    7270. 

  7270.             <th>@_property</th>
    7271. 

  7271.             <td class="vars_value">false</td>
    7272. 

  7272.             <td class="vars_value">'' | false | value</td>
    7273. 

  7273.             <td>Any css property</td>
    7274. 

  7274.         </tr>
    7275. 

  7275.         <tr>
    7276. 

  7276.             <th>@_value</th>
    7277. 

  7277.             <td class="vars_value">false</td>
    7278. 

  7278.             <td class="vars_value">'' | false | value</td>
    7279. 

  7279.             <td>Any css value</td>
    7280. 

  7280.         </tr>
    7281. 

  7281.         <tr>
    7282. 

  7282.             <th>@_prefix</th>
    7283. 

  7283.             <td class="vars_value">0</td>
    7284. 

  7284.             <td class="vars_value">'' | false | 1</td>
    7285. 

  7285.             <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
    7286. 

  7286.         </tr>
    7287. 

  7287.     </table>
    7288. 

  7288.   </pre>
    7289. 

  7289. 

  7290. 

  7291. <h4 id="codelibrotatecode-mixin-variables"><code>.lib-rotate()</code> mixin variables</h4>
    7292. 

  7292.   <pre>
    7293. 

  7293.     <table>
    7294. 

  7294.         <tr>
    7295. 

  7295.             <th class="vars_head">Mixin variable</th>
    7296. 

  7296.             <th class="vars_head">Default value </th>
    7297. 

  7297.             <th class="vars_head">Allowed values</th>
    7298. 

  7298.             <th class="vars_head">Comment</th>
    7299. 

  7299.         </tr>
    7300. 

  7300.         <tr>
    7301. 

  7301.             <th>@rotation</th>
    7302. 

  7302.             <td class="vars_value">''</td>
    7303. 

  7303.             <td class="vars_value">'' | false | value</td>
    7304. 

  7304.             <td>Transform rotate value, false or ''</td>
    7305. 

  7305.         </tr>
    7306. 

  7306.     </table>
    7307. 

  7307.   </pre>
    7308. 

  7308. 

  7309. 

  7310. <h4 id="codelibinputplaceholdercode-mixin-variables"><code>.lib-input-placeholder()</code> mixin variables</h4>
    7311. 

  7311.   <pre>
    7312. 

  7312.     <table>
    7313. 

  7313.         <tr>
    7314. 

  7314.             <th class="vars_head">Mixin variable</th>
    7315. 

  7315.             <th class="vars_head">Default value</th>
    7316. 

  7316.             <th class="vars_head">Allowed values</th>
    7317. 

  7317.             <th class="vars_head">Comment</th>
    7318. 

  7318.         </tr>
    7319. 

  7319.         <tr>
    7320. 

  7320.             <th>@_input-placeholder-color</th>
    7321. 

  7321.             <td class="vars_value">@form-element-input-placeholder__color</td>
    7322. 

  7322.             <td class="vars_value">'' | false | value</td>
    7323. 

  7323.             <td>Input placeholder color</td>
    7324. 

  7324.         </tr>
    7325. 

  7325.         <tr>
    7326. 

  7326.             <th>@_input-placeholder-font-weight</th>
    7327. 

  7327.             <td class="vars_value">@form-element-input__font-weight</td>
    7328. 

  7328.             <td class="vars_value">'' | false | value</td>
    7329. 

  7329.             <td>Input placeholder font-weight</td>
    7330. 

  7330.         </tr>
    7331. 

  7331.     </table>
    7332. 

  7332.   </pre>
    7333. 

  7333. 

  7334. 

  7335. <h4 id="codelibbackgroundgradientcode-mixin-variables"><code>.lib-background-gradient()</code> mixin variables</h4>
    7336. 

  7336.   <pre>
    7337. 

  7337.     <table>
    7338. 

  7338.         <tr>
    7339. 

  7339.             <th class="vars_head">Mixin variable</th>
    7340. 

  7340.             <th class="vars_head">Default value</th>
    7341. 

  7341.             <th class="vars_head">Allowed values</th>
    7342. 

  7342.             <th class="vars_head">Comment</th>
    7343. 

  7343.         </tr>
    7344. 

  7344.         <tr>
    7345. 

  7345.             <th>@_background-gradient</th>
    7346. 

  7346.             <td class="vars_value">false</td>
    7347. 

  7347.             <td class="vars_value">'' | false | true</td>
    7348. 

  7348.             <td>If set to 'true' the element has gradient background</td>
    7349. 

  7349.         </tr>
    7350. 

  7350.         <tr>
    7351. 

  7351.             <th>@_background-gradient-direction</th>
    7352. 

  7352.             <td class="vars_value">''</td>
    7353. 

  7353.             <td class="vars_value">'' | horizontal | vertical</td>
    7354. 

  7354.             <td>Gradient direction (horizontal or vertical)</td>
    7355. 

  7355.         </tr>
    7356. 

  7356.         <tr>
    7357. 

  7357.             <th>@_background-gradient-color-start</th>
    7358. 

  7358.             <td class="vars_value">''</td>
    7359. 

  7359.             <td class="vars_value">'' | false | value</td>
    7360. 

  7360.             <td>Gradient start color (any css color)</td>
    7361. 

  7361.         </tr>
    7362. 

  7362.         <tr>
    7363. 

  7363.             <th>@_background-gradient-color-end</th>
    7364. 

  7364.             <td class="vars_value">''</td>
    7365. 

  7365.             <td class="vars_value">'' | false | value</td>
    7366. 

  7366.             <td>Gradient end color (any css color) </td>
    7367. 

  7367.         </tr>
    7368. 

  7368.         <tr>
    7369. 

  7369.             <th>@_background-gradient-color-position</th>
    7370. 

  7370.             <td class="vars_value">false</td>
    7371. 

  7371.             <td class="vars_value">'' | false | true</td>
    7372. 

  7372.             <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</td>
    7373. 

  7373.         </tr>
    7374. 

  7374.     </table>
    7375. 

  7375.   </pre>
    7376. 

  7376. 

  7377. <h4 id="codeliburlcheckcode-mixin-variables"><code>.lib-url-check()</code> mixin variables</h4>
    7378. 

  7378.   <pre>
    7379. 

  7379.     <table>
    7380. 

  7380.         <tr>
    7381. 

  7381.             <th class="vars_head">Mixin variable</th>
    7382. 

  7382.             <th class="vars_head">Allowed values</th>
    7383. 

  7383.             <th class="vars_head">Output variable</th>
    7384. 

  7384.             <th class="vars_head">Comment</th>
    7385. 

  7385.         </tr>
    7386. 

  7386.         <tr>
    7387. 

  7387.             <th>@_path</th>
    7388. 

  7388.             <td class="vars_value">'' | false | value</td>
    7389. 

  7389.             <td class="vars_value">@lib-url-check-output</td>
    7390. 

  7390.             <td>Passed url to wrap in 'url( ... )'. If the 'false' value passed mixin will return 'false'</td>
    7391. 

  7391.         </tr>
    7392. 

  7392.     </table>
    7393. 

  7393.   </pre>
    7394. 

  7394. </div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 386" height="24" width="26" class="icon"><path d="m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z"></path></svg></button><button title="Laptop (1024)" data-width='1024'><svg viewBox="0 0 384 312" height="23" width="28" class="icon"><path d="m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z"></path></svg></button><button title="Tablet (768)" data-width='768'><svg viewBox="0 0 317 412" height="24" width="18" class="icon"><path d="M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-32 H 32 C 14.3,0 0,14.3 0,32 v 348 c 0,17.7 14.3,32 32,32 h 252.5 c 17.7,0 32,-14.3 32,-32 z M 40,367 V 45 H 276.5 V 367 H 40 z m 109.8,22.7 c 0,-4.7 3.8,-8.5 8.5,-8.5 4.7,0 8.5,3.8 8.5,8.5 0,4.7 -3.8,8.5 -8.5,8.5 -4.7,0 -8.5,-3.8 -8.5,-8.5 z"></path></svg></button><button title="Smart phone (320)" data-width='320'><svg viewBox="0 0 224 412" height="24" width="13" class="icon"><path d="M 190.7,0 H 33 C 14.8,0 0,14.8 0,33 v 346 c 0,18.2 14.8,33 33,33 h 157.7 c 18.2,0 33,-14.8 33,-33 V 33 c 0,-18.2 -14.8,-33 -33,-33 z M 94.3,30.2 h 37 c 2.2,0 4,1.8 4,4 0,2.2 -1.8,4 -4,4 h -37 c -2.2,0 -4,-1.8 -4,-4 0,-2.2 1.8,-4 4,-4 z m 18.5,362.8 c -8.8,0 -16,-7.2 -16,-16 0,-8.8 7.2,-16 16,-16 8.8,0 16,7.2 16,16 0,8.8 -7.2,16 -16,16 z M 198.6,343.8 H 25.1 V 68.2 h 173.5 v 275.5 z"></path></svg></button><button title="Feature phone (240)" data-width='240'><svg viewBox="0 0 201 412" height="24" width="12" class="icon"><path d="M 165.5,0.2 V 45 H 25 c -13.8,0 -25,11.2 -25,25 V 387 c 0,13.8 11.2,25 25,25 h 150.5 c 13.8,0 25,-11.2 25,-25 V 0.2 h -35 z M 65.2,366.5 H 34.2 v -24.5 h 31 v 24.5 z m 0,-44.3 H 34.2 v -24.5 h 31 v 24.5 z m 50.5,44.3 H 84.7 v -24.5 h 31 v 24.5 z m 0,-44.3 H 84.7 v -24.5 h 31 v 24.5 z m 50.5,44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-59.3 h -132 V 95.4 h 132 V 262.9 z"></path></svg></button><button title="Auto (100%)" data-width="auto" class="auto is-active">Auto</button></div></div><script>(function(){var a=[{title:"actions-toolbar",filename:"actions-toolbar",url:"actions-toolbar.html"},{title:"Actions toolbar",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar"},{title:"Actions toolbar mixin variables",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-mixin-variables"},{title:"Actions toolbar alignment",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-alignment"},{title:"Reverse primary and secondary blocks",filename:"actions-toolbar",url:"actions-toolbar.html#reverse-primary-and-secondary-blocks"},{title:"Actions toolbar indents customizations",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-indents-customizations"},{title:"Responsive actions toolbar",filename:"actions-toolbar",url:"actions-toolbar.html#responsive-actions-toolbar"},{title:"breadcrumbs",filename:"breadcrumbs",url:"breadcrumbs.html"},{title:"Breadcrumbs",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs"},{title:"Breadcrumbs variables",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs-variables"},{title:"Button-styled breadcrumbs with gradient background, border, and no separating symbol",filename:"breadcrumbs",url:"breadcrumbs.html#buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol"},{title:"Breadcrumbs with solid background",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs-with-solid-background"},{title:"buttons",filename:"buttons",url:"buttons.html"},{title:"Default button",filename:"buttons",url:"buttons.html#default-button"},{title:"Button variables",filename:"buttons",url:"buttons.html#button-variables"},{title:"Button as an icon",filename:"buttons",url:"buttons.html#button-as-an-icon"},{title:"Button with an icon on the left or right side of the text",filename:"buttons",url:"buttons.html#button-with-an-icon-on-the-left-or-right-side-of-the-text"},{title:"Button with fixed width",filename:"buttons",url:"buttons.html#button-with-fixed-width"},{title:"Primary button",filename:"buttons",url:"buttons.html#primary-button"},{title:"Primary button variables",filename:"buttons",url:"buttons.html#primary-button-variables"},{title:"Button with gradient background",filename:"buttons",url:"buttons.html#button-with-gradient-background"},{title:"Button as a link",filename:"buttons",url:"buttons.html#button-as-a-link"},{title:"Button as a link variables",filename:"buttons",url:"buttons.html#button-as-a-link-variables"},{title:"Link as a button",filename:"buttons",url:"buttons.html#link-as-a-button"},{title:"Button reset",filename:"buttons",url:"buttons.html#button-reset"},{title:"Button revert secondary color",filename:"buttons",url:"buttons.html#button-revert-secondary-color"},{title:"Button revert secondary color variables",filename:"buttons",url:"buttons.html#button-revert-secondary-color-variables"},{title:"Button revert secondary size",filename:"buttons",url:"buttons.html#button-revert-secondary-size"},{title:"Button revert secondary size variables",filename:"buttons",url:"buttons.html#button-revert-secondary-size-variables"},{title:"components",filename:"components",url:"components.html"},{title:"Components",filename:"components",url:"components.html#components"},{title:"Components Variables",filename:"components",url:"components.html#components-variables"},{title:"dropdowns",filename:"dropdowns",url:"dropdowns.html"},{title:"Drop-down and split buttons mixins",filename:"dropdowns",url:"dropdowns.html#dropdown-and-split-buttons-mixins"},{title:"Drop-down",filename:"dropdowns",url:"dropdowns.html#dropdown"},{title:"Drop-down variables",filename:"dropdowns",url:"dropdowns.html#dropdown-variables"},{title:"Drop-down with icon customization",filename:"dropdowns",url:"dropdowns.html#dropdown-with-icon-customization"},{title:"Modify dropdown list styles",filename:"dropdowns",url:"dropdowns.html#modify-dropdown-list-styles"},{title:"Split button",filename:"dropdowns",url:"dropdowns.html#split-button"},{title:"Split button variables",filename:"dropdowns",url:"dropdowns.html#split-button-variables"},{title:"Split button - button styling",filename:"dropdowns",url:"dropdowns.html#split-button-button-styling"},{title:"Split button icon customization",filename:"dropdowns",url:"dropdowns.html#split-button-icon-customization"},{title:"Split button drop-down list customization",filename:"dropdowns",url:"dropdowns.html#split-button-dropdown-list-customization"},{title:"forms",filename:"forms",url:"forms.html"},{title:"Forms mixins",filename:"forms",url:"forms.html#forms-mixins"},{title:"Global forms elements customization",filename:"forms",url:"forms.html#global-forms-elements-customization"},{title:"Fieldsets & fields customization",filename:"forms",url:"forms.html#fieldsets-fields-customization"},{title:"Fieldset and legend customization variables",filename:"forms",url:"forms.html#fieldset-and-legend-customization-variables"},{title:"Fields customization variables",filename:"forms",url:"forms.html#fields-customization-variables"},{title:"Required fields message customization variables",filename:"forms",url:"forms.html#required-fields-message-customization-variables"},{title:"Form element inputs customization",filename:"forms",url:"forms.html#form-element-inputs-customization"},{title:"Form element inputs customization variables",filename:"forms",url:"forms.html#form-element-inputs-customization-variables"},{title:"Form element choice",filename:"forms",url:"forms.html#form-element-choice"},{title:"Form element choice variables",filename:"forms",url:"forms.html#form-element-choice-variables"},{title:"Custom color",filename:"forms",url:"forms.html#custom-color"},{title:"Input number - input-text view",filename:"forms",url:"forms.html#input-number-inputtext-view"},{title:"Input search - input-text view",filename:"forms",url:"forms.html#input-search-inputtext-view"},{title:"Form validation",filename:"forms",url:"forms.html#form-validation"},{title:"Form validation variables",filename:"forms",url:"forms.html#form-validation-variables"},{title:"icons",filename:"icons",url:"icons.html"},{title:"Icons",filename:"icons",url:"icons.html#icons"},{title:"Icon with image or sprite",filename:"icons",url:"icons.html#icon-with-image-or-sprite"},{title:"Icon with image or sprite variables",filename:"icons",url:"icons.html#icon-with-image-or-sprite-variables"},{title:"Icon position for an icon with image or sprite",filename:"icons",url:"icons.html#icon-position-for-an-icon-with-image-or-sprite"},{title:"Position for icon with image or sprite mixin variables",filename:"icons",url:"icons.html#position-for-icon-with-image-or-sprite-mixin-variables"},{title:"Icon sprite position (with grid)",filename:"icons",url:"icons.html#icon-sprite-position-with-grid"},{title:"Icon sprite position variables",filename:"icons",url:"icons.html#icon-sprite-position-variables"},{title:"Image/sprite icon size",filename:"icons",url:"icons.html#imagesprite-icon-size"},{title:"Image/sprite icon size variables",filename:"icons",url:"icons.html#imagesprite-icon-size-variables"},{title:"Font icon",filename:"icons",url:"icons.html#font-icon"},{title:"Font icon variables",filename:"icons",url:"icons.html#font-icon-variables"},{title:"Change the size of font icon",filename:"icons",url:"icons.html#change-the-size-of-font-icon"},{title:"Change the size of font icon variables",filename:"icons",url:"icons.html#change-the-size-of-font-icon-variables"},{title:"Hide icon text",filename:"icons",url:"icons.html#hide-icon-text"},{title:"Sprite and font icons for Blank theme",filename:"icons",url:"icons.html#sprite-and-font-icons-for-blank-theme"},{title:"layout",filename:"layout",url:"layout.html"},{title:"Layout",filename:"layout",url:"layout.html#layout"},{title:"Layout global variables",filename:"layout",url:"layout.html#layout-global-variables"},{title:"Page layouts",filename:"layout",url:"layout.html#page-layouts"},{title:"Layout column",filename:"layout",url:"layout.html#layout-column"},{title:"Layout column variables",filename:"layout",url:"layout.html#layout-column-variables"},{title:"Layout width",filename:"layout",url:"layout.html#layout-width"},{title:"Layout width variables",filename:"layout",url:"layout.html#layout-width-variables"},{title:"lib",filename:"lib",url:"lib.html"},{title:"Including Magento UI library to your theme",filename:"lib",url:"lib.html#including-magento-ui-library-to-your-theme"},{title:"loaders",filename:"loaders",url:"loaders.html"},{title:"Loaders",filename:"loaders",url:"loaders.html#loaders"},{title:"Default loader variables",filename:"loaders",url:"loaders.html#default-loader-variables"},{title:"Loading",filename:"loaders",url:"loaders.html#loading"},{title:"Loading default variables",filename:"loaders",url:"loaders.html#loading-default-variables"},{title:"messages",filename:"messages",url:"messages.html"},{title:"Messages",filename:"messages",url:"messages.html#messages"},{title:"Information message",filename:"messages",url:"messages.html#information-message"},{title:"Warning message",filename:"messages",url:"messages.html#warning-message"},{title:"Error message",filename:"messages",url:"messages.html#error-message"},{title:"Success message",filename:"messages",url:"messages.html#success-message"},{title:"Notice message",filename:"messages",url:"messages.html#notice-message"},{title:"Message with inner icon",filename:"messages",url:"messages.html#message-with-inner-icon"},{title:"Message with lateral icon",filename:"messages",url:"messages.html#message-with-lateral-icon"},{title:"Custom message style",filename:"messages",url:"messages.html#custom-message-style"},{title:"Messages global variables",filename:"messages",url:"messages.html#messages-global-variables"},{title:"pages",filename:"pages",url:"pages.html"},{title:"Pagination HTML markup",filename:"pages",url:"pages.html#pagination-html-markup"},{title:"Pagination variables",filename:"pages",url:"pages.html#pagination-variables"},{title:"Pagination with label and gradient background on links",filename:"pages",url:"pages.html#pagination-with-label-and-gradient-background-on-links"},{title:'Pagination with "previous"..."next" text links and label',filename:"pages",url:"pages.html#pagination-with-previousnext-text-links-and-label"},{title:"Pagination without label, with solid background",filename:"pages",url:"pages.html#pagination-without-label-with-solid-background"},{title:"popups",filename:"popups",url:"popups.html"},{title:"Popups",filename:"popups",url:"popups.html#popups"},{title:"Popup variables",filename:"popups",url:"popups.html#popup-variables"},{title:"Window overlay mixin variables",filename:"popups",url:"popups.html#window-overlay-mixin-variables"},{title:"Fixed height popup",filename:"popups",url:"popups.html#fixed-height-popup"},{title:"Fixed content height popup",filename:"popups",url:"popups.html#fixed-content-height-popup"},{title:"Margins for header, content and footer block in popup",filename:"popups",url:"popups.html#margins-for-header-content-and-footer-block-in-popup"},{title:"Popup titles styled as theme headings",filename:"popups",url:"popups.html#popup-titles-styled-as-theme-headings"},{title:"Popup action toolbar",filename:"popups",url:"popups.html#popup-action-toolbar"},{title:"Popup Close button without an icon",filename:"popups",url:"popups.html#popup-close-button-without-an-icon"},{title:"Modify the icon of popup Close button",filename:"popups",url:"popups.html#modify-the-icon-of-popup-close-button"},{title:"Modify overlay styles",filename:"popups",url:"popups.html#modify-overlay-styles"},{title:"rating",filename:"rating",url:"rating.html"},{title:"Ratings",filename:"rating",url:"rating.html#ratings"},{title:"Global rating variables",filename:"rating",url:"rating.html#global-rating-variables"},{title:"Rating with vote",filename:"rating",url:"rating.html#rating-with-vote"},{title:"Rating with vote icons number customization",filename:"rating",url:"rating.html#rating-with-vote-icons-number-customization"},{title:"Rating with vote icons colors customization",filename:"rating",url:"rating.html#rating-with-vote-icons-colors-customization"},{title:"Rating with vote icons symbol customization",filename:"rating",url:"rating.html#rating-with-vote-icons-symbol-customization"},{title:"Accessible rating with vote",filename:"rating",url:"rating.html#accessible-rating-with-vote"},{title:"Rating summary",filename:"rating",url:"rating.html#rating-summary"},{title:"Rating summary icons number customization",filename:"rating",url:"rating.html#rating-summary-icons-number-customization"},{title:"Rating summary icons color customization",filename:"rating",url:"rating.html#rating-summary-icons-color-customization"},{title:"Rating summary icons symbol customization",filename:"rating",url:"rating.html#rating-summary-icons-symbol-customization"},{title:"Rating summary hide label",filename:"rating",url:"rating.html#rating-summary-hide-label"},{title:"Rating summary multiple ratings",filename:"rating",url:"rating.html#rating-summary-multiple-ratings"},{title:"Rating hide label mixin",filename:"rating",url:"rating.html#rating-hide-label-mixin"},{title:"resets",filename:"resets",url:"resets.html"},{title:"Resets",filename:"resets",url:"resets.html#resets"},{title:"responsive",filename:"responsive",url:"responsive.html"},{title:"Responsive",filename:"responsive",url:"responsive.html#responsive"},{title:"Responsive mixins usage",filename:"responsive",url:"responsive.html#responsive-mixins-usage"},{title:"Media query style groups separation variables",filename:"responsive",url:"responsive.html#media-query-style-groups-separation-variables"},{title:"Responsive breakpoints",filename:"responsive",url:"responsive.html#responsive-breakpoints"},{title:"sections",filename:"sections",url:"sections.html"},{title:"Tabs and accordions",filename:"sections",url:"sections.html#tabs-and-accordions"},{title:"Tabs",filename:"sections",url:"sections.html#tabs"},{title:"Tabs mixin variables",filename:"sections",url:"sections.html#tabs-mixin-variables"},{title:"Tabs with content top border",filename:"sections",url:"sections.html#tabs-with-content-top-border"},{title:"Accordion",filename:"sections",url:"sections.html#accordion"},{title:"Accordion mixin variables",filename:"sections",url:"sections.html#accordion-mixin-variables"},{title:"Responsive tabs",filename:"sections",url:"sections.html#responsive-tabs"},{title:"Tabs Base",filename:"sections",url:"sections.html#tabs-base"},{title:"Accordion Base",filename:"sections",url:"sections.html#accordion-base"},{title:"tables",filename:"tables",url:"tables.html"},{title:"Tables",filename:"tables",url:"tables.html#tables"},{title:"Table mixin variables",filename:"tables",url:"tables.html#table-mixin-variables"},{title:"Table typography",filename:"tables",url:"tables.html#table-typography"},{title:"Table typography mixin variables",filename:"tables",url:"tables.html#table-typography-mixin-variables"},{title:"Table caption",filename:"tables",url:"tables.html#table-caption"},{title:"Table caption mixin variables",filename:"tables",url:"tables.html#table-caption-mixin-variables"},{title:"Table cells resize",filename:"tables",url:"tables.html#table-cells-resize"},{title:"Table cells resize variables",filename:"tables",url:"tables.html#table-cells-resize-variables"},{title:"Table background customization",filename:"tables",url:"tables.html#table-background-customization"},{title:"Table background mixin variables",filename:"tables",url:"tables.html#table-background-mixin-variables"},{title:"Table borders customization",filename:"tables",url:"tables.html#table-borders-customization"},{title:"Table borders mixin variables",filename:"tables",url:"tables.html#table-borders-mixin-variables"},{title:"Table with horizontal borders",filename:"tables",url:"tables.html#table-with-horizontal-borders"},{title:"Table with vertical borders",filename:"tables",url:"tables.html#table-with-vertical-borders"},{title:"Table with light borders",filename:"tables",url:"tables.html#table-with-light-borders"},{title:"Table without borders",filename:"tables",url:"tables.html#table-without-borders"},{title:"Striped table",filename:"tables",url:"tables.html#striped-table"},{title:"Striped table mixin variables",filename:"tables",url:"tables.html#striped-table-mixin-variables"},{title:"Table with rows hover",filename:"tables",url:"tables.html#table-with-rows-hover"},{title:"Table with rows hover mixin variables",filename:"tables",url:"tables.html#table-with-rows-hover-mixin-variables"},{title:"Responsive table technics #1",filename:"tables",url:"tables.html#responsive-table-technics-1"},{title:"Responsive table technics #2",filename:"tables",url:"tables.html#responsive-table-technics-2"},{title:"Responsive table technics #2 mixin variables",filename:"tables",url:"tables.html#responsive-table-technics-2-mixin-variables"},{title:"tooltips",filename:"tooltips",url:"tooltips.html"},{title:"Tooltips",filename:"tooltips",url:"tooltips.html#tooltips"},{title:"Tooltips variables",filename:"tooltips",url:"tooltips.html#tooltips-variables"},{title:"typography",filename:"typography",url:"typography.html"},{title:"Typogrphy",filename:"typography",url:"typography.html#typogrphy"},{title:"Typography variables",filename:"typography",url:"typography.html#typography-variables"},{title:"Font-size mixin",filename:"typography",url:"typography.html#fontsize-mixin"},{title:"Line-height mixin",filename:"typography",url:"typography.html#lineheight-mixin"},{title:"Word breaking mixin",filename:"typography",url:"typography.html#word-breaking-mixin"},{title:"Font face mixin",filename:"typography",url:"typography.html#font-face-mixin"},{title:"Text overflow mixin",filename:"typography",url:"typography.html#text-overflow-mixin"},{title:"Text hide",filename:"typography",url:"typography.html#text-hide"},{title:"Hyphens",filename:"typography",url:"typography.html#hyphens"},{title:"Font style and color",filename:"typography",url:"typography.html#font-style-and-color"},{title:"Font style mixin variables",filename:"typography",url:"typography.html#font-style-mixin-variables"},{title:"Reset list styles",filename:"typography",url:"typography.html#reset-list-styles"},{title:"Reset list styles variables",filename:"typography",url:"typography.html#reset-list-styles-variables"},{title:"Inline-block list item styling",filename:"typography",url:"typography.html#inlineblock-list-item-styling"},{title:"Link styling mixin",filename:"typography",url:"typography.html#link-styling-mixin"},{title:"Link styling mixin variables",filename:"typography",url:"typography.html#link-styling-mixin-variables"},{title:"Heading styling mixin",filename:"typography",url:"typography.html#heading-styling-mixin"},{title:"Base typography mixins",filename:"typography",url:"typography.html#base-typography-mixins"},{title:"Base typography mixin variables",filename:"typography",url:"typography.html#base-typography-mixin-variables"},{title:"Headings typography mixin",filename:"typography",url:"typography.html#headings-typography-mixin"},{title:"Headings typography mixin variables",filename:"typography",url:"typography.html#headings-typography-mixin-variables"},{title:"Typography links mixin",filename:"typography",url:"typography.html#typography-links-mixin"},{title:"Typography lists mixin",filename:"typography",url:"typography.html#typography-lists-mixin"},{title:"Typography lists mixin variables",filename:"typography",url:"typography.html#typography-lists-mixin-variables"},{title:"Typography code elements mixin",filename:"typography",url:"typography.html#typography-code-elements-mixin"},{title:"Typography code mixin variables",filename:"typography",url:"typography.html#typography-code-mixin-variables"},{title:"Typography blockquote",filename:"typography",url:"typography.html#typography-blockquote"},{title:"Typography blockquote mixin variables",filename:"typography",url:"typography.html#typography-blockquote-mixin-variables"},{title:"utilities",filename:"utilities",url:"utilities.html"},{title:"Utilities",filename:"utilities",url:"utilities.html#utilities"},{title:".lib-clearfix()",filename:"utilities",url:"utilities.html#libclearfix"},{title:".lib-visibility-hidden()",filename:"utilities",url:"utilities.html#libvisibilityhidden"},{title:".lib-visually-hidden()",filename:"utilities",url:"utilities.html#libvisuallyhidden"},{title:".lib-visually-hidden-reset()",filename:"utilities",url:"utilities.html#libvisuallyhiddenreset"},{title:".lib-css()",filename:"utilities",url:"utilities.html#libcss"},{title:".lib-css() variables",filename:"utilities",url:"utilities.html#libcss-variables"},{title:".lib-rotate()",filename:"utilities",url:"utilities.html#librotate"},{title:".lib-rotate() variables",filename:"utilities",url:"utilities.html#librotate-variables"},{title:".lib-input-placeholder()",filename:"utilities",url:"utilities.html#libinputplaceholder"},{title:".lib-input-placeholder() variables",filename:"utilities",url:"utilities.html#libinputplaceholder-variables"},{title:".lib-background-gradient()",filename:"utilities",url:"utilities.html#libbackgroundgradient"},{title:".lib-background-gradient() variables",filename:"utilities",url:"utilities.html#libbackgroundgradient-variables"},{title:"variables",filename:"variables",url:"variables.html"},{title:"List of Global Variables",filename:"variables",url:"variables.html#list-of-global-variables"},{title:"Table with rows hover mixin variables",filename:"variables",url:"variables.html#table-with-rows-hover-mixin-variables"},{title:"docs",filename:"docs",url:"docs.html"},{title:"Documentation",filename:"docs",url:"docs.html#documentation"}];(function(){"use strict";var b=function(a,b){return Array.prototype.indexOf.call(a,b)!==-1},c=function(a,b){return Array.prototype.filter.call(a,b)},d=function(a,b){return Array.prototype.forEach.call(a,b)},e=document.getElementsByTagName("body")[0];e.addEventListener("click",function(a){var b=a.target;b.tagName.toLowerCase()==="svg"&&(b=b.parentNode);var c=!1;b.dataset.toggle!=null&&(a.preventDefault(),b.classList.contains("is-active")||(c=!0)),d(e.querySelectorAll("[data-toggle]"),function(a){a.classList.remove("is-active"),document.getElementById(a.dataset.toggle).hidden=!0}),c&&(b.classList.add("is-active"),document.getElementById(b.dataset.toggle).hidden=!1)}),function(){var f=e.getElementsByClassName("nav")[0];if(!f)return;var g=document.createElement("ul");g.className="nav-results",g.id="nav-search",g.hidden=!0,d(a,function(a){var b,c,d;b=document.createElement("li"),b._title=a.title.toLowerCase(),b.hidden=!0,b.appendChild(c=document.createElement("a")),c.href=a.url,c.innerHTML=a.title,c.appendChild(d=document.createElement("span")),d.innerHTML=a.filename,d.className="nav-results-filename",g.appendChild(b)}),f.appendChild(g);var h=g.children,i=function(a){d(h,function(a){a.hidden=!0});var b=this.value.toLowerCase(),e=[];b!==""&&(e=c(h,function(a){return a._title.indexOf(b)!==-1})),e.length>0?(d(e,function(a){a.hidden=!1}),g.hidden=!1):g.hidden=!0},j=f.querySelector('input[type="search"]');j.addEventListener("keyup",i),j.addEventListener("focus",i),e.addEventListener("click",function(a){if(a.target.classList&&a.target.classList.contains("search"))return;g.hidden=!0}),g.addEventListener("click",function(a){j.value=""});var k=document.createElement("ul");k.id="nav-toc",k.hidden=!0,k.className="nav-results toc-list",c(e.getElementsByTagName("*"),function(a){return b(["h1","h2","h3"],a.tagName.toLowerCase())}).map(function(a){var b=document.createElement("li"),c=document.createElement("a"),d=a.tagName.toLowerCase()[1];c.classList.add("level-"+d),b.appendChild(c),c.href="#"+a.id,c.innerHTML=a.innerHTML,k.appendChild(b)}),f.appendChild(k)}()})(),function(){"use strict";if(location.hash==="#__preview__"||location.protocol==="data:")return;var a=function(a,b){return Array.prototype.forEach.call(a,b)},b=function(a,b){var e=Array.prototype.slice.call(arguments,2);return d(a,function(a){return(c(b)?b||a:a[b]).apply(a,e)})},c=function(a){return Object.prototype.toString.call(a)==="[object Function]"},d=function(a,b){return Array.prototype.map.call(a,b)},e=function(a,b){return d(a,function(a){return a[b]})},f=function(a){var b={},c=a.split(";");for(var d=0;c.length>d;d++){var e=c[d].trim().split("=");b[e[0]]=e[1]}return b},g=function(a,c){return b(e(a,"classList"),"remove",c)},h=function(a,b){a.contentDocument.defaultView.postMessage(b,"*")},i=document.getElementsByTagName("head")[0],j=document.getElementsByTagName("body")[0],k=e(i.querySelectorAll('style[type="text/preview"]'),"innerHTML").join(""),l=e(i.querySelectorAll('script[type="text/preview"]'),"innerHTML").join(""),m=location.href.split("#")[0]+"#__preview__",n=document.createElement("iframe");n.src="data:text/html,",j.appendChild(n),n.addEventListener("load",function(){var b={sameOriginDataUri:!0};try{this.contentDocument,this.contentDocument||(b.sameOriginDataUri=!1)}catch(c){b.sameOriginDataUri=!1}this.parentNode.removeChild(this),a(j.getElementsByTagName("textarea"),function(a,c){o(a,b,c),q(),p(a)})});var o=function(a,b,c){var d,e,f;d=document.createElement("div"),d.appendChild(e=document.createElement("div")),d.className="preview",e.appendChild(f=document.createElement("iframe")),e.className="resizeable",f.setAttribute("scrolling","no"),f.name="iframe"+c++,f.addEventListener("load",function(){var c,d,e,f,g,i,j;j=this.contentDocument;if(!b.sameOriginDataUri&&this.src!==m)return;this.src===m&&(c=j.createElement("html"),c.appendChild(j.createElement("head")),c.appendChild(d=j.createElement("body")),d.innerHTML=a.textContent,j.replaceChild(c,j.documentElement)),g=j.createElement("head"),g.appendChild(f=j.createElement("style")),g.appendChild(e=j.createElement("script")),e.textContent=l,f.textContent=k,i=j.getElementsByTagName("head")[0],i.parentNode.replaceChild(g,i),h(this,"getHeight")});var g;b.sameOriginDataUri?g="data:text/html;charset=utf-8,"+encodeURIComponent("<!doctype html><html><head></head></body>"+a.textContent):g=m,f.setAttribute("src",g);var i=function(){f.contentDocument.body.innerHTML=this.value,h(f,"getHeight")};a.addEventListener("keypress",i),a.addEventListener("keyup",i),a.parentNode.insertBefore(d,a)},p=function(a){var b=document.createElement("div");b.className="preview-code",b.style.position="absolute",b.style.left="-9999px",j.appendChild(b);var c=parseInt(window.getComputedStyle(a).getPropertyValue("max-height"),10),d=function(a){b.textContent=this.value+"\n";var d=b.offsetHeight+2;d>=c?this.style.overflow="auto":this.style.overflow="hidden",this.style.height=b.offsetHeight+2+"px"};a.addEventListener("keypress",d),a.addEventListener("keyup",d),d.call(a)},q=function(){var b=j.getElementsByClassName("settings")[0],c=j.getElementsByClassName("resizeable"),d=30,e=function(b){document.cookie="preview-width="+b,a(c,function(a){b==="auto"&&(b=a.parentNode.offsetWidth),a.style.width=b+"px",h(a.getElementsByTagName("iframe")[0],"getHeight")})},i=f(document.cookie)["preview-width"];if(i){e(i),g(b.getElementsByClassName("is-active"),"is-active");var k=b.querySelector('button[data-width="'+i+'"]');k&&k.classList.add("is-active")}window.addEventListener("message",function(a){if(a.data==null||!a.source)return;var b=a.data,c=document.getElementsByName(a.source.name)[0];b.height!=null&&c&&(c.parentNode.style.height=b.height+d+"px")},!1),b&&c.length>0&&(b.hidden=!1,b.addEventListener("click",function(a){var c=a.target.tagName.toLowerCase(),d;if(c==="button")d=a.target;else{if(c!=="svg")return;d=a.target.parentNode}a.preventDefault(),g(b.getElementsByClassName("is-active"),"is-active"),d.classList.add("is-active");var f=d.dataset.width;e(f)}))}}()})()</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->
    7395.