admin.dops-style.rtl.css 77 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726
  1. .dops-button {
  2. background: white;
  3. border-color: #c8d7e1;
  4. border-style: solid;
  5. border-width: 1px 1px 2px;
  6. color: #2e4453;
  7. cursor: pointer;
  8. display: inline-block;
  9. margin: 0;
  10. outline: 0;
  11. overflow: hidden;
  12. font-size: 14px;
  13. font-weight: 500;
  14. text-overflow: ellipsis;
  15. text-decoration: none;
  16. vertical-align: top;
  17. box-sizing: border-box;
  18. font-size: 14px;
  19. line-height: 21px;
  20. border-radius: 4px;
  21. padding: 7px 14px 9px;
  22. -webkit-appearance: none;
  23. -moz-appearance: none;
  24. appearance: none; }
  25. .dops-button:hover {
  26. border-color: #a8bece;
  27. color: #2e4453; }
  28. .dops-button:active {
  29. border-width: 2px 1px 1px; }
  30. .dops-button[disabled], .dops-button:disabled {
  31. color: #e9eff3;
  32. background: white;
  33. border-color: #e9eff3;
  34. cursor: default; }
  35. .dops-button[disabled]:active, .dops-button:disabled:active {
  36. border-width: 1px 1px 2px; }
  37. .dops-button:focus {
  38. outline: 0;
  39. border-color: #00aadc;
  40. box-shadow: 0 0 0 2px #78dcfa; }
  41. .dops-button.is-compact {
  42. padding: 7px;
  43. color: #668eaa;
  44. font-size: 11px;
  45. line-height: 1;
  46. text-transform: uppercase; }
  47. .dops-button.is-compact:disabled {
  48. color: #e9eff3; }
  49. .dops-button.is-compact .gridicon {
  50. top: 4px;
  51. margin-top: -8px; }
  52. .dops-button.is-compact .gridicons-plus-small {
  53. margin-right: -4px; }
  54. .dops-button.is-compact .gridicons-plus-small:last-of-type {
  55. margin-right: 0; }
  56. .dops-button.is-compact .gridicons-plus-small + .gridicon {
  57. margin-right: -4px; }
  58. .dops-button.hidden {
  59. display: none; }
  60. .dops-button .gridicon {
  61. position: relative;
  62. top: 4px;
  63. margin-top: -2px;
  64. width: 18px;
  65. height: 18px; }
  66. .dops-button.is-primary {
  67. background: #00aadc;
  68. border-color: #0087be;
  69. color: white; }
  70. .dops-button.is-primary:hover, .dops-button.is-primary:focus {
  71. border-color: #005082;
  72. color: white; }
  73. .dops-button.is-primary[disabled], .dops-button.is-primary:disabled {
  74. background: #bceefd;
  75. border-color: #8cc9e2;
  76. color: white; }
  77. .dops-button.is-primary.is-compact {
  78. color: white; }
  79. .dops-button.is-scary {
  80. color: #d94f4f; }
  81. .dops-button.is-scary:hover, .dops-button.is-scary:focus {
  82. border-color: #d94f4f; }
  83. .dops-button.is-scary:focus {
  84. box-shadow: 0 0 0 2px #eba3a3; }
  85. .dops-button.is-scary[disabled], .dops-button.is-scary:disabled {
  86. color: #f4cdcd;
  87. border-color: #e9eff3; }
  88. .dops-button.is-primary.is-scary {
  89. background: #d94f4f;
  90. border-color: #a02222;
  91. color: white; }
  92. .dops-button.is-primary.is-scary:hover, .dops-button.is-primary.is-scary:focus {
  93. border-color: #4c1010; }
  94. .dops-button.is-primary.is-scary[disabled], .dops-button.is-primary.is-scary:disabled {
  95. background: #eba3a3;
  96. border-color: #e48484; }
  97. .dops-button.is-borderless {
  98. border: none;
  99. color: #668eaa;
  100. padding-right: 0;
  101. padding-left: 0; }
  102. .dops-button.is-borderless:hover {
  103. color: #2e4453; }
  104. .dops-button.is-borderless:focus {
  105. box-shadow: none; }
  106. .dops-accessible-focus .dops-button.is-borderless:focus {
  107. outline: thin dotted; }
  108. .dops-button.is-borderless .gridicon {
  109. width: 24px;
  110. height: 24px;
  111. top: 6px; }
  112. .dops-button.is-borderless[disabled], .dops-button.is-borderless:disabled {
  113. color: #e9eff3;
  114. background: white;
  115. cursor: default; }
  116. .dops-button.is-borderless[disabled]:active, .dops-button.is-borderless:disabled:active {
  117. border-width: 0; }
  118. .dops-button.is-borderless.is-scary {
  119. color: #d94f4f; }
  120. .dops-button.is-borderless.is-scary:hover, .dops-button.is-borderless.is-scary:focus {
  121. color: #a02222; }
  122. .dops-button.is-borderless.is-scary[disabled] {
  123. color: #f4cdcd; }
  124. .dops-button.is-borderless.is-compact {
  125. background: transparent;
  126. border-radius: 0; }
  127. .dops-button.is-borderless.is-compact .gridicon {
  128. width: 18px;
  129. height: 18px;
  130. top: 5px; }
  131. .dops-button-group .dops-button {
  132. border-right-width: 0;
  133. border-radius: 0; }
  134. .dops-button-group .dops-button:focus {
  135. position: relative;
  136. z-index: z-index("button-group-parent", ".button-group .button:focus");
  137. box-shadow: inset -1px 0 0 #00aadc, 0 0 0 2px #78dcfa; }
  138. .dops-button-group .dops-button.is-primary:focus {
  139. box-shadow: inset -1px 0 0 #005082, 0 0 0 2px #78dcfa; }
  140. .dops-button-group .dops-button.is-scary:focus {
  141. box-shadow: inset -1px 0 0 #d94f4f, 0 0 0 2px #eba3a3; }
  142. .dops-button-group .dops-button.is-primary.is-scary:focus {
  143. box-shadow: inset -1px 0 0 #761919, 0 0 0 2px #eba3a3; }
  144. .dops-button-group .dops-button:first-child:focus {
  145. box-shadow: 0 0 0 2px #78dcfa; }
  146. .dops-button-group .dops-button.is-scary:first-child:focus {
  147. box-shadow: 0 0 0 2px #eba3a3; }
  148. .dops-button-group .dops-button:first-child {
  149. border-right-width: 1px;
  150. border-top-right-radius: 4px;
  151. border-bottom-right-radius: 4px; }
  152. .dops-button-group .dops-button:last-child {
  153. border-top-left-radius: 4px;
  154. border-bottom-left-radius: 4px; }
  155. .dops-section-header .dops-button-group .dops-button {
  156. margin-left: 0; }
  157. .dops-count {
  158. display: inline-block;
  159. padding: 0.0625rem 0.375rem;
  160. border: solid 1px #87a6bc;
  161. border-radius: 0.75rem;
  162. font-size: 0.6875rem;
  163. font-weight: 600;
  164. line-height: 0.875rem;
  165. color: #87a6bc;
  166. text-align: center; }
  167. /**
  168. * Select Dropdown
  169. */
  170. .dops-select-dropdown {
  171. height: 43px; }
  172. .dops-select-dropdown.is-compact {
  173. height: 28px; }
  174. .dops-select-dropdown.is-disabled .dops-select-dropdown__header {
  175. background: #f3f6f8;
  176. border-color: #e9eff3;
  177. color: #a8bece;
  178. -webkit-text-fill-color: #a8bece; }
  179. .dops-select-dropdown__container {
  180. position: relative;
  181. overflow: hidden;
  182. display: inline-block;
  183. width: auto;
  184. max-width: 100%; }
  185. .dops-select-dropdown.is-open .dops-select-dropdown__container {
  186. z-index: 170; }
  187. .dops-accessible-focus .dops-select-dropdown__container:focus,
  188. .dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container {
  189. z-index: 170;
  190. box-shadow: 0 0 0 2px #78dcfa; }
  191. .dops-accessible-focus .dops-select-dropdown__container:focus .select-dropdown__header,
  192. .dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container .select-dropdown__header {
  193. border-color: #0087be; }
  194. .dops-accessible-focus .dops-select-dropdown__container:focus {
  195. border-color: #00aadc;
  196. box-shadow: 0 0 0 2px #78dcfa;
  197. outline: 0;
  198. border-radius: 4px; }
  199. .dops-select-dropdown__header {
  200. padding: 11px 16px 11px 44px;
  201. border-style: solid;
  202. border-color: #c8d7e1;
  203. border-width: 1px 1px 2px;
  204. border-radius: 4px;
  205. background-color: white;
  206. font-size: 14px;
  207. font-weight: 600;
  208. line-height: 18px;
  209. height: 18px;
  210. color: #2e4453;
  211. transition: background-color 0.2s ease;
  212. cursor: pointer; }
  213. .dops-select-dropdown__header::after {
  214. -webkit-font-smoothing: antialiased;
  215. -moz-osx-font-smoothing: grayscale;
  216. display: inline-block;
  217. vertical-align: middle;
  218. font: normal 16px/1 'Dashicons';
  219. content: '\F347';
  220. position: absolute;
  221. left: 13px;
  222. top: 12px;
  223. display: block;
  224. line-height: 18px;
  225. color: rgba(135, 166, 188, 0.5); }
  226. .is-compact .dops-select-dropdown__header::after {
  227. left: 4px;
  228. top: 4px; }
  229. .is-compact .dops-select-dropdown__header {
  230. padding: 7px;
  231. color: #668eaa;
  232. font-size: 11px;
  233. line-height: 1;
  234. text-transform: uppercase; }
  235. .is-compact .dops-select-dropdown__header .dops-count {
  236. border-width: 0;
  237. margin-right: 0;
  238. line-height: 1; }
  239. .dops-select-dropdown.is-open .dops-select-dropdown__header {
  240. border-radius: 4px 4px 0 0;
  241. box-shadow: none;
  242. background-color: #f3f6f8; }
  243. .dops-select-dropdown.is-open .dops-select-dropdown__header::after {
  244. -webkit-font-smoothing: antialiased;
  245. -moz-osx-font-smoothing: grayscale;
  246. display: inline-block;
  247. vertical-align: middle;
  248. font: normal 16px/1 'Dashicons';
  249. content: '\F343'; }
  250. .dops-select-dropdown__header .dops-count {
  251. margin-right: 8px; }
  252. .dops-select-dropdown__header-text {
  253. display: block;
  254. white-space: nowrap;
  255. text-overflow: ellipsis;
  256. overflow: hidden; }
  257. .dops-select-dropdown__options {
  258. visibility: hidden;
  259. height: 0;
  260. box-sizing: border-box;
  261. padding: 0;
  262. list-style: none;
  263. margin: -2px 0 0 0;
  264. background-color: white;
  265. border: 1px solid #c8d7e1;
  266. border-radius: 0 0 4px 4px; }
  267. .dops-accessible-focus .dops-select-dropdown__options {
  268. border: solid 1px #0087be;
  269. border-top-color: #c8d7e1; }
  270. .dops-select-dropdown.is-open .dops-select-dropdown__options {
  271. visibility: visible;
  272. height: auto; }
  273. .dops-select-dropdown__option:last-child .dops-select-dropdown__item {
  274. border-radius: 0 0 4px 4px; }
  275. .dops-select-dropdown__item,
  276. .dops-select-dropdown__item-text {
  277. padding: 11px 16px 11px 44px; }
  278. .dops-select-dropdown__item {
  279. display: block;
  280. position: relative;
  281. font-size: 14px;
  282. font-weight: 400;
  283. line-height: 18px;
  284. color: #2e4453;
  285. white-space: nowrap;
  286. text-overflow: ellipsis;
  287. overflow: hidden;
  288. cursor: pointer; }
  289. .dops-select-dropdown__item::before {
  290. content: attr(data-bold-text);
  291. font-weight: 700;
  292. opacity: 0; }
  293. .dops-select-dropdown__item:visited {
  294. color: #2e4453; }
  295. .dops-select-dropdown__item.is-selected {
  296. background-color: #00aadc;
  297. color: white; }
  298. .dops-select-dropdown__item.is-disabled {
  299. background-color: white;
  300. color: #87a6bc;
  301. cursor: default;
  302. opacity: .5; }
  303. .notouch .dops-select-dropdown__item:hover {
  304. color: #00aadc; }
  305. .notouch .dops-select-dropdown__item.is-selected:hover {
  306. color: white; }
  307. .dops-select-dropdown__item-text {
  308. padding-left: 16px;
  309. box-sizing: border-box;
  310. position: absolute;
  311. top: 0;
  312. right: 0;
  313. width: 100%;
  314. white-space: nowrap;
  315. text-overflow: ellipsis;
  316. color: inherit;
  317. display: -ms-flexbox;
  318. display: flex;
  319. -ms-flex-flow: row wrap;
  320. flex-flow: row wrap;
  321. -ms-flex-pack: justify;
  322. justify-content: space-between; }
  323. .dops-select-dropdown__item-text .dops-count {
  324. color: inherit;
  325. border-color: inherit; }
  326. .dops-select-dropdown__separator {
  327. border-top: 1px solid #c8d7e1;
  328. display: block;
  329. margin: 8px 0; }
  330. .dops-select-dropdown__label {
  331. display: block;
  332. color: #a8bece;
  333. margin-top: 5px;
  334. line-height: 20px; }
  335. .dops-select-dropdown__label label {
  336. font-size: 12px;
  337. text-transform: uppercase;
  338. padding: 0px 16px 0px 16px; }
  339. @keyframes rotate-spinner__right {
  340. 0% {
  341. transform: rotate(0deg); }
  342. 25% {
  343. transform: rotate(-180deg); }
  344. 50% {
  345. transform: rotate(-180deg); }
  346. 75% {
  347. transform: rotate(-360deg); }
  348. 100% {
  349. transform: rotate(-360deg); } }
  350. @keyframes rotate-spinner__left {
  351. 0% {
  352. transform: rotate(0deg); }
  353. 25% {
  354. transform: rotate(0deg); }
  355. 50% {
  356. transform: rotate(-180deg); }
  357. 75% {
  358. transform: rotate(-180deg); }
  359. 100% {
  360. transform: rotate(-360deg); } }
  361. .dops-spinner.is-fallback {
  362. position: relative;
  363. border-radius: 100%;
  364. background-color: #c8d7e1; }
  365. .dops-spinner.is-fallback::before, .dops-spinner.is-fallback::after {
  366. content: '';
  367. position: absolute;
  368. background-color: white;
  369. border-radius: 50%; }
  370. .dops-spinner.is-fallback::before {
  371. width: 90%;
  372. height: 90%;
  373. top: 5%;
  374. right: 5%; }
  375. .dops-spinner.is-fallback::after {
  376. width: 70%;
  377. height: 70%;
  378. top: 15%;
  379. right: 15%; }
  380. .dops-spinner__image {
  381. display: block; }
  382. .dops-spinner__border {
  383. fill: #c8d7e1; }
  384. .dops-spinner__progress {
  385. animation: 3s linear infinite;
  386. transform-origin: 50px 50px;
  387. fill: #00aadc; }
  388. .dops-spinner.is-fallback .dops-spinner__progress {
  389. position: absolute;
  390. overflow: hidden;
  391. width: 50%;
  392. height: 100%;
  393. animation: none; }
  394. .dops-spinner.is-fallback .dops-spinner__progress::before {
  395. content: '';
  396. position: absolute;
  397. width: 100%;
  398. height: 100%;
  399. animation: 3s linear infinite;
  400. border-radius: 9999px;
  401. background-color: #00aadc;
  402. fill: none; }
  403. .dops-spinner.is-fallback .dops-spinner__progress.is-left {
  404. right: 0; }
  405. .dops-spinner.is-fallback .dops-spinner__progress.is-left::before {
  406. right: 100%;
  407. border-top-right-radius: 0;
  408. border-bottom-right-radius: 0;
  409. transform-origin: 100% 50%; }
  410. .dops-spinner.is-fallback .dops-spinner__progress.is-right {
  411. right: 50%; }
  412. .dops-spinner.is-fallback .dops-spinner__progress.is-right::before {
  413. right: -100%;
  414. border-top-left-radius: 0;
  415. border-bottom-left-radius: 0;
  416. transform-origin: 0% 50%; }
  417. .dops-spinner__progress.is-left,
  418. .dops-spinner.is-fallback .dops-spinner__progress.is-left::before {
  419. animation-name: rotate-spinner__left; }
  420. .dops-spinner__progress.is-right,
  421. .dops-spinner.is-fallback .dops-spinner__progress.is-right::before {
  422. animation-name: rotate-spinner__right; }
  423. .gridicon {
  424. fill: currentColor; }
  425. .gridicon.needs-offset g {
  426. transform: translate(-1px, 1px);
  427. /* translates to .5px because it's in a child element */ }
  428. .gridicon.needs-offset-x g {
  429. transform: translate(-1px, 0);
  430. /* only nudges horizontally */ }
  431. .gridicon.needs-offset-y g {
  432. transform: translate(0, 1px);
  433. /* only nudges vertically */ }
  434. /**
  435. * @component Search
  436. */
  437. .dops-search {
  438. display: -ms-flexbox;
  439. display: flex;
  440. -ms-flex: 1 1 auto;
  441. flex: 1 1 auto;
  442. margin-bottom: 24px;
  443. width: 60px;
  444. height: 51px;
  445. position: relative;
  446. -ms-flex-align: center;
  447. align-items: center;
  448. z-index: 22;
  449. transition: all 0.15s ease-in-out; }
  450. .dops-search .dops-search__icon-navigation {
  451. -ms-flex: 0 0 auto;
  452. flex: 0 0 auto;
  453. display: -ms-flexbox;
  454. display: flex;
  455. -ms-flex-align: center;
  456. align-items: center;
  457. background-color: white;
  458. border-radius: inherit;
  459. height: 100%; }
  460. .dops-search .dops-search__open-icon,
  461. .dops-search .dops-search__close-icon {
  462. -ms-flex: 0 0 auto;
  463. flex: 0 0 auto;
  464. width: 50px;
  465. z-index: 20;
  466. color: #0087be;
  467. cursor: pointer; }
  468. .accessible-focus .dops-search .dops-search__open-icon:focus, .accessible-focus
  469. .dops-search .dops-search__close-icon:focus {
  470. outline: dotted 1px #0087be; }
  471. .dops-search .dops-search__open-icon:hover {
  472. color: #3d596d; }
  473. .dops-search .dops-search__close-icon {
  474. color: #3d596d;
  475. opacity: 0;
  476. transition: opacity .2s ease-in; }
  477. .accessible-focus .dops-search.has-focus {
  478. box-shadow: 0 0 0 1px #0087be, 0 0 0 4px #78dcfa; }
  479. .dops-search.is-expanded-to-container {
  480. margin-bottom: 0;
  481. position: absolute;
  482. display: -ms-flexbox;
  483. display: flex;
  484. height: 100%;
  485. width: 50px;
  486. top: 0;
  487. left: 0; }
  488. .dops-search.is-expanded-to-container .dops-search__input-fade {
  489. position: relative;
  490. -ms-flex: 1 1 auto;
  491. flex: 1 1 auto;
  492. display: -ms-flexbox;
  493. display: flex; }
  494. .dops-search.is-expanded-to-container .dops-search__input[type="search"] {
  495. -ms-flex: 1 1 auto;
  496. flex: 1 1 auto;
  497. display: -ms-flexbox;
  498. display: flex;
  499. margin: 0;
  500. box-shadow: none; }
  501. .dops-search__input[type="search"] {
  502. -ms-flex: 1 1 auto;
  503. flex: 1 1 auto;
  504. display: none;
  505. z-index: 10;
  506. top: 0;
  507. border: none;
  508. border-radius: inherit;
  509. height: 100%;
  510. background: white;
  511. -moz-appearance: none;
  512. appearance: none;
  513. box-sizing: border-box;
  514. padding: 0px;
  515. -webkit-appearance: none; }
  516. .dops-search__input[type="search"]::-webkit-search-cancel-button {
  517. -webkit-appearance: none; }
  518. .dops-search__input[type="search"]:focus {
  519. box-shadow: none;
  520. border: none; }
  521. .dops-search.is-open {
  522. width: 100%; }
  523. .dops-search.is-open .dops-search__open-icon {
  524. color: #3d596d; }
  525. .dops-search.is-open .dops-search__close-icon {
  526. display: inline-block; }
  527. .dops-search.is-open .dops-search__input,
  528. .dops-search.is-open .dops-search__close-icon {
  529. opacity: 1; }
  530. .dops-search.is-open .dops-search__input {
  531. display: block; }
  532. .dops-search.is-open .dops-search__input-fade {
  533. -ms-flex: 1 1 auto;
  534. flex: 1 1 auto;
  535. height: 100%;
  536. position: relative;
  537. font-size: 16px;
  538. border-radius: inherit; }
  539. .dops-search.is-open .dops-search__input-fade::before {
  540. content: '';
  541. display: block;
  542. position: absolute;
  543. -webkit-touch-callout: none;
  544. -webkit-user-select: none;
  545. -moz-user-select: none;
  546. -ms-user-select: none;
  547. user-select: none;
  548. pointer-events: none;
  549. z-index: 12;
  550. background: linear-gradient(to left, rgba(255, 255, 255, 0), white 90%);
  551. top: 0px;
  552. bottom: 0px;
  553. left: 0px;
  554. right: auto;
  555. width: 32px;
  556. height: auto;
  557. border-radius: inherit; }
  558. .dops-search.is-open .dops-search__input-fade.ltr { }
  559. .dops-search.is-open .dops-search__input-fade.ltr::before {
  560. content: '';
  561. display: block;
  562. position: absolute;
  563. -webkit-touch-callout: none;
  564. -webkit-user-select: none;
  565. -moz-user-select: none;
  566. -ms-user-select: none;
  567. user-select: none;
  568. pointer-events: none;
  569. z-index: 12;
  570. background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%);
  571. top: 0px;
  572. bottom: 0px;
  573. right: 0px;
  574. left: auto;
  575. width: 32px;
  576. height: auto;
  577. border-radius: inherit; }
  578. .dops-search__input-fade .dops-search__text-overlay {
  579. color: transparent;
  580. position: absolute;
  581. pointer-events: none;
  582. white-space: nowrap;
  583. display: -ms-flexbox;
  584. display: flex;
  585. -ms-flex-align: center;
  586. align-items: center;
  587. -ms-flex: 1 1 auto;
  588. flex: 1 1 auto;
  589. overflow: hidden;
  590. font: inherit;
  591. width: 100%;
  592. height: 100%;
  593. top: 0px;
  594. right: 0px;
  595. z-index: 11; }
  596. .dops-search .dops-spinner {
  597. display: none; }
  598. .dops-search.is-searching .dops-search__open-icon {
  599. display: none; }
  600. .dops-search.is-searching .dops-spinner {
  601. -ms-flex: 0 0 auto;
  602. flex: 0 0 auto;
  603. display: -ms-flexbox;
  604. display: flex;
  605. -ms-flex-align: center;
  606. align-items: center;
  607. height: 100%;
  608. z-index: 20; }
  609. .dops-search.is-searching .dops-spinner .dops-spinner__image {
  610. width: 50px; }
  611. .animating.dops-search-opening .dops-search input {
  612. opacity: 1; }
  613. /**
  614. * Section Nav
  615. */
  616. .dops-section-nav {
  617. position: relative;
  618. width: 100%;
  619. padding: 0;
  620. margin: 0 0 17px 0;
  621. background: white;
  622. box-sizing: border-box;
  623. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
  624. .dops-section-nav.is-empty .dops-section-nav__panel {
  625. visibility: hidden; }
  626. @media (max-width: 480px) {
  627. .dops-section-nav.is-open {
  628. box-shadow: 0 0 0 1px #87a6bc, 0 2px 4px #c8d7e1; } }
  629. @media (min-width: 481px) {
  630. .dops-section-nav.has-pinned-items {
  631. padding-left: 60px; } }
  632. @media (min-width: 481px) and (max-width: 660px) {
  633. .dops-section-nav.has-pinned-items {
  634. padding-left: 50px; } }
  635. @media (max-width: 660px) {
  636. .dops-section-nav {
  637. margin-bottom: 9px; } }
  638. .dops-section-nav__mobile-header {
  639. display: -ms-flexbox;
  640. display: flex;
  641. padding: 15px;
  642. font-size: 14px;
  643. line-height: 16px;
  644. color: #2e4453;
  645. font-weight: 600;
  646. cursor: pointer; }
  647. .dops-section-nav__mobile-header:after {
  648. -webkit-font-smoothing: antialiased;
  649. -moz-osx-font-smoothing: grayscale;
  650. display: inline-block;
  651. vertical-align: middle;
  652. font: normal 16px/1 'Dashicons';
  653. content: '\F347';
  654. line-height: 16px;
  655. color: rgba(135, 166, 188, 0.5); }
  656. .dops-section-nav.is-open .dops-section-nav__mobile-header:after {
  657. -webkit-font-smoothing: antialiased;
  658. -moz-osx-font-smoothing: grayscale;
  659. display: inline-block;
  660. vertical-align: middle;
  661. font: normal 16px/1 'Dashicons';
  662. content: '\F343'; }
  663. .dops-section-nav.has-pinned-items .dops-section-nav__mobile-header {
  664. padding-left: 50px; }
  665. .dops-section-nav.has-pinned-items .dops-section-nav__mobile-header:after {
  666. margin-right: 8px; }
  667. @media (min-width: 481px) {
  668. .dops-section-nav__mobile-header {
  669. display: none; } }
  670. .dops-section-nav__mobile-header-text {
  671. width: 0;
  672. -ms-flex: 1 0 auto;
  673. flex: 1 0 auto;
  674. overflow: hidden;
  675. white-space: nowrap;
  676. text-overflow: ellipsis; }
  677. .dops-section-nav__mobile-header-text small {
  678. margin-right: 5px;
  679. font-size: 11px;
  680. color: #87a6bc;
  681. font-weight: 600;
  682. text-transform: uppercase; }
  683. .dops-section-nav.has-pinned-items .dops-section-nav__mobile-header-text {
  684. width: auto;
  685. -ms-flex: 0 1 auto;
  686. flex: 0 1 auto; }
  687. .dops-section-nav__panel {
  688. box-sizing: border-box;
  689. width: 100%; }
  690. @media (max-width: 480px) {
  691. .dops-section-nav.is-open .dops-section-nav__panel {
  692. padding-bottom: 15px;
  693. border-top: solid 1px #c8d7e1;
  694. background: linear-gradient(to bottom, #f3f6f8 0%, white 4px); } }
  695. @media (min-width: 481px) {
  696. .dops-section-nav__panel {
  697. display: -ms-flexbox;
  698. display: flex;
  699. -ms-flex-align: center;
  700. align-items: center; }
  701. .dops-section-nav__panel:first-child {
  702. width: 0;
  703. -ms-flex: 1 0 auto;
  704. flex: 1 0 auto; } }
  705. .dops-section-nav-group {
  706. position: relative;
  707. margin-top: 16px;
  708. padding-top: 16px;
  709. border-top: solid 1px #c8d7e1; }
  710. .dops-section-nav-group:first-child {
  711. padding-top: 0;
  712. border-top: none; }
  713. @media (max-width: 480px) {
  714. .dops-section-nav-group {
  715. display: none; }
  716. .dops-section-nav.is-open .dops-section-nav-group {
  717. display: block; } }
  718. @media (min-width: 481px) {
  719. .dops-section-nav-group {
  720. margin-top: 0;
  721. padding-top: 0;
  722. border-top: none; }
  723. .dops-section-nav-group:first-child {
  724. display: -ms-flexbox;
  725. display: flex;
  726. width: 0;
  727. -ms-flex: 1 0 auto;
  728. flex: 1 0 auto; } }
  729. .dops-section-nav__button {
  730. width: 100%;
  731. margin-top: 24px; }
  732. .dops-section-nav__hr {
  733. background: #e9eff3; }
  734. .dops-section-nav-group__label {
  735. display: none;
  736. margin-bottom: 8px;
  737. padding: 0 15px;
  738. font-size: 11px;
  739. color: #87a6bc;
  740. font-weight: 600;
  741. text-transform: uppercase;
  742. line-height: 12px; }
  743. @media (max-width: 480px) {
  744. .has-siblings .dops-section-nav-group__label {
  745. display: block; } }
  746. .dops-section-nav-group__label-text {
  747. white-space: nowrap;
  748. text-overflow: ellipsis;
  749. overflow: hidden; }
  750. .dops-section-nav-tab .count {
  751. margin-right: 8px; }
  752. @media (min-width: 481px) {
  753. .dops-section-nav-tabs {
  754. width: 0;
  755. -ms-flex: 1 0 auto;
  756. flex: 1 0 auto; }
  757. .dops-section-nav-tabs.is-dropdown {
  758. position: relative;
  759. width: auto;
  760. -ms-flex: 0 1 auto;
  761. flex: 0 1 auto;
  762. margin: 8px; } }
  763. .dops-section-nav-tabs__list {
  764. margin: 0;
  765. list-style: none; }
  766. @media (min-width: 481px) {
  767. .dops-section-nav-tabs__list {
  768. display: -ms-flexbox;
  769. display: flex;
  770. width: 100%;
  771. overflow: hidden; }
  772. .is-dropdown .dops-section-nav-tabs__list {
  773. display: none; } }
  774. .dops-section-nav-tab {
  775. margin-bottom: 0; }
  776. @media (min-width: 481px) {
  777. .dops-section-nav-tab {
  778. width: auto;
  779. -ms-flex: none;
  780. flex: none;
  781. border-bottom: 2px solid transparent;
  782. border-top: none;
  783. text-align: center; }
  784. .dops-section-nav-tab.is-selected {
  785. border-bottom-color: #2e4453; } }
  786. .dops-section-nav-tab__link,
  787. .dops-section-nav-tab__text {
  788. overflow: hidden;
  789. white-space: nowrap;
  790. text-overflow: ellipsis; }
  791. .dops-section-nav-tab__link {
  792. display: -ms-flexbox;
  793. display: flex;
  794. -ms-flex-align: center;
  795. align-items: center;
  796. box-sizing: border-box;
  797. padding: 15px;
  798. width: 100%;
  799. font-size: 14px;
  800. font-weight: 600;
  801. line-height: 18px;
  802. color: #2e4453;
  803. cursor: pointer; }
  804. .dops-section-nav-tab__link:visited {
  805. color: #2e4453; }
  806. .dops-section-nav-tab__link[disabled],
  807. .notouch .dops-section-nav-tab__link[disabled]:hover {
  808. color: #e9eff3;
  809. cursor: default; }
  810. .is-selected .dops-section-nav-tab__link {
  811. color: white;
  812. background-color: #00aadc; }
  813. .dops-section-nav-tab__link:focus {
  814. outline: none;
  815. box-shadow: none; }
  816. .dops-accessible-focus .dops-section-nav-tab__link:focus {
  817. outline: solid #87a6bc 1px; }
  818. .is-external .dops-section-nav-tab__link:after {
  819. font-size: 18px;
  820. padding-right: 2px; }
  821. .notouch .dops-section-nav-tab__link:hover {
  822. color: #00aadc; }
  823. .notouch .is-selected .dops-section-nav-tab__link:hover {
  824. color: white; }
  825. @media (min-width: 481px) {
  826. .dops-section-nav-tab__link {
  827. display: block;
  828. width: auto;
  829. padding: 16px 16px 14px 16px;
  830. color: #0087be;
  831. font-weight: 400; }
  832. .dops-section-nav-tab__link:visited {
  833. color: #0087be; }
  834. .is-selected .dops-section-nav-tab__link {
  835. color: #2e4453;
  836. background-color: transparent; }
  837. .is-selected .dops-section-nav-tab__link:after {
  838. display: none; }
  839. .notouch .is-selected .dops-section-nav-tab__link:hover {
  840. color: #2e4453; } }
  841. .dops-section-nav-tab__text {
  842. display: block;
  843. -ms-flex: 1 0 auto;
  844. flex: 1 0 auto;
  845. width: 0;
  846. color: inherit; }
  847. @media (min-width: 481px) {
  848. .dops-section-nav-tab__text {
  849. display: inline;
  850. -ms-flex: none;
  851. flex: none;
  852. width: auto; } }
  853. .dops-section-nav-tabs__dropdown {
  854. position: relative;
  855. z-index: 3;
  856. width: 100%; }
  857. .dops-section-nav-tabs__dropdown.is-open {
  858. z-index: 4; }
  859. .dops-section-nav-tabs__dropdown .dops-select-dropdown__container {
  860. position: static; }
  861. .dops-section-nav__segmented .dops-segmented-control {
  862. margin: 0 15px; }
  863. .dops-section-nav__segmented .dops-segmented-control__link {
  864. padding: 3px 16px 5px; }
  865. @media (max-width: 480px) {
  866. .dops-section-nav .dops-search.is-pinned {
  867. height: 46px; } }
  868. .dops-text-input.dops-text-input {
  869. box-sizing: border-box;
  870. margin: 0;
  871. padding: 7px 14px;
  872. width: 100%;
  873. color: #2e4453;
  874. font-size: 16px;
  875. line-height: 1.5;
  876. border: 1px solid #c8d7e1;
  877. background-color: white;
  878. transition: all .15s ease-in-out;
  879. box-shadow: none; }
  880. .dops-text-input.dops-text-input:-ms-input-placeholder {
  881. color: #87a6bc; }
  882. .dops-text-input.dops-text-input::placeholder {
  883. color: #87a6bc; }
  884. .dops-text-input.dops-text-input:hover {
  885. border-color: #a8bece; }
  886. .dops-text-input.dops-text-input:focus {
  887. border-color: #0087be;
  888. outline: none;
  889. box-shadow: 0 0 0 2px #78dcfa; }
  890. .dops-text-input.dops-text-input:focus::-ms-clear {
  891. display: none; }
  892. .dops-text-input.dops-text-input:disabled {
  893. background: #f3f6f8;
  894. border-color: #e9eff3;
  895. color: #a8bece;
  896. -webkit-text-fill-color: #a8bece; }
  897. .dops-text-input.dops-text-input:disabled:hover {
  898. cursor: default; }
  899. .dops-text-input.dops-text-input:disabled:-ms-input-placeholder {
  900. color: #a8bece; }
  901. .dops-text-input.dops-text-input:disabled::placeholder {
  902. color: #a8bece; }
  903. .dops-text-input.dops-text-input {
  904. -webkit-appearance: none; }
  905. .dops-text-input.dops-text-input.is-valid {
  906. border-color: #4ab866; }
  907. .dops-text-input.dops-text-input.is-valid:hover {
  908. border-color: #3a9551; }
  909. .dops-text-input.dops-text-input.is-error {
  910. border-color: #d94f4f; }
  911. .dops-text-input.dops-text-input.is-error:hover {
  912. border-color: #c92c2c; }
  913. .dops-text-input.dops-text-input:focus.is-valid {
  914. box-shadow: 0 0 0 2px #caead2; }
  915. .dops-text-input.dops-text-input:focus.is-valid:hover {
  916. box-shadow: 0 0 0 2px #a6dcb3; }
  917. .dops-text-input.dops-text-input:focus.is-error {
  918. box-shadow: 0 0 0 2px #f9e2e2; }
  919. .dops-text-input.dops-text-input:focus.is-error:hover {
  920. box-shadow: 0 0 0 2px #f0b8b8; }
  921. /**
  922. * "popover" theme for `component/tip`.
  923. */
  924. .dops-popover {
  925. font-size: 11px;
  926. z-index: 1000;
  927. position: absolute;
  928. top: 0;
  929. left: 0 ;
  930. right: auto ; }
  931. .dops-popover .dops-popover__inner {
  932. background-color: white;
  933. border: 1px solid #c8d7e1;
  934. border-radius: 4px;
  935. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);
  936. text-align: center;
  937. position: relative; }
  938. .dops-popover .dops-popover__arrow {
  939. border: 10px dashed #c8d7e1;
  940. height: 0;
  941. line-height: 0;
  942. position: absolute;
  943. width: 0;
  944. z-index: 1; }
  945. .dops-popover.fade {
  946. transition: opacity 100ms; }
  947. .dops-popover.is-top .dops-popover__arrow,
  948. .dops-popover.is-top-left .dops-popover__arrow,
  949. .dops-popover.is-top-right .dops-popover__arrow {
  950. bottom: 0 ;
  951. left: 50% ;
  952. margin-left: -10px;
  953. border-top-style: solid;
  954. border-bottom: none;
  955. border-left-color: transparent;
  956. border-right-color: transparent; }
  957. .dops-popover.is-top .dops-popover__arrow::before,
  958. .dops-popover.is-top-left .dops-popover__arrow::before,
  959. .dops-popover.is-top-right .dops-popover__arrow::before {
  960. bottom: 2px ;
  961. border: 10px solid white;
  962. content: " ";
  963. position: absolute;
  964. left: 50% ;
  965. margin-left: -10px;
  966. border-top-style: solid;
  967. border-bottom: none;
  968. border-left-color: transparent;
  969. border-right-color: transparent; }
  970. .dops-popover.is-bottom .dops-popover__arrow,
  971. .dops-popover.is-bottom-left .dops-popover__arrow,
  972. .dops-popover.is-bottom-right .dops-popover__arrow {
  973. top: 0 ;
  974. left: 50% ;
  975. margin-left: -10px;
  976. border-bottom-style: solid;
  977. border-top: none;
  978. border-left-color: transparent;
  979. border-right-color: transparent; }
  980. .dops-popover.is-bottom .dops-popover__arrow::before,
  981. .dops-popover.is-bottom-left .dops-popover__arrow::before,
  982. .dops-popover.is-bottom-right .dops-popover__arrow::before {
  983. top: 2px ;
  984. border: 10px solid white;
  985. content: " ";
  986. position: absolute;
  987. left: 50% ;
  988. margin-left: -10px;
  989. border-bottom-style: solid;
  990. border-top: none;
  991. border-left-color: transparent;
  992. border-right-color: transparent; }
  993. .dops-popover.is-left .dops-popover__arrow,
  994. .dops-popover.is-left-top .dops-popover__arrow,
  995. .dops-popover.is-left-bottom .dops-popover__arrow {
  996. right: 0 ;
  997. top: 50% ;
  998. margin-top: -10px;
  999. border-left-style: solid;
  1000. border-right: none;
  1001. border-top-color: transparent;
  1002. border-bottom-color: transparent; }
  1003. .dops-popover.is-left .dops-popover__arrow::before,
  1004. .dops-popover.is-left-top .dops-popover__arrow::before,
  1005. .dops-popover.is-left-bottom .dops-popover__arrow::before {
  1006. right: 2px ;
  1007. border: 10px solid white;
  1008. content: " ";
  1009. position: absolute;
  1010. top: 50% ;
  1011. margin-top: -10px;
  1012. border-left-style: solid;
  1013. border-right: none;
  1014. border-top-color: transparent;
  1015. border-bottom-color: transparent; }
  1016. .dops-popover.is-right .dops-popover__arrow,
  1017. .dops-popover.is-right-top .dops-popover__arrow,
  1018. .dops-popover.is-right-bottom .dops-popover__arrow {
  1019. left: 0 ;
  1020. top: 50% ;
  1021. margin-top: -10px;
  1022. border-right-style: solid;
  1023. border-left: none;
  1024. border-top-color: transparent;
  1025. border-bottom-color: transparent; }
  1026. .dops-popover.is-right .dops-popover__arrow::before,
  1027. .dops-popover.is-right-top .dops-popover__arrow::before,
  1028. .dops-popover.is-right-bottom .dops-popover__arrow::before {
  1029. left: 2px ;
  1030. border: 10px solid white;
  1031. content: " ";
  1032. position: absolute;
  1033. top: 50% ;
  1034. margin-top: -10px;
  1035. border-right-style: solid;
  1036. border-left: none;
  1037. border-top-color: transparent;
  1038. border-bottom-color: transparent; }
  1039. .dops-popover.is-top-left, .dops-popover.is-bottom-left, .dops-popover.is-top-right, .dops-popover.is-bottom-right {
  1040. padding-left: 0;
  1041. padding-right: 0; }
  1042. .dops-popover.is-top-left .dops-popover__arrow,
  1043. .dops-popover.is-bottom-left .dops-popover__arrow {
  1044. left: auto ;
  1045. right: 5px ; }
  1046. .dops-popover.is-top-right .dops-popover__arrow,
  1047. .dops-popover.is-bottom-right .dops-popover__arrow {
  1048. left: 15px ; }
  1049. .dops-popover.is-top .dops-popover__inner,
  1050. .dops-popover.is-top-left .dops-popover__inner,
  1051. .dops-popover.is-top-right .dops-popover__inner {
  1052. top: -10px ; }
  1053. .dops-popover.is-left .dops-popover__inner,
  1054. .dops-popover.is-top-right .dops-popover__inner,
  1055. .dops-popover.is-bottom-right .dops-popover__inner {
  1056. left: -10px ; }
  1057. .dops-popover.is-bottom .dops-popover__inner,
  1058. .dops-popover.is-bottom-left .dops-popover__inner,
  1059. .dops-popover.is-bottom-right .dops-popover__inner {
  1060. top: 10px ; }
  1061. .dops-popover.is-right .dops-popover__inner,
  1062. .dops-popover.is-top-left .dops-popover__inner,
  1063. .dops-popover.is-bottom-left .dops-popover__inner {
  1064. left: 10px ; }
  1065. .dops-popover.is-dialog-visible {
  1066. z-index: 100300;
  1067. /* Above .dialog */ }
  1068. .dops-popover__menu {
  1069. display: -ms-flexbox;
  1070. display: flex;
  1071. -ms-flex-direction: column;
  1072. flex-direction: column;
  1073. min-width: 200px; }
  1074. .dops-popover__menu-item {
  1075. position: relative;
  1076. background: inherit;
  1077. border: none;
  1078. border-radius: 0;
  1079. color: #2e4453;
  1080. cursor: pointer;
  1081. display: block;
  1082. font-size: 14px;
  1083. font-weight: 400;
  1084. margin: 0;
  1085. padding: 8px 16px;
  1086. text-align: right;
  1087. transition: all 0.05s ease-in-out; }
  1088. .dops-popover__menu-item:first-child {
  1089. margin-top: 5px; }
  1090. .dops-popover__menu-item:hover, .dops-popover__menu-item:focus {
  1091. background-color: #00aadc;
  1092. border: 0;
  1093. box-shadow: none;
  1094. color: white; }
  1095. .dops-popover__menu-item:hover .gridicon, .dops-popover__menu-item:focus .gridicon {
  1096. color: white; }
  1097. .dops-popover__menu-item[disabled]:hover, .dops-popover__menu-item[disabled]:focus {
  1098. background: transparent;
  1099. cursor: default; }
  1100. .dops-popover__menu-item:last-child {
  1101. margin-bottom: 5px; }
  1102. .dops-popover__menu-item::-moz-focus-inner {
  1103. border: 0; }
  1104. .dops-popover__menu-item.has-icon {
  1105. padding-right: 42px; }
  1106. .dops-popover__menu-item .gridicon {
  1107. color: #a8bece;
  1108. vertical-align: bottom;
  1109. margin-left: 8px; }
  1110. .dops-popover__hr {
  1111. margin: 8px 0;
  1112. background: #e9eff3; }
  1113. .form-toggle[type="checkbox"] {
  1114. display: none; }
  1115. .form-toggle__switch {
  1116. -ms-flex: none;
  1117. flex: none;
  1118. position: relative;
  1119. display: inline-block;
  1120. border-radius: 12px;
  1121. box-sizing: border-box;
  1122. padding: 2px;
  1123. width: 40px;
  1124. height: 24px;
  1125. vertical-align: middle;
  1126. outline: 0;
  1127. cursor: pointer;
  1128. transition: all .4s ease, box-shadow 0s; }
  1129. .form-toggle__switch:before, .form-toggle__switch:after {
  1130. position: relative;
  1131. display: block;
  1132. content: "";
  1133. width: 20px;
  1134. height: 20px; }
  1135. .form-toggle__switch:after {
  1136. right: 0;
  1137. border-radius: 50%;
  1138. background: white;
  1139. transition: all .2s ease; }
  1140. .form-toggle__switch:before {
  1141. display: none; }
  1142. .dops-accessible-focus .form-toggle__switch:focus {
  1143. box-shadow: 0 0 0 2px #00aadc; }
  1144. .form-toggle__label {
  1145. display: -ms-flexbox;
  1146. display: flex;
  1147. cursor: pointer; }
  1148. .is-disabled .form-toggle__label {
  1149. cursor: default; }
  1150. .form-toggle__label .form-toggle__label-content {
  1151. -ms-flex: 0 1 100%;
  1152. flex: 0 1 100%;
  1153. margin-right: 12px; }
  1154. .dops-accessible-focus .form-toggle:focus + .form-toggle__label .form-toggle__switch {
  1155. box-shadow: 0 0 0 2px #00aadc; }
  1156. .dops-accessible-focus .form-toggle:focus:checked + .form-toggle__label .form-toggle__switch {
  1157. box-shadow: 0 0 0 2px #78dcfa; }
  1158. .form-toggle + .form-toggle__label .form-toggle__switch {
  1159. background: #a8bece; }
  1160. .form-toggle:not(:disabled) + .form-toggle__label:hover .form-toggle__switch {
  1161. background: #c8d7e1; }
  1162. .form-toggle:checked + .form-toggle__label .form-toggle__switch {
  1163. background: #00aadc; }
  1164. .form-toggle:checked + .form-toggle__label .form-toggle__switch:after {
  1165. right: 16px; }
  1166. .form-toggle:checked:not(:disabled) + .form-toggle__label:hover .form-toggle__switch {
  1167. background: #78dcfa; }
  1168. .form-toggle:disabled + label.form-toggle__label span.form-toggle__switch {
  1169. opacity: 0.25;
  1170. cursor: default; }
  1171. .form-toggle.is-toggling + .form-toggle__label .form-toggle__switch {
  1172. background: #00aadc; }
  1173. .form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch {
  1174. background: #c8d7e1; }
  1175. .form-toggle.is-compact + .form-toggle__label .form-toggle__switch {
  1176. border-radius: 8px;
  1177. width: 24px;
  1178. height: 16px; }
  1179. .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:before, .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:after {
  1180. width: 12px;
  1181. height: 12px; }
  1182. .form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch:after {
  1183. right: 8px; }
  1184. #jp-plugin-container {
  1185. min-height: 100vh; }
  1186. /* Card */
  1187. .dops-card {
  1188. display: block;
  1189. position: relative;
  1190. margin: 0 auto 10px auto;
  1191. padding: 16px;
  1192. box-sizing: border-box;
  1193. background: white;
  1194. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
  1195. .dops-card:after {
  1196. content: ".";
  1197. display: block;
  1198. height: 0;
  1199. clear: both;
  1200. visibility: hidden; }
  1201. @media (min-width: 481px) {
  1202. .dops-card {
  1203. margin-bottom: 16px;
  1204. padding: 24px; } }
  1205. .dops-card.is-compact {
  1206. margin-bottom: 1px; }
  1207. @media (min-width: 481px) {
  1208. .dops-card.is-compact {
  1209. margin-bottom: 1px;
  1210. padding: 16px 24px; } }
  1211. .dops-card.is-card-link {
  1212. padding-left: 48px; }
  1213. .dops-card__link-indicator {
  1214. color: #c8d7e1;
  1215. display: block;
  1216. height: 100%;
  1217. position: absolute;
  1218. top: 0;
  1219. left: 16px; }
  1220. a.dops-card:hover .dops-card__link-indicator {
  1221. color: #a8bece; }
  1222. a.dops-card:focus {
  1223. outline: 0; }
  1224. a.dops-card:focus .dops-card__link-indicator {
  1225. color: tint(#00aadc, 20%); }
  1226. .dops-section-header.dops-card {
  1227. display: -ms-flexbox;
  1228. display: flex;
  1229. -ms-flex-wrap: wrap;
  1230. flex-wrap: wrap;
  1231. max-width: 100%;
  1232. padding-top: 0.6875rem;
  1233. padding-bottom: 0.6875rem;
  1234. position: relative; }
  1235. .dops-section-header.dops-card:after {
  1236. content: ''; }
  1237. .dops-section-header__label {
  1238. display: -ms-flexbox;
  1239. display: flex;
  1240. -ms-flex-align: center;
  1241. align-items: center;
  1242. -ms-flex-positive: 1;
  1243. flex-grow: 1;
  1244. min-width: 0;
  1245. line-height: 1.75rem;
  1246. position: relative;
  1247. color: #2e4453;
  1248. font-size: 0.875rem; }
  1249. .dops-section-header__label .dops-count {
  1250. margin-right: 0.5rem; }
  1251. .dops-section-header__label-text {
  1252. position: relative;
  1253. margin-left: 0.5rem;
  1254. white-space: nowrap;
  1255. overflow: hidden;
  1256. width: 100%;
  1257. padding-left: 0.5rem;
  1258. min-width: 0; }
  1259. .dops-section-header__label-text:before {
  1260. content: '';
  1261. display: block;
  1262. position: absolute;
  1263. -webkit-touch-callout: none;
  1264. -webkit-user-select: none;
  1265. -moz-user-select: none;
  1266. -ms-user-select: none;
  1267. user-select: none;
  1268. pointer-events: none;
  1269. background: linear-gradient(to left, rgba(255, 255, 255, 0), white 90%);
  1270. top: 0px;
  1271. bottom: 0px;
  1272. left: 0px;
  1273. right: auto;
  1274. width: 8px;
  1275. height: auto; }
  1276. .has-card-badge .dops-section-header__label-text {
  1277. width: auto; }
  1278. .dops-section-header__actions {
  1279. -ms-flex-positive: 0;
  1280. flex-grow: 0;
  1281. position: relative; }
  1282. .dops-section-header__actions:after {
  1283. content: ".";
  1284. display: block;
  1285. height: 0;
  1286. clear: both;
  1287. visibility: hidden; }
  1288. .section-header__actions .button {
  1289. float: right;
  1290. margin-left: 0.5rem; }
  1291. .section-header__actions .button:last-child {
  1292. margin-left: 0; }
  1293. #jp-plugin-container {
  1294. min-height: 100vh; }
  1295. @keyframes appear {
  1296. 0% {
  1297. opacity: 0; }
  1298. 100% {
  1299. opacity: 1; } }
  1300. .dops-notice {
  1301. display: -ms-flexbox;
  1302. display: flex;
  1303. position: relative;
  1304. width: 100%;
  1305. margin-bottom: 24px;
  1306. box-sizing: border-box;
  1307. animation: appear .3s ease-in-out;
  1308. background: #2e4453;
  1309. color: white;
  1310. border-radius: 3px;
  1311. line-height: 1.5; }
  1312. .dops-notice.is-success .dops-notice__icon-wrapper {
  1313. background: #4ab866; }
  1314. .dops-notice.is-warning .dops-notice__icon-wrapper {
  1315. background: #f0b849; }
  1316. .dops-notice.is-error .dops-notice__icon-wrapper {
  1317. background: #d94f4f; }
  1318. .dops-notice.is-info .dops-notice__icon-wrapper {
  1319. background: #00aadc; }
  1320. .dops-notice .dops-notice__dismiss {
  1321. overflow: hidden; }
  1322. .dops-notice.is-success .dops-notice__dismiss, .dops-notice.is-error .dops-notice__dismiss, .dops-notice.is-warning .dops-notice__dismiss, .dops-notice.is-info .dops-notice__dismiss {
  1323. overflow: hidden; }
  1324. .dops-notice__icon-wrapper {
  1325. background: #537994;
  1326. color: white;
  1327. display: -ms-flexbox;
  1328. display: flex;
  1329. -ms-flex-align: baseline;
  1330. align-items: baseline;
  1331. width: 47px;
  1332. -ms-flex-pack: center;
  1333. justify-content: center;
  1334. border-radius: 0 3px 3px 0;
  1335. -ms-flex-negative: 0;
  1336. flex-shrink: 0;
  1337. -ms-flex-item-align: stretch;
  1338. align-self: stretch; }
  1339. .dops-notice__icon-wrapper .gridicon {
  1340. margin-top: 10px; }
  1341. @media (min-width: 481px) {
  1342. .dops-notice__icon-wrapper .gridicon {
  1343. margin-top: 12px; } }
  1344. .dops-notice__content {
  1345. padding: 13px;
  1346. font-size: 12px;
  1347. -ms-flex-positive: 1;
  1348. flex-grow: 1; }
  1349. @media (min-width: 481px) {
  1350. .dops-notice__content {
  1351. font-size: 14px; } }
  1352. .dops-notice__text a.dops-notice__text-no-underline {
  1353. text-decoration: none; }
  1354. .dops-notice__text a,
  1355. .dops-notice__text a:visited {
  1356. text-decoration: underline;
  1357. color: white; }
  1358. .dops-notice__text a:hover,
  1359. .dops-notice__text a:visited:hover {
  1360. color: white;
  1361. text-decoration: none; }
  1362. .dops-notice__text ul {
  1363. margin-bottom: 0;
  1364. margin-right: 0; }
  1365. .dops-notice__text li {
  1366. margin-right: 2em;
  1367. margin-top: 0.5em; }
  1368. .dops-notice__text p {
  1369. margin-bottom: 0;
  1370. margin-top: 0.5em; }
  1371. .dops-notice__text p:first-child {
  1372. margin-top: 0; }
  1373. .dops-notice__button {
  1374. cursor: pointer;
  1375. margin-right: 0.428em; }
  1376. .dops-notice__dismiss {
  1377. -ms-flex-negative: 0;
  1378. flex-shrink: 0;
  1379. padding: 12px;
  1380. cursor: pointer;
  1381. padding-bottom: 0; }
  1382. .dops-notice__dismiss .gridicon {
  1383. width: 18px;
  1384. height: 18px; }
  1385. @media (min-width: 481px) {
  1386. .dops-notice__dismiss {
  1387. padding: 11px;
  1388. padding-bottom: 0; }
  1389. .dops-notice__dismiss .gridicon {
  1390. width: 24px;
  1391. height: 24px; } }
  1392. .dops-notice .dops-notice__dismiss {
  1393. color: #a8bece; }
  1394. .dops-notice .dops-notice__dismiss:hover, .dops-notice .dops-notice__dismiss:focus {
  1395. color: white; }
  1396. a.dops-notice__action {
  1397. cursor: pointer;
  1398. font-size: 12px;
  1399. font-weight: 400;
  1400. text-decoration: none;
  1401. white-space: nowrap;
  1402. color: #a8bece;
  1403. padding: 13px;
  1404. display: -ms-flexbox;
  1405. display: flex;
  1406. -ms-flex-align: center;
  1407. align-items: center; }
  1408. @media (min-width: 481px) {
  1409. a.dops-notice__action {
  1410. -ms-flex-negative: 1;
  1411. flex-shrink: 1;
  1412. -ms-flex-positive: 0;
  1413. flex-grow: 0;
  1414. -ms-flex-align: center;
  1415. align-items: center;
  1416. border-radius: 0;
  1417. font-size: 14px;
  1418. margin: 0 auto 0 0;
  1419. padding: 13px 16px; }
  1420. a.dops-notice__action .gridicon {
  1421. width: 24px;
  1422. height: 24px; } }
  1423. a.dops-notice__action:visited {
  1424. color: #a8bece; }
  1425. a.dops-notice__action:hover {
  1426. color: white; }
  1427. a.dops-notice__action .gridicon {
  1428. margin-right: 8px;
  1429. opacity: 0.7;
  1430. width: 18px;
  1431. height: 18px; }
  1432. .dops-notice.is-compact {
  1433. display: -ms-inline-flexbox;
  1434. display: inline-flex;
  1435. -ms-flex-wrap: nowrap;
  1436. flex-wrap: nowrap;
  1437. -ms-flex-direction: row;
  1438. flex-direction: row;
  1439. width: auto;
  1440. border-radius: 3px;
  1441. min-height: 20px;
  1442. margin: 0;
  1443. padding: 0;
  1444. text-decoration: none;
  1445. text-transform: none;
  1446. vertical-align: middle;
  1447. line-height: 1.5; }
  1448. .dops-notice.is-compact .dops-notice__content {
  1449. font-size: 12px;
  1450. padding: 6px 10px; }
  1451. .dops-notice.is-compact .dops-notice__icon-wrapper {
  1452. width: 28px; }
  1453. .dops-notice.is-compact .dops-notice__icon-wrapper .dops-notice__icon {
  1454. width: 18px;
  1455. height: 18px;
  1456. margin: 0; }
  1457. .dops-notice.is-compact .dops-notice__icon-wrapper .gridicon {
  1458. margin-top: 6px; }
  1459. .dops-notice.is-compact .dops-notice__dismiss {
  1460. position: relative;
  1461. -ms-flex-item-align: center;
  1462. -ms-grid-row-align: center;
  1463. align-self: center;
  1464. -ms-flex: none;
  1465. flex: none;
  1466. margin: 0 0 0 8px;
  1467. padding: 0; }
  1468. .dops-notice.is-compact .dops-notice__dismiss .gridicon {
  1469. width: 18px;
  1470. height: 18px; }
  1471. .dops-notice.is-compact a.dops-notice__action {
  1472. background: transparent;
  1473. display: inline-block;
  1474. margin: 0;
  1475. font-size: 12px;
  1476. -ms-flex-item-align: center;
  1477. -ms-grid-row-align: center;
  1478. align-self: center;
  1479. margin-right: 16px;
  1480. padding: 0 10px; }
  1481. .dops-notice.is-compact a.dops-notice__action:hover, .dops-notice.is-compact a.dops-notice__action:active, .dops-notice.is-compact a.dops-notice__action:focus {
  1482. background: transparent; }
  1483. .dops-notice.is-compact a.dops-notice__action .gridicon {
  1484. margin-right: 8px;
  1485. width: 14px;
  1486. height: 14px;
  1487. vertical-align: sub;
  1488. opacity: 1; }
  1489. .dops-plan-icon {
  1490. width: inherit;
  1491. height: inherit;
  1492. background-repeat: no-repeat; }
  1493. .dops-plan-icon__free .dops-plan-icon__free-0 {
  1494. fill: #78dcfa; }
  1495. .dops-plan-icon__free .dops-plan-icon__free-1 {
  1496. fill: white; }
  1497. .dops-plan-icon__free .dops-plan-icon__free-2 {
  1498. fill: #006a95; }
  1499. .dops-plan-icon__free .dops-plan-icon__free-3 {
  1500. fill: #0087be; }
  1501. .dops-plan-icon__free .dops-plan-icon__free-4 {
  1502. fill: #00a4e7; }
  1503. .dops-plan-icon__personal .dops-plan-icon__personal-0 {
  1504. fill: #f0b849; }
  1505. .dops-plan-icon__personal .dops-plan-icon__personal-1 {
  1506. fill: #87a6bc; }
  1507. .dops-plan-icon__personal .dops-plan-icon__personal-2 {
  1508. fill: #c8d7e1; }
  1509. .dops-plan-icon__personal .dops-plan-icon__personal-3 {
  1510. fill: white; }
  1511. .dops-plan-icon__personal .dops-plan-icon__personal-4 {
  1512. fill: #668eaa; }
  1513. .dops-plan-icon__personal .dops-plan-icon__personal-5 {
  1514. fill: #4f748e; }
  1515. .dops-plan-icon__premium .dops-plan-icon__premium-0 {
  1516. fill: #4ab866; }
  1517. .dops-plan-icon__premium .dops-plan-icon__premium-1 {
  1518. fill: #87a6bc; }
  1519. .dops-plan-icon__premium .dops-plan-icon__premium-2 {
  1520. fill: #4f748e; }
  1521. .dops-plan-icon__premium .dops-plan-icon__premium-3 {
  1522. fill: white; }
  1523. .dops-plan-icon__premium .dops-plan-icon__premium-4 {
  1524. fill: #c8d7e1; }
  1525. .dops-plan-icon__premium .dops-plan-icon__premium-5 {
  1526. fill: #4f748e; }
  1527. .dops-plan-icon__premium .dops-plan-icon__premium-6 {
  1528. fill: #3d596d; }
  1529. .dops-plan-icon__business .dops-plan-icon__business-0 {
  1530. fill: #855DA6; }
  1531. .dops-plan-icon__business .dops-plan-icon__business-1 {
  1532. fill: white; }
  1533. .dops-plan-icon__business .dops-plan-icon__business-2 {
  1534. fill: #e9eff3; }
  1535. .dops-plan-icon__business .dops-plan-icon__business-3 {
  1536. fill: #0087be; }
  1537. .dops-plan-icon__business .dops-plan-icon__business-4 {
  1538. fill: #005082; }
  1539. #jp-plugin-container {
  1540. min-height: 100vh; }
  1541. .dops-banner.dops-card {
  1542. border-right: 3px solid;
  1543. display: -ms-flexbox;
  1544. display: flex;
  1545. padding: 12px 12px 12px 6px;
  1546. position: relative;
  1547. z-index: 2;
  1548. border-right-color: #0087be; }
  1549. .dops-banner.dops-card.is-card-link {
  1550. padding: 12px 16px 12px 48px; }
  1551. .dops-banner.dops-card.is-dismissible {
  1552. padding-left: 48px; }
  1553. .dops-banner.dops-card .dops-banner__icon {
  1554. color: #0087be; }
  1555. .dops-banner.dops-card .dops-banner__icon-circle {
  1556. background-color: #0087be; }
  1557. .dops-banner.dops-card.is-upgrade-personal {
  1558. border-right-color: #f0b849; }
  1559. .dops-banner.dops-card.is-upgrade-personal .dops-banner__icon {
  1560. color: #f0b849; }
  1561. .dops-banner.dops-card.is-upgrade-personal .dops-banner__icon-circle {
  1562. background-color: #f0b849; }
  1563. .dops-banner.dops-card.is-upgrade-premium {
  1564. border-right-color: #4ab866; }
  1565. .dops-banner.dops-card.is-upgrade-premium .dops-banner__icon {
  1566. color: #4ab866; }
  1567. .dops-banner.dops-card.is-upgrade-premium .dops-banner__icon-circle {
  1568. background-color: #4ab866; }
  1569. .dops-banner.dops-card.is-upgrade-business {
  1570. border-right-color: #855DA6; }
  1571. .dops-banner.dops-card.is-upgrade-business .dops-banner__icon {
  1572. color: #855DA6; }
  1573. .dops-banner.dops-card.is-upgrade-business .dops-banner__icon-circle {
  1574. background-color: #855DA6; }
  1575. .dops-banner.dops-card .dops-card__link-indicator {
  1576. -ms-flex-align: center;
  1577. align-items: center;
  1578. color: #0087be;
  1579. display: -ms-flexbox;
  1580. display: flex; }
  1581. .dops-banner.dops-card:hover {
  1582. transition: all 100ms ease-in-out; }
  1583. .dops-banner.dops-card:hover.is-card-link {
  1584. box-shadow: 0 0 0 1px #87a6bc, 0 2px 4px #c8d7e1; }
  1585. .dops-banner.dops-card:hover .dops-card__link-indicator {
  1586. color: #005082; }
  1587. @media (min-width: 481px) {
  1588. .dops-banner.dops-card {
  1589. padding: 12px 16px; }
  1590. .dops-banner.dops-card.is-dismissible {
  1591. padding-left: 16px; } }
  1592. .dops-banner__icons {
  1593. display: -ms-flexbox;
  1594. display: flex; }
  1595. .dops-banner__icons .dops-banner__icon,
  1596. .dops-banner__icons .dops-banner__icon-circle {
  1597. border-radius: 50%;
  1598. -ms-flex-negative: 0;
  1599. flex-shrink: 0;
  1600. height: 24px;
  1601. margin-left: 16px;
  1602. margin-top: -2px;
  1603. text-align: center;
  1604. top: 4px;
  1605. width: 24px; }
  1606. .dops-banner__icons .dops-banner__icon {
  1607. -ms-flex-item-align: center;
  1608. -ms-grid-row-align: center;
  1609. align-self: center;
  1610. color: white;
  1611. display: block; }
  1612. .dops-banner__icons .dops-banner__icon-circle {
  1613. color: white;
  1614. display: none;
  1615. padding: 3px 3px 4px 4px; }
  1616. .dops-banner__icons .dops-banner__icon-circle .gridicon {
  1617. margin-bottom: -7px; }
  1618. @media (min-width: 481px) {
  1619. .dops-banner__icons {
  1620. -ms-flex-align: center;
  1621. align-items: center; }
  1622. .dops-banner__icons .dops-banner__icon {
  1623. display: none; }
  1624. .dops-banner__icons .dops-banner__icon-circle {
  1625. display: block; } }
  1626. .dops-banner__icon-plan {
  1627. display: -ms-flexbox;
  1628. display: flex;
  1629. margin-left: 16px; }
  1630. .dops-banner__icon-plan .dops-plan-icon {
  1631. height: 32px;
  1632. width: 32px; }
  1633. @media (min-width: 481px) {
  1634. .dops-banner__icon-plan {
  1635. -ms-flex-align: center;
  1636. align-items: center; } }
  1637. .dops-banner__content {
  1638. -ms-flex-align: center;
  1639. align-items: center;
  1640. display: -ms-flexbox;
  1641. display: flex;
  1642. -ms-flex-positive: 1;
  1643. flex-grow: 1;
  1644. -ms-flex-wrap: wrap;
  1645. flex-wrap: wrap; }
  1646. @media (min-width: 481px) {
  1647. .dops-banner__content {
  1648. -ms-flex-wrap: nowrap;
  1649. flex-wrap: nowrap; } }
  1650. .dops-banner__info {
  1651. -ms-flex-positive: 1;
  1652. flex-grow: 1;
  1653. line-height: 1.4;
  1654. width: 100%; }
  1655. .dops-banner__info .dops-banner__title,
  1656. .dops-banner__info .dops-banner__description,
  1657. .dops-banner__info .dops-banner__list {
  1658. color: #2e4453; }
  1659. .dops-banner__info .dops-banner__title {
  1660. font-size: 14px;
  1661. font-weight: 500; }
  1662. .dops-banner__info .dops-banner__description {
  1663. font-size: 12px;
  1664. margin-top: 3px; }
  1665. .dops-banner__info .dops-banner__list {
  1666. font-size: 12px;
  1667. list-style: none;
  1668. margin: 0; }
  1669. .dops-banner__info .dops-banner__list li {
  1670. margin: 6px 0; }
  1671. .dops-banner__info .dops-banner__list li .gridicon {
  1672. color: #87a6bc;
  1673. display: none; }
  1674. @media (min-width: 481px) {
  1675. .dops-banner__info {
  1676. width: auto; }
  1677. .dops-banner__info .dops-banner__list li .gridicon {
  1678. display: inline;
  1679. margin-left: 12px;
  1680. vertical-align: bottom; } }
  1681. .dops-banner__action {
  1682. -ms-flex-item-align: center;
  1683. -ms-grid-row-align: center;
  1684. align-self: center;
  1685. font-size: 12px;
  1686. margin: 8px 0 0 0;
  1687. text-align: right;
  1688. width: 100%; }
  1689. .dops-banner__action .dops-banner__prices {
  1690. display: -ms-flexbox;
  1691. display: flex;
  1692. -ms-flex-pack: start;
  1693. justify-content: flex-start; }
  1694. .dops-banner__action .dops-banner__prices .dops-plan-price {
  1695. margin-bottom: 0; }
  1696. .dops-banner__action .dops-banner__prices .dops-plan-price.is-discounted,
  1697. .dops-banner__action .dops-banner__prices .dops-plan-price.is-discounted .dops-plan-price__currency-symbol {
  1698. color: #2e4453; }
  1699. .has-call-to-action .dops-banner__action .dops-banner__prices .dops-plan-price {
  1700. margin-bottom: 8px; }
  1701. @media (min-width: 481px) {
  1702. .dops-banner__action {
  1703. margin: 0 8px 0 4px;
  1704. text-align: center;
  1705. width: auto; }
  1706. .is-dismissible .dops-banner__action {
  1707. margin-top: 40px; }
  1708. .dops-banner__action .dops-banner__prices {
  1709. -ms-flex-pack: end;
  1710. justify-content: flex-end;
  1711. text-align: left; } }
  1712. .module-overridden-banner.dops-banner.is-compact {
  1713. margin-bottom: 0; }
  1714. .module-overridden-banner.dops-banner .dops-banner__description a {
  1715. text-decoration: underline; }
  1716. .dops-info-popover-button {
  1717. background: transparent;
  1718. border: none;
  1719. color: #668eaa;
  1720. padding: 0; }
  1721. .dops-info-popover-button:hover {
  1722. color: #2e4453; }
  1723. .dops-info-popover-button:focus {
  1724. box-shadow: none; }
  1725. .dops-accessible-focus .dops-info-popover-button:focus {
  1726. outline: thin dotted; }
  1727. .dops-info-popover .gridicon {
  1728. cursor: pointer;
  1729. color: #b8cad7; }
  1730. .dops-info-popover .gridicon:hover {
  1731. color: #2e4453; }
  1732. .dops-info-popover.is_active .gridicon {
  1733. color: #2e4453; }
  1734. .dops-popover.dops-info-popover__tooltip .dops-popover__inner {
  1735. color: #4f748e;
  1736. font-size: 13px;
  1737. max-width: 220px;
  1738. padding: 16px;
  1739. text-align: right; }
  1740. .dops-external-link .gridicons-external {
  1741. color: currentColor;
  1742. margin-right: 0.5rem;
  1743. top: 0.125rem;
  1744. position: relative; }
  1745. #jp-plugin-container {
  1746. min-height: 100vh; }
  1747. .jp-support-info {
  1748. position: absolute;
  1749. top: 1.6875rem;
  1750. left: 1.5625rem;
  1751. z-index: 1; }
  1752. @media (max-width: 480px) {
  1753. .jp-support-info {
  1754. top: 1.25rem;
  1755. left: 1rem; } }
  1756. .jp-form-fieldset .jp-support-info {
  1757. top: 4px; }
  1758. .jp-support-info .dops-info-popover {
  1759. white-space: nowrap; }
  1760. .dops-popover .jp-support-info__privacy {
  1761. display: block;
  1762. margin-top: 0.875rem;
  1763. padding-top: 0.75rem;
  1764. border-top: 1px solid rgba(135, 166, 188, 0.5); }
  1765. @keyframes appear {
  1766. 0% {
  1767. opacity: 0; }
  1768. 100% {
  1769. opacity: 1; } }
  1770. .dops-foldable-card.dops-card {
  1771. position: relative;
  1772. transition: margin .15s linear;
  1773. padding: 0; }
  1774. .dops-foldable-card.dops-card:after {
  1775. content: ".";
  1776. display: block;
  1777. height: 0;
  1778. clear: both;
  1779. visibility: hidden; }
  1780. .dops-foldable-card.dops-card.is-expanded {
  1781. margin-bottom: 8px; }
  1782. .dops-foldable-card.dops-card .is-clickable {
  1783. cursor: pointer; }
  1784. .dops-foldable-card__header {
  1785. min-height: 64px;
  1786. width: 100%;
  1787. padding: 16px;
  1788. box-sizing: border-box;
  1789. display: -ms-flexbox;
  1790. display: flex;
  1791. -ms-flex-align: center;
  1792. align-items: center;
  1793. -ms-flex-pack: justify;
  1794. justify-content: space-between;
  1795. position: relative; }
  1796. .dops-foldable-card__header.has-border .dops-foldable-card__summary,
  1797. .dops-foldable-card__header.has-border .dops-foldable-card__summary_expanded {
  1798. margin-left: 48px; }
  1799. .dops-foldable-card__header.has-border .dops-foldable-card__expand {
  1800. border-right: 1px #f3f6f8 solid; }
  1801. .dops-foldable-card.is-compact .dops-foldable-card__header {
  1802. padding: 8px 16px;
  1803. min-height: 40px; }
  1804. .dops-foldable-card.is-expanded .dops-foldable-card__header {
  1805. margin-bottom: 0px;
  1806. height: inherit;
  1807. min-height: 64px; }
  1808. .dops-foldable-card.is-expanded.is-compact .dops-foldable-card__header {
  1809. min-height: 40px; }
  1810. .dops-foldable-card.is-disabled .dops-foldable-card__header {
  1811. opacity: 0.2; }
  1812. .dops-foldable-card__action {
  1813. position: absolute;
  1814. top: 0;
  1815. left: 0;
  1816. height: 100%;
  1817. background: none;
  1818. border: 0; }
  1819. .dops-foldable-card.is-expanded .dops-foldable-card__action {
  1820. height: 100%; }
  1821. .dops-foldable-card.is-disabled .dops-foldable-card__action {
  1822. cursor: default; }
  1823. .dops-accessible-focus .dops-foldable-card__action:focus {
  1824. outline: thin dotted; }
  1825. button.dops-foldable-card__action {
  1826. cursor: pointer;
  1827. outline: 0; }
  1828. .dops-foldable-card__main {
  1829. max-width: calc( 100% - 36px);
  1830. display: block;
  1831. -ms-flex-align: center;
  1832. align-items: center;
  1833. width: 100%;
  1834. margin-left: 5px; }
  1835. @media (max-width: 480px) {
  1836. .dops-foldable-card__main {
  1837. -ms-flex: 1 1;
  1838. flex: 1 1; } }
  1839. .dops-foldable-card__secondary {
  1840. display: -ms-flexbox;
  1841. display: flex;
  1842. -ms-flex-align: center;
  1843. align-items: center;
  1844. -ms-flex: 1 1;
  1845. flex: 1 1;
  1846. -ms-flex-pack: end;
  1847. justify-content: flex-end; }
  1848. .dops-foldable-card__expand {
  1849. width: 48px; }
  1850. .dops-foldable-card__expand .gridicon {
  1851. fill: #87a6bc;
  1852. display: -ms-flexbox;
  1853. display: flex;
  1854. -ms-flex-align: center;
  1855. align-items: center;
  1856. width: 100%;
  1857. vertical-align: middle;
  1858. transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in; }
  1859. .dops-foldable-card.is-expanded .dops-foldable-card__expand .gridicon {
  1860. transform: rotate(-180deg); }
  1861. .dops-foldable-card__expand .gridicon:hover {
  1862. fill: #87a6bc; }
  1863. .dops-foldable-card__expand:focus .gridicon, .dops-foldable-card__expand:hover .gridicon {
  1864. fill: #00aadc; }
  1865. .dops-foldable-card__header-text {
  1866. font-size: 1.125rem;
  1867. width: 100%; }
  1868. .dops-foldable-card__subheader {
  1869. margin-top: 0.125rem;
  1870. margin-bottom: 0.125rem;
  1871. font-size: 0.875rem;
  1872. color: #4f748e; }
  1873. .dops-foldable-card__content {
  1874. display: none; }
  1875. .dops-foldable-card.is-expanded .dops-foldable-card__content {
  1876. display: block;
  1877. padding: 16px;
  1878. border-top: 1px solid #f3f6f8; }
  1879. .dops-foldable-card.is-compact .dops-foldable-card.is-expanded .dops-foldable-card__content {
  1880. padding: 8px; }
  1881. .dops-foldable-card.is-expanded .dops-foldable-card__content p:first-child {
  1882. margin-top: 0; }
  1883. .dops-foldable-card.is-expanded .dops-foldable-card__content p:last-child {
  1884. margin-bottom: 0; }
  1885. .dops-foldable-card__summary,
  1886. .dops-foldable-card__summary_expanded {
  1887. margin-left: 40px;
  1888. color: #87a6bc;
  1889. font-size: 12px;
  1890. transition: opacity 0.2s linear;
  1891. display: inline-block; }
  1892. .dops-foldable-card.has-expanded-summary .dops-foldable-card__summary, .dops-foldable-card.has-expanded-summary
  1893. .dops-foldable-card__summary_expanded {
  1894. transition: none;
  1895. -ms-flex: 2;
  1896. flex: 2;
  1897. text-align: left; }
  1898. @media (max-width: 480px) {
  1899. .dops-foldable-card__summary,
  1900. .dops-foldable-card__summary_expanded {
  1901. display: none; } }
  1902. .dops-foldable-card__summary {
  1903. opacity: 1;
  1904. display: inline-block; }
  1905. .dops-foldable-card.is-expanded .dops-foldable-card__summary {
  1906. display: none; }
  1907. .has-expanded-summary .dops-foldable-card.is-expanded .dops-foldable-card__summary {
  1908. display: none; }
  1909. .dops-foldable-card__summary_expanded {
  1910. display: none; }
  1911. .dops-foldable-card.is-expanded .dops-foldable-card__summary_expanded {
  1912. display: inline-block; }
  1913. #jp-plugin-container {
  1914. min-height: 100vh; }
  1915. .form-input-validation {
  1916. color: #4ab866;
  1917. position: relative;
  1918. padding: 6px 34px 11px 24px;
  1919. border-radius: 1px;
  1920. box-sizing: border-box;
  1921. font-size: 14px;
  1922. animation: appear .3s ease-in-out; }
  1923. .form-input-validation.is-error {
  1924. color: #d94f4f; }
  1925. .form-input-validation.is-warning {
  1926. color: #f0b849; }
  1927. .form-input-validation .gridicon {
  1928. float: right;
  1929. margin-right: -34px; }
  1930. .dops-textarea {
  1931. box-sizing: border-box;
  1932. margin: 0;
  1933. padding: 0.4375rem 0.875rem;
  1934. min-height: 5.75rem;
  1935. width: 100%;
  1936. color: #2e4453;
  1937. font-size: 1rem;
  1938. line-height: 1.5;
  1939. border: 1px solid #c8d7e1;
  1940. background-color: white;
  1941. transition: all .15s ease-in-out;
  1942. box-shadow: none; }
  1943. .dops-textarea:-ms-input-placeholder {
  1944. color: #87a6bc; }
  1945. .dops-textarea::placeholder {
  1946. color: #87a6bc; }
  1947. .dops-textarea:hover {
  1948. border-color: #a8bece; }
  1949. .dops-textarea:focus {
  1950. border-color: #0087be;
  1951. outline: none;
  1952. box-shadow: 0 0 0 2px #78dcfa; }
  1953. .dops-textarea:focus::-ms-clear {
  1954. display: none; }
  1955. .dops-textarea:disabled {
  1956. background: #f3f6f8;
  1957. border-color: #e9eff3;
  1958. color: #a8bece;
  1959. -webkit-text-fill-color: #a8bece; }
  1960. .dops-textarea:disabled:hover {
  1961. cursor: default; }
  1962. .dops-textarea:disabled:-ms-input-placeholder {
  1963. color: #a8bece; }
  1964. .dops-textarea:disabled::placeholder {
  1965. color: #a8bece; }
  1966. .dops-clipboard-button-input {
  1967. position: relative;
  1968. display: block; }
  1969. .dops-clipboard-button-input .dops-clipboard-button {
  1970. position: absolute;
  1971. top: 50%;
  1972. left: 4px;
  1973. transform: translateY(-50%);
  1974. overflow: visible; }
  1975. .dops-clipboard-button-input .dops-clipboard-button:not(:disabled)::before {
  1976. content: '';
  1977. display: block;
  1978. position: absolute;
  1979. -webkit-touch-callout: none;
  1980. -webkit-user-select: none;
  1981. -moz-user-select: none;
  1982. -ms-user-select: none;
  1983. user-select: none;
  1984. pointer-events: none;
  1985. background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 90%);
  1986. top: 0px;
  1987. bottom: 0px;
  1988. left: 0px;
  1989. right: auto;
  1990. width: 16px;
  1991. height: auto;
  1992. left: calc( 100% + 1px); }
  1993. .dops-clipboard-button-input .dops-clipboard-button:focus::before {
  1994. left: calc( 100% + 3px); }
  1995. #jp-plugin-container {
  1996. min-height: 100vh; }
  1997. /* This hack is used to prevent the body from scrolling when the modal is showing */
  1998. body.dops-modal-showing {
  1999. overflow: hidden; }
  2000. .dops-modal-wrapper {
  2001. position: fixed;
  2002. top: 0;
  2003. left: 0;
  2004. bottom: 0;
  2005. right: 0;
  2006. z-index: 1050;
  2007. display: block;
  2008. overflow-x: hidden;
  2009. overflow-y: auto;
  2010. text-align: center;
  2011. -webkit-overflow-scrolling: touch;
  2012. outline: 0;
  2013. transition: opacity .15s linear;
  2014. background-color: rgba(0, 0, 0, 0.5);
  2015. cursor: pointer; }
  2016. .dops-modal-wrapper:before {
  2017. content: '';
  2018. display: inline-block;
  2019. height: 100%;
  2020. vertical-align: middle; }
  2021. .dops-modal-wrapper .dops-modal {
  2022. position: relative;
  2023. display: inline-block;
  2024. margin: 0 0;
  2025. width: 100%;
  2026. max-width: 550px;
  2027. vertical-align: middle;
  2028. text-align: right;
  2029. background-color: #fff;
  2030. transition: all 0.5s;
  2031. z-index: 100;
  2032. clear: both;
  2033. cursor: default; }
  2034. @media (min-width: 481px) {
  2035. .dops-modal-wrapper .dops-modal {
  2036. margin: 0 auto;
  2037. height: auto;
  2038. border-radius: 5px;
  2039. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } }
  2040. @charset "UTF-8";
  2041. /*
  2042. The MIT License (MIT)
  2043. Copyright © 2011–2015 thoughtbot, inc.
  2044. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  2045. documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
  2046. rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
  2047. persons to whom the Software is furnished to do so, subject to the following conditions:
  2048. The above copyright notice and this permission notice shall be included in all copies or substantial
  2049. portions of the Software.
  2050. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
  2051. WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  2052. COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
  2053. OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  2054. https://github.com/thoughtbot/bourbon
  2055. */
  2056. .jp-jetpack-connect__button {
  2057. background: #00BE28;
  2058. border-color: #00a523;
  2059. color: white; }
  2060. .jp-jetpack-connect__button:hover, .jp-jetpack-connect__button:focus {
  2061. background: #00a523;
  2062. border-color: #008b1d;
  2063. color: white; }
  2064. .dops-tooltip.dops-popover .dops-popover__arrow {
  2065. border-width: 6px; }
  2066. .dops-tooltip.dops-popover.is-bottom-right .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow {
  2067. border-bottom-color: #3d596d;
  2068. top: 4px;
  2069. left: 10px; }
  2070. .dops-tooltip.dops-popover.is-bottom-right .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-bottom-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow::before {
  2071. display: none; }
  2072. .dops-tooltip.dops-popover.is-bottom-right.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-error .dops-popover__arrow {
  2073. border-bottom-color: #d94f4f; }
  2074. .dops-tooltip.dops-popover.is-bottom-right.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-warning .dops-popover__arrow {
  2075. border-bottom-color: #f0b849; }
  2076. .dops-tooltip.dops-popover.is-bottom-right.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-success .dops-popover__arrow {
  2077. border-bottom-color: #4ab866; }
  2078. .dops-tooltip.dops-popover.is-top .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right .dops-popover__arrow {
  2079. border-top-color: #3d596d;
  2080. bottom: 4px;
  2081. left: 10px; }
  2082. .dops-tooltip.dops-popover.is-top .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-top-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-top-right .dops-popover__arrow::before {
  2083. display: none; }
  2084. .dops-tooltip.dops-popover.is-top.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-error .dops-popover__arrow {
  2085. border-top-color: #d94f4f; }
  2086. .dops-tooltip.dops-popover.is-top.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-warning .dops-popover__arrow {
  2087. border-top-color: #f0b849; }
  2088. .dops-tooltip.dops-popover.is-top.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-success .dops-popover__arrow {
  2089. border-top-color: #4ab866; }
  2090. .dops-tooltip.dops-popover.is-top .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow {
  2091. margin-right: -6px; }
  2092. .dops-tooltip.dops-popover.is-left, .dops-tooltip.dops-popover.is-right {
  2093. padding-top: 0; }
  2094. .dops-tooltip.dops-popover.is-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-right .dops-popover__arrow {
  2095. margin-top: -6px; }
  2096. .dops-tooltip.dops-popover.is-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-right .dops-popover__arrow::before {
  2097. display: none; }
  2098. .dops-tooltip.dops-popover.is-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-error .dops-popover__arrow {
  2099. border-left-color: #d94f4f; }
  2100. .dops-tooltip.dops-popover.is-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-warning .dops-popover__arrow {
  2101. border-left-color: #f0b849; }
  2102. .dops-tooltip.dops-popover.is-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-success .dops-popover__arrow {
  2103. border-left-color: #4ab866; }
  2104. .dops-tooltip.dops-popover.is-left .dops-popover__arrow {
  2105. margin-left: 4px;
  2106. border-right-color: #3d596d; }
  2107. .dops-tooltip.dops-popover.is-right .dops-popover__arrow {
  2108. margin-right: 4px;
  2109. border-left-color: #3d596d; }
  2110. .dops-tooltip.dops-popover .dops-popover__inner {
  2111. border: 0px;
  2112. box-shadow: none;
  2113. border-radius: 2px;
  2114. color: white;
  2115. background: #3d596d;
  2116. font-size: 12px;
  2117. padding: 6px 10px;
  2118. text-align: right; }
  2119. .dops-tooltip.dops-popover.is-error .dops-popover__inner {
  2120. background: #d94f4f; }
  2121. .dops-tooltip.dops-popover.is-warning .dops-popover__inner {
  2122. background: #f0b849; }
  2123. .dops-tooltip.dops-popover.is-success .dops-popover__inner {
  2124. background: #4ab866; }
  2125. .dops-tooltip.dops-popover ul {
  2126. list-style: none;
  2127. margin: 0;
  2128. padding: 0; }
  2129. .dops-tooltip.dops-popover ul li {
  2130. font-size: 11px;
  2131. font-weight: 100;
  2132. border: 0; }
  2133. .dops-tooltip__hr {
  2134. margin: 8px 0;
  2135. background: #87a6bc; }
  2136. #jp-plugin-container {
  2137. min-height: 100vh; }
  2138. .dops-chart {
  2139. position: relative;
  2140. box-sizing: border-box;
  2141. background-color: white;
  2142. padding: 8px 20px 8px 0; }
  2143. .dops-chart .dops-chart__y-axis-markers {
  2144. position: absolute;
  2145. top: 8px;
  2146. right: 0;
  2147. left: 0;
  2148. height: 200px; }
  2149. .dops-chart .dops-chart__y-axis-marker {
  2150. position: absolute;
  2151. top: 0;
  2152. width: 100%;
  2153. height: 1px;
  2154. border-top: 1px solid #e9eff3; }
  2155. .dops-chart__bar-marker {
  2156. z-index: 1;
  2157. position: absolute;
  2158. top: 0;
  2159. width: 100%;
  2160. height: 1px;
  2161. border-top: 1px solid rgba(233, 239, 243, 0.1); }
  2162. .dops-chart__bar-marker.is-fifty,
  2163. .dops-chart__y-axis-label.is-fifty,
  2164. .dops-chart .dops-chart__y-axis-marker.is-fifty {
  2165. top: 50%; }
  2166. .dops-chart__bar-marker.is-zero,
  2167. .dops-chart__y-axis-label.is-zero,
  2168. .dops-chart .dops-chart__y-axis-marker.is-zero {
  2169. top: 100%; }
  2170. .dops-chart__y-axis {
  2171. position: relative;
  2172. float: left;
  2173. height: 200px;
  2174. padding: 0 10px 0 20px;
  2175. font-size: 11px;
  2176. color: #668eaa;
  2177. margin-bottom: 30px; }
  2178. .dops-chart__y-axis-label {
  2179. position: absolute;
  2180. top: 0;
  2181. left: 20px;
  2182. text-align: left; }
  2183. .dops-chart__y-axis-width-fix {
  2184. color: rgba(255, 255, 255, 0); }
  2185. .dops-chart__x-axis {
  2186. position: relative;
  2187. font-size: 0;
  2188. padding: 5px 0;
  2189. min-height: 18px;
  2190. color: #3d596d; }
  2191. .dops-chart__x-axis-label {
  2192. position: absolute;
  2193. display: inline-block;
  2194. vertical-align: top;
  2195. font-size: 11px;
  2196. text-align: center; }
  2197. .dops-chart__x-axis-label::before {
  2198. content: '';
  2199. display: block;
  2200. position: absolute;
  2201. top: -4px;
  2202. right: 50%;
  2203. margin-right: -.5px;
  2204. width: 1px;
  2205. height: 5px;
  2206. background: #f3f6f8;
  2207. background-image: linear-gradient(to bottom, #f3f6f8 0%, #c8d7e1 100%); }
  2208. .dops-chart__bars {
  2209. position: relative;
  2210. font-size: 0;
  2211. height: 200px;
  2212. text-align: center;
  2213. overflow: hidden;
  2214. display: -ms-flex;
  2215. display: -ms-flexbox;
  2216. display: flex; }
  2217. .dops-chart__bar {
  2218. text-align: center;
  2219. display: inline-block;
  2220. position: relative;
  2221. height: 200px;
  2222. -ms-flex-grow: 1;
  2223. -ms-flex-positive: 1;
  2224. flex-grow: 1;
  2225. -ms-flex-shrink: 1;
  2226. -ms-flex-negative: 1;
  2227. flex-shrink: 1; }
  2228. .dops-chart__bar.is-weekend {
  2229. background-color: rgba(233, 239, 243, 0.5); }
  2230. .dops-chart__bar:hover {
  2231. cursor: pointer;
  2232. background-color: rgba(233, 239, 243, 0.3); }
  2233. .dops-chart__bar.is-selected {
  2234. cursor: default;
  2235. background-color: rgba(240, 130, 30, 0.1); }
  2236. .dops-chart__bar-section {
  2237. display: inline-block;
  2238. background-color: #0087be;
  2239. position: absolute;
  2240. top: 0;
  2241. left: 16%;
  2242. bottom: 0;
  2243. right: 16%;
  2244. z-index: 2; }
  2245. .dops-chart__bar:hover .dops-chart__bar-section.is-bar {
  2246. background-color: #00aadc; }
  2247. .dops-chart__bar.is-selected .dops-chart__bar-section.is-bar {
  2248. background-color: #f0821e; }
  2249. .dops-chart__bar-section.is-spacer {
  2250. z-index: 0;
  2251. background-color: rgba(255, 255, 255, 0); }
  2252. .dops-chart__bar-section.is-ghost::after {
  2253. content: "";
  2254. display: block;
  2255. position: absolute;
  2256. top: 160px;
  2257. bottom: 0;
  2258. right: 0;
  2259. z-index: 1;
  2260. width: 100%;
  2261. height: 40px;
  2262. background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(233, 239, 243, 0.5)); }
  2263. .dops-chart__bar:hover .dops-chart__bar-section.is-ghost::after {
  2264. display: none; }
  2265. .dops-chart__bar-section-inner {
  2266. background: #004069;
  2267. position: absolute;
  2268. left: 23.33%;
  2269. bottom: 0;
  2270. right: 23.33%; }
  2271. .dops-chart__bar.is-selected .dops-chart__bar-section-inner {
  2272. background-color: #d54e21; }
  2273. .dops-chart__legend {
  2274. margin-bottom: -8px; }
  2275. .dops-chart__legend:after {
  2276. content: ".";
  2277. display: block;
  2278. height: 0;
  2279. clear: both;
  2280. visibility: hidden; }
  2281. .dops-chart__legend .dops-chart__legend-options {
  2282. float: left;
  2283. color: #537994;
  2284. list-style-type: none;
  2285. margin: 0;
  2286. font-size: 11px;
  2287. text-transform: uppercase;
  2288. letter-spacing: 0.1em; }
  2289. @media (max-width: 480px) {
  2290. .dops-chart__legend .dops-chart__legend-options {
  2291. width: 100%; } }
  2292. .dops-chart__legend-option {
  2293. display: inline;
  2294. text-align: right; }
  2295. @media (max-width: 480px) {
  2296. .dops-chart__legend-option {
  2297. width: 50%;
  2298. display: inline-block; } }
  2299. .dops-chart__legend-label {
  2300. display: inline-block;
  2301. padding: 12px 20px 10px 19px; }
  2302. .dops-chart__legend-label.is-selectable {
  2303. cursor: pointer; }
  2304. .dops-chart__legend-label.is-selectable:focus, .dops-chart__legend-label.is-selectable:hover {
  2305. color: tint(#00aadc, 20%); }
  2306. @media (max-width: 480px) {
  2307. .dops-chart__legend-label {
  2308. display: block; } }
  2309. .dops-chart__legend-option .dops-chart__legend-color {
  2310. width: 10px;
  2311. height: 10px;
  2312. background: #0087be;
  2313. display: inline-block;
  2314. border-radius: 1px;
  2315. vertical-align: top;
  2316. margin: 3px 8px 3px 5px; }
  2317. @media (max-width: 480px) {
  2318. .dops-chart__legend-option:first-child .dops-chart__legend-color {
  2319. margin-right: 2px; } }
  2320. .dops-chart__legend-color.is-dark-blue {
  2321. background: #004069; }
  2322. .dops-chart__legend-option .dops-chart__legend-checkbox {
  2323. margin: 0;
  2324. float: none;
  2325. vertical-align: top; }
  2326. .dops-chart__empty {
  2327. position: absolute;
  2328. top: 0;
  2329. left: 0;
  2330. bottom: 0;
  2331. right: 0;
  2332. text-align: center;
  2333. font-size: 14px;
  2334. line-height: 24px;
  2335. clear: both;
  2336. z-index: 1; }
  2337. .dops-chart__empty_notice {
  2338. position: relative;
  2339. top: 97px;
  2340. padding: 11px 24px;
  2341. margin-bottom: 24px;
  2342. border-radius: 1px;
  2343. background: #fff;
  2344. box-sizing: border-box;
  2345. font-size: 14px;
  2346. line-height: 1.4285;
  2347. animation: appear .3s ease-in-out;
  2348. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
  2349. @media (min-width: 661px) {
  2350. .dops-chart__empty_notice {
  2351. padding: 13px 48px;
  2352. font-size: inherit; }
  2353. .dops-chart__empty_notice::before {
  2354. -webkit-font-smoothing: antialiased;
  2355. -moz-osx-font-smoothing: grayscale;
  2356. display: inline-block;
  2357. vertical-align: middle;
  2358. font: normal 16px/1 'Noticons';
  2359. content: '\F456';
  2360. position: absolute;
  2361. top: 23px;
  2362. right: 20px;
  2363. margin: -12px -8px 0 0px;
  2364. font-size: 24px;
  2365. line-height: 1; } }
  2366. .dops-chart__tooltip .dops-popover__inner {
  2367. width: 230px;
  2368. text-align: right; }
  2369. .dops-chart__tooltip .dops-popover__inner ul {
  2370. list-style: none;
  2371. margin: 0;
  2372. padding: 0; }
  2373. .dops-chart__tooltip .dops-popover__inner ul:after {
  2374. content: ".";
  2375. display: block;
  2376. height: 0;
  2377. clear: both;
  2378. visibility: hidden; }
  2379. .dops-chart__tooltip .dops-popover__inner ul li {
  2380. font-size: 11px;
  2381. text-transform: uppercase;
  2382. font-weight: 100;
  2383. height: 24px;
  2384. letter-spacing: 0.1em;
  2385. border: 0;
  2386. margin-bottom: 0; }
  2387. .dops-chart__tooltip .dops-popover__inner ul li .dops-wrapper {
  2388. display: block;
  2389. line-height: inherit;
  2390. line-height: 24px;
  2391. clear: both; }
  2392. .dops-chart__tooltip .dops-popover__inner ul li .value {
  2393. text-align: left;
  2394. float: left;
  2395. min-width: 22px;
  2396. color: #c8d7e1; }
  2397. .dops-chart__tooltip .dops-popover__inner ul li .label {
  2398. display: block;
  2399. overflow: hidden;
  2400. word-break: break-all;
  2401. vertical-align: baseline; }
  2402. .dops-chart__tooltip .dops-popover__inner ul li .gridicon {
  2403. vertical-align: middle;
  2404. margin-left: 6px;
  2405. margin-top: -3px; }
  2406. .dops-chart__tooltip.is-streak {
  2407. margin-top: -5px;
  2408. height: 35px; }
  2409. .dops-chart__tooltip.is-streak .dops-popover__arrow::before {
  2410. right: 85px;
  2411. top: 30px; }
  2412. .dops-chart__tooltip.is-streak .dops-popover__inner {
  2413. width: 160px;
  2414. position: relative;
  2415. top: -10px; }
  2416. .dops-chart__tooltip.is-streak .dops-popover__inner li {
  2417. height: 14px; }
  2418. .dops-chart__tooltip.is-streak .dops-popover__inner li .label {
  2419. width: 100%;
  2420. float: right;
  2421. text-align: center; }
  2422. .rtl .dops-chart__tooltip.is-streak .dops-popover__inner li .label {
  2423. font-size: 11px; }
  2424. .dops-chart__tooltip.is-streak .dops-popover__inner li .label .post-count {
  2425. font-weight: bold; }
  2426. .dops-chart__tooltip.is-streak .dops-popover__inner li .value {
  2427. float: none; }
  2428. .dops-chart__tooltip .dops-module-content-list-item.is-date-label {
  2429. font-size: 11px;
  2430. margin-bottom: 2px;
  2431. text-transform: uppercase;
  2432. font-weight: bold;
  2433. border-bottom: 1px solid #426177;
  2434. padding-bottom: 2px; }
  2435. .dops-chart__tooltip .dops-module-content-list-item.is-published-item {
  2436. height: 19px; }
  2437. .dops-chart__tooltip .dops-module-content-list-item.is-published-item .label {
  2438. text-transform: none;
  2439. color: #c8d7e1;
  2440. overflow: hidden;
  2441. letter-spacing: 0;
  2442. height: 19px; }
  2443. .dops-chart__tooltip .dops-module-content-list-item.is-published-item .value {
  2444. width: 0;
  2445. min-width: 0; }
  2446. .dops-chart__tooltip .dops-module-content-list-item.is-published-item .value::before {
  2447. content: '';
  2448. position: relative;
  2449. background-image: linear-gradient(to left, rgba(61, 89, 109, 0) 0%, rgba(61, 89, 109, 0.5), #3d596d);
  2450. right: -30px;
  2451. width: 30px;
  2452. height: 24px;
  2453. display: block; }
  2454. .notices-list {
  2455. overflow: hidden; }
  2456. .notices-list.is-pinned {
  2457. width: calc( 100% - 272px - 32px - 32px);
  2458. z-index: z-index("root", ".notices-list.is-pinned");
  2459. position: fixed;
  2460. top: 79px; }
  2461. .notices-list.is-pinned .notice {
  2462. z-index: z-index("root", ".notices-list.is-pinned .notice"); }
  2463. .notices-list__whitespace {
  2464. height: 71px;
  2465. width: 100%;
  2466. display: block; }
  2467. @keyframes appear {
  2468. 0% {
  2469. opacity: 0; }
  2470. 100% {
  2471. opacity: 1; } }
  2472. .global-notices {
  2473. text-align: left;
  2474. pointer-events: none;
  2475. z-index: 179;
  2476. position: fixed;
  2477. top: auto;
  2478. left: 0;
  2479. bottom: 0;
  2480. right: 0; }
  2481. @media (min-width: 661px) {
  2482. .global-notices {
  2483. top: 63px;
  2484. left: 16px;
  2485. bottom: auto;
  2486. right: auto;
  2487. max-width: calc( 100% - 32px); } }
  2488. @media (min-width: 961px) {
  2489. .global-notices {
  2490. top: 71px;
  2491. left: 24px;
  2492. max-width: calc( 100% - 48px); } }
  2493. @media (min-width: 1041px) {
  2494. .global-notices {
  2495. left: 32px;
  2496. max-width: calc( 100% - 64px); } }
  2497. .global-notices .dops-notice {
  2498. -ms-flex-wrap: nowrap;
  2499. flex-wrap: nowrap;
  2500. margin-bottom: 0;
  2501. text-align: right;
  2502. pointer-events: auto;
  2503. border-radius: 0;
  2504. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 56px rgba(0, 0, 0, 0.15); }
  2505. .global-notices .dops-notice .dops-notice__icon-wrapper {
  2506. border-radius: 0; }
  2507. @media (min-width: 661px) {
  2508. .global-notices .dops-notice {
  2509. display: -ms-flexbox;
  2510. display: flex;
  2511. overflow: hidden;
  2512. margin-bottom: 24px;
  2513. border-radius: 3px; }
  2514. .global-notices .dops-notice .dops-notice__icon-wrapper {
  2515. border-radius: 0 3px 3px 0; } }
  2516. @media (min-width: 661px) {
  2517. .global-notices .dops-notice a.dops-notice__action {
  2518. font-size: 14px;
  2519. padding: 13px 16px; } }
  2520. .global-notices .dops-notice__dismiss {
  2521. -ms-flex-negative: 0;
  2522. flex-shrink: 0; }
  2523. @media (min-width: 661px) {
  2524. .global-notices .dops-notice__dismiss {
  2525. padding: 13px 16px 0; } }
  2526. /*# sourceMappingURL=admin.dops-style.rtl.css.map */