menu-dropdown.css 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053
  1. /*--- Login ---*/
  2. li.bx-lcd-mdd-login div.bx-lcd-login {
  3. width: 70%;
  4. margin-left: auto;
  5. margin-right: auto;
  6. padding-top: 1rem;
  7. padding-bottom: 1rem;
  8. background-color: transparent;
  9. border-radius: 0;
  10. }
  11. li.bx-lcd-mdd-login .bx-lcd-login-cnt,
  12. li.bx-lcd-mdd-login .bx-lcd-login-scnt,
  13. li.bx-lcd-mdd-login .bx-lcd-login-form {
  14. padding: 0;
  15. }
  16. /*--- Profile --- */
  17. .cd-dropdown .cd-dropdown-content .bx-lcd-mddt-account > a {
  18. display: -webkit-flex;
  19. display: flex;
  20. -webkit-align-items: center;
  21. align-items: center;
  22. }
  23. .bx-lcd-mddt-account .bx-base-pofile-unit-wo-info {
  24. width: 1.875rem;
  25. height: 1.875rem;
  26. border: 1px solid rgba(0, 147, 205, 1);
  27. border-radius: 1.5rem;
  28. }
  29. .bx-lcd-mddt-account .bx-base-pofile-unit-wo-info .bx-base-pofile-unit-thumb,
  30. .bx-lcd-mdd-profile .bx-lcd-mddp .bx-base-pofile-unit-wo-info .bx-base-pofile-unit-thumb {
  31. width: 1.875rem;
  32. height: 1.875rem;
  33. line-height: 1.875rem;
  34. }
  35. /*+++ Activity Feed item +++*/
  36. .cd-dropdown .cd-dropdown-content .bx-lcd-mddt-activity-feed > a {
  37. font-weight: 900;
  38. }
  39. /*+++ Notifications item +++*/
  40. .cd-dropdown .cd-dropdown-content .bx-lcd-mddt-notifications-notifications .bx-ntfs-event {
  41. margin: 0.3125rem 0.625rem;
  42. background-color: rgba(255, 255, 255, 0.1);
  43. }
  44. .cd-dropdown .cd-dropdown-content .bx-lcd-mddt-notifications-notifications .bx-ntfs-event a {
  45. height: auto;
  46. line-height: normal;
  47. font-weight: normal;
  48. }
  49. /*--- Reset ---*/
  50. .cd-dropdown *,
  51. .cd-dropdown *::after,
  52. .cd-dropdown *::before {
  53. box-sizing: border-box;
  54. }
  55. .cd-dropdown h2,
  56. .cd-dropdown ol,
  57. .cd-dropdown ul,
  58. .cd-dropdown li,
  59. .cd-dropdown a {
  60. margin: 0;
  61. padding: 0;
  62. border: 0;
  63. }
  64. .cd-dropdown li {
  65. display: list-item;
  66. text-align: -webkit-match-parent;
  67. }
  68. .cd-dropdown li.bx-menu-item-cd-more-auto {
  69. display: none;
  70. }
  71. /*--- Main Components ---*/
  72. .cd-dropdown h2,
  73. .cd-dropdown .cd-dropdown-content a,
  74. .cd-dropdown .cd-dropdown-content ul a {
  75. height: 50px;
  76. line-height: 50px;
  77. }
  78. .bx-media-tablet .cd-dropdown h2,
  79. .bx-media-tablet .cd-dropdown .cd-dropdown-content a,
  80. .bx-media-tablet .cd-dropdown .cd-dropdown-content ul a {
  81. height: 60px;
  82. line-height: 60px;
  83. }
  84. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2,
  85. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content a,
  86. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content ul a {
  87. height: 50px;
  88. line-height: 50px;
  89. }
  90. .cd-dropdown h2,
  91. .cd-dropdown .cd-dropdown-content a,
  92. .cd-dropdown .cd-dropdown-content ul a,
  93. .cd-dropdown .cd-dropdown-content .cd-divider {
  94. padding: 0 20px;
  95. }
  96. .cd-dropdown {
  97. position: fixed;
  98. top: 0;
  99. left: 0;
  100. width: 100%;
  101. height: 100%;
  102. background-color: rgba(4, 52, 71, 1.0);
  103. color: #ffffff;
  104. visibility: hidden;
  105. /* Force Hardware Acceleration */
  106. -webkit-backface-visibility: hidden;
  107. backface-visibility: hidden;
  108. -webkit-transform: translateZ(0);
  109. -moz-transform: translateZ(0);
  110. -ms-transform: translateZ(0);
  111. -o-transform: translateZ(0);
  112. transform: translateZ(0);
  113. -webkit-transform: translateY(-100%);
  114. -moz-transform: translateY(-100%);
  115. -ms-transform: translateY(-100%);
  116. -o-transform: translateY(-100%);
  117. transform: translateY(-100%);
  118. -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  119. -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  120. transition: transform 0.5s 0s, visibility 0s 0.5s;
  121. }
  122. .cd-dropdown h2 {
  123. /* dropdown title - mobile version only */
  124. position: relative;
  125. z-index: 1;
  126. border-bottom: 1px solid rgba(255,255,255,0.1);
  127. }
  128. .cd-dropdown h2 img {
  129. height: 2rem;
  130. margin: 0.5625rem 0;
  131. }
  132. .cd-dropdown .cd-close {
  133. /* 'X' close icon - mobile version only */
  134. position: absolute;
  135. z-index: 1;
  136. right: 0;
  137. top: 0;
  138. height: 50px;
  139. width: 50px;
  140. /* image replacement */
  141. overflow: hidden;
  142. text-indent: 100%;
  143. white-space: nowrap;
  144. color: transparent;
  145. }
  146. .cd-dropdown .cd-close::after,
  147. .cd-dropdown .cd-close::before {
  148. /* this is the 'X' icon */
  149. content: '';
  150. position: absolute;
  151. left: 50%;
  152. top: 50%;
  153. bottom: auto;
  154. right: auto;
  155. -webkit-transform: translateX(-50%) translateY(-50%);
  156. -moz-transform: translateX(-50%) translateY(-50%);
  157. -ms-transform: translateX(-50%) translateY(-50%);
  158. -o-transform: translateX(-50%) translateY(-50%);
  159. transform: translateX(-50%) translateY(-50%);
  160. height: 20px;
  161. width: 2px;
  162. }
  163. .cd-dropdown .cd-close::after {
  164. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  165. -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  166. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  167. -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  168. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  169. }
  170. .cd-dropdown .cd-close::before {
  171. -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  172. -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  173. -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  174. -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  175. transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  176. }
  177. .cd-dropdown.dropdown-is-active {
  178. visibility: visible;
  179. -webkit-transform: translateY(0);
  180. -moz-transform: translateY(0);
  181. -ms-transform: translateY(0);
  182. -o-transform: translateY(0);
  183. transform: translateY(0);
  184. -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
  185. -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
  186. transition: transform 0.5s 0s, visibility 0s 0s;
  187. }
  188. /*
  189. * Note: Currently this menu
  190. * isn't used on Desktop view
  191. */
  192. .bx-media-tablet .cd-dropdown,
  193. .bx-media-desktop .cd-dropdown {
  194. display: none;
  195. }
  196. :where(.bx-media-tablet, .bx-media-desktop) .cd-dropdown .cd-close {
  197. top: 5px;
  198. }
  199. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown {
  200. position: absolute;
  201. top: calc(100% - 2px);
  202. /* reset style*/
  203. height: auto;
  204. width: auto;
  205. -webkit-transform: translateX(0);
  206. -moz-transform: translateX(0);
  207. -ms-transform: translateX(0);
  208. -o-transform: translateX(0);
  209. transform: translateX(0);
  210. background-color: #ffffff;
  211. color: #111433;
  212. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  213. opacity: 0;
  214. -webkit-transform: translateY(30px);
  215. -moz-transform: translateY(30px);
  216. -ms-transform: translateY(30px);
  217. -o-transform: translateY(30px);
  218. transform: translateY(30px);
  219. -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
  220. -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
  221. transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  222. }
  223. :where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown {
  224. /* use the .open-to-left class if you want to open the dropdown on the left */
  225. right: 0;
  226. left: auto;
  227. }
  228. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2,
  229. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-close {
  230. /* on desktop - hide title and 'X' */
  231. display: none;
  232. }
  233. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown.dropdown-is-active {
  234. opacity: 1;
  235. -webkit-transform: translateY(0);
  236. -moz-transform: translateY(0);
  237. -ms-transform: translateY(0);
  238. -o-transform: translateY(0);
  239. transform: translateY(0);
  240. -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
  241. -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
  242. transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  243. }
  244. .cd-dropdown .cd-dropdown-content,
  245. .cd-dropdown .cd-dropdown-content ul {
  246. position: absolute;
  247. top: 0;
  248. left: 0;
  249. width: 100%;
  250. height: 100%;
  251. box-sizing: border-box;
  252. margin: 0;
  253. padding: 50px 0 0 0;
  254. overflow-x: hidden;
  255. overflow-y: auto;
  256. -webkit-transition: -webkit-transform 0.3s;
  257. -moz-transition: -moz-transform 0.3s;
  258. transition: transform 0.3s;
  259. list-style: none;
  260. }
  261. .cd-dropdown .cd-dropdown-content li > a {
  262. display: -webkit-flex;
  263. display: flex;
  264. -webkit-align-items: center;
  265. align-items: center;
  266. }
  267. .cd-dropdown .cd-dropdown-content a,
  268. .cd-dropdown .cd-dropdown-content ul a {
  269. display: block;
  270. border-top-width: 1px;
  271. border-color: rgba(255,255,255,0.1);
  272. border-style: solid;
  273. /* truncate text with ellipsis if too long */
  274. text-overflow: ellipsis;
  275. overflow: hidden;
  276. white-space: nowrap;
  277. }
  278. .cd-dropdown .cd-dropdown-content a .sys-icon,
  279. .cd-dropdown .cd-dropdown-content ul a .sys-icon,
  280. .cd-dropdown .cd-dropdown-content a img:not(.bx-def-thumb),
  281. .cd-dropdown .cd-dropdown-content ul a img:not(.bx-def-thumb) {
  282. width: 1.5rem;
  283. height: 1.5rem;
  284. margin-right: 0.625rem;
  285. }
  286. .cd-dropdown .cd-dropdown-content a .sys-icon,
  287. .cd-dropdown .cd-dropdown-content ul a .sys-icon {
  288. line-height: 1.5rem;
  289. text-align: center;
  290. }
  291. .cd-dropdown .cd-dropdown-content a img:not(.bx-def-thumb),
  292. .cd-dropdown .cd-dropdown-content ul a img:not(.bx-def-thumb) {
  293. background-repeat: no-repeat;
  294. background-position: center center;
  295. }
  296. .cd-dropdown .cd-dropdown-content li:first-of-type > a,
  297. .cd-dropdown .cd-dropdown-content ul li:first-of-type > a {
  298. border-top-width: 0;
  299. }
  300. .cd-dropdown .cd-dropdown-content li:last-of-type > a,
  301. .cd-dropdown .cd-dropdown-content ul li:last-of-type > a {
  302. border-bottom-width: 1px;
  303. }
  304. .cd-dropdown .cd-dropdown-content .cd-divider,
  305. .cd-dropdown .cd-dropdown-content ul .cd-divider {
  306. padding-top: 0.3125rem;
  307. padding-bottom: 0.3125rem;
  308. background-color: rgba(2, 33, 45, 1.0);
  309. font-size: 0.625rem;
  310. font-weight: 600;
  311. text-transform: uppercase;
  312. color: rgba(255, 255, 255, 0.5);
  313. }
  314. .cd-dropdown .cd-dropdown-content .cd-divider + li > a,
  315. .cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
  316. border-top-width: 0;
  317. }
  318. .cd-dropdown .cd-dropdown-content a,
  319. .cd-dropdown .cd-dropdown-content .bx-lcd-mdd-search,
  320. .cd-dropdown .cd-dropdown-content .bx-lcd-login,
  321. .cd-dropdown .cd-dropdown-content .bx-lcd-mdd-profile,
  322. .cd-dropdown .cd-dropdown-content .cd-divider,
  323. .cd-dropdown .cd-dropdown-content ul a,
  324. .cd-dropdown .cd-dropdown-content ul .bx-lcd-mdd-search,
  325. .cd-dropdown .cd-dropdown-content ul .bx-lcd-login,
  326. .cd-dropdown .cd-dropdown-content ul .bx-lcd-mdd-profile,
  327. .cd-dropdown .cd-dropdown-content ul .cd-divider {
  328. /* Force Hardware Acceleration */
  329. -webkit-transform: translateZ(0);
  330. -moz-transform: translateZ(0);
  331. -ms-transform: translateZ(0);
  332. -o-transform: translateZ(0);
  333. transform: translateZ(0);
  334. -webkit-backface-visibility: hidden;
  335. backface-visibility: hidden;
  336. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  337. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  338. transition: opacity 0.3s, transform 0.3s;
  339. }
  340. .cd-dropdown .cd-dropdown-content.is-hidden,
  341. .cd-dropdown .cd-dropdown-content ul.is-hidden {
  342. /* push the secondary dropdown items to the right */
  343. -webkit-transform: translateX(100%);
  344. -moz-transform: translateX(100%);
  345. -ms-transform: translateX(100%);
  346. -o-transform: translateX(100%);
  347. transform: translateX(100%);
  348. }
  349. .cd-dropdown .cd-dropdown-content.is-hidden > li > a,
  350. .cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
  351. .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search,
  352. .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,
  353. .cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider,
  354. .cd-dropdown .cd-dropdown-content.move-out > li > a,
  355. .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
  356. .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
  357. .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
  358. .cd-dropdown .cd-dropdown-content.move-out > .cd-divider,
  359. .cd-dropdown .cd-dropdown-content ul.is-hidden > li > a,
  360. .cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
  361. .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
  362. .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
  363. .cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider,
  364. .cd-dropdown .cd-dropdown-content ul.move-out > li > a,
  365. .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
  366. .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
  367. .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
  368. .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
  369. /* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */
  370. opacity: 0;
  371. }
  372. .cd-dropdown .cd-dropdown-content.move-out > li > a,
  373. .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
  374. .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
  375. .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
  376. .cd-dropdown .cd-dropdown-content.move-out > .cd-divider,
  377. .cd-dropdown .cd-dropdown-content ul.move-out > li > a,
  378. .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
  379. .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
  380. .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
  381. .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
  382. /* push the dropdown items to the left when secondary dropdown slides in */
  383. -webkit-transform: translateX(-100%);
  384. -moz-transform: translateX(-100%);
  385. -ms-transform: translateX(-100%);
  386. -o-transform: translateX(-100%);
  387. transform: translateX(-100%);
  388. }
  389. .dropdown-is-active .cd-dropdown-content,
  390. .dropdown-is-active .cd-dropdown-content ul {
  391. -webkit-overflow-scrolling: touch;
  392. }
  393. .bx-media-tablet .cd-dropdown .cd-dropdown-content, .cd-dropdown-content ul {
  394. padding-top: 60px;
  395. }
  396. .bx-media-tablet .cd-dropdown .cd-dropdown-content a, .cd-dropdown-content ul a {
  397. font-size: 1.8rem;
  398. }
  399. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content,
  400. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul {
  401. padding-top: 0;
  402. overflow: visible;
  403. }
  404. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content a,
  405. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul a {
  406. color: #111433;
  407. height: 50px;
  408. line-height: 50px;
  409. font-size: 1.5rem;
  410. border-color: #ebebeb;
  411. }
  412. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content .cd-divider,
  413. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul .cd-divider {
  414. background-color: transparent;
  415. color: #b3b3b3;
  416. border-top: 1px solid #ebebeb;
  417. }
  418. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content .cd-divider + li > a,
  419. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
  420. border-top-width: 1px;
  421. }
  422. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > li > a,
  423. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
  424. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search,
  425. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,
  426. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider,
  427. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > li > a,
  428. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
  429. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
  430. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
  431. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .cd-divider,
  432. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > li > a,
  433. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
  434. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
  435. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
  436. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider,
  437. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > li > a,
  438. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
  439. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
  440. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
  441. .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
  442. /* reset mobile style */
  443. opacity: 1;
  444. }
  445. .cd-dropdown .cd-dropdown-content .see-all a {
  446. /* different style for the See all links */
  447. color: #3f8654;
  448. }
  449. .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item,
  450. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  451. /* items with picture (or icon) and title */
  452. height: 80px;
  453. line-height: 80px;
  454. }
  455. .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3,
  456. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
  457. /* truncate text with ellipsis if too long */
  458. overflow: hidden;
  459. text-overflow: ellipsis;
  460. white-space: nowrap;
  461. }
  462. .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
  463. padding-left: 90px;
  464. }
  465. .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
  466. position: absolute;
  467. display: block;
  468. height: 40px;
  469. width: auto;
  470. left: 20px;
  471. top: 50%;
  472. margin-top: -20px;
  473. }
  474. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  475. padding-left: 75px;
  476. position: relative;
  477. }
  478. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
  479. color: #111433;
  480. font-size: 1.3rem;
  481. /* hide description on small devices */
  482. display: none;
  483. }
  484. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
  485. /* item icon */
  486. content: '';
  487. display: block;
  488. position: absolute;
  489. left: 20px;
  490. top: 50%;
  491. margin-top: -20px;
  492. width: 40px;
  493. height: 40px;
  494. background-repeat: no-repeat;
  495. background-position: center center;
  496. background-size: 40px 40px;
  497. }
  498. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-1::before {
  499. background-image: url("../img/nucleo-icon-1.svg");
  500. }
  501. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-2::before {
  502. background-image: url("../img/nucleo-icon-2.svg");
  503. }
  504. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-3::before {
  505. background-image: url("../img/nucleo-icon-3.svg");
  506. }
  507. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-4::before {
  508. background-image: url("../img/nucleo-icon-4.svg");
  509. }
  510. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-5::before {
  511. background-image: url("../img/nucleo-icon-5.svg");
  512. }
  513. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-6::before {
  514. background-image: url("../img/nucleo-icon-6.svg");
  515. }
  516. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-7::before {
  517. background-image: url("../img/nucleo-icon-7.svg");
  518. }
  519. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-8::before {
  520. background-image: url("../img/nucleo-icon-8.svg");
  521. }
  522. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-9::before {
  523. background-image: url("../img/nucleo-icon-9.svg");
  524. }
  525. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-10::before {
  526. background-image: url("../img/nucleo-icon-10.svg");
  527. }
  528. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-11::before {
  529. background-image: url("../img/nucleo-icon-11.svg");
  530. }
  531. .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
  532. background-image: url("../img/nucleo-icon-12.svg");
  533. }
  534. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content {
  535. /* reset mobile style */
  536. position: static;
  537. height: auto;
  538. width: 280px;
  539. }
  540. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > li:last-of-type a {
  541. border-bottom: none;
  542. }
  543. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content > li:not(.has-children) a:hover {
  544. color: #3f8654;
  545. }
  546. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > li > a,
  547. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
  548. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
  549. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
  550. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .cd-divider {
  551. /* reset mobile style */
  552. -webkit-transform: translateX(0);
  553. -moz-transform: translateX(0);
  554. -ms-transform: translateX(0);
  555. -o-transform: translateX(0);
  556. transform: translateX(0);
  557. opacity: 1;
  558. }
  559. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown,
  560. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery,
  561. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
  562. -webkit-transform: translateX(0);
  563. -moz-transform: translateX(0);
  564. -ms-transform: translateX(0);
  565. -o-transform: translateX(0);
  566. transform: translateX(0);
  567. left: 100%;
  568. height: auto;
  569. background-color: #ffffff;
  570. box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  571. }
  572. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::after,
  573. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery::after,
  574. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons::after {
  575. clear: both;
  576. content: "";
  577. display: table;
  578. }
  579. :where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown,
  580. :where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery,
  581. :where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
  582. /* use the .open-to-left class if you want to open the dropdown on the left */
  583. left: auto;
  584. right: 100%;
  585. }
  586. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.is-hidden,
  587. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.is-hidden,
  588. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.is-hidden {
  589. /* reset mobile style */
  590. -webkit-transform: translateX(0);
  591. -moz-transform: translateX(0);
  592. -ms-transform: translateX(0);
  593. -o-transform: translateX(0);
  594. transform: translateX(0);
  595. }
  596. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-in,
  597. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-in,
  598. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-in {
  599. /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
  600. -webkit-animation: cd-fade-in 0.2s;
  601. -moz-animation: cd-fade-in 0.2s;
  602. animation: cd-fade-in 0.2s;
  603. }
  604. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-out,
  605. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-out,
  606. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-out {
  607. /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
  608. -webkit-animation: cd-fade-out 0.2s;
  609. -moz-animation: cd-fade-out 0.2s;
  610. animation: cd-fade-out 0.2s;
  611. }
  612. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .go-back,
  613. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .go-back,
  614. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .go-back {
  615. display: none;
  616. }
  617. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all,
  618. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all,
  619. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
  620. position: absolute;
  621. bottom: 20px;
  622. height: 45px;
  623. text-align: center;
  624. }
  625. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a,
  626. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a,
  627. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a {
  628. margin: 0;
  629. height: 100%;
  630. line-height: 45px;
  631. background: #ebebeb;
  632. pointer-events: auto;
  633. -webkit-transition: color 0.2s, background-color 0.2s;
  634. -moz-transition: color 0.2s, background-color 0.2s;
  635. transition: color 0.2s, background-color 0.2s;
  636. }
  637. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover,
  638. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover,
  639. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
  640. color: #ffffff;
  641. background-color: #111433;
  642. }
  643. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item,
  644. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a,
  645. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item,
  646. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery a,
  647. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item,
  648. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons a {
  649. border: none;
  650. }
  651. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery,
  652. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
  653. padding: 20px 30px 100px;
  654. }
  655. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all,
  656. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
  657. width: calc(100% - 60px);
  658. }
  659. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > li,
  660. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
  661. width: 50%;
  662. float: left;
  663. }
  664. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown {
  665. overflow: hidden;
  666. width: 550px;
  667. padding-bottom: 65px;
  668. }
  669. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::before {
  670. /* this is the separation line in the middle of the .cd-secondary-dropdown element */
  671. position: absolute;
  672. content: '';
  673. top: 290px;
  674. left: 15px;
  675. height: 1px;
  676. width: 520px;
  677. background-color: #ebebeb;
  678. }
  679. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a {
  680. color: #3f8654;
  681. font-size: 1.6rem;
  682. margin-bottom: 10px;
  683. line-height: 30px;
  684. height: 30px;
  685. pointer-events: none;
  686. }
  687. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::after,
  688. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
  689. /* hide the arrow */
  690. display: none;
  691. }
  692. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
  693. /* reset mobile style */
  694. -webkit-transform: translateX(0);
  695. -moz-transform: translateX(0);
  696. -ms-transform: translateX(0);
  697. -o-transform: translateX(0);
  698. transform: translateX(0);
  699. }
  700. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
  701. margin: 20px 0;
  702. border-right-width: 1px;
  703. border-color: #ebebeb;
  704. border-style: solid;
  705. padding: 0 30px;
  706. height: 250px;
  707. }
  708. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
  709. border-right-width: 0;
  710. }
  711. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul {
  712. /* reset mobile style */
  713. -webkit-transform: translate(0);
  714. -moz-transform: translate(0);
  715. -ms-transform: translate(0);
  716. -o-transform: translate(0);
  717. transform: translate(0);
  718. position: relative;
  719. height: auto;
  720. }
  721. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
  722. display: none;
  723. }
  724. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a {
  725. line-height: 25px;
  726. height: 25px;
  727. font-size: 1.3rem;
  728. padding-left: 0;
  729. }
  730. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a:hover {
  731. color: #3f8654;
  732. }
  733. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown ul {
  734. padding-bottom: 25px;
  735. overflow: hidden;
  736. height: auto;
  737. }
  738. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a {
  739. padding-left: 20px;
  740. color: transparent;
  741. }
  742. :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
  743. color: transparent;
  744. }
  745. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::before,
  746. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
  747. left: 0;
  748. }
  749. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .see-all {
  750. position: absolute;
  751. bottom: 0;
  752. left: 0;
  753. width: 100%;
  754. }
  755. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery {
  756. width: 600px;
  757. padding-bottom: 100px;
  758. }
  759. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li {
  760. width: 48%;
  761. float: left;
  762. margin-right: 4%;
  763. }
  764. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
  765. margin-right: 0;
  766. }
  767. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
  768. padding: 0;
  769. height: auto;
  770. line-height: normal;
  771. color: #3f8654;
  772. margin-bottom: 2em;
  773. }
  774. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
  775. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
  776. margin-bottom: 0;
  777. }
  778. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
  779. position: static;
  780. height: auto;
  781. width: 100%;
  782. margin: 0 0 0.6em;
  783. }
  784. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
  785. width: 600px;
  786. }
  787. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  788. height: 80px;
  789. line-height: 1.2;
  790. padding: 24px 0 0 85px;
  791. }
  792. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
  793. background: #ebebeb;
  794. }
  795. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
  796. color: #3f8654;
  797. font-weight: bold;
  798. }
  799. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
  800. display: block;
  801. font-size: 1.2rem;
  802. }
  803. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
  804. left: 25px;
  805. }
  806. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > ul {
  807. visibility: hidden;
  808. }
  809. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > ul.is-active {
  810. /* when hover over .cd-dropdown-content items - show subnavigation */
  811. visibility: visible;
  812. }
  813. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
  814. /* if .cd-secondary-dropdown is visible - show also subnavigation */
  815. visibility: visible;
  816. }
  817. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
  818. /* hover effect for .cd-dropdown-content items with subnavigation */
  819. box-shadow: inset 2px 0 0 #3f8654;
  820. color: #3f8654;
  821. }
  822. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::before,
  823. :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::after {
  824. background: #3f8654;
  825. }
  826. :where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
  827. box-shadow: inset -2px 0 0 #3f8654;
  828. }
  829. @-webkit-keyframes cd-fade-in {
  830. 0% {
  831. opacity: 0;
  832. visibility: visible;
  833. }
  834. 100% {
  835. opacity: 1;
  836. visibility: visible;
  837. }
  838. }
  839. @-moz-keyframes cd-fade-in {
  840. 0% {
  841. opacity: 0;
  842. visibility: visible;
  843. }
  844. 100% {
  845. opacity: 1;
  846. visibility: visible;
  847. }
  848. }
  849. @keyframes cd-fade-in {
  850. 0% {
  851. opacity: 0;
  852. visibility: visible;
  853. }
  854. 100% {
  855. opacity: 1;
  856. visibility: visible;
  857. }
  858. }
  859. @-webkit-keyframes cd-fade-out {
  860. 0% {
  861. opacity: 1;
  862. visibility: visible;
  863. }
  864. 100% {
  865. opacity: 0;
  866. visibility: visible;
  867. }
  868. }
  869. @-moz-keyframes cd-fade-out {
  870. 0% {
  871. opacity: 1;
  872. visibility: visible;
  873. }
  874. 100% {
  875. opacity: 0;
  876. visibility: visible;
  877. }
  878. }
  879. @keyframes cd-fade-out {
  880. 0% {
  881. opacity: 1;
  882. visibility: visible;
  883. }
  884. 100% {
  885. opacity: 0;
  886. visibility: visible;
  887. }
  888. }
  889. .bx-lcd-mdd-search .bx-page-block-container {
  890. padding: 0;
  891. }
  892. .bx-lcd-mdd-search .bx-page-block-container input[type="text"] {
  893. width: 100%;
  894. height: 50px;
  895. padding: 0 20px;
  896. -webkit-appearance: none;
  897. -moz-appearance: none;
  898. -ms-appearance: none;
  899. -o-appearance: none;
  900. appearance: none;
  901. background-color: rgba(0, 0, 0, 0.1);
  902. border: none;
  903. border-radius: 0;
  904. }
  905. .has-children > a, .go-back a {
  906. position: relative;
  907. }
  908. .go-back a::before,
  909. .go-back a::after,
  910. .has-children > a::before,
  911. .has-children > a::after {
  912. /* arrow icon in CSS - for element with nested unordered lists */
  913. content: '';
  914. position: absolute;
  915. top: 50%;
  916. margin-top: -1px;
  917. display: inline-block;
  918. height: 2px;
  919. width: 10px;
  920. -webkit-backface-visibility: hidden;
  921. backface-visibility: hidden;
  922. }
  923. .has-children > a::before, .go-back a::before {
  924. -webkit-transform: rotate(45deg);
  925. -moz-transform: rotate(45deg);
  926. -ms-transform: rotate(45deg);
  927. -o-transform: rotate(45deg);
  928. transform: rotate(45deg);
  929. }
  930. .has-children > a::after, .go-back a::after {
  931. -webkit-transform: rotate(-45deg);
  932. -moz-transform: rotate(-45deg);
  933. -ms-transform: rotate(-45deg);
  934. -o-transform: rotate(-45deg);
  935. transform: rotate(-45deg);
  936. }
  937. :where(.bx-media-tablet, .bx-media-desktop) .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
  938. background: #b3b3b3;
  939. }
  940. .has-children > a {
  941. padding-right: 40px;
  942. }
  943. .has-children > a::before, .has-children > a::after {
  944. /* arrow goes on the right side - children navigation */
  945. right: 20px;
  946. -webkit-transform-origin: 9px 50%;
  947. -moz-transform-origin: 9px 50%;
  948. -ms-transform-origin: 9px 50%;
  949. -o-transform-origin: 9px 50%;
  950. transform-origin: 9px 50%;
  951. }
  952. :where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a {
  953. padding-left: 40px;
  954. padding-right: 20px;
  955. }
  956. :where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::before,
  957. :where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::after {
  958. right: auto;
  959. left: 20px;
  960. -webkit-transform-origin: 1px 50%;
  961. -moz-transform-origin: 1px 50%;
  962. -ms-transform-origin: 1px 50%;
  963. -o-transform-origin: 1px 50%;
  964. transform-origin: 1px 50%;
  965. }
  966. .cd-dropdown .cd-dropdown-content .go-back a {
  967. padding-left: 40px;
  968. }
  969. .cd-dropdown .cd-dropdown-content .go-back a::before,
  970. .cd-dropdown .cd-dropdown-content .go-back a::after {
  971. /* arrow goes on the left side - go back button */
  972. left: 20px;
  973. -webkit-transform-origin: 1px 50%;
  974. -moz-transform-origin: 1px 50%;
  975. -ms-transform-origin: 1px 50%;
  976. -o-transform-origin: 1px 50%;
  977. transform-origin: 1px 50%;
  978. }
  979. .no-js .cd-dropdown-wrapper:hover .cd-dropdown {
  980. visibility: visible;
  981. opacity: 1;
  982. -webkit-transform: translateY(0);
  983. -moz-transform: translateY(0);
  984. -ms-transform: translateY(0);
  985. -o-transform: translateY(0);
  986. transform: translateY(0);
  987. }
  988. .no-js .cd-dropdown-wrapper .cd-close {
  989. display: none;
  990. }
  991. /*--- Member Toolbar ---*/
  992. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar {
  993. position: relative;
  994. padding: 0;
  995. text-align: center;
  996. }
  997. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li {
  998. display: inline-block;
  999. float: none;
  1000. vertical-align: middle;
  1001. }
  1002. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a {
  1003. height: auto;
  1004. margin: 0;
  1005. padding: 1rem;
  1006. border-width: 0px;
  1007. line-height: normal;
  1008. }
  1009. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a,
  1010. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a .sys-icon {
  1011. color: #ffffff;
  1012. }
  1013. .cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a .bx-menu-item-addon {
  1014. top: 0;
  1015. right: 0;
  1016. box-sizing: content-box;
  1017. }