No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

fabric.components.css 113KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460
  1. /**
  2. * Office UI Fabric 2.1.0
  3. * The front-end framework for building experiences for Office 365.
  4. **/
  5. /*
  6. Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
  7. */
  8. .ms-Breadcrumb {
  9. margin: 23px 0 1px 0;
  10. }
  11. .ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
  12. display: inline;
  13. }
  14. .ms-Breadcrumb-chevron {
  15. font-size: 17px;
  16. color: #666666;
  17. vertical-align: top;
  18. margin: 10px 0;
  19. }
  20. .ms-Breadcrumb-list {
  21. display: inline;
  22. white-space: nowrap;
  23. padding: 0;
  24. margin: 0;
  25. }
  26. .ms-Breadcrumb-list .ms-Breadcrumb-listItem {
  27. list-style-type: none;
  28. vertical-align: top;
  29. margin: 0;
  30. padding: 0;
  31. display: inline-block;
  32. }
  33. .ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
  34. display: none;
  35. }
  36. .ms-Breadcrumb-overflow {
  37. display: none;
  38. position: relative;
  39. margin-right: -4px;
  40. }
  41. .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
  42. font-size: 12px;
  43. display: inline-block;
  44. color: #0078d7;
  45. margin-right: -4px;
  46. padding: 12px 8px 3px 8px;
  47. cursor: pointer;
  48. }
  49. .ms-Breadcrumb-overflowMenu {
  50. display: none;
  51. position: absolute;
  52. }
  53. .ms-Breadcrumb-overflowMenu.is-open {
  54. display: block;
  55. top: 36px;
  56. left: 0;
  57. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  58. background-color: #ffffff;
  59. border: 1px solid #c8c8c8;
  60. z-index: 105;
  61. }
  62. .ms-Breadcrumb-overflowMenu:before {
  63. position: absolute;
  64. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  65. top: -6px;
  66. left: 6px;
  67. content: ' ';
  68. width: 16px;
  69. height: 16px;
  70. -webkit-transform: rotate(45deg);
  71. -ms-transform: rotate(45deg);
  72. transform: rotate(45deg);
  73. background-color: white;
  74. }
  75. .ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
  76. border: none;
  77. box-shadow: none;
  78. position: relative;
  79. width: 190px;
  80. }
  81. .ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open {
  82. margin-bottom: 0;
  83. }
  84. .ms-Breadcrumb-itemLink,
  85. .ms-Breadcrumb-overflowButton {
  86. text-decoration: none;
  87. outline: transparent;
  88. }
  89. .ms-Breadcrumb-itemLink:hover,
  90. .ms-Breadcrumb-overflowButton:hover {
  91. background-color: #f4f4f4;
  92. }
  93. .ms-Breadcrumb-itemLink:focus,
  94. .ms-Breadcrumb-overflowButton:focus {
  95. outline: #767676 solid 1px;
  96. color: #000000;
  97. }
  98. .ms-Breadcrumb-itemLink:active,
  99. .ms-Breadcrumb-overflowButton:active {
  100. outline: transparent;
  101. background-color: #c8c8c8;
  102. }
  103. .ms-Breadcrumb-itemLink {
  104. color: #333333;
  105. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  106. font-size: 21px;
  107. font-weight: normal;
  108. display: inline-block;
  109. padding: 0 4px;
  110. max-width: 160px;
  111. white-space: nowrap;
  112. text-overflow: ellipsis;
  113. overflow: hidden;
  114. }
  115. @media screen and (max-width: 639px) {
  116. .ms-Breadcrumb {
  117. margin: 10px 0;
  118. }
  119. .ms-Breadcrumb-itemLink {
  120. font-size: 17px;
  121. }
  122. .ms-Breadcrumb-chevron {
  123. font-size: 14px;
  124. margin-top: 7px;
  125. }
  126. .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
  127. padding-top: 8px;
  128. padding-bottom: 3px;
  129. }
  130. }
  131. @media screen and (max-width: 479px) {
  132. .ms-Breadcrumb-itemLink {
  133. font-size: 14px;
  134. max-width: 116px;
  135. }
  136. .ms-Breadcrumb-chevron {
  137. margin-top: 4px;
  138. }
  139. .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
  140. padding-top: 5px;
  141. padding-bottom: 3px;
  142. }
  143. }
  144. .ms-Button {
  145. color: #333333;
  146. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  147. font-size: 14px;
  148. font-weight: normal;
  149. box-sizing: border-box;
  150. margin: 0;
  151. padding: 0;
  152. box-shadow: none;
  153. background-color: #f4f4f4;
  154. border: 1px solid #f4f4f4;
  155. cursor: pointer;
  156. display: inline-block;
  157. height: 32px;
  158. min-width: 80px;
  159. padding: 4px 20px 6px;
  160. }
  161. .ms-Button:hover {
  162. background-color: #eaeaea;
  163. border-color: #eaeaea;
  164. outline: 1px solid transparent;
  165. }
  166. .ms-Button:hover .ms-Button-label {
  167. color: #000000;
  168. }
  169. .ms-Button:focus {
  170. background-color: #eaeaea;
  171. border-color: #0078d7;
  172. outline: 1px solid transparent;
  173. }
  174. .ms-Button:focus .ms-Button-label {
  175. color: #000000;
  176. }
  177. .ms-Button:active {
  178. background-color: #0078d7;
  179. border-color: #0078d7;
  180. }
  181. .ms-Button:active .ms-Button-label {
  182. color: #ffffff;
  183. }
  184. .ms-Button:disabled,
  185. .ms-Button.is-disabled {
  186. background-color: #f4f4f4;
  187. border-color: #f4f4f4;
  188. cursor: default;
  189. }
  190. .ms-Button:disabled .ms-Button-label,
  191. .ms-Button.is-disabled .ms-Button-label {
  192. color: #a6a6a6;
  193. }
  194. .ms-Button:disabled:hover,
  195. .ms-Button:disabled:focus,
  196. .ms-Button.is-disabled:hover,
  197. .ms-Button.is-disabled:focus {
  198. outline: 0;
  199. }
  200. .ms-Button + .ms-Button {
  201. margin-left: 6px;
  202. }
  203. .ms-Button-label {
  204. color: #333333;
  205. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  206. font-size: 14px;
  207. }
  208. .ms-Button-icon,
  209. .ms-Button-description {
  210. display: none;
  211. }
  212. .ms-Button.ms-Button--primary {
  213. background-color: #0078d7;
  214. border-color: #0078d7;
  215. }
  216. .ms-Button.ms-Button--primary .ms-Button-label {
  217. color: #ffffff;
  218. }
  219. .ms-Button.ms-Button--primary:hover {
  220. background-color: #005a9e;
  221. border-color: #005a9e;
  222. }
  223. .ms-Button.ms-Button--primary:focus {
  224. background-color: #005a9e;
  225. border-color: #004578;
  226. }
  227. .ms-Button.ms-Button--primary:active {
  228. background-color: #0078d7;
  229. border-color: #0078d7;
  230. }
  231. .ms-Button.ms-Button--primary:disabled,
  232. .ms-Button.ms-Button--primary.is-disabled {
  233. background-color: #f4f4f4;
  234. border-color: #f4f4f4;
  235. }
  236. .ms-Button.ms-Button--primary:disabled .ms-Button-label,
  237. .ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
  238. color: #a6a6a6;
  239. }
  240. .ms-Button.ms-Button--hero {
  241. background-color: transparent;
  242. border: none;
  243. vertical-align: top;
  244. line-height: normal;
  245. }
  246. .ms-Button.ms-Button--hero .ms-Button-icon {
  247. color: #0078d7;
  248. display: inline-block;
  249. font-size: 12px;
  250. position: relative;
  251. top: -8px;
  252. text-align: center;
  253. }
  254. .ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
  255. border-radius: 18px;
  256. border: 1px solid #0078d7;
  257. height: 18px;
  258. line-height: 18px;
  259. width: 18px;
  260. font-size: 12px;
  261. margin: 0;
  262. }
  263. .ms-Button.ms-Button--hero .ms-Button-label {
  264. color: #0078d7;
  265. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  266. font-size: 21px;
  267. position: relative;
  268. top: -5px;
  269. text-decoration: none;
  270. }
  271. .ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
  272. .ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
  273. color: #005a9e;
  274. }
  275. .ms-Button.ms-Button--hero:hover .ms-Button-label,
  276. .ms-Button.ms-Button--hero:focus .ms-Button-label {
  277. color: #004578;
  278. }
  279. .ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
  280. color: #0078d7;
  281. }
  282. .ms-Button.ms-Button--hero:active .ms-Button-label {
  283. color: #0078d7;
  284. }
  285. .ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
  286. .ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
  287. color: #c8c8c8;
  288. }
  289. .ms-Button.ms-Button--hero:disabled .ms-Button-label,
  290. .ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
  291. color: #a6a6a6;
  292. }
  293. .ms-Button.ms-Button--compound {
  294. height: auto;
  295. min-height: 72px;
  296. max-width: 280px;
  297. padding: 20px;
  298. }
  299. .ms-Button.ms-Button--compound .ms-Button-label {
  300. display: block;
  301. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  302. position: relative;
  303. text-align: left;
  304. margin-top: -5px;
  305. }
  306. .ms-Button.ms-Button--compound .ms-Button-description {
  307. color: #666666;
  308. display: block;
  309. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  310. font-size: 12px;
  311. position: relative;
  312. text-align: left;
  313. top: 3px;
  314. }
  315. .ms-Button.ms-Button--compound:hover .ms-Button-description {
  316. color: #212121;
  317. }
  318. .ms-Button.ms-Button--compound:focus {
  319. border-color: #0078d7;
  320. background-color: #f4f4f4;
  321. }
  322. .ms-Button.ms-Button--compound:focus .ms-Button-label {
  323. color: #333333;
  324. }
  325. .ms-Button.ms-Button--compound:focus .ms-Button-description {
  326. color: #666666;
  327. }
  328. .ms-Button.ms-Button--compound:active {
  329. background-color: #0078d7;
  330. }
  331. .ms-Button.ms-Button--compound:active .ms-Button-description,
  332. .ms-Button.ms-Button--compound:active .ms-Button-label {
  333. color: #ffffff;
  334. }
  335. .ms-Button.ms-Button--compound:disabled .ms-Button-label,
  336. .ms-Button.ms-Button--compound:disabled .ms-Button-description,
  337. .ms-Button.ms-Button--compound.is-disabled .ms-Button-label,
  338. .ms-Button.ms-Button--compound.is-disabled .ms-Button-description {
  339. color: #a6a6a6;
  340. }
  341. .ms-Button.ms-Button--compound:disabled:focus,
  342. .ms-Button.ms-Button--compound:disabled:active,
  343. .ms-Button.ms-Button--compound.is-disabled:focus,
  344. .ms-Button.ms-Button--compound.is-disabled:active {
  345. border-color: #f4f4f4;
  346. background-color: #f4f4f4;
  347. }
  348. .ms-Button.ms-Button--compound:disabled:focus .ms-Button-label,
  349. .ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,
  350. .ms-Button.ms-Button--compound:disabled:active .ms-Button-label,
  351. .ms-Button.ms-Button--compound:disabled:active .ms-Button-description,
  352. .ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,
  353. .ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,
  354. .ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,
  355. .ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description {
  356. color: #a6a6a6;
  357. }
  358. .ms-Button.ms-Button--command {
  359. background-color: transparent;
  360. border: none;
  361. height: 32px;
  362. line-height: 32px;
  363. min-width: 0;
  364. padding: 0 8px;
  365. text-align: left;
  366. font-size: 14px;
  367. }
  368. .ms-Button.ms-Button--command .ms-Button-icon {
  369. color: #666666;
  370. display: inline-block;
  371. margin-right: 4px;
  372. position: relative;
  373. }
  374. .ms-Button.ms-Button--command .ms-Button-label {
  375. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  376. }
  377. .ms-Button.ms-Button--command:hover .ms-Button-icon,
  378. .ms-Button.ms-Button--command:focus .ms-Button-icon {
  379. color: #212121;
  380. }
  381. .ms-Button.ms-Button--command:hover .ms-Button-label,
  382. .ms-Button.ms-Button--command:focus .ms-Button-label {
  383. color: #000000;
  384. }
  385. .ms-Button.ms-Button--command:active .ms-Button-icon,
  386. .ms-Button.ms-Button--command:active .ms-Button-label {
  387. color: #0078d7;
  388. }
  389. .ms-Button.ms-Button--command:disabled .ms-Button-icon,
  390. .ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
  391. color: #c8c8c8;
  392. }
  393. .ms-Button.ms-Button--command:disabled .ms-Button-label,
  394. .ms-Button.ms-Button--command.is-disabled .ms-Button-label {
  395. color: #a6a6a6;
  396. }
  397. .ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
  398. margin-left: 14px;
  399. }
  400. .ms-Callout {
  401. z-index: 100;
  402. margin: 16px auto;
  403. position: relative;
  404. width: 288px;
  405. }
  406. .ms-Callout.ms-Callout--arrowRight:before,
  407. .ms-Callout.ms-Callout--arrowRight:after,
  408. .ms-Callout.ms-Callout--arrowLeft:before,
  409. .ms-Callout.ms-Callout--arrowLeft:after,
  410. .ms-Callout.ms-Callout--arrowBottom:before,
  411. .ms-Callout.ms-Callout--arrowBottom:after,
  412. .ms-Callout.ms-Callout--arrowTop:before,
  413. .ms-Callout.ms-Callout--arrowTop:after {
  414. content: '';
  415. position: absolute;
  416. -webkit-transform: rotate(-45deg);
  417. -ms-transform: rotate(-45deg);
  418. transform: rotate(-45deg);
  419. height: 0;
  420. width: 0;
  421. }
  422. .ms-Callout.ms-Callout--arrowRight:before,
  423. .ms-Callout.ms-Callout--arrowLeft:before,
  424. .ms-Callout.ms-Callout--arrowBottom:before,
  425. .ms-Callout.ms-Callout--arrowTop:before {
  426. z-index: 0;
  427. outline: 1px solid transparent;
  428. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  429. }
  430. .ms-Callout.ms-Callout--arrowRight:after,
  431. .ms-Callout.ms-Callout--arrowLeft:after,
  432. .ms-Callout.ms-Callout--arrowBottom:after,
  433. .ms-Callout.ms-Callout--arrowTop:after {
  434. z-index: 10;
  435. }
  436. .ms-Callout.ms-Callout--arrowLeft:before,
  437. .ms-Callout.ms-Callout--arrowLeft:after,
  438. .ms-Callout.ms-Callout--arrowRight:before,
  439. .ms-Callout.ms-Callout--arrowRight:after {
  440. top: 40px;
  441. display: none;
  442. }
  443. .ms-Callout.ms-Callout--arrowLeft:before,
  444. .ms-Callout.ms-Callout--arrowLeft:after {
  445. border-top: 10px solid #ffffff;
  446. border-right: 10px solid transparent;
  447. border-bottom: 10px solid transparent;
  448. border-left: 10px solid #ffffff;
  449. left: -10px;
  450. }
  451. .ms-Callout.ms-Callout--arrowRight:before,
  452. .ms-Callout.ms-Callout--arrowRight:after {
  453. border-top: 10px solid transparent;
  454. border-right: 10px solid #ffffff;
  455. border-bottom: 10px solid #ffffff;
  456. border-left: 10px solid transparent;
  457. right: -10px;
  458. }
  459. .ms-Callout.ms-Callout--arrowTop:before,
  460. .ms-Callout.ms-Callout--arrowTop:after,
  461. .ms-Callout.ms-Callout--arrowBottom:before,
  462. .ms-Callout.ms-Callout--arrowBottom:after {
  463. left: 0;
  464. right: 0;
  465. margin: 0 auto;
  466. width: 0;
  467. }
  468. .ms-Callout.ms-Callout--arrowTop:before,
  469. .ms-Callout.ms-Callout--arrowTop:after {
  470. border-top: 10px solid #ffffff;
  471. border-right: 10px solid #ffffff;
  472. border-bottom: 10px solid transparent;
  473. border-left: 10px solid transparent;
  474. top: -10px;
  475. }
  476. .ms-Callout.ms-Callout--arrowBottom:before,
  477. .ms-Callout.ms-Callout--arrowBottom:after {
  478. border-top: 10px solid transparent;
  479. border-right: 10px solid transparent;
  480. border-bottom: 10px solid #ffffff;
  481. border-left: 10px solid #ffffff;
  482. bottom: -10px;
  483. }
  484. .ms-Callout-main {
  485. position: relative;
  486. background-color: #ffffff;
  487. box-sizing: border-box;
  488. outline: 1px solid transparent;
  489. z-index: 5;
  490. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  491. }
  492. .ms-Callout-close {
  493. margin: 0;
  494. border: 0;
  495. background: none;
  496. cursor: pointer;
  497. position: absolute;
  498. top: 12px;
  499. right: 12px;
  500. padding: 8px;
  501. width: 32px;
  502. height: 32px;
  503. font-size: 14px;
  504. color: #666666;
  505. z-index: 110;
  506. }
  507. .ms-Callout-inner {
  508. height: 100%;
  509. padding: 0 24px 20px;
  510. }
  511. .ms-Callout-header {
  512. z-index: 105;
  513. padding: 18px 24px 12px;
  514. }
  515. .ms-Callout-title {
  516. margin: 0;
  517. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  518. font-size: 21px;
  519. }
  520. .ms-Callout-subText {
  521. margin: 0;
  522. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  523. color: #333333;
  524. font-size: 12px;
  525. }
  526. .ms-Callout-link {
  527. font-size: 14px;
  528. }
  529. .ms-Callout-actions {
  530. position: relative;
  531. margin-top: 20px;
  532. width: 100%;
  533. white-space: nowrap;
  534. }
  535. .ms-Callout-actions .ms-Link.ms-Link--hero {
  536. position: relative;
  537. left: -8px;
  538. }
  539. .ms-Callout-action {
  540. position: relative;
  541. top: 4px;
  542. left: -8px;
  543. margin-left: 0 !important;
  544. }
  545. .ms-Callout-action:hover .ms-Callout-actionIcon,
  546. .ms-Callout-action:focus .ms-Callout-actionIcon {
  547. color: #0078d7;
  548. }
  549. .ms-Callout-button {
  550. margin-right: 12px;
  551. }
  552. .ms-Callout.ms-Callout--close .ms-Callout-title {
  553. margin-right: 20px;
  554. }
  555. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
  556. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
  557. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
  558. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
  559. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
  560. .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
  561. border-color: #0078d7;
  562. background-color: transparent;
  563. }
  564. .ms-Callout.ms-Callout--OOBE .ms-Callout-header {
  565. padding: 28px 24px;
  566. background-color: #0078d7;
  567. }
  568. .ms-Callout.ms-Callout--OOBE .ms-Callout-title {
  569. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  570. font-size: 28px;
  571. color: #ffffff;
  572. }
  573. .ms-Callout.ms-Callout--OOBE .ms-Callout-inner {
  574. padding-top: 20px;
  575. }
  576. .ms-Callout.ms-Callout--OOBE .ms-Callout-subText {
  577. font-size: 14px;
  578. }
  579. .ms-Callout.ms-Callout--actionText .ms-Callout-actions {
  580. border-top: 1px solid #eaeaea;
  581. margin-bottom: -8px;
  582. }
  583. .ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
  584. .ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
  585. .ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
  586. .ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
  587. left: 40px;
  588. right: auto;
  589. }
  590. .ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
  591. .ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
  592. .ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
  593. .ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
  594. top: calc('50% - 10px');
  595. }
  596. .ms-Callout.ms-Callout--peek .ms-Callout-header {
  597. padding-bottom: 0;
  598. }
  599. .ms-Callout.ms-Callout--peek .ms-Callout-title {
  600. font-size: 14px;
  601. }
  602. .ms-Callout.ms-Callout--peek .ms-Callout-actions {
  603. margin-top: 12px;
  604. margin-bottom: -4px;
  605. }
  606. @media (min-width: 480px) {
  607. .ms-Callout {
  608. width: 300px;
  609. margin: 16px;
  610. }
  611. .ms-Callout.ms-Callout--arrowRight:before,
  612. .ms-Callout.ms-Callout--arrowRight:after,
  613. .ms-Callout.ms-Callout--arrowLeft:before,
  614. .ms-Callout.ms-Callout--arrowLeft:after {
  615. display: block;
  616. }
  617. }
  618. .ms-ChoiceField {
  619. color: #333333;
  620. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  621. font-size: 14px;
  622. font-weight: normal;
  623. box-sizing: border-box;
  624. margin: 0;
  625. padding: 0;
  626. box-shadow: none;
  627. min-height: 36px;
  628. position: relative;
  629. }
  630. .ms-ChoiceField .ms-Label {
  631. font-size: 14px;
  632. padding: 0 0 0 26px;
  633. }
  634. .ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
  635. pointer-events: none;
  636. cursor: default;
  637. }
  638. .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
  639. background-color: #c8c8c8;
  640. color: #c8c8c8;
  641. }
  642. .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
  643. border-color: #eaeaea;
  644. }
  645. .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
  646. color: #a6a6a6;
  647. }
  648. .ms-ChoiceField-input {
  649. position: absolute;
  650. opacity: 0;
  651. top: 8px;
  652. }
  653. .ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
  654. border-color: #767676;
  655. }
  656. .ms-ChoiceField-field {
  657. display: inline-block;
  658. cursor: pointer;
  659. margin-top: 8px;
  660. position: relative;
  661. }
  662. .ms-ChoiceField-field:after {
  663. content: '';
  664. display: inline-block;
  665. border: 1px #c8c8c8 solid;
  666. width: 19px;
  667. height: 19px;
  668. cursor: pointer;
  669. position: relative;
  670. font-weight: normal;
  671. left: -1px;
  672. top: -1px;
  673. border-radius: 50%;
  674. position: absolute;
  675. }
  676. .ms-ChoiceField-field:hover:after {
  677. border-color: #767676;
  678. }
  679. .ms-ChoiceField-field:hover .ms-Label {
  680. color: #000000;
  681. }
  682. .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
  683. background-color: #666666;
  684. border-color: #666666;
  685. color: #666666;
  686. border-radius: 50%;
  687. content: '\00a0';
  688. display: inline-block;
  689. position: absolute;
  690. top: 4px;
  691. right: 0;
  692. bottom: 0;
  693. left: 4px;
  694. width: 11px;
  695. height: 11px;
  696. box-sizing: border-box;
  697. }
  698. .ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
  699. background-color: #212121;
  700. color: #212121;
  701. }
  702. .ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
  703. border-radius: 0;
  704. }
  705. .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
  706. -moz-osx-font-smoothing: grayscale;
  707. -webkit-font-smoothing: antialiased;
  708. display: inline-block;
  709. font-family: 'Office365Icons';
  710. font-style: normal;
  711. font-weight: normal;
  712. line-height: 1;
  713. speak: none;
  714. content: '\e041';
  715. background-color: transparent;
  716. border-radius: 0;
  717. font-size: 13px;
  718. top: 3px;
  719. left: 3px;
  720. }
  721. .ms-ChoiceFieldGroup {
  722. margin-bottom: 4px;
  723. }
  724. .ms-CommandBar {
  725. background-color: #eff6fc;
  726. height: 40px;
  727. white-space: nowrap;
  728. padding-left: 0;
  729. border: 0;
  730. position: relative;
  731. }
  732. .ms-CommandBar:focus {
  733. outline: none;
  734. }
  735. .ms-CommandBar-mainArea {
  736. overflow-x: hidden;
  737. display: block;
  738. padding-left: 58px;
  739. }
  740. @media only screen and (min-width: 1024px) {
  741. .ms-CommandBar-mainArea {
  742. padding-left: 24px;
  743. }
  744. }
  745. .ms-CommandBar-sideCommands {
  746. float: right;
  747. text-align: right;
  748. width: auto;
  749. padding-right: 8px;
  750. }
  751. .ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
  752. margin-right: 0;
  753. }
  754. @media only screen and (min-width: 640px) {
  755. .ms-CommandBar-sideCommands {
  756. min-width: 128px;
  757. }
  758. }
  759. @media only screen and (min-width: 640px) {
  760. .ms-CommandBar-sideCommands {
  761. padding-right: 12px;
  762. }
  763. }
  764. @media only screen and (min-width: 1024px) {
  765. .ms-CommandBar-sideCommands {
  766. padding-right: 16px;
  767. }
  768. }
  769. .ms-CommandBarItem {
  770. display: inline-block;
  771. color: #0078d7;
  772. height: 40px;
  773. outline: none;
  774. vertical-align: top;
  775. margin-right: -4px;
  776. }
  777. .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
  778. .ms-CommandBarItem .ms-CommandBarItem-commandText {
  779. display: none;
  780. }
  781. @media screen and (-ms-high-contrast: active) {
  782. .ms-CommandBarItem {
  783. border-left: 1px solid #000000;
  784. border-right: 1px solid #000000;
  785. height: 38px;
  786. outline: none;
  787. }
  788. }
  789. @media screen and (-ms-high-contrast: black-on-white) {
  790. .ms-CommandBarItem {
  791. border-left: 1px solid #ffffff;
  792. border-right: 1px solid #ffffff;
  793. height: 38px;
  794. outline: none;
  795. }
  796. }
  797. .ms-CommandBarItem:hover {
  798. background-color: #c7e0f4;
  799. color: #0078d7;
  800. }
  801. @media screen and (-ms-high-contrast: active) {
  802. .ms-CommandBarItem:hover {
  803. border-left: 1px solid #ffffff;
  804. border-right: 1px solid #ffffff;
  805. }
  806. }
  807. @media screen and (-ms-high-contrast: black-on-white) {
  808. .ms-CommandBarItem:hover {
  809. border-left: 1px solid #000000;
  810. border-right: 1px solid #000000;
  811. }
  812. }
  813. @media only screen and (min-width: 640px) {
  814. .ms-CommandBarItem {
  815. margin-right: 8px;
  816. }
  817. .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
  818. .ms-CommandBarItem .ms-CommandBarItem-commandText {
  819. display: inline;
  820. }
  821. }
  822. .ms-CommandBarItem.is-hidden {
  823. width: 0;
  824. overflow: hidden;
  825. }
  826. .ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
  827. .ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
  828. .ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
  829. .ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
  830. display: none;
  831. }
  832. .ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
  833. .ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
  834. display: inline;
  835. }
  836. .ms-CommandBarItem-overflow {
  837. display: none;
  838. }
  839. .ms-CommandBarItem-overflow.is-visible {
  840. display: inline-block;
  841. }
  842. .ms-CommandBarItem-overflow .ms-Icon {
  843. font-size: 14px;
  844. color: #666666;
  845. }
  846. .ms-CommandBarItem-link {
  847. line-height: 39px;
  848. padding: 0 6px;
  849. cursor: pointer;
  850. height: 40px;
  851. min-width: 20px;
  852. text-align: center;
  853. position: relative;
  854. padding: 0 8px;
  855. display: block;
  856. height: 100%;
  857. }
  858. .ms-CommandBarItem-link:focus {
  859. outline: none;
  860. }
  861. .ms-CommandBarItem-link:focus:before {
  862. position: absolute;
  863. left: 2px;
  864. right: 2px;
  865. top: 2px;
  866. bottom: 2px;
  867. border: 1px solid #a6a6a6;
  868. content: '';
  869. }
  870. .ms-CommandBarItem-icon {
  871. font-size: 17px;
  872. }
  873. .ms-CommandBarItem-chevronDown {
  874. vertical-align: middle;
  875. padding-bottom: 3px;
  876. margin-top: 13px;
  877. font-size: 1.1em;
  878. line-height: 1em;
  879. color: #666666;
  880. }
  881. .ms-CommandBarItem-chevronDown:before {
  882. height: 10px;
  883. line-height: 16px;
  884. }
  885. .ms-CommandBarSearch {
  886. float: left;
  887. width: 208px;
  888. max-width: 208px;
  889. background-color: #deecf9;
  890. color: #333333;
  891. height: 40px;
  892. position: relative;
  893. box-sizing: border-box;
  894. border-color: transparent;
  895. transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
  896. transition-property: width, background-color;
  897. }
  898. @media only screen and (max-width: 1023px) {
  899. .ms-CommandBarSearch {
  900. overflow: hidden;
  901. width: 50px;
  902. position: absolute;
  903. }
  904. }
  905. @media screen and (-ms-high-contrast: active) {
  906. .ms-CommandBarSearch {
  907. border-right: 1px solid #ffffff;
  908. z-index: 10;
  909. }
  910. }
  911. @media screen and (-ms-high-contrast: black-on-white) {
  912. .ms-CommandBarSearch {
  913. border-right: 1px solid #000000;
  914. }
  915. }
  916. .ms-CommandBarSearch:hover {
  917. background-color: #c7e0f4;
  918. color: #0078d7;
  919. }
  920. @media screen and (-ms-high-contrast: active) {
  921. .ms-CommandBarSearch:hover {
  922. border-left: 1px solid #ffffff;
  923. border-right: 1px solid #ffffff;
  924. }
  925. }
  926. @media screen and (-ms-high-contrast: black-on-white) {
  927. .ms-CommandBarSearch:hover {
  928. border-left: 1px solid #000000;
  929. border-right: 1px solid #000000;
  930. }
  931. }
  932. .ms-CommandBarSearch .ms-Icon--search {
  933. margin-left: 2px;
  934. margin-top: 12px;
  935. vertical-align: top;
  936. }
  937. .ms-CommandBarSearch-input {
  938. height: 40px;
  939. padding: 8px 8px 8px 0;
  940. border: none;
  941. border-left: 42px solid transparent;
  942. background-color: transparent;
  943. width: 100%;
  944. box-sizing: border-box;
  945. outline: none;
  946. cursor: pointer;
  947. font-size: 14px;
  948. -webkit-appearance: none;
  949. -webkit-border-radius: 0;
  950. }
  951. @media screen and (-ms-high-contrast: active) {
  952. .ms-CommandBarSearch-input {
  953. border-left: 40px solid #000000;
  954. }
  955. }
  956. @media screen and (-ms-high-contrast: black-on-white) {
  957. .ms-CommandBarSearch-input {
  958. border-left: 40px solid #ffffff;
  959. }
  960. }
  961. .ms-CommandBarSearch-input::-ms-clear {
  962. display: none;
  963. }
  964. .ms-CommandBarSearch-input::-webkit-input-placeholder {
  965. color: #333333;
  966. opacity: 1;
  967. font-size: 14px;
  968. }
  969. .ms-CommandBarSearch-input::-moz-placeholder {
  970. color: #333333;
  971. opacity: 1;
  972. font-size: 14px;
  973. }
  974. .ms-CommandBarSearch-input:-ms-input-placeholder {
  975. color: #333333;
  976. opacity: 1;
  977. font-size: 14px;
  978. }
  979. .ms-CommandBarSearch-input::placeholder {
  980. color: #333333;
  981. opacity: 1;
  982. font-size: 14px;
  983. }
  984. .ms-CommandBarSearch-input:placeholder {
  985. color: #333333;
  986. opacity: 1;
  987. font-size: 14px;
  988. }
  989. .ms-CommandBarSearch-iconSearchWrapper {
  990. display: block;
  991. padding-left: 15px;
  992. }
  993. .ms-CommandBarSearch-iconArrowWrapper {
  994. display: none;
  995. }
  996. .ms-CommandBarSearch-iconSearchWrapper,
  997. .ms-CommandBarSearch-iconArrowWrapper {
  998. top: 0;
  999. padding-left: 8px;
  1000. padding-right: 8px;
  1001. }
  1002. .ms-CommandBarSearch-iconClearWrapper {
  1003. display: none;
  1004. top: 1px;
  1005. right: 0px;
  1006. z-index: 10;
  1007. }
  1008. .ms-CommandBarSearch.is-active {
  1009. background-color: #c7e0f4;
  1010. color: #000000;
  1011. }
  1012. @media only screen and (max-width: 1023px) {
  1013. .ms-CommandBarSearch.is-active {
  1014. width: 100%;
  1015. position: absolute;
  1016. z-index: 10;
  1017. max-width: 100%;
  1018. }
  1019. }
  1020. .ms-CommandBarSearch.is-active:hover {
  1021. background-color: #c7e0f4;
  1022. color: #000000;
  1023. }
  1024. .ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
  1025. cursor: text;
  1026. padding-right: 40px;
  1027. border-left-width: 8px;
  1028. }
  1029. .ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
  1030. border-left-width: 40px;
  1031. }
  1032. .ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
  1033. display: none;
  1034. }
  1035. .ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
  1036. display: block;
  1037. }
  1038. .ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
  1039. padding-right: 40px;
  1040. }
  1041. .ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
  1042. display: block;
  1043. }
  1044. .ms-CommandBarSearch-iconWrapper {
  1045. height: 40px;
  1046. line-height: 40px;
  1047. cursor: pointer;
  1048. padding: 0px 8px;
  1049. position: absolute;
  1050. width: 34px;
  1051. text-align: center;
  1052. }
  1053. .ms-CommandBarSearch .ms-Icon:before {
  1054. font-size: 17px;
  1055. color: #0078d7;
  1056. }
  1057. .ms-ContextualMenu {
  1058. color: #333333;
  1059. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1060. font-size: 14px;
  1061. font-weight: normal;
  1062. box-sizing: border-box;
  1063. margin: 0;
  1064. padding: 0;
  1065. box-shadow: none;
  1066. display: none;
  1067. }
  1068. .ms-ContextualMenu.is-open {
  1069. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  1070. background-color: #ffffff;
  1071. border: 1px solid #c8c8c8;
  1072. display: block;
  1073. list-style-type: none;
  1074. position: absolute;
  1075. width: 180px;
  1076. z-index: 105;
  1077. }
  1078. .ms-ContextualMenu-item {
  1079. box-sizing: border-box;
  1080. position: relative;
  1081. }
  1082. .ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
  1083. cursor: default;
  1084. display: block;
  1085. height: 1px;
  1086. margin: 4px 0;
  1087. background-color: #eaeaea;
  1088. position: relative;
  1089. }
  1090. .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
  1091. color: #0078d7;
  1092. font-size: 12px;
  1093. text-transform: uppercase;
  1094. height: 40px;
  1095. line-height: 40px;
  1096. padding: 0 18px;
  1097. }
  1098. .ms-ContextualMenu-link {
  1099. text-decoration: none;
  1100. color: #333333;
  1101. border: 1px solid transparent;
  1102. cursor: pointer;
  1103. display: block;
  1104. height: 40px;
  1105. line-height: 40px;
  1106. padding: 0 18px;
  1107. position: relative;
  1108. }
  1109. .ms-ContextualMenu-link:first-child,
  1110. .ms-ContextualMenu-link:last-child {
  1111. height: 39px;
  1112. }
  1113. .ms-ContextualMenu-link:hover,
  1114. .ms-ContextualMenu-link:active {
  1115. background-color: #eaeaea;
  1116. color: #000000;
  1117. }
  1118. .ms-ContextualMenu-link:active {
  1119. border: 1px solid #0078d7;
  1120. }
  1121. .ms-ContextualMenu-link.is-selected {
  1122. background-color: #c7e0f4;
  1123. color: #000000;
  1124. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  1125. }
  1126. .ms-ContextualMenu-link.is-selected:hover {
  1127. background-color: #c7e0f4;
  1128. }
  1129. .ms-ContextualMenu-link.is-disabled {
  1130. background-color: #ffffff;
  1131. color: #a6a6a6;
  1132. cursor: default;
  1133. pointer-events: none;
  1134. }
  1135. .ms-ContextualMenu-link.is-disabled:active {
  1136. border-color: #ffffff;
  1137. }
  1138. .ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
  1139. position: absolute;
  1140. top: -1px;
  1141. left: 178px;
  1142. }
  1143. .ms-ContextualMenu-subMenuIcon,
  1144. .ms-ContextualMenu-caretRight {
  1145. color: #666666;
  1146. font-size: 16px;
  1147. height: 39px;
  1148. line-height: 40px;
  1149. position: absolute;
  1150. top: 0;
  1151. right: 7px;
  1152. z-index: 1;
  1153. pointer-events: none;
  1154. }
  1155. .ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
  1156. padding: 0 30px;
  1157. }
  1158. .ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
  1159. padding: 0 30px;
  1160. }
  1161. .ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
  1162. background-color: #ffffff;
  1163. }
  1164. .ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
  1165. -moz-osx-font-smoothing: grayscale;
  1166. -webkit-font-smoothing: antialiased;
  1167. display: inline-block;
  1168. font-family: 'Office365Icons';
  1169. font-style: normal;
  1170. font-weight: normal;
  1171. line-height: 1;
  1172. speak: none;
  1173. color: #333333;
  1174. content: '\e041';
  1175. font-size: 12px;
  1176. height: 39px;
  1177. line-height: 40px;
  1178. position: absolute;
  1179. left: 10px;
  1180. }
  1181. .ms-DatePicker {
  1182. box-sizing: border-box;
  1183. margin: 0;
  1184. padding: 0;
  1185. box-shadow: none;
  1186. margin-bottom: 17px;
  1187. z-index: 300;
  1188. }
  1189. .ms-DatePicker .ms-TextField {
  1190. position: relative;
  1191. }
  1192. .ms-DatePicker-picker {
  1193. color: #000000;
  1194. font-size: 14px;
  1195. position: relative;
  1196. text-align: left;
  1197. z-index: 0;
  1198. }
  1199. .ms-DatePicker-event {
  1200. color: #666666;
  1201. font-size: 21px;
  1202. line-height: 20px;
  1203. pointer-events: none;
  1204. position: absolute;
  1205. right: 5px;
  1206. bottom: 5px;
  1207. z-index: 5;
  1208. }
  1209. .ms-DatePicker-holder {
  1210. -webkit-overflow-scrolling: touch;
  1211. box-sizing: border-box;
  1212. background: #ffffff;
  1213. position: absolute;
  1214. min-width: 300px;
  1215. display: none;
  1216. }
  1217. .ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
  1218. -webkit-animation-name: fadeIn, slideDownIn10;
  1219. animation-name: fadeIn, slideDownIn10;
  1220. -webkit-animation-duration: 0.167s;
  1221. -moz-animation-duration: 0.167s;
  1222. -ms-animation-duration: 0.167s;
  1223. -o-animation-duration: 0.167s;
  1224. -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  1225. animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  1226. -webkit-animation-fill-mode: both;
  1227. animation-fill-mode: both;
  1228. box-sizing: border-box;
  1229. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  1230. border: 1px solid #eaeaea;
  1231. display: block;
  1232. }
  1233. .ms-DatePicker-picker--opened {
  1234. position: relative;
  1235. z-index: 10;
  1236. }
  1237. .ms-DatePicker-frame {
  1238. padding: 1px;
  1239. }
  1240. .ms-DatePicker-wrap {
  1241. margin: -1px;
  1242. padding: 9px;
  1243. }
  1244. .ms-DatePicker-dayPicker {
  1245. display: block;
  1246. margin-bottom: 30px;
  1247. }
  1248. .ms-DatePicker-header {
  1249. height: 40px;
  1250. line-height: 44px;
  1251. }
  1252. .ms-DatePicker-month,
  1253. .ms-DatePicker-year {
  1254. display: inline-block;
  1255. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  1256. font-size: 21px;
  1257. color: #0078d7;
  1258. margin-top: -1px;
  1259. }
  1260. .ms-DatePicker-month:hover,
  1261. .ms-DatePicker-year:hover {
  1262. color: #005a9e;
  1263. cursor: pointer;
  1264. }
  1265. .ms-DatePicker-month {
  1266. margin-left: 15px;
  1267. }
  1268. .ms-DatePicker-year {
  1269. margin-left: 5px;
  1270. }
  1271. .ms-DatePicker-table {
  1272. text-align: center;
  1273. border-collapse: collapse;
  1274. border-spacing: 0;
  1275. table-layout: fixed;
  1276. font-size: inherit;
  1277. }
  1278. .ms-DatePicker-table td {
  1279. margin: 0;
  1280. padding: 0;
  1281. }
  1282. .ms-DatePicker-table td:hover {
  1283. outline: 1px solid transparent;
  1284. }
  1285. .ms-DatePicker-day,
  1286. .ms-DatePicker-weekday {
  1287. width: 40px;
  1288. height: 40px;
  1289. padding: 0;
  1290. line-height: 40px;
  1291. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1292. font-size: 15px;
  1293. font-weight: normal;
  1294. color: #333333;
  1295. }
  1296. .ms-DatePicker-day--today {
  1297. position: relative;
  1298. background-color: #c7e0f4;
  1299. }
  1300. .ms-DatePicker-day--disabled:before {
  1301. border-top-color: #a6a6a6;
  1302. }
  1303. .ms-DatePicker-day--outfocus {
  1304. color: #a6a6a6;
  1305. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1306. }
  1307. .ms-DatePicker-day--infocus:hover,
  1308. .ms-DatePicker-day--outfocus:hover {
  1309. cursor: pointer;
  1310. color: #000000;
  1311. background: #eaeaea;
  1312. }
  1313. .ms-DatePicker-day--highlighted:hover,
  1314. .ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
  1315. cursor: pointer;
  1316. color: #ffffff;
  1317. background: #0078d7;
  1318. }
  1319. .ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
  1320. .ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
  1321. background: #a6a6a6;
  1322. }
  1323. .ms-DatePicker-monthPicker,
  1324. .ms-DatePicker-yearPicker {
  1325. display: none;
  1326. }
  1327. .ms-DatePicker-monthComponents {
  1328. position: absolute;
  1329. top: 9px;
  1330. right: 9px;
  1331. left: 9px;
  1332. }
  1333. .ms-DatePicker-yearComponents,
  1334. .ms-DatePicker-decadeComponents {
  1335. position: absolute;
  1336. right: 10px;
  1337. }
  1338. .ms-DatePicker-prevMonth,
  1339. .ms-DatePicker-nextMonth,
  1340. .ms-DatePicker-prevYear,
  1341. .ms-DatePicker-nextYear,
  1342. .ms-DatePicker-prevDecade,
  1343. .ms-DatePicker-nextDecade {
  1344. width: 40px;
  1345. height: 40px;
  1346. display: block;
  1347. float: right;
  1348. margin-left: 10px;
  1349. text-align: center;
  1350. line-height: 40px;
  1351. text-align: center;
  1352. font-size: 21px;
  1353. color: #666666;
  1354. position: relative;
  1355. top: 3px;
  1356. }
  1357. .ms-DatePicker-prevMonth:hover,
  1358. .ms-DatePicker-nextMonth:hover,
  1359. .ms-DatePicker-prevYear:hover,
  1360. .ms-DatePicker-nextYear:hover,
  1361. .ms-DatePicker-prevDecade:hover,
  1362. .ms-DatePicker-nextDecade:hover {
  1363. color: #212121;
  1364. cursor: pointer;
  1365. outline: 1px solid transparent;
  1366. }
  1367. .ms-DatePicker-headerToggleView {
  1368. height: 40px;
  1369. left: 0px;
  1370. position: absolute;
  1371. top: 0px;
  1372. width: 140px;
  1373. z-index: 5;
  1374. cursor: pointer;
  1375. }
  1376. .ms-DatePicker-currentYear,
  1377. .ms-DatePicker-currentDecade {
  1378. display: block;
  1379. font-weight: normal;
  1380. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1381. font-size: 21px;
  1382. height: 40px;
  1383. line-height: 42px;
  1384. margin-left: 15px;
  1385. }
  1386. .ms-DatePicker-currentYear {
  1387. color: #0078d7;
  1388. }
  1389. .ms-DatePicker-currentYear:hover {
  1390. color: #005a9e;
  1391. cursor: pointer;
  1392. }
  1393. .ms-DatePicker-optionGrid {
  1394. position: relative;
  1395. height: 210px;
  1396. width: 280px;
  1397. margin: 10px 0 30px 5px;
  1398. }
  1399. .ms-DatePicker-monthOption,
  1400. .ms-DatePicker-yearOption {
  1401. background-color: #f4f4f4;
  1402. width: 60px;
  1403. height: 60px;
  1404. line-height: 60px;
  1405. cursor: pointer;
  1406. float: left;
  1407. margin: 0 10px 10px 0;
  1408. font-weight: normal;
  1409. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1410. font-size: 13px;
  1411. color: #333333;
  1412. text-align: center;
  1413. }
  1414. .ms-DatePicker-monthOption:hover,
  1415. .ms-DatePicker-yearOption:hover {
  1416. background-color: #c8c8c8;
  1417. outline: 1px solid transparent;
  1418. }
  1419. .ms-DatePicker-monthOption.is-highlighted,
  1420. .ms-DatePicker-yearOption.is-highlighted {
  1421. background-color: #333333;
  1422. color: #ffffff;
  1423. }
  1424. .ms-DatePicker-goToday {
  1425. bottom: 9px;
  1426. color: #0078d7;
  1427. cursor: pointer;
  1428. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1429. font-size: 13px;
  1430. height: 30px;
  1431. line-height: 30px;
  1432. padding: 0 10px;
  1433. position: absolute;
  1434. right: 9px;
  1435. }
  1436. .ms-DatePicker-goToday:hover {
  1437. outline: 1px solid transparent;
  1438. }
  1439. .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
  1440. .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
  1441. display: none;
  1442. }
  1443. .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
  1444. display: none;
  1445. }
  1446. .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
  1447. display: block;
  1448. }
  1449. @media (min-width: 460px) {
  1450. .ms-DatePicker-holder {
  1451. width: 440px;
  1452. }
  1453. .ms-DatePicker-month,
  1454. .ms-DatePicker-year {
  1455. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1456. }
  1457. .ms-DatePicker-header {
  1458. height: 30px;
  1459. line-height: 28px;
  1460. }
  1461. .ms-DatePicker-dayPicker {
  1462. box-sizing: border-box;
  1463. border-right: 1px solid #eaeaea;
  1464. width: 220px;
  1465. }
  1466. .ms-DatePicker-monthPicker {
  1467. display: block;
  1468. }
  1469. .ms-DatePicker-dayPicker {
  1470. margin: -10px 0;
  1471. padding: 10px 0;
  1472. }
  1473. .ms-DatePicker-monthPicker,
  1474. .ms-DatePicker-yearPicker {
  1475. top: 9px;
  1476. left: 238px;
  1477. position: absolute;
  1478. }
  1479. .ms-DatePicker-optionGrid {
  1480. width: 200px;
  1481. height: auto;
  1482. margin: 10px 0 0 0;
  1483. }
  1484. .ms-DatePicker-monthComponents {
  1485. width: 210px;
  1486. }
  1487. .ms-DatePicker-month {
  1488. margin-left: 12px;
  1489. }
  1490. .ms-DatePicker-month,
  1491. .ms-DatePicker-year {
  1492. font-size: 17px;
  1493. color: #333333;
  1494. }
  1495. .ms-DatePicker-month:hover,
  1496. .ms-DatePicker-year:hover {
  1497. color: #333333;
  1498. cursor: default;
  1499. }
  1500. .ms-DatePicker-day,
  1501. .ms-DatePicker-weekday {
  1502. width: 30px;
  1503. height: 30px;
  1504. line-height: 30px;
  1505. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  1506. font-size: 12px;
  1507. }
  1508. .ms-DatePicker-prevMonth,
  1509. .ms-DatePicker-nextMonth,
  1510. .ms-DatePicker-prevYear,
  1511. .ms-DatePicker-nextYear,
  1512. .ms-DatePicker-prevDecade,
  1513. .ms-DatePicker-nextDecade {
  1514. font-size: 17px;
  1515. width: 30px;
  1516. height: 30px;
  1517. line-height: 29px;
  1518. }
  1519. .ms-DatePicker-toggleMonthView {
  1520. display: none;
  1521. }
  1522. .ms-DatePicker-currentYear,
  1523. .ms-DatePicker-currentDecade {
  1524. font-size: 17px;
  1525. margin: 0;
  1526. height: 30px;
  1527. line-height: 26px;
  1528. padding: 0 10px;
  1529. display: inline-block;
  1530. }
  1531. .ms-DatePicker-monthOption,
  1532. .ms-DatePicker-yearOption {
  1533. width: 40px;
  1534. height: 40px;
  1535. line-height: 40px;
  1536. font-size: 12px;
  1537. margin: 0 10px 10px 0;
  1538. }
  1539. .ms-DatePicker-monthOption:hover,
  1540. .ms-DatePicker-yearOption:hover {
  1541. outline: 1px solid transparent;
  1542. }
  1543. .ms-DatePicker-goToday {
  1544. box-sizing: border-box;
  1545. font-size: 12px;
  1546. height: 30px;
  1547. line-height: 30px;
  1548. padding: 0 10px;
  1549. right: 10px;
  1550. text-align: right;
  1551. top: 199px;
  1552. width: 210px;
  1553. }
  1554. .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
  1555. .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
  1556. display: block;
  1557. }
  1558. .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
  1559. display: none;
  1560. }
  1561. .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
  1562. display: block;
  1563. }
  1564. }
  1565. @media (max-width: 459px) {
  1566. .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
  1567. .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
  1568. display: none;
  1569. }
  1570. .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
  1571. display: block;
  1572. }
  1573. }
  1574. .ms-Dialog {
  1575. background-color: transparent;
  1576. position: fixed;
  1577. height: 100%;
  1578. width: 100%;
  1579. top: 0;
  1580. left: 0;
  1581. z-index: 300;
  1582. display: block;
  1583. font-size: 0;
  1584. line-height: 100vh;
  1585. text-align: center;
  1586. display: -ms-flexbox;
  1587. display: -webkit-flex;
  1588. display: flex;
  1589. -ms-flex-align: center;
  1590. -webkit-align-items: center;
  1591. align-items: center;
  1592. }
  1593. .ms-Dialog::before {
  1594. vertical-align: middle;
  1595. display: inline-block;
  1596. content: '';
  1597. height: 100%;
  1598. width: 0;
  1599. }
  1600. .ms-Dialog .ms-Button.ms-Button--compound {
  1601. display: block;
  1602. margin-left: 0;
  1603. }
  1604. .ms-Dialog .ms-Overlay {
  1605. z-index: 0;
  1606. }
  1607. .ms-Dialog-main {
  1608. vertical-align: middle;
  1609. display: inline-block;
  1610. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  1611. background-color: #ffffff;
  1612. box-sizing: border-box;
  1613. line-height: 1.35;
  1614. margin: auto;
  1615. width: 288px;
  1616. position: relative;
  1617. text-align: left;
  1618. outline: 1px solid transparent;
  1619. }
  1620. .ms-Dialog-button.ms-Dialog-button--close {
  1621. display: none;
  1622. position: absolute;
  1623. margin: 0;
  1624. padding: 0;
  1625. border: 0;
  1626. background: none;
  1627. cursor: pointer;
  1628. top: 12px;
  1629. right: 12px;
  1630. padding: 8px;
  1631. z-index: 10;
  1632. }
  1633. .ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
  1634. color: #666666;
  1635. font-size: 16px;
  1636. }
  1637. .ms-Dialog-inner {
  1638. height: 100%;
  1639. padding: 0 20px 20px;
  1640. }
  1641. .ms-Dialog-header {
  1642. position: relative;
  1643. width: 100%;
  1644. box-sizing: border-box;
  1645. padding: 12px 20px 15px;
  1646. }
  1647. .ms-Dialog-title {
  1648. margin: 0;
  1649. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  1650. font-size: 21px;
  1651. }
  1652. .ms-Dialog-content {
  1653. position: relative;
  1654. width: 100%;
  1655. }
  1656. .ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
  1657. margin-bottom: 20px;
  1658. }
  1659. .ms-Dialog-subText {
  1660. margin: 0 0 20px 0;
  1661. padding-top: 8px;
  1662. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1663. color: #333333;
  1664. font-size: 12px;
  1665. }
  1666. .ms-Dialog-actions {
  1667. position: relative;
  1668. width: 100%;
  1669. min-height: 24px;
  1670. line-height: 24px;
  1671. margin: 20px 0 0;
  1672. font-size: 0;
  1673. }
  1674. .ms-Dialog-actions .ms-Button {
  1675. line-height: normal;
  1676. }
  1677. .ms-Dialog-actionsRight {
  1678. text-align: right;
  1679. font-size: 0;
  1680. }
  1681. .ms-Dialog-actionsRight .ms-Dialog-action:first-child {
  1682. margin: 0;
  1683. }
  1684. .ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
  1685. margin: 0 0 0 16px;
  1686. }
  1687. .ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title {
  1688. margin-right: 20px;
  1689. }
  1690. .ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close {
  1691. display: block;
  1692. }
  1693. .ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
  1694. font-size: 28px;
  1695. }
  1696. .ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
  1697. padding: 0 20px 20px;
  1698. }
  1699. .ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
  1700. background-color: #0078d7;
  1701. padding: 26px 20px 28px;
  1702. margin-bottom: 8px;
  1703. }
  1704. .ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
  1705. font-size: 28px;
  1706. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  1707. color: #ffffff;
  1708. }
  1709. .ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
  1710. font-size: 14px;
  1711. }
  1712. @media (min-width: 480px) {
  1713. .ms-Dialog-main {
  1714. width: auto;
  1715. min-width: 288px;
  1716. max-width: 340px;
  1717. }
  1718. }
  1719. .ms-Dropdown {
  1720. color: #333333;
  1721. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1722. font-size: 14px;
  1723. font-weight: normal;
  1724. box-sizing: border-box;
  1725. margin: 0;
  1726. padding: 0;
  1727. box-shadow: none;
  1728. margin-bottom: 10px;
  1729. position: relative;
  1730. outline: 0;
  1731. }
  1732. .ms-Dropdown:hover .ms-Dropdown-title,
  1733. .ms-Dropdown:hover .ms-Dropdown-caretDown,
  1734. .ms-Dropdown:focus .ms-Dropdown-title,
  1735. .ms-Dropdown:focus .ms-Dropdown-caretDown,
  1736. .ms-Dropdown:active .ms-Dropdown-title,
  1737. .ms-Dropdown:active .ms-Dropdown-caretDown {
  1738. color: #000000;
  1739. }
  1740. .ms-Dropdown:hover .ms-Dropdown-title,
  1741. .ms-Dropdown:active .ms-Dropdown-title {
  1742. border-color: #767676;
  1743. }
  1744. .ms-Dropdown:focus .ms-Dropdown-title {
  1745. border-color: #0078d7;
  1746. }
  1747. .ms-Dropdown.is-disabled .ms-Dropdown-title {
  1748. background-color: #f4f4f4;
  1749. border-color: #f4f4f4;
  1750. color: #a6a6a6;
  1751. cursor: default;
  1752. }
  1753. .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
  1754. color: #a6a6a6;
  1755. }
  1756. .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
  1757. .ms-Dropdown.is-open .ms-Dropdown-items {
  1758. display: block;
  1759. position: fixed;
  1760. }
  1761. .ms-Dropdown-select {
  1762. display: none;
  1763. }
  1764. .ms-Dropdown-caretDown {
  1765. color: #666666;
  1766. font-size: 17px;
  1767. position: absolute;
  1768. right: 9px;
  1769. bottom: 5px;
  1770. z-index: 1;
  1771. pointer-events: none;
  1772. }
  1773. .ms-Dropdown-title {
  1774. box-sizing: border-box;
  1775. margin: 0;
  1776. padding: 0;
  1777. box-shadow: none;
  1778. background: #ffffff;
  1779. border: 1px solid #c8c8c8;
  1780. cursor: pointer;
  1781. display: block;
  1782. height: 32px;
  1783. line-height: 30px;
  1784. padding: 0 32px 0 10px;
  1785. position: relative;
  1786. overflow: hidden;
  1787. }
  1788. .ms-Dropdown-items {
  1789. box-sizing: border-box;
  1790. margin: 0;
  1791. padding: 0;
  1792. box-shadow: none;
  1793. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  1794. background-color: #ffffff;
  1795. display: none;
  1796. list-style-type: none;
  1797. position: absolute;
  1798. width: 100%;
  1799. max-width: 268px;
  1800. z-index: 400;
  1801. top: 0;
  1802. right: 0;
  1803. bottom: 0;
  1804. overflow-y: scroll;
  1805. }
  1806. .ms-Dropdown-items:before {
  1807. content: '';
  1808. position: absolute;
  1809. z-index: -1;
  1810. top: 0;
  1811. left: 0;
  1812. right: 0;
  1813. bottom: 0;
  1814. border: 1px solid #eaeaea;
  1815. }
  1816. .ms-Dropdown-item {
  1817. box-sizing: border-box;
  1818. cursor: pointer;
  1819. display: block;
  1820. height: 40px;
  1821. line-height: 38px;
  1822. padding: 0 10px;
  1823. position: relative;
  1824. border: 1px solid transparent;
  1825. white-space: nowrap;
  1826. }
  1827. .ms-Dropdown-item:first-child,
  1828. .ms-Dropdown-item:last-child {
  1829. height: 39px;
  1830. }
  1831. .ms-Dropdown-item:hover {
  1832. background-color: #eaeaea;
  1833. color: #000000;
  1834. outline: 1px solid transparent;
  1835. }
  1836. .ms-Dropdown-item:active {
  1837. background-color: #eaeaea;
  1838. border-color: #0078d7;
  1839. color: #000000;
  1840. }
  1841. .ms-Dropdown-item.is-disabled {
  1842. background: #ffffff;
  1843. color: #a6a6a6;
  1844. cursor: default;
  1845. line-height: 40px;
  1846. }
  1847. .ms-Dropdown-item.is-selected,
  1848. .ms-Dropdown-item.ms-Dropdown-item--selected {
  1849. background-color: #c7e0f4;
  1850. color: #000000;
  1851. line-height: 40px;
  1852. }
  1853. .ms-Dropdown-item.is-selected:hover,
  1854. .ms-Dropdown-item.ms-Dropdown-item--selected:hover {
  1855. background-color: #c7e0f4;
  1856. }
  1857. @media (min-width: 480px) {
  1858. .ms-Dropdown-items {
  1859. top: auto;
  1860. right: auto;
  1861. bottom: auto;
  1862. left: auto;
  1863. max-width: 100%;
  1864. }
  1865. .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
  1866. .ms-Dropdown.is-open .ms-Dropdown-items {
  1867. position: absolute;
  1868. }
  1869. }
  1870. .ms-Label {
  1871. color: #333333;
  1872. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1873. font-size: 12px;
  1874. font-weight: normal;
  1875. box-sizing: border-box;
  1876. margin: 0;
  1877. padding: 0;
  1878. box-shadow: none;
  1879. box-sizing: border-box;
  1880. display: block;
  1881. padding: 5px 0;
  1882. }
  1883. .ms-Label.is-required:after {
  1884. content: ' *';
  1885. color: #a80000;
  1886. }
  1887. .ms-Label.is-disabled {
  1888. color: #333333;
  1889. }
  1890. .ms-Link {
  1891. color: #0078d7;
  1892. text-decoration: none;
  1893. cursor: pointer;
  1894. }
  1895. .ms-Link:hover,
  1896. .ms-Link:focus {
  1897. color: #004578;
  1898. }
  1899. .ms-Link:active {
  1900. color: #0078d7;
  1901. }
  1902. .ms-Link.ms-Link--hero {
  1903. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1904. padding: 2px 8px 4px;
  1905. }
  1906. .ms-List {
  1907. color: #333333;
  1908. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1909. font-size: 14px;
  1910. font-weight: normal;
  1911. box-sizing: border-box;
  1912. margin: 0;
  1913. padding: 0;
  1914. box-shadow: none;
  1915. }
  1916. @media (min-width: 480px) {
  1917. .ms-List.ms-List--grid .ms-ListItem {
  1918. width: 33.33333333333333%;
  1919. float: left;
  1920. border-width: 0 1px 1px 0;
  1921. }
  1922. .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
  1923. border-width: 0 0 1px 0;
  1924. }
  1925. }
  1926. .ms-ListItem {
  1927. color: #333333;
  1928. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1929. font-size: 14px;
  1930. font-weight: normal;
  1931. box-sizing: border-box;
  1932. margin: 0;
  1933. padding: 0;
  1934. box-shadow: none;
  1935. *zoom: 1;
  1936. padding: 9px 28px 3px;
  1937. position: relative;
  1938. display: block;
  1939. }
  1940. .ms-ListItem:before,
  1941. .ms-ListItem:after {
  1942. display: table;
  1943. content: '';
  1944. line-height: 0;
  1945. }
  1946. .ms-ListItem:after {
  1947. clear: both;
  1948. }
  1949. .ms-ListItem-primaryText,
  1950. .ms-ListItem-secondaryText,
  1951. .ms-ListItem-tertiaryText {
  1952. display: block;
  1953. overflow: hidden;
  1954. text-overflow: ellipsis;
  1955. white-space: nowrap;
  1956. display: block;
  1957. }
  1958. .ms-ListItem-primaryText {
  1959. color: #212121;
  1960. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1961. font-size: 21px;
  1962. padding-right: 80px;
  1963. position: relative;
  1964. top: -4px;
  1965. }
  1966. .ms-ListItem-secondaryText {
  1967. color: #333333;
  1968. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  1969. font-size: 14px;
  1970. line-height: 25px;
  1971. position: relative;
  1972. top: -7px;
  1973. padding-right: 30px;
  1974. }
  1975. .ms-ListItem-tertiaryText {
  1976. color: #767676;
  1977. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1978. font-size: 14px;
  1979. line-height: 15px;
  1980. position: relative;
  1981. top: -7px;
  1982. padding-right: 30px;
  1983. }
  1984. .ms-ListItem-metaText {
  1985. color: #333333;
  1986. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  1987. font-size: 11px;
  1988. position: absolute;
  1989. right: 30px;
  1990. top: 39px;
  1991. }
  1992. .ms-ListItem-image {
  1993. float: left;
  1994. height: 70px;
  1995. margin-left: -8px;
  1996. margin-right: 10px;
  1997. width: 70px;
  1998. }
  1999. .ms-ListItem-selectionTarget {
  2000. display: none;
  2001. }
  2002. .ms-ListItem-actions {
  2003. max-width: 80px;
  2004. position: absolute;
  2005. right: 30px;
  2006. text-align: right;
  2007. top: 10px;
  2008. }
  2009. .ms-ListItem-action {
  2010. color: #a6a6a6;
  2011. display: inline-block;
  2012. font-size: 15px;
  2013. position: relative;
  2014. text-align: center;
  2015. top: 3px;
  2016. cursor: pointer;
  2017. height: 16px;
  2018. width: 16px;
  2019. }
  2020. .ms-ListItem-action .ms-Icon {
  2021. vertical-align: top;
  2022. }
  2023. .ms-ListItem-action:hover {
  2024. color: #666666;
  2025. outline: 1px solid transparent;
  2026. }
  2027. .ms-ListItem.is-unread {
  2028. border-left: 3px solid #0078d7;
  2029. padding-left: 27px;
  2030. }
  2031. .ms-ListItem.is-unread .ms-ListItem-secondaryText,
  2032. .ms-ListItem.is-unread .ms-ListItem-metaText {
  2033. color: #0078d7;
  2034. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  2035. }
  2036. .ms-ListItem.is-unseen:after {
  2037. border-right: 10px solid transparent;
  2038. border-top: 10px solid #0078d7;
  2039. left: 0;
  2040. position: absolute;
  2041. top: 0;
  2042. }
  2043. .ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
  2044. display: block;
  2045. height: 20px;
  2046. left: 6px;
  2047. position: absolute;
  2048. top: 13px;
  2049. width: 20px;
  2050. }
  2051. .ms-ListItem.is-selectable .ms-ListItem-image {
  2052. margin-left: 0;
  2053. }
  2054. .ms-ListItem.is-selectable:hover {
  2055. background-color: #eaeaea;
  2056. cursor: pointer;
  2057. outline: 1px solid transparent;
  2058. }
  2059. .ms-ListItem.is-selectable:hover:before {
  2060. -moz-osx-font-smoothing: grayscale;
  2061. -webkit-font-smoothing: antialiased;
  2062. display: inline-block;
  2063. font-family: 'Office365Icons';
  2064. font-style: normal;
  2065. font-weight: normal;
  2066. line-height: 1;
  2067. speak: none;
  2068. position: absolute;
  2069. top: 12px;
  2070. left: 6px;
  2071. height: 15px;
  2072. width: 15px;
  2073. border: 1px solid #767676;
  2074. }
  2075. .ms-ListItem.is-selected:before {
  2076. border: 1px solid transparent;
  2077. }
  2078. .ms-ListItem.is-selected:before,
  2079. .ms-ListItem.is-selected:hover:before {
  2080. -moz-osx-font-smoothing: grayscale;
  2081. -webkit-font-smoothing: antialiased;
  2082. display: inline-block;
  2083. font-family: 'Office365Icons';
  2084. font-style: normal;
  2085. font-weight: normal;
  2086. line-height: 1;
  2087. speak: none;
  2088. content: '\e041';
  2089. font-size: 15px;
  2090. color: #767676;
  2091. position: absolute;
  2092. top: 12px;
  2093. left: 6px;
  2094. }
  2095. .ms-ListItem.is-selected:hover {
  2096. background-color: #c7e0f4;
  2097. outline: 1px solid transparent;
  2098. }
  2099. .ms-ListItem.ms-ListItem--document {
  2100. padding: 0;
  2101. }
  2102. .ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
  2103. width: 70px;
  2104. height: 70px;
  2105. float: left;
  2106. text-align: center;
  2107. }
  2108. .ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
  2109. font-size: 38px;
  2110. line-height: 70px;
  2111. color: #666666;
  2112. }
  2113. .ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
  2114. display: block;
  2115. overflow: hidden;
  2116. text-overflow: ellipsis;
  2117. white-space: nowrap;
  2118. font-size: 14px;
  2119. padding-top: 15px;
  2120. padding-right: 0;
  2121. position: static;
  2122. }
  2123. .ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
  2124. display: block;
  2125. overflow: hidden;
  2126. text-overflow: ellipsis;
  2127. white-space: nowrap;
  2128. color: #666666;
  2129. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  2130. font-size: 11px;
  2131. padding-top: 6px;
  2132. }
  2133. .ms-MessageBanner {
  2134. color: #333333;
  2135. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  2136. font-size: 12px;
  2137. font-weight: normal;
  2138. position: relative;
  2139. border-bottom: 1px solid #767676;
  2140. background-color: #eff6fc;
  2141. min-width: 320px;
  2142. width: 100%;
  2143. height: 52px;
  2144. text-align: center;
  2145. overflow: hidden;
  2146. -webkit-animation-name: fadeIn, slideDownIn20;
  2147. animation-name: fadeIn, slideDownIn20;
  2148. -webkit-animation-duration: 0.367s;
  2149. -moz-animation-duration: 0.367s;
  2150. -ms-animation-duration: 0.367s;
  2151. -o-animation-duration: 0.367s;
  2152. -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2153. animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2154. -webkit-animation-fill-mode: both;
  2155. animation-fill-mode: both;
  2156. }
  2157. .ms-MessageBanner .ms-Icon {
  2158. font-size: 16px;
  2159. }
  2160. .ms-MessageBanner.hide {
  2161. -webkit-animation-name: fadeOut, slideUpOut20;
  2162. animation-name: fadeOut, slideUpOut20;
  2163. -webkit-animation-duration: 0.167s;
  2164. -moz-animation-duration: 0.167s;
  2165. -ms-animation-duration: 0.167s;
  2166. -o-animation-duration: 0.167s;
  2167. -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2168. animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2169. -webkit-animation-fill-mode: both;
  2170. animation-fill-mode: both;
  2171. }
  2172. .ms-MessageBanner.is-hidden {
  2173. display: none;
  2174. }
  2175. .ms-MessageBanner-expand,
  2176. .ms-MessageBanner-close {
  2177. height: 52px;
  2178. width: 40px;
  2179. cursor: pointer;
  2180. border: none;
  2181. background-color: transparent;
  2182. }
  2183. .ms-MessageBanner-expand:focus,
  2184. .ms-MessageBanner-close:focus {
  2185. outline: 1px solid transparent;
  2186. }
  2187. .ms-MessageBanner-close {
  2188. position: absolute;
  2189. right: 0;
  2190. top: 0;
  2191. line-height: 52px;
  2192. color: #666666;
  2193. }
  2194. .ms-MessageBanner-text {
  2195. display: inline-block;
  2196. padding: 18px 0;
  2197. margin-left: 0;
  2198. max-width: 770px;
  2199. overflow: hidden;
  2200. text-align: left;
  2201. }
  2202. .ms-MessageBanner-expand {
  2203. display: none;
  2204. vertical-align: top;
  2205. }
  2206. .ms-MessageBanner-expand.is-visible {
  2207. display: inline-block;
  2208. }
  2209. .ms-MessageBanner-action {
  2210. display: inline-block;
  2211. vertical-align: top;
  2212. margin-top: 10px;
  2213. margin-left: 10px;
  2214. padding-right: 36px;
  2215. }
  2216. .ms-MessageBanner-action .ms-Button {
  2217. color: #ffffff;
  2218. }
  2219. .ms-MessageBanner-clipper {
  2220. overflow: hidden;
  2221. white-space: nowrap;
  2222. text-overflow: ellipsis;
  2223. display: inline-block;
  2224. vertical-align: top;
  2225. }
  2226. .ms-MessageBanner.is-expanded {
  2227. height: auto;
  2228. }
  2229. .ms-MessageBanner.is-expanded .ms-MessageBanner-clipper {
  2230. white-space: normal;
  2231. }
  2232. @media screen and (max-width: 479px) {
  2233. .ms-MessageBanner-expand {
  2234. display: inline-block;
  2235. }
  2236. .ms-MessageBanner-action {
  2237. margin: 0;
  2238. display: block;
  2239. text-align: right;
  2240. padding: 0 10px 10px 0;
  2241. }
  2242. .ms-MessageBanner-text {
  2243. margin-left: -25px;
  2244. padding: 18px 0 10px 0;
  2245. min-width: 240px;
  2246. }
  2247. .ms-MessageBanner-expand {
  2248. padding: 0;
  2249. margin-left: -5px;
  2250. width: 20px;
  2251. }
  2252. .ms-MessageBanner-expand .ms-Icon {
  2253. color: #0078d7;
  2254. }
  2255. }
  2256. .ms-NavBar {
  2257. color: #333333;
  2258. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  2259. font-size: 14px;
  2260. font-weight: normal;
  2261. box-sizing: border-box;
  2262. margin: 0;
  2263. padding: 0;
  2264. box-shadow: none;
  2265. background-color: #f4f4f4;
  2266. height: 40px;
  2267. padding: 0 10px;
  2268. width: 100%;
  2269. outline: 1px solid transparent;
  2270. }
  2271. .ms-NavBar .ms-Overlay {
  2272. display: block;
  2273. opacity: 0;
  2274. pointer-events: none;
  2275. transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
  2276. z-index: 0;
  2277. }
  2278. .ms-NavBar-openMenu {
  2279. font-size: 20px;
  2280. height: 40px;
  2281. line-height: 40px;
  2282. position: absolute;
  2283. right: 27px;
  2284. text-align: center;
  2285. width: 40px;
  2286. cursor: pointer;
  2287. }
  2288. .ms-NavBar-items {
  2289. display: none;
  2290. }
  2291. .ms-NavBar-item {
  2292. box-sizing: border-box;
  2293. display: block;
  2294. height: 40px;
  2295. line-height: 40px;
  2296. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  2297. font-size: 17px;
  2298. padding-left: 20px;
  2299. position: relative;
  2300. }
  2301. .ms-NavBar-item:hover {
  2302. cursor: pointer;
  2303. background-color: #deecf9;
  2304. color: #000000;
  2305. }
  2306. .ms-NavBar-item:hover .ms-Icon {
  2307. color: #333333;
  2308. }
  2309. .ms-NavBar-item:active {
  2310. color: #0078d7;
  2311. }
  2312. .ms-NavBar-item.is-selected {
  2313. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  2314. }
  2315. .ms-NavBar-item.is-disabled {
  2316. color: #a6a6a6;
  2317. }
  2318. .ms-NavBar-item.is-disabled:hover {
  2319. cursor: default;
  2320. border: none;
  2321. }
  2322. .ms-NavBar-link {
  2323. color: #333333;
  2324. text-decoration: none;
  2325. }
  2326. .ms-NavBar-link:active {
  2327. color: #0078d7;
  2328. }
  2329. .ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
  2330. display: none;
  2331. }
  2332. .ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
  2333. color: #212121;
  2334. }
  2335. .ms-NavBar-chevronDown {
  2336. color: #666666;
  2337. font-size: 22px;
  2338. position: absolute;
  2339. top: 10px;
  2340. right: 20px;
  2341. }
  2342. .ms-NavBar-item.ms-NavBar-item--search {
  2343. position: relative;
  2344. width: 30px;
  2345. }
  2346. .ms-NavBar-item.ms-NavBar-item--search:after {
  2347. -moz-osx-font-smoothing: grayscale;
  2348. -webkit-font-smoothing: antialiased;
  2349. display: inline-block;
  2350. font-family: 'Office365Icons';
  2351. font-style: normal;
  2352. font-weight: normal;
  2353. line-height: 1;
  2354. speak: none;
  2355. color: #666666;
  2356. content: '\e039';
  2357. font-size: 21px;
  2358. line-height: 40px;
  2359. position: absolute;
  2360. right: 5px;
  2361. top: 0;
  2362. }
  2363. .ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
  2364. display: none;
  2365. }
  2366. .ms-NavBar-item.ms-NavBar-item--search.is-open {
  2367. width: 200px;
  2368. padding-right: 40px;
  2369. border: none;
  2370. }
  2371. .ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
  2372. display: block;
  2373. }
  2374. .ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
  2375. border: none;
  2376. background-color: transparent;
  2377. }
  2378. @media (max-width: 479px) {
  2379. .ms-NavBar.is-open .ms-NavBar-items {
  2380. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  2381. background-color: #ffffff;
  2382. bottom: 0;
  2383. display: block;
  2384. left: 50px;
  2385. margin: 0;
  2386. padding: 0;
  2387. position: absolute;
  2388. right: 0;
  2389. top: 0;
  2390. outline: 1px solid transparent;
  2391. z-index: 5;
  2392. }
  2393. .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
  2394. position: relative;
  2395. }
  2396. }
  2397. @media (min-width: 320px) and (max-width: 479px) {
  2398. .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
  2399. height: inherit;
  2400. background-color: transparent;
  2401. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  2402. }
  2403. .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
  2404. -webkit-transform: scaleY(-1);
  2405. -ms-transform: scaleY(-1);
  2406. transform: scaleY(-1);
  2407. }
  2408. .ms-NavBar-item .ms-ContextualMenu {
  2409. position: static;
  2410. border: none;
  2411. box-shadow: none;
  2412. width: auto;
  2413. }
  2414. .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
  2415. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  2416. font-size: 17px;
  2417. }
  2418. .ms-NavBar.is-open .ms-Overlay {
  2419. display: block;
  2420. cursor: pointer;
  2421. opacity: 1;
  2422. pointer-events: auto;
  2423. }
  2424. }
  2425. @media (min-width: 480px) {
  2426. .ms-NavBar-openMenu {
  2427. display: none;
  2428. }
  2429. .ms-NavBar-items {
  2430. display: block;
  2431. list-style: none;
  2432. margin: 0 7px 0 0;
  2433. padding: 0;
  2434. }
  2435. .ms-NavBar-chevronDown {
  2436. top: 3px;
  2437. right: 0;
  2438. float: none;
  2439. position: relative;
  2440. }
  2441. .ms-NavBar-item {
  2442. float: left;
  2443. margin-right: 18px;
  2444. font-size: 14px;
  2445. padding: 0;
  2446. }
  2447. .ms-NavBar-item:hover {
  2448. border-bottom: 2px solid #0078d7;
  2449. background-color: transparent;
  2450. }
  2451. .ms-NavBar-item.is-selected {
  2452. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  2453. border-bottom: 2px solid #0078d7;
  2454. }
  2455. .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
  2456. position: relative;
  2457. top: 3px;
  2458. padding-top: 0;
  2459. right: auto;
  2460. }
  2461. .ms-NavBar-item.ms-NavBar-item--right {
  2462. float: right;
  2463. margin: 0;
  2464. }
  2465. }
  2466. .ms-OrgChart {
  2467. color: #333333;
  2468. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  2469. font-size: 14px;
  2470. font-weight: normal;
  2471. box-sizing: border-box;
  2472. margin: 0;
  2473. padding: 0;
  2474. box-shadow: none;
  2475. }
  2476. .ms-OrgChart-groupTitle {
  2477. color: #666666;
  2478. line-height: 1;
  2479. }
  2480. .ms-OrgChart-list {
  2481. padding: 0;
  2482. margin: 12px 0 16px 0;
  2483. }
  2484. .ms-OrgChart-listItem {
  2485. height: 50px;
  2486. width: 100%;
  2487. position: relative;
  2488. list-style: none;
  2489. margin-bottom: 8px;
  2490. }
  2491. .ms-OrgChart-listItemBtn {
  2492. background: none;
  2493. border: 0;
  2494. cursor: pointer;
  2495. position: relative;
  2496. height: 50px;
  2497. width: 100%;
  2498. background: none;
  2499. border: 0;
  2500. text-align: left;
  2501. margin: 0;
  2502. padding: 0;
  2503. outline: transparent;
  2504. }
  2505. .ms-Overlay {
  2506. background-color: rgba(255, 255, 255, 0.4);
  2507. position: absolute;
  2508. bottom: 0;
  2509. left: 0;
  2510. right: 0;
  2511. top: 0;
  2512. z-index: 200;
  2513. }
  2514. .ms-Overlay.ms-Overlay--dark {
  2515. background-color: rgba(0, 0, 0, 0.4);
  2516. }
  2517. .ms-Overlay--none {
  2518. visibility: hidden;
  2519. }
  2520. .ms-Panel {
  2521. bottom: 0;
  2522. left: 0;
  2523. position: fixed;
  2524. right: 0;
  2525. top: 0;
  2526. z-index: 300;
  2527. display: none;
  2528. pointer-events: none;
  2529. }
  2530. .ms-Panel .ms-Overlay {
  2531. z-index: 0;
  2532. display: none;
  2533. pointer-events: none;
  2534. opacity: 1;
  2535. transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
  2536. }
  2537. .ms-Panel-main {
  2538. background-color: #ffffff;
  2539. bottom: 0;
  2540. position: fixed;
  2541. right: 0;
  2542. top: 0;
  2543. display: none;
  2544. z-index: 10;
  2545. width: 100%;
  2546. }
  2547. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem {
  2548. -webkit-user-select: none;
  2549. -moz-user-select: none;
  2550. -ms-user-select: none;
  2551. user-select: none;
  2552. }
  2553. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:hover {
  2554. background-color: #d7eaf9;
  2555. }
  2556. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:active {
  2557. background-color: #b5d8f4;
  2558. }
  2559. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:active .ms-CommandBarItem-icon {
  2560. color: #07288b;
  2561. }
  2562. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
  2563. color: #000000;
  2564. }
  2565. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child {
  2566. background-color: #0078d7;
  2567. box-shadow: inset 0 1px 0 0 #2488d8;
  2568. }
  2569. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
  2570. color: #ffffff;
  2571. }
  2572. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
  2573. color: #ffffff;
  2574. }
  2575. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
  2576. padding-left: 12px;
  2577. padding-right: 12px;
  2578. }
  2579. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child:hover {
  2580. background-color: #005a9e;
  2581. box-shadow: none;
  2582. }
  2583. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
  2584. color: #ffffff;
  2585. }
  2586. .ms-Panel-main .ms-CommandBar .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
  2587. color: #ffffff;
  2588. }
  2589. .ms-Panel-closeButton {
  2590. background: none;
  2591. border: 0;
  2592. cursor: pointer;
  2593. position: absolute;
  2594. right: 12px;
  2595. top: 12px;
  2596. height: 24px;
  2597. width: 24px;
  2598. outline: 0;
  2599. padding: 0;
  2600. color: #666666;
  2601. }
  2602. .ms-Panel-closeButton:hover {
  2603. color: #333333;
  2604. }
  2605. .ms-Panel-closeIcon {
  2606. font-size: 14px;
  2607. }
  2608. .ms-Panel-contentInner {
  2609. position: absolute;
  2610. top: 40px;
  2611. bottom: 0;
  2612. left: 0;
  2613. right: 0;
  2614. padding: 0 32px 20px 32px;
  2615. overflow-y: auto;
  2616. }
  2617. .ms-Panel-headerText {
  2618. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  2619. font-size: 21px;
  2620. color: #333333;
  2621. line-height: 82px;
  2622. height: 70px;
  2623. }
  2624. .ms-Panel.is-open {
  2625. display: block;
  2626. }
  2627. .ms-Panel.is-open .ms-CommandBar {
  2628. -webkit-animation-name: fadeIn, slideDownIn20;
  2629. animation-name: fadeIn, slideDownIn20;
  2630. -webkit-animation-duration: 0.367s;
  2631. -moz-animation-duration: 0.367s;
  2632. -ms-animation-duration: 0.367s;
  2633. -o-animation-duration: 0.367s;
  2634. -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2635. animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2636. -webkit-animation-fill-mode: both;
  2637. animation-fill-mode: both;
  2638. -webkit-animation-delay: 250ms;
  2639. animation-delay: 250ms;
  2640. }
  2641. .ms-Panel.is-open .ms-Panel-main {
  2642. opacity: 1;
  2643. pointer-events: auto;
  2644. display: block;
  2645. }
  2646. .ms-Panel.is-open .ms-Overlay {
  2647. display: block;
  2648. pointer-events: auto;
  2649. }
  2650. .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
  2651. -webkit-animation-duration: 0.367s;
  2652. -webkit-animation-name: fadeOut;
  2653. -webkit-animation-fill-mode: both;
  2654. -webkit-animation-duration: 0.367s;
  2655. animation-duration: 0.367s;
  2656. -webkit-animation-name: fadeOut;
  2657. animation-name: fadeOut;
  2658. -webkit-animation-fill-mode: both;
  2659. animation-fill-mode: both;
  2660. -webkit-animation-duration: 0.1s;
  2661. animation-duration: 0.1s;
  2662. }
  2663. .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
  2664. display: none;
  2665. }
  2666. .ms-Panel .ms-CommandBarItem .ms-CommandBarItem-commandText {
  2667. display: inline-block;
  2668. }
  2669. .ms-Panel .ms-CommandBar-mainArea {
  2670. padding-left: 0;
  2671. margin-left: -1px;
  2672. overflow: hidden;
  2673. }
  2674. @media (min-width: 480px) {
  2675. .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
  2676. -webkit-animation-name: fadeIn, slideLeftIn40;
  2677. animation-name: fadeIn, slideLeftIn40;
  2678. -webkit-animation-duration: 0.367s;
  2679. -moz-animation-duration: 0.367s;
  2680. -ms-animation-duration: 0.367s;
  2681. -o-animation-duration: 0.367s;
  2682. -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2683. animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2684. -webkit-animation-fill-mode: both;
  2685. animation-fill-mode: both;
  2686. }
  2687. .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
  2688. -webkit-animation-duration: 0.367s;
  2689. -webkit-animation-name: fadeIn;
  2690. -webkit-animation-fill-mode: both;
  2691. -webkit-animation-duration: 0.367s;
  2692. animation-duration: 0.367s;
  2693. -webkit-animation-name: fadeIn;
  2694. animation-name: fadeIn;
  2695. -webkit-animation-fill-mode: both;
  2696. animation-fill-mode: both;
  2697. -webkit-animation-duration: 0.267s;
  2698. animation-duration: 0.267s;
  2699. }
  2700. .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
  2701. -webkit-animation-name: fadeOut, slideRightOut40;
  2702. animation-name: fadeOut, slideRightOut40;
  2703. -webkit-animation-duration: 0.167s;
  2704. -moz-animation-duration: 0.167s;
  2705. -ms-animation-duration: 0.167s;
  2706. -o-animation-duration: 0.167s;
  2707. -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2708. animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2709. -webkit-animation-fill-mode: both;
  2710. animation-fill-mode: both;
  2711. }
  2712. .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
  2713. -webkit-animation-duration: 0.367s;
  2714. -webkit-animation-name: fadeOut;
  2715. -webkit-animation-fill-mode: both;
  2716. -webkit-animation-duration: 0.367s;
  2717. animation-duration: 0.367s;
  2718. -webkit-animation-name: fadeOut;
  2719. animation-name: fadeOut;
  2720. -webkit-animation-fill-mode: both;
  2721. animation-fill-mode: both;
  2722. -webkit-animation-duration: 0.167s;
  2723. animation-duration: 0.167s;
  2724. }
  2725. .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
  2726. -webkit-animation-name: fadeIn, slideRightIn40;
  2727. animation-name: fadeIn, slideRightIn40;
  2728. -webkit-animation-duration: 0.367s;
  2729. -moz-animation-duration: 0.367s;
  2730. -ms-animation-duration: 0.367s;
  2731. -o-animation-duration: 0.367s;
  2732. -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2733. animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  2734. -webkit-animation-fill-mode: both;
  2735. animation-fill-mode: both;
  2736. }
  2737. .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
  2738. -webkit-animation-duration: 0.367s;
  2739. -webkit-animation-name: fadeIn;
  2740. -webkit-animation-fill-mode: both;
  2741. -webkit-animation-duration: 0.367s;
  2742. animation-duration: 0.367s;
  2743. -webkit-animation-name: fadeIn;
  2744. animation-name: fadeIn;
  2745. -webkit-animation-fill-mode: both;
  2746. animation-fill-mode: both;
  2747. -webkit-animation-duration: 0.267s;
  2748. animation-duration: 0.267s;
  2749. }
  2750. .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
  2751. -webkit-animation-name: fadeOut, slideLeftOut40;
  2752. animation-name: fadeOut, slideLeftOut40;
  2753. -webkit-animation-duration: 0.167s;
  2754. -moz-animation-duration: 0.167s;
  2755. -ms-animation-duration: 0.167s;
  2756. -o-animation-duration: 0.167s;
  2757. -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2758. animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  2759. -webkit-animation-fill-mode: both;
  2760. animation-fill-mode: both;
  2761. }
  2762. .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
  2763. -webkit-animation-duration: 0.367s;
  2764. -webkit-animation-name: fadeOut;
  2765. -webkit-animation-fill-mode: both;
  2766. -webkit-animation-duration: 0.367s;
  2767. animation-duration: 0.367s;
  2768. -webkit-animation-name: fadeOut;
  2769. animation-name: fadeOut;
  2770. -webkit-animation-fill-mode: both;
  2771. animation-fill-mode: both;
  2772. -webkit-animation-duration: 0.167s;
  2773. animation-duration: 0.167s;
  2774. }
  2775. .ms-Panel.is-open .ms-CommandBar {
  2776. -webkit-animation-delay: 500ms;
  2777. animation-delay: 500ms;
  2778. }
  2779. .ms-Panel-main {
  2780. border-left: 1px solid #eaeaea;
  2781. border-right: 1px solid #eaeaea;
  2782. pointer-events: auto;
  2783. width: 340px;
  2784. }
  2785. .ms-Panel.is-open .ms-Panel-main {
  2786. box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
  2787. left: auto;
  2788. }
  2789. .ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main {
  2790. box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2);
  2791. }
  2792. .ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main {
  2793. left: 0;
  2794. right: auto;
  2795. }
  2796. .ms-Panel.is-open .ms-Overlay {
  2797. cursor: pointer;
  2798. opacity: 1;
  2799. pointer-events: auto;
  2800. }
  2801. }
  2802. @media (min-width: 640px) {
  2803. .ms-Panel.ms-Panel--medium .ms-Panel-main,
  2804. .ms-Panel.ms-Panel--large .ms-Panel-main,
  2805. .ms-Panel.ms-Panel--extraLarge .ms-Panel-main {
  2806. left: 47px;
  2807. width: auto;
  2808. }
  2809. .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main,
  2810. .ms-Panel.ms-Panel--large.is-open .ms-Panel-main,
  2811. .ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main {
  2812. width: auto;
  2813. }
  2814. }
  2815. @media (min-width: 1024px) {
  2816. .ms-Panel.ms-Panel--medium .ms-Panel-main {
  2817. left: auto;
  2818. width: 644px;
  2819. }
  2820. .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main {
  2821. left: auto;
  2822. right: 0;
  2823. width: 644px;
  2824. }
  2825. }
  2826. @media (min-width: 1366px) {
  2827. .ms-Panel.ms-Panel--large .ms-Panel-main {
  2828. left: 427px;
  2829. }
  2830. .ms-Panel.ms-Panel--extraLarge .ms-Panel-main {
  2831. left: 175px;
  2832. }
  2833. .ms-Panel.ms-Panel--small.ms-Panel--left {
  2834. display: none;
  2835. }
  2836. }
  2837. .ms-PeoplePicker {
  2838. color: #333333;
  2839. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  2840. font-size: 14px;
  2841. font-weight: normal;
  2842. box-sizing: border-box;
  2843. margin: 0;
  2844. padding: 0;
  2845. box-shadow: none;
  2846. background-color: #ffffff;
  2847. margin-bottom: 10px;
  2848. }
  2849. .ms-PeoplePicker-searchBox {
  2850. *zoom: 1;
  2851. border: 1px solid #c8c8c8;
  2852. box-sizing: border-box;
  2853. min-height: 40px;
  2854. width: 100%;
  2855. }
  2856. .ms-PeoplePicker-searchBox:before,
  2857. .ms-PeoplePicker-searchBox:after {
  2858. display: table;
  2859. content: '';
  2860. line-height: 0;
  2861. }
  2862. .ms-PeoplePicker-searchBox:after {
  2863. clear: both;
  2864. }
  2865. .ms-PeoplePicker-searchBox:hover {
  2866. border-color: #767676;
  2867. }
  2868. .ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
  2869. border-color: #0078d7;
  2870. }
  2871. .ms-PeoplePicker-searchField {
  2872. border: 0;
  2873. box-sizing: border-box;
  2874. display: inline-block;
  2875. float: left;
  2876. height: 38px;
  2877. outline: none;
  2878. padding-left: 8px;
  2879. width: 100%;
  2880. }
  2881. .ms-PeoplePicker-persona {
  2882. display: inline-block;
  2883. float: left;
  2884. margin: 4px;
  2885. }
  2886. .ms-PeoplePicker-persona .ms-Persona {
  2887. background-color: #f4f4f4;
  2888. float: left;
  2889. min-height: 30px;
  2890. }
  2891. .ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
  2892. color: #a80000;
  2893. }
  2894. .ms-PeoplePicker-personaRemove {
  2895. background: none;
  2896. border: 0;
  2897. cursor: pointer;
  2898. background-color: #f4f4f4;
  2899. color: #666666;
  2900. display: inline-block;
  2901. float: left;
  2902. text-align: center;
  2903. height: 32px;
  2904. width: 32px;
  2905. }
  2906. .ms-PeoplePicker-personaRemove:hover {
  2907. background-color: #eaeaea;
  2908. color: #333333;
  2909. cursor: pointer;
  2910. }
  2911. .ms-PeoplePicker-personaRemove:focus {
  2912. background-color: #eaeaea;
  2913. color: #333333;
  2914. border: 1px solid #0078d7;
  2915. outline: none;
  2916. }
  2917. .ms-PeoplePicker-results {
  2918. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  2919. background-color: #ffffff;
  2920. border: 1px solid #c8c8c8;
  2921. display: none;
  2922. margin-bottom: -1px;
  2923. max-width: 340px;
  2924. padding-top: 9px;
  2925. position: absolute;
  2926. z-index: 305;
  2927. }
  2928. .ms-PeoplePicker.is-active .ms-PeoplePicker-results {
  2929. display: block;
  2930. opacity: 1;
  2931. }
  2932. .ms-PeoplePicker-resultGroups {
  2933. max-height: 309px;
  2934. overflow-y: scroll;
  2935. }
  2936. .ms-PeoplePicker-resultGroup {
  2937. border-top: 1px solid #eaeaea;
  2938. }
  2939. .ms-PeoplePicker-resultGroup:first-child {
  2940. border-top: 0;
  2941. }
  2942. .ms-PeoplePicker-resultGroupTitle {
  2943. color: #0078d7;
  2944. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  2945. font-size: 12px;
  2946. padding: 17px 0 0 12px;
  2947. text-transform: uppercase;
  2948. height: 40px;
  2949. }
  2950. .ms-PeoplePicker-resultList {
  2951. box-sizing: border-box;
  2952. margin: 0;
  2953. padding: 0;
  2954. box-shadow: none;
  2955. margin-bottom: -1px;
  2956. list-style-type: none;
  2957. }
  2958. .ms-PeoplePicker-result {
  2959. position: relative;
  2960. }
  2961. .ms-PeoplePicker-result .ms-Persona:hover {
  2962. cursor: pointer;
  2963. }
  2964. .ms-PeoplePicker-result .ms-Persona:active {
  2965. background-color: #c7e0f4;
  2966. }
  2967. .ms-PeoplePicker-result .ms-Persona-details {
  2968. width: 100%;
  2969. }
  2970. .ms-PeoplePicker-resultBtn,
  2971. .ms-PeoplePicker-peopleListBtn {
  2972. background: none;
  2973. border: 0;
  2974. cursor: pointer;
  2975. position: relative;
  2976. box-sizing: border-box;
  2977. height: 34px;
  2978. width: 100%;
  2979. background: none;
  2980. border: 0;
  2981. text-align: left;
  2982. margin: 0 0 10px 0;
  2983. padding: 0 0 0 9px;
  2984. }
  2985. @media (min-width: 480px) {
  2986. .ms-PeoplePicker-resultBtn,
  2987. .ms-PeoplePicker-peopleListBtn {
  2988. height: 48px;
  2989. }
  2990. }
  2991. .ms-PeoplePicker-resultBtn:hover,
  2992. .ms-PeoplePicker-peopleListBtn:hover {
  2993. background-color: #eaeaea;
  2994. outline: 1px solid transparent;
  2995. }
  2996. .ms-PeoplePicker-resultBtn:focus,
  2997. .ms-PeoplePicker-peopleListBtn:focus {
  2998. outline: 1;
  2999. }
  3000. .ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact,
  3001. .ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact {
  3002. height: 32px;
  3003. }
  3004. .ms-PeoplePicker-peopleListBtn {
  3005. margin-bottom: 0;
  3006. padding: 0;
  3007. }
  3008. .ms-PeoplePicker-peopleListBtn:hover {
  3009. background-color: transparent;
  3010. }
  3011. .ms-PeoplePicker-resultAction {
  3012. background: none;
  3013. border: 0;
  3014. cursor: pointer;
  3015. display: block;
  3016. height: 34px;
  3017. transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
  3018. position: absolute;
  3019. right: 0;
  3020. top: 0;
  3021. width: 30px;
  3022. text-align: center;
  3023. }
  3024. @media (min-width: 480px) {
  3025. .ms-PeoplePicker-resultAction {
  3026. height: 48px;
  3027. }
  3028. }
  3029. .ms-PeoplePicker-resultAction .ms-Icon {
  3030. color: #666666;
  3031. font-size: 15px;
  3032. }
  3033. .ms-PeoplePicker-resultAction:hover {
  3034. background-color: #c8c8c8;
  3035. outline: 1px solid transparent;
  3036. }
  3037. .ms-PeoplePicker-resultAction:active {
  3038. background-color: #71afe5;
  3039. }
  3040. .ms-PeoplePicker-resultAdditionalContent {
  3041. display: none;
  3042. }
  3043. .ms-PeoplePicker-result.is-expanded {
  3044. background-color: #f4f4f4;
  3045. margin-bottom: 11px;
  3046. }
  3047. .ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
  3048. -webkit-transform: rotate(180deg);
  3049. -ms-transform: rotate(180deg);
  3050. transform: rotate(180deg);
  3051. }
  3052. .ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
  3053. display: block;
  3054. }
  3055. .ms-PeoplePicker-searchMore {
  3056. border-top: 1px solid #eaeaea;
  3057. height: 69px;
  3058. position: relative;
  3059. overflow: hidden;
  3060. }
  3061. .ms-PeoplePicker-searchMore .ms-Spinner {
  3062. position: absolute;
  3063. width: 32px;
  3064. height: 32px;
  3065. top: 20px;
  3066. left: 20px;
  3067. display: none;
  3068. }
  3069. .ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
  3070. background-color: #0078d7;
  3071. }
  3072. .ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
  3073. display: block;
  3074. }
  3075. .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
  3076. display: none;
  3077. }
  3078. .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
  3079. color: #0078d7;
  3080. }
  3081. .ms-PeoplePicker-searchMore.is-searching:hover {
  3082. background-color: transparent;
  3083. cursor: default;
  3084. }
  3085. .ms-PeoplePicker-searchMoreBtn {
  3086. background: none;
  3087. border: 0;
  3088. cursor: pointer;
  3089. position: relative;
  3090. height: 69px;
  3091. width: 100%;
  3092. padding: 0;
  3093. margin: 0;
  3094. padding-left: 70px;
  3095. text-align: left;
  3096. }
  3097. .ms-PeoplePicker-searchMoreBtn:hover {
  3098. background-color: #eaeaea;
  3099. cursor: pointer;
  3100. }
  3101. .ms-PeoplePicker-searchMoreBtn:focus,
  3102. .ms-PeoplePicker-searchMoreBtn:active {
  3103. background-color: #c7e0f4;
  3104. }
  3105. .ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
  3106. height: 49px;
  3107. padding-left: 50px;
  3108. }
  3109. .ms-PeoplePicker-searchMoreIcon {
  3110. height: 70px;
  3111. position: absolute;
  3112. top: 0;
  3113. left: 0;
  3114. width: 70px;
  3115. }
  3116. .ms-PeoplePicker-searchMoreIcon .ms-Icon {
  3117. color: #333333;
  3118. font-size: 16px;
  3119. position: absolute;
  3120. text-align: center;
  3121. top: 27px;
  3122. width: 100%;
  3123. }
  3124. .ms-PeoplePicker-searchMorePrimary {
  3125. padding-top: 2px;
  3126. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3127. }
  3128. .ms-PeoplePicker-searchMoreSecondary {
  3129. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  3130. font-size: 11px;
  3131. color: #666666;
  3132. }
  3133. .ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
  3134. background-color: inherit;
  3135. cursor: default;
  3136. }
  3137. .ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
  3138. color: #666666;
  3139. }
  3140. .ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
  3141. color: #666666;
  3142. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  3143. font-size: 11px;
  3144. line-height: 20px;
  3145. position: relative;
  3146. top: 12px;
  3147. }
  3148. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
  3149. max-height: 209px;
  3150. }
  3151. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
  3152. height: 32px;
  3153. }
  3154. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
  3155. margin-top: -8px;
  3156. }
  3157. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
  3158. height: 49px;
  3159. }
  3160. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
  3161. width: 28px;
  3162. height: 28px;
  3163. top: 12px;
  3164. left: 12px;
  3165. }
  3166. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
  3167. background-size: 16px;
  3168. }
  3169. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
  3170. height: 50px;
  3171. width: 50px;
  3172. }
  3173. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
  3174. font-size: 17px;
  3175. top: 0;
  3176. margin-top: 0;
  3177. line-height: 50px;
  3178. }
  3179. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
  3180. font-size: 12px;
  3181. line-height: 45px;
  3182. }
  3183. .ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
  3184. display: none;
  3185. }
  3186. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
  3187. .ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
  3188. height: 30px;
  3189. min-height: 30px;
  3190. }
  3191. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
  3192. .ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
  3193. height: 28px;
  3194. }
  3195. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
  3196. .ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
  3197. cursor: pointer;
  3198. }
  3199. .ms-PeoplePicker-selected {
  3200. margin-bottom: 20px;
  3201. display: none;
  3202. }
  3203. .ms-PeoplePicker-selected.is-active {
  3204. display: block;
  3205. }
  3206. .ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
  3207. border-bottom: 0;
  3208. padding: 20px 0 0;
  3209. }
  3210. .ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
  3211. display: none;
  3212. }
  3213. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
  3214. position: relative;
  3215. border: 0;
  3216. box-shadow: none;
  3217. margin: 0;
  3218. max-width: 100%;
  3219. padding: 0;
  3220. padding-bottom: 10px;
  3221. border-bottom: 1px solid #eaeaea;
  3222. }
  3223. @media (max-width: 479px) {
  3224. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
  3225. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
  3226. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
  3227. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
  3228. width: 32px;
  3229. height: 32px;
  3230. }
  3231. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
  3232. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
  3233. font-size: 28px;
  3234. top: 6px;
  3235. }
  3236. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
  3237. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
  3238. font-size: 12px;
  3239. line-height: 32px;
  3240. }
  3241. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
  3242. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
  3243. left: 19px;
  3244. }
  3245. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
  3246. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
  3247. padding-left: 8px;
  3248. }
  3249. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
  3250. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
  3251. font-size: 14px;
  3252. padding-top: 3px;
  3253. }
  3254. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
  3255. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
  3256. display: none;
  3257. }
  3258. }
  3259. @media (min-width: 480px) {
  3260. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
  3261. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
  3262. display: block;
  3263. }
  3264. }
  3265. @media (min-width: 480px) {
  3266. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
  3267. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
  3268. height: 42px;
  3269. }
  3270. }
  3271. @media (min-width: 480px) {
  3272. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
  3273. height: 42px;
  3274. }
  3275. }
  3276. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
  3277. padding: 0;
  3278. }
  3279. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
  3280. display: none;
  3281. }
  3282. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
  3283. display: block;
  3284. }
  3285. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
  3286. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
  3287. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
  3288. height: 48px;
  3289. }
  3290. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
  3291. padding-left: 48px;
  3292. }
  3293. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
  3294. width: 48px;
  3295. }
  3296. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
  3297. font-size: 12px;
  3298. line-height: 48px;
  3299. }
  3300. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
  3301. top: 0;
  3302. line-height: 48px;
  3303. }
  3304. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
  3305. top: 16px;
  3306. left: 14px;
  3307. height: 20px;
  3308. width: 20px;
  3309. }
  3310. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
  3311. display: none;
  3312. position: absolute;
  3313. height: 200px;
  3314. }
  3315. .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
  3316. display: block;
  3317. }
  3318. .ms-PeoplePicker-selectedHeader,
  3319. .ms-PeoplePicker-peopleListHeader {
  3320. color: #0078d7;
  3321. font-size: 12px;
  3322. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3323. height: 50px;
  3324. line-height: 50px;
  3325. }
  3326. .ms-PeoplePicker-selectedPeople,
  3327. .ms-PeoplePicker-peopleList {
  3328. box-sizing: border-box;
  3329. margin: 0;
  3330. padding: 0;
  3331. box-shadow: none;
  3332. list-style: none;
  3333. }
  3334. .ms-PeoplePicker-selectedPerson {
  3335. margin-bottom: 8px;
  3336. position: relative;
  3337. }
  3338. .ms-PeoplePicker-peopleListItem {
  3339. margin-bottom: 6px;
  3340. position: relative;
  3341. }
  3342. .ms-Persona {
  3343. color: #333333;
  3344. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3345. font-size: 14px;
  3346. font-weight: normal;
  3347. box-sizing: border-box;
  3348. margin: 0;
  3349. padding: 0;
  3350. box-shadow: none;
  3351. display: table;
  3352. line-height: 1;
  3353. position: relative;
  3354. }
  3355. .ms-Persona-imageArea {
  3356. position: relative;
  3357. display: block;
  3358. overflow: hidden;
  3359. text-align: center;
  3360. width: 48px;
  3361. height: 48px;
  3362. border-radius: 50%;
  3363. }
  3364. .ms-Persona-placeholder {
  3365. color: #ffffff;
  3366. position: absolute;
  3367. right: 0;
  3368. left: 0;
  3369. font-size: 47px;
  3370. top: 9px;
  3371. }
  3372. .ms-Persona-initials {
  3373. color: #ffffff;
  3374. font-size: 17px;
  3375. font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
  3376. line-height: 48px;
  3377. }
  3378. .ms-Persona-initials.ms-Persona-initials--lightBlue {
  3379. background-color: #6ba5e7;
  3380. }
  3381. .ms-Persona-initials.ms-Persona-initials--blue {
  3382. background-color: #2d89ef;
  3383. }
  3384. .ms-Persona-initials.ms-Persona-initials--darkBlue {
  3385. background-color: #2b5797;
  3386. }
  3387. .ms-Persona-initials.ms-Persona-initials--teal {
  3388. background-color: #00aba9;
  3389. }
  3390. .ms-Persona-initials.ms-Persona-initials--lightGreen {
  3391. background-color: #99b433;
  3392. }
  3393. .ms-Persona-initials.ms-Persona-initials--green {
  3394. background-color: #00a300;
  3395. }
  3396. .ms-Persona-initials.ms-Persona-initials--darkGreen {
  3397. background-color: #1e7145;
  3398. }
  3399. .ms-Persona-initials.ms-Persona-initials--lightPink {
  3400. background-color: #e773bd;
  3401. }
  3402. .ms-Persona-initials.ms-Persona-initials--pink {
  3403. background-color: #ff0097;
  3404. }
  3405. .ms-Persona-initials.ms-Persona-initials--magenta {
  3406. background-color: #7e3878;
  3407. }
  3408. .ms-Persona-initials.ms-Persona-initials--purple {
  3409. background-color: #603cba;
  3410. }
  3411. .ms-Persona-initials.ms-Persona-initials--black {
  3412. background-color: #1d1d1d;
  3413. }
  3414. .ms-Persona-initials.ms-Persona-initials--orange {
  3415. background-color: #da532c;
  3416. }
  3417. .ms-Persona-initials.ms-Persona-initials--red {
  3418. background-color: #ee1111;
  3419. }
  3420. .ms-Persona-initials.ms-Persona-initials--darkRed {
  3421. background-color: #b91d47;
  3422. }
  3423. .ms-Persona-image {
  3424. display: table-cell;
  3425. margin-right: 10px;
  3426. position: absolute;
  3427. top: 0;
  3428. left: 0;
  3429. width: 48px;
  3430. height: 48px;
  3431. }
  3432. .ms-Persona-image[src=''] {
  3433. display: none;
  3434. }
  3435. .ms-Persona-presence {
  3436. background-color: #5dd255;
  3437. position: absolute;
  3438. height: 12px;
  3439. width: 12px;
  3440. border-radius: 50%;
  3441. top: auto;
  3442. left: 34px;
  3443. bottom: -1px;
  3444. border: 2px solid #ffffff;
  3445. }
  3446. .ms-Persona-details {
  3447. display: table-cell;
  3448. padding: 0 12px;
  3449. vertical-align: middle;
  3450. overflow: hidden;
  3451. }
  3452. .ms-Persona-primaryText,
  3453. .ms-Persona-secondaryText,
  3454. .ms-Persona-tertiaryText,
  3455. .ms-Persona-optionalText {
  3456. display: block;
  3457. overflow: hidden;
  3458. text-overflow: ellipsis;
  3459. white-space: nowrap;
  3460. width: 190px;
  3461. overflow: hidden;
  3462. text-overflow: ellipsis;
  3463. }
  3464. .ms-Persona-primaryText {
  3465. color: #333333;
  3466. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3467. font-size: 17px;
  3468. margin-top: -3px;
  3469. line-height: 1.4;
  3470. }
  3471. .ms-Persona-secondaryText,
  3472. .ms-Persona-tertiaryText,
  3473. .ms-Persona-optionalText {
  3474. color: #666666;
  3475. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3476. font-size: 12px;
  3477. white-space: nowrap;
  3478. line-height: 1.3;
  3479. }
  3480. .ms-Persona-secondaryText {
  3481. padding-top: 3px;
  3482. }
  3483. .ms-Persona-tertiaryText,
  3484. .ms-Persona-optionalText {
  3485. padding-top: 5px;
  3486. display: none;
  3487. }
  3488. .ms-Persona.ms-Persona--square .ms-Persona-imageArea {
  3489. background-color: #a6a6a6;
  3490. border-radius: 0;
  3491. }
  3492. .ms-Persona.ms-Persona--square .ms-Persona-presence {
  3493. top: 0;
  3494. left: 0;
  3495. bottom: auto;
  3496. right: auto;
  3497. height: 48px;
  3498. width: 5px;
  3499. border-radius: 0;
  3500. border: 0;
  3501. }
  3502. .ms-Persona.ms-Persona--tiny {
  3503. height: 30px;
  3504. display: inline-block;
  3505. }
  3506. .ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
  3507. overflow: visible;
  3508. background: transparent;
  3509. height: 0;
  3510. width: 0;
  3511. }
  3512. .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
  3513. right: auto;
  3514. top: 10px;
  3515. left: 0;
  3516. border: 0;
  3517. }
  3518. .ms-Persona.ms-Persona--tiny .ms-Persona-details {
  3519. padding-left: 20px;
  3520. }
  3521. .ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
  3522. font-size: 14px;
  3523. padding-top: 9px;
  3524. }
  3525. .ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
  3526. display: none;
  3527. }
  3528. .ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
  3529. padding: 0;
  3530. background-color: transparent;
  3531. }
  3532. .ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after {
  3533. content: ';';
  3534. }
  3535. .ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence {
  3536. height: 12px;
  3537. width: 12px;
  3538. top: 10px;
  3539. }
  3540. .ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
  3541. .ms-Persona.ms-Persona--xs .ms-Persona-image {
  3542. width: 32px;
  3543. height: 32px;
  3544. }
  3545. .ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
  3546. font-size: 28px;
  3547. top: 6px;
  3548. }
  3549. .ms-Persona.ms-Persona--xs .ms-Persona-initials {
  3550. font-size: 12px;
  3551. line-height: 32px;
  3552. }
  3553. .ms-Persona.ms-Persona--xs .ms-Persona-presence {
  3554. left: 19px;
  3555. }
  3556. .ms-Persona.ms-Persona--xs .ms-Persona-details {
  3557. padding-left: 8px;
  3558. }
  3559. .ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
  3560. font-size: 14px;
  3561. padding-top: 3px;
  3562. }
  3563. .ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
  3564. display: none;
  3565. }
  3566. .ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
  3567. height: 32px;
  3568. width: 4px;
  3569. left: 0;
  3570. }
  3571. .ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
  3572. .ms-Persona.ms-Persona--sm .ms-Persona-image {
  3573. width: 40px;
  3574. height: 40px;
  3575. }
  3576. .ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
  3577. font-size: 38px;
  3578. top: 5px;
  3579. }
  3580. .ms-Persona.ms-Persona--sm .ms-Persona-initials {
  3581. font-size: 14px;
  3582. line-height: 40px;
  3583. }
  3584. .ms-Persona.ms-Persona--sm .ms-Persona-presence {
  3585. left: 27px;
  3586. }
  3587. .ms-Persona.ms-Persona--sm .ms-Persona-details {
  3588. padding-left: 8px;
  3589. }
  3590. .ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
  3591. font-size: 14px;
  3592. }
  3593. .ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
  3594. .ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
  3595. padding-top: 1px;
  3596. }
  3597. .ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence {
  3598. height: 40px;
  3599. width: 4px;
  3600. left: 0;
  3601. }
  3602. .ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
  3603. .ms-Persona.ms-Persona--lg .ms-Persona-image {
  3604. width: 72px;
  3605. height: 72px;
  3606. }
  3607. .ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
  3608. font-size: 67px;
  3609. top: 10px;
  3610. }
  3611. .ms-Persona.ms-Persona--lg .ms-Persona-initials {
  3612. font-size: 28px;
  3613. line-height: 72px;
  3614. }
  3615. .ms-Persona.ms-Persona--lg .ms-Persona-presence {
  3616. left: 49px;
  3617. }
  3618. .ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
  3619. padding-top: 3px;
  3620. }
  3621. .ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
  3622. padding-top: 5px;
  3623. }
  3624. .ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
  3625. display: block;
  3626. }
  3627. .ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
  3628. height: 72px;
  3629. width: 7px;
  3630. left: 0;
  3631. }
  3632. .ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
  3633. .ms-Persona.ms-Persona--xl .ms-Persona-image {
  3634. width: 100px;
  3635. height: 100px;
  3636. }
  3637. .ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
  3638. font-size: 95px;
  3639. top: 12px;
  3640. }
  3641. .ms-Persona.ms-Persona--xl .ms-Persona-initials {
  3642. font-size: 42px;
  3643. line-height: 100px;
  3644. }
  3645. .ms-Persona.ms-Persona--xl .ms-Persona-presence {
  3646. height: 20px;
  3647. width: 20px;
  3648. left: 71px;
  3649. }
  3650. .ms-Persona.ms-Persona--xl .ms-Persona-details {
  3651. padding-left: 20px;
  3652. }
  3653. .ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
  3654. font-size: 21px;
  3655. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  3656. margin-top: 0;
  3657. }
  3658. .ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
  3659. padding-top: 2px;
  3660. }
  3661. .ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText,
  3662. .ms-Persona.ms-Persona--xl .ms-Persona-optionalText {
  3663. padding-top: 5px;
  3664. display: block;
  3665. }
  3666. .ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence {
  3667. height: 100px;
  3668. width: 9px;
  3669. left: 0;
  3670. }
  3671. .ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
  3672. .ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
  3673. color: #212121;
  3674. }
  3675. .ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
  3676. .ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
  3677. .ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
  3678. .ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
  3679. .ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
  3680. .ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText {
  3681. color: #333333;
  3682. }
  3683. .ms-Persona.ms-Persona--selectable {
  3684. cursor: pointer;
  3685. padding: 0 10px;
  3686. }
  3687. .ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover,
  3688. .ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus {
  3689. background-color: #deecf9;
  3690. outline: 1px solid transparent;
  3691. }
  3692. .ms-Persona.ms-Persona--available .ms-Persona-presence {
  3693. background-color: #5dd255;
  3694. }
  3695. .ms-Persona.ms-Persona--away .ms-Persona-presence {
  3696. background-color: #ffd200;
  3697. }
  3698. .ms-Persona.ms-Persona--blocked .ms-Persona-presence {
  3699. background-color: #dedede;
  3700. background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
  3701. }
  3702. .ms-Persona.ms-Persona--busy .ms-Persona-presence {
  3703. background-color: #d93b3b;
  3704. background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
  3705. }
  3706. .ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
  3707. background-color: #d93b3b;
  3708. background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
  3709. }
  3710. .ms-Persona.ms-Persona--dnd .ms-Persona-presence {
  3711. background-color: #c72d25;
  3712. background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
  3713. }
  3714. .ms-Persona.ms-Persona--offline .ms-Persona-presence {
  3715. background-color: #b6cfd8;
  3716. }
  3717. .ms-PersonaCard {
  3718. color: #333333;
  3719. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3720. font-size: 14px;
  3721. font-weight: normal;
  3722. -webkit-animation-name: fadeIn, slideUpIn10;
  3723. animation-name: fadeIn, slideUpIn10;
  3724. -webkit-animation-duration: 0.167s;
  3725. -moz-animation-duration: 0.167s;
  3726. -ms-animation-duration: 0.167s;
  3727. -o-animation-duration: 0.167s;
  3728. -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  3729. animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  3730. -webkit-animation-fill-mode: both;
  3731. animation-fill-mode: both;
  3732. bottom: 0;
  3733. left: 0;
  3734. position: fixed;
  3735. right: 0;
  3736. outline: 1px solid transparent;
  3737. }
  3738. .ms-PersonaCard-persona {
  3739. background-color: #f4f4f4;
  3740. }
  3741. .ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
  3742. width: 80px;
  3743. height: 80px;
  3744. margin: 12px 0 12px 20px;
  3745. }
  3746. .ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
  3747. width: 80px;
  3748. height: 80px;
  3749. }
  3750. .ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
  3751. font-size: 75px;
  3752. left: 1px;
  3753. top: 11px;
  3754. }
  3755. .ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
  3756. font-size: 28px;
  3757. line-height: 80px;
  3758. }
  3759. .ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
  3760. border-color: #f4f4f4;
  3761. left: 77px;
  3762. bottom: 12px;
  3763. }
  3764. .ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
  3765. .ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
  3766. display: block;
  3767. }
  3768. .ms-PersonaCard-actions {
  3769. box-sizing: border-box;
  3770. list-style: none;
  3771. margin: 0;
  3772. padding: 0 10px;
  3773. border-bottom: 1px solid #c8c8c8;
  3774. background-color: #ffffff;
  3775. height: 48px;
  3776. }
  3777. .ms-PersonaCard-action,
  3778. .ms-PersonaCard-overflow {
  3779. display: inline-block;
  3780. cursor: pointer;
  3781. font-size: 17px;
  3782. height: 48px;
  3783. line-height: 48px;
  3784. padding: 0 10px;
  3785. color: #666666;
  3786. position: relative;
  3787. box-sizing: border-box;
  3788. }
  3789. .ms-PersonaCard-action:hover,
  3790. .ms-PersonaCard-overflow:hover {
  3791. color: #212121;
  3792. }
  3793. .ms-PersonaCard-action:active,
  3794. .ms-PersonaCard-overflow:active {
  3795. color: #0078d7;
  3796. }
  3797. .ms-PersonaCard-action.is-active,
  3798. .is-active.ms-PersonaCard-overflow {
  3799. color: #0078d7;
  3800. }
  3801. .ms-PersonaCard-action.is-active:after,
  3802. .is-active.ms-PersonaCard-overflow:after {
  3803. box-sizing: border-box;
  3804. -webkit-transform: rotate(45deg);
  3805. -ms-transform: rotate(45deg);
  3806. transform: rotate(45deg);
  3807. content: '';
  3808. width: 10px;
  3809. height: 10px;
  3810. border: 1px solid #c8c8c8;
  3811. background-color: #ffffff;
  3812. position: absolute;
  3813. border-right: 0;
  3814. border-bottom: 0;
  3815. bottom: -4px;
  3816. left: 15px;
  3817. }
  3818. .ms-PersonaCard-overflow {
  3819. font-size: 14px;
  3820. color: #333333;
  3821. float: right;
  3822. margin-top: -1px;
  3823. }
  3824. .ms-PersonaCard-overflow:hover {
  3825. color: #0078d7;
  3826. }
  3827. .ms-PersonaCard-orgChart {
  3828. position: absolute;
  3829. right: 12px;
  3830. top: 0;
  3831. }
  3832. .ms-PersonaCard-actionDetailBox {
  3833. min-height: 48px;
  3834. overflow-y: auto;
  3835. overflow-x: hidden;
  3836. background-color: #ffffff;
  3837. }
  3838. .ms-PersonaCard-actionDetails {
  3839. list-style: none;
  3840. width: 20%;
  3841. float: left;
  3842. min-height: 48px;
  3843. color: #666666;
  3844. padding: 9px 20px;
  3845. transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
  3846. box-sizing: border-box;
  3847. }
  3848. .ms-PersonaCard-actionDetails.is-collapsed {
  3849. height: 30px;
  3850. overflow: hidden;
  3851. }
  3852. .ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
  3853. content: '\e088';
  3854. }
  3855. .ms-PersonaCard-detailChat,
  3856. .ms-PersonaCard-detailPhone,
  3857. .ms-PersonaCard-detailVideo,
  3858. .ms-PersonaCard-detailMail,
  3859. .ms-PersonaCard-detailOrg {
  3860. overflow: hidden;
  3861. width: 500%;
  3862. padding: 0;
  3863. margin: 0;
  3864. }
  3865. .ms-PersonaCard-detailOrg {
  3866. overflow-y: auto;
  3867. }
  3868. .ms-PersonaCard-detailChat {
  3869. margin-left: 0;
  3870. }
  3871. .ms-PersonaCard-detailPhone {
  3872. margin-left: -100%;
  3873. }
  3874. .ms-PersonaCard-detailVideo {
  3875. margin-left: -200%;
  3876. }
  3877. .ms-PersonaCard-detailMail {
  3878. margin-left: -300%;
  3879. }
  3880. .ms-PersonaCard-detailOrg {
  3881. margin-left: -400%;
  3882. }
  3883. .ms-PersonaCard-detailChat .detail-1,
  3884. .ms-PersonaCard-detailPhone .detail-2,
  3885. .ms-PersonaCard-detailVideo .detail-3,
  3886. .ms-PersonaCard-detailMail .detail-4 {
  3887. max-height: 78px;
  3888. transition: max-height 0.25s ease;
  3889. }
  3890. .ms-PersonaCard-detailOrg .detail-5 {
  3891. max-height: 300px;
  3892. transition: max-height 0.25s ease;
  3893. }
  3894. .ms-PersonaCard-detailChat .detail-2,
  3895. .ms-PersonaCard-detailChat .detail-3,
  3896. .ms-PersonaCard-detailChat .detail-4,
  3897. .ms-PersonaCard-detailChat .detail-5,
  3898. .ms-PersonaCard-detailPhone .detail-1,
  3899. .ms-PersonaCard-detailPhone .detail-3,
  3900. .ms-PersonaCard-detailPhone .detail-4,
  3901. .ms-PersonaCard-detailPhone .detail-5,
  3902. .ms-PersonaCard-detailVideo .detail-1,
  3903. .ms-PersonaCard-detailVideo .detail-2,
  3904. .ms-PersonaCard-detailVideo .detail-4,
  3905. .ms-PersonaCard-detailVideo .detail-5,
  3906. .ms-PersonaCard-detailMail .detail-1,
  3907. .ms-PersonaCard-detailMail .detail-2,
  3908. .ms-PersonaCard-detailMail .detail-3,
  3909. .ms-PersonaCard-detailMail .detail-5,
  3910. .ms-PersonaCard-detailOrg .detail-1,
  3911. .ms-PersonaCard-detailOrg .detail-2,
  3912. .ms-PersonaCard-detailOrg .detail-3,
  3913. .ms-PersonaCard-detailOrg .detail-4 {
  3914. max-height: 48px;
  3915. }
  3916. .ms-PersonaCard-detailExpander {
  3917. color: #333333;
  3918. cursor: pointer;
  3919. font-size: 15px;
  3920. height: 30px;
  3921. line-height: 30px;
  3922. margin-top: 1px;
  3923. position: absolute;
  3924. right: 10px;
  3925. text-align: center;
  3926. width: 30px;
  3927. }
  3928. .ms-PersonaCard-detailExpander:after {
  3929. -moz-osx-font-smoothing: grayscale;
  3930. -webkit-font-smoothing: antialiased;
  3931. display: inline-block;
  3932. font-family: 'Office365Icons';
  3933. font-style: normal;
  3934. font-weight: normal;
  3935. line-height: 1;
  3936. speak: none;
  3937. content: '\e087';
  3938. }
  3939. .ms-PersonaCard-detailLine {
  3940. color: #333333;
  3941. line-height: 30px;
  3942. }
  3943. .ms-PersonaCard-detailLabel {
  3944. color: #666666;
  3945. }
  3946. .ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
  3947. .ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
  3948. display: none;
  3949. }
  3950. .ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
  3951. .ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
  3952. width: 100px;
  3953. height: 100px;
  3954. margin: 0;
  3955. }
  3956. .ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
  3957. left: 0;
  3958. }
  3959. @media (min-width: 480px) {
  3960. .ms-PersonaCard {
  3961. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  3962. max-width: 360px;
  3963. position: relative;
  3964. }
  3965. }
  3966. .ms-Pivot {
  3967. color: #333333;
  3968. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  3969. font-size: 14px;
  3970. font-weight: normal;
  3971. box-sizing: border-box;
  3972. margin: 0;
  3973. padding: 0;
  3974. box-shadow: none;
  3975. height: 30px;
  3976. list-style-type: none;
  3977. overflow-x: hidden;
  3978. white-space: nowrap;
  3979. }
  3980. .ms-Pivot-link {
  3981. color: #333333;
  3982. display: inline-block;
  3983. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  3984. font-size: 15px;
  3985. line-height: 27px;
  3986. margin-right: 15px;
  3987. }
  3988. .ms-Pivot-link:hover,
  3989. .ms-Pivot-link:focus {
  3990. color: #000000;
  3991. cursor: pointer;
  3992. }
  3993. .ms-Pivot-link:active {
  3994. color: #0078d7;
  3995. }
  3996. .ms-Pivot-link.is-selected {
  3997. color: #0078d7;
  3998. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  3999. }
  4000. .ms-Pivot-link.ms-Pivot-link--overflow {
  4001. color: #666666;
  4002. }
  4003. .ms-Pivot-link.ms-Pivot-link--overflow.is-selected {
  4004. color: #0078d7;
  4005. }
  4006. .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
  4007. .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
  4008. color: #212121;
  4009. }
  4010. .ms-Pivot-link.ms-Pivot-link--overflow:active {
  4011. color: #0078d7 !important;
  4012. }
  4013. .ms-Pivot-ellipsis {
  4014. font-size: 15px;
  4015. position: relative;
  4016. top: 0;
  4017. }
  4018. .ms-Pivot.ms-Pivot--large .ms-Pivot-link {
  4019. font-size: 17px;
  4020. }
  4021. .ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
  4022. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4023. }
  4024. .ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
  4025. font-size: 17px;
  4026. }
  4027. .ms-Pivot.ms-Pivot--tabs {
  4028. height: 40px;
  4029. }
  4030. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
  4031. height: 40px;
  4032. background-color: #f4f4f4;
  4033. line-height: 40px;
  4034. margin-right: -2px;
  4035. padding: 0 10px;
  4036. }
  4037. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
  4038. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
  4039. color: #000000;
  4040. }
  4041. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
  4042. color: #ffffff !important;
  4043. background-color: #0078d7;
  4044. }
  4045. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
  4046. background-color: #0078d7;
  4047. color: #ffffff;
  4048. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4049. }
  4050. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
  4051. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
  4052. background-color: #ffffff;
  4053. }
  4054. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active {
  4055. background-color: #0078d7 !important;
  4056. }
  4057. @media (min-width: 640px) {
  4058. .ms-Pivot-link {
  4059. font-size: 14px;
  4060. }
  4061. .ms-Pivot-link.ms-Pivot-link--overflow:after {
  4062. font-size: 14px;
  4063. }
  4064. }
  4065. @media screen and (-ms-high-contrast: active) {
  4066. .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
  4067. font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
  4068. }
  4069. }
  4070. .ms-ProgressIndicator-itemName {
  4071. color: #333333;
  4072. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4073. font-size: 14px;
  4074. font-weight: normal;
  4075. text-overflow: ellipsis;
  4076. overflow: hidden;
  4077. white-space: nowrap;
  4078. padding-top: 4px;
  4079. line-height: 20px;
  4080. }
  4081. .ms-ProgressIndicator-itemDescription {
  4082. color: #333333;
  4083. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4084. font-size: 14px;
  4085. font-weight: normal;
  4086. color: #767676;
  4087. font-size: 11px;
  4088. line-height: 18px;
  4089. }
  4090. .ms-ProgressIndicator-itemProgress {
  4091. position: relative;
  4092. width: 180px;
  4093. height: 2px;
  4094. padding: 8px 0;
  4095. }
  4096. .ms-ProgressIndicator-progressTrack {
  4097. position: absolute;
  4098. width: 100%;
  4099. height: 2px;
  4100. background-color: #eaeaea;
  4101. }
  4102. .ms-ProgressIndicator-progressBar {
  4103. position: absolute;
  4104. height: 2px;
  4105. background-color: #0078d7;
  4106. }
  4107. .ms-SearchBox {
  4108. color: #333333;
  4109. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4110. font-size: 14px;
  4111. font-weight: normal;
  4112. box-sizing: border-box;
  4113. margin: 0;
  4114. padding: 0;
  4115. box-shadow: none;
  4116. position: relative;
  4117. margin-bottom: 10px;
  4118. display: inline-block;
  4119. }
  4120. .ms-SearchBox.is-disabled .ms-SearchBox-label {
  4121. color: #333333;
  4122. }
  4123. .ms-SearchBox.is-disabled .ms-SearchBox-icon {
  4124. color: #c8c8c8;
  4125. }
  4126. .ms-SearchBox.is-disabled .ms-SearchBox-field {
  4127. background-color: #f4f4f4;
  4128. border-color: #f4f4f4;
  4129. pointer-events: none;
  4130. cursor: default;
  4131. }
  4132. .ms-SearchBox.is-active .ms-SearchBox-closeButton {
  4133. display: block;
  4134. outline: transparent 1px solid;
  4135. }
  4136. .ms-SearchBox-field {
  4137. position: relative;
  4138. box-sizing: border-box;
  4139. margin: 0;
  4140. padding: 0;
  4141. box-shadow: none;
  4142. border: 1px solid #71afe5;
  4143. outline: transparent 1px solid;
  4144. border-radius: 0;
  4145. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4146. font-size: 14px;
  4147. color: #000000;
  4148. height: 32px;
  4149. padding: 6px 3px 7px 10px;
  4150. width: 180px;
  4151. background-color: transparent;
  4152. z-index: 5;
  4153. }
  4154. .ms-SearchBox-field.hovering {
  4155. border-color: #0078d7;
  4156. background-color: rgba(0, 120, 215, 0.2);
  4157. }
  4158. .ms-SearchBox-field.hovering + .ms-SearchBox-label {
  4159. color: #000000;
  4160. }
  4161. .ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
  4162. color: #333333;
  4163. }
  4164. .ms-SearchBox-field:focus {
  4165. padding: 6px 32px 7px 10px;
  4166. border-color: #0078d7;
  4167. background-color: rgba(0, 120, 215, 0.2);
  4168. }
  4169. .ms-SearchBox-field::-ms-clear {
  4170. display: none;
  4171. }
  4172. .ms-SearchBox-closeButton {
  4173. border: none;
  4174. cursor: pointer;
  4175. position: absolute;
  4176. right: 0;
  4177. top: 0;
  4178. height: 32px;
  4179. width: 32px;
  4180. background-color: #0078d7;
  4181. text-align: center;
  4182. display: none;
  4183. font-size: 17px;
  4184. color: #ffffff;
  4185. z-index: 10;
  4186. }
  4187. .ms-SearchBox-label {
  4188. position: absolute;
  4189. top: 0;
  4190. left: 0;
  4191. padding-left: 8px;
  4192. line-height: 32px;
  4193. color: #666666;
  4194. }
  4195. .ms-SearchBox-icon {
  4196. margin-right: 7px;
  4197. font-size: 17px;
  4198. color: #767676;
  4199. }
  4200. .ms-Spinner {
  4201. position: relative;
  4202. height: 20px;
  4203. }
  4204. .ms-Spinner.ms-Spinner--large {
  4205. height: 28px;
  4206. }
  4207. .ms-Spinner.ms-Spinner--large .ms-Spinner-label {
  4208. left: 34px;
  4209. top: 6px;
  4210. }
  4211. .ms-Spinner-circle {
  4212. position: absolute;
  4213. border-radius: 100px;
  4214. background-color: #0078d7;
  4215. opacity: 0;
  4216. }
  4217. .ms-Spinner-label {
  4218. position: relative;
  4219. color: #333333;
  4220. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4221. font-size: 12px;
  4222. font-weight: normal;
  4223. color: #0078d7;
  4224. left: 28px;
  4225. top: 2px;
  4226. }
  4227. .ms-Table {
  4228. display: table;
  4229. width: 100%;
  4230. }
  4231. .ms-Table-row {
  4232. display: table-row;
  4233. height: 30px;
  4234. line-height: 30px;
  4235. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4236. font-size: 12px;
  4237. color: #333333;
  4238. }
  4239. .ms-Table-row:hover {
  4240. background-color: #f4f4f4;
  4241. cursor: pointer;
  4242. outline: 1px solid transparent;
  4243. }
  4244. .ms-Table-row.is-selected {
  4245. background-color: #c7e0f4;
  4246. }
  4247. .ms-Table-row.is-selected .ms-Table-rowCheck {
  4248. background-color: #0078d7;
  4249. }
  4250. .ms-Table-row.is-selected .ms-Table-rowCheck:before {
  4251. display: none;
  4252. }
  4253. .ms-Table-row.is-selected .ms-Table-rowCheck:after {
  4254. -moz-osx-font-smoothing: grayscale;
  4255. -webkit-font-smoothing: antialiased;
  4256. display: inline-block;
  4257. font-family: 'Office365Icons';
  4258. font-style: normal;
  4259. font-weight: normal;
  4260. line-height: 1;
  4261. speak: none;
  4262. content: '\e041';
  4263. color: #ffffff;
  4264. font-size: 12px;
  4265. position: absolute;
  4266. left: 4px;
  4267. top: 9px;
  4268. }
  4269. .ms-Table-cell {
  4270. display: table-cell;
  4271. padding: 0 10px;
  4272. }
  4273. .ms-Table-row:first-child {
  4274. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4275. font-size: 11px;
  4276. color: #666666;
  4277. }
  4278. .ms-Table-row:first-child .ms-Table-cell,
  4279. .ms-Table-row:first-child .ms-Table-rowCheck {
  4280. border-bottom: 1px solid #eaeaea;
  4281. }
  4282. .ms-Table-row:first-child .ms-Table-rowCheck:after {
  4283. -moz-osx-font-smoothing: grayscale;
  4284. -webkit-font-smoothing: antialiased;
  4285. display: inline-block;
  4286. font-family: 'Office365Icons';
  4287. font-style: normal;
  4288. font-weight: normal;
  4289. line-height: 1;
  4290. speak: none;
  4291. content: '\e041';
  4292. color: #a6a6a6;
  4293. font-size: 12px;
  4294. position: absolute;
  4295. left: 4px;
  4296. top: 9px;
  4297. }
  4298. .ms-Table-rowCheck {
  4299. display: table-cell;
  4300. width: 20px;
  4301. position: relative;
  4302. }
  4303. .ms-Table-rowCheck:before {
  4304. border: 1px solid #a6a6a6;
  4305. content: '';
  4306. display: block;
  4307. height: 14px;
  4308. left: 2px;
  4309. position: absolute;
  4310. top: 6px;
  4311. width: 14px;
  4312. }
  4313. @media screen and (-ms-high-contrast: active) {
  4314. .ms-Table-row.is-selected .ms-Table-rowCheck {
  4315. background: none;
  4316. }
  4317. .ms-Table-row.is-selected .ms-Table-rowCheck:before {
  4318. display: block;
  4319. }
  4320. }
  4321. .ms-Label {
  4322. color: #333333;
  4323. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4324. font-size: 12px;
  4325. font-weight: normal;
  4326. box-sizing: border-box;
  4327. margin: 0;
  4328. padding: 0;
  4329. box-shadow: none;
  4330. box-sizing: border-box;
  4331. display: block;
  4332. padding: 5px 0;
  4333. }
  4334. .ms-Label.is-required:after {
  4335. content: ' *';
  4336. color: #a80000;
  4337. }
  4338. .ms-Label.is-disabled {
  4339. color: #333333;
  4340. }
  4341. .ms-TextField {
  4342. color: #333333;
  4343. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4344. font-size: 14px;
  4345. font-weight: normal;
  4346. box-sizing: border-box;
  4347. margin: 0;
  4348. padding: 0;
  4349. box-shadow: none;
  4350. margin-bottom: 8px;
  4351. }
  4352. .ms-TextField.is-disabled .ms-TextField-field {
  4353. background-color: #f4f4f4;
  4354. border-color: #f4f4f4;
  4355. pointer-events: none;
  4356. cursor: default;
  4357. }
  4358. .ms-TextField.is-disabled::-webkit-input-placeholder,
  4359. .ms-TextField.is-disabled::-moz-placeholder,
  4360. .ms-TextField.is-disabled:-moz-placeholder,
  4361. .ms-TextField.is-disabled:-ms-input-placeholder {
  4362. color: #a6a6a6;
  4363. }
  4364. .ms-TextField.is-required .ms-Label:after {
  4365. content: ' *';
  4366. color: #a80000;
  4367. }
  4368. .ms-TextField.is-required::-webkit-input-placeholder:after,
  4369. .ms-TextField.is-required::-moz-placeholder:after,
  4370. .ms-TextField.is-required:-moz-placeholder:after,
  4371. .ms-TextField.is-required:-ms-input-placeholder:after {
  4372. content: ' *';
  4373. color: #a80000;
  4374. }
  4375. .ms-TextField.is-active {
  4376. border-color: #0078d7;
  4377. }
  4378. .ms-TextField-field {
  4379. box-sizing: border-box;
  4380. margin: 0;
  4381. padding: 0;
  4382. box-shadow: none;
  4383. border: 1px solid #c8c8c8;
  4384. border-radius: 0;
  4385. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4386. font-size: 12px;
  4387. color: #333333;
  4388. height: 32px;
  4389. padding: 6px 10px 8px;
  4390. width: 100%;
  4391. min-width: 180px;
  4392. outline: 1px solid transparent;
  4393. }
  4394. .ms-TextField-field:hover {
  4395. border-color: #767676;
  4396. }
  4397. .ms-TextField-field:focus {
  4398. border-color: #0078d7;
  4399. }
  4400. .ms-TextField-field:hover,
  4401. .ms-TextField-field:focus {
  4402. outline: 1px solid transparent;
  4403. }
  4404. .ms-TextField-field::-webkit-input-placeholder,
  4405. .ms-TextField-field::-moz-placeholder,
  4406. .ms-TextField-field:-moz-placeholder,
  4407. .ms-TextField-field:-ms-input-placeholder {
  4408. color: #666666;
  4409. }
  4410. .ms-TextField-description {
  4411. color: #767676;
  4412. font-size: 11px;
  4413. }
  4414. .ms-TextField.ms-TextField--placeholder {
  4415. position: relative;
  4416. }
  4417. .ms-TextField.ms-TextField--placeholder .ms-Label {
  4418. position: absolute;
  4419. font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
  4420. font-size: 12px;
  4421. color: #666666;
  4422. padding: 7px 0 7px 10px;
  4423. }
  4424. .ms-TextField.ms-TextField--placeholder.is-disabled {
  4425. color: #a6a6a6;
  4426. }
  4427. .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
  4428. color: #333333;
  4429. }
  4430. .ms-TextField.ms-TextField--underlined {
  4431. border-bottom: 1px solid #c8c8c8;
  4432. display: table;
  4433. width: 100%;
  4434. min-width: 180px;
  4435. }
  4436. .ms-TextField.ms-TextField--underlined:hover {
  4437. border-color: #767676;
  4438. }
  4439. .ms-TextField.ms-TextField--underlined:active,
  4440. .ms-TextField.ms-TextField--underlined:focus {
  4441. border-color: #0078d7;
  4442. }
  4443. .ms-TextField.ms-TextField--underlined .ms-Label {
  4444. font-size: 12px;
  4445. margin-right: 8px;
  4446. display: table-cell;
  4447. vertical-align: bottom;
  4448. padding-left: 12px;
  4449. padding-bottom: 5px;
  4450. height: 32px;
  4451. width: 1%;
  4452. white-space: nowrap;
  4453. }
  4454. .ms-TextField.ms-TextField--underlined .ms-TextField-field {
  4455. border: 0;
  4456. float: left;
  4457. display: table-cell;
  4458. text-align: left;
  4459. padding-top: 8px;
  4460. padding-bottom: 2px;
  4461. }
  4462. .ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
  4463. .ms-TextField.ms-TextField--underlined .ms-TextField-field:focus {
  4464. outline: 0;
  4465. }
  4466. .ms-TextField.ms-TextField--underlined.is-disabled {
  4467. border-bottom-color: #eaeaea;
  4468. }
  4469. .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
  4470. color: #333333;
  4471. }
  4472. .ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
  4473. background-color: transparent;
  4474. color: #a6a6a6;
  4475. }
  4476. .ms-TextField.ms-TextField--multiline .ms-TextField-field {
  4477. color: #333333;
  4478. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4479. font-size: 12px;
  4480. font-weight: normal;
  4481. line-height: 17px;
  4482. min-height: 60px;
  4483. min-width: 260px;
  4484. padding-top: 6px;
  4485. overflow: auto;
  4486. }
  4487. .ms-Label {
  4488. color: #333333;
  4489. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4490. font-size: 12px;
  4491. font-weight: normal;
  4492. box-sizing: border-box;
  4493. margin: 0;
  4494. padding: 0;
  4495. box-shadow: none;
  4496. box-sizing: border-box;
  4497. display: block;
  4498. padding: 5px 0;
  4499. }
  4500. .ms-Label.is-required:after {
  4501. content: ' *';
  4502. color: #a80000;
  4503. }
  4504. .ms-Label.is-disabled {
  4505. color: #333333;
  4506. }
  4507. .ms-Toggle {
  4508. color: #333333;
  4509. font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  4510. font-size: 14px;
  4511. font-weight: normal;
  4512. box-sizing: border-box;
  4513. margin: 0;
  4514. padding: 0;
  4515. box-shadow: none;
  4516. position: relative;
  4517. display: block;
  4518. margin-bottom: 26px;
  4519. }
  4520. .ms-Toggle .ms-Label {
  4521. position: relative;
  4522. padding: 0 0 0 62px;
  4523. font-size: 12px;
  4524. }
  4525. .ms-Toggle:hover .ms-Label {
  4526. color: #000000;
  4527. }
  4528. .ms-Toggle:active .ms-Label {
  4529. color: #333333;
  4530. }
  4531. .ms-Toggle.is-disabled .ms-Label {
  4532. color: #333333;
  4533. }
  4534. .ms-Toggle.is-disabled .ms-Toggle-field {
  4535. background-color: #ffffff !important;
  4536. border-color: #c8c8c8 !important;
  4537. pointer-events: none !important;
  4538. cursor: default !important;
  4539. }
  4540. .ms-Toggle.is-disabled .ms-Toggle-field:before {
  4541. background-color: #c8c8c8 !important;
  4542. }
  4543. .ms-Toggle-description {
  4544. position: relative;
  4545. font-size: 12px;
  4546. vertical-align: top;
  4547. display: block;
  4548. margin-bottom: 8px;
  4549. }
  4550. .ms-Toggle-field {
  4551. position: relative;
  4552. display: inline-block;
  4553. width: 57px;
  4554. height: 20px;
  4555. box-sizing: border-box;
  4556. border: 2.5px #c8c8c8 solid;
  4557. cursor: pointer;
  4558. }
  4559. .ms-Toggle-input {
  4560. position: absolute;
  4561. opacity: 0;
  4562. top: 0;
  4563. }
  4564. .ms-Toggle-input + .ms-Toggle-field {
  4565. background-color: #f4f4f4;
  4566. }
  4567. .ms-Toggle-input + .ms-Toggle-field:before {
  4568. position: absolute;
  4569. display: block;
  4570. box-sizing: content-box;
  4571. content: '';
  4572. top: -2.5px;
  4573. left: -2.5px;
  4574. width: 12px;
  4575. height: 20px;
  4576. background-color: #767676;
  4577. outline: 2px solid transparent;
  4578. }
  4579. .ms-Toggle-input + .ms-Toggle-field:before {
  4580. right: auto;
  4581. border-right: 2.5px solid #ffffff;
  4582. }
  4583. .ms-Toggle-input + .ms-Toggle-field:active {
  4584. background-color: #0078d7;
  4585. }
  4586. .ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
  4587. display: block;
  4588. }
  4589. .ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
  4590. display: none;
  4591. }
  4592. .ms-Toggle-input:checked + .ms-Toggle-field {
  4593. background-color: #0078d7;
  4594. }
  4595. .ms-Toggle-input:checked + .ms-Toggle-field:before {
  4596. position: absolute;
  4597. display: block;
  4598. box-sizing: content-box;
  4599. content: '';
  4600. top: -2.5px;
  4601. right: -2.5px;
  4602. width: 12px;
  4603. height: 20px;
  4604. background-color: #767676;
  4605. outline: 2px solid transparent;
  4606. }
  4607. .ms-Toggle-input:checked + .ms-Toggle-field:before {
  4608. left: auto;
  4609. border-left: 2.5px solid #ffffff;
  4610. }
  4611. .ms-Toggle-input:checked + .ms-Toggle-field:active {
  4612. background-color: #0078d7;
  4613. }
  4614. .ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
  4615. display: none;
  4616. }
  4617. .ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
  4618. display: block;
  4619. }
  4620. .ms-Toggle-input:focus + .ms-Toggle-field,
  4621. .ms-Toggle-input:hover + .ms-Toggle-field {
  4622. background-color: #eaeaea;
  4623. }
  4624. .ms-Toggle-input:focus:checked + .ms-Toggle-field,
  4625. .ms-Toggle-input:hover:checked + .ms-Toggle-field {
  4626. background-color: #005a9e;
  4627. }
  4628. .ms-Toggle.ms-Toggle--textLeft {
  4629. width: 225px;
  4630. margin-bottom: 40px;
  4631. }
  4632. .ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
  4633. display: inline-block;
  4634. max-width: 150px;
  4635. top: -3px;
  4636. margin-bottom: 0;
  4637. }
  4638. .ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
  4639. float: right;
  4640. }