visualstudio.com - Dark Mode

Dark mode theme for Visual Studio

当前为 2024-12-14 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name visualstudio.com - Dark Mode
  3. @namespace typpi.online
  4. @version 1.0.3
  5. @description Dark mode theme for Visual Studio
  6. @author Nick2bad4u
  7. @license UnLicense
  8. @homepageURL https://github.com/Nick2bad4u/UserStyles
  9. ==/UserStyle== */
  10. @document domain("visualstudio.com") {
  11. /* Invert colors except images and videos */
  12. :is(
  13. html:not([stylus-iframe]),
  14. img,
  15. svg,
  16. video,
  17. .upperBand,
  18. .upperBandContent,
  19. .breadcrumb
  20. ) {
  21. filter: invert(1) hue-rotate(180deg) !important;
  22. }
  23.  
  24. .uxservices-header,
  25. .right {
  26. background-color: #fff;
  27. }
  28.  
  29. .ux-section-banner,
  30. .item-details-control-root .ux-item-shortdesc,
  31. .verified-domain-url-ssr,
  32. .ux-item-publisher-link,
  33. .ux-item-name,
  34. .ux-item-second-row-wrapper,
  35. .installHelpInfo > a {
  36. background-color: #fff !important;
  37. color: #000 !important;
  38. }
  39.  
  40. .uxservices-header > div > a {
  41. filter: invert(1) hue-rotate(180deg) !important;
  42. }
  43.  
  44. .marketplacetext-header {
  45. filter: invert(1) hue-rotate(180deg) !important;
  46. }
  47.  
  48. .item-details-control-root
  49. .ux-section-details
  50. .itemdetails-section-header {
  51. padding-bottom: 16px;
  52. color: #555;
  53. font-weight: 700;
  54. font-size: 16px;
  55. }
  56.  
  57. .item-details-control-root
  58. .ux-section-details
  59. .itemdetails-section-header.right {
  60. margin: 0;
  61. padding: 0 0 5px;
  62. }
  63.  
  64. .item-details-control-root
  65. .ux-section-details
  66. .ux-section-details-table {
  67. width: 100%;
  68. table-layout: fixed;
  69. }
  70.  
  71. .item-details-control-root
  72. .ux-itemdetails-left {
  73. vertical-align: top;
  74. padding-right: 20px;
  75. font-size: 14px;
  76. }
  77.  
  78. .item-details-control-root
  79. .ux-itemdetails-right {
  80. vertical-align: top;
  81. padding: 0 0 0 20px;
  82. width: 34.45%;
  83. }
  84.  
  85. @media all and (width <= 768px) {
  86. .item-details-control-root
  87. .ux-itemdetails-left {
  88. float: left;
  89. padding-right: 0;
  90. width: 100%;
  91. }
  92.  
  93. .item-details-control-root
  94. .ux-itemdetails-right {
  95. float: left;
  96. padding-left: 0 !important;
  97. width: 100%;
  98. }
  99. }
  100.  
  101. .item-details-control-root .ux-section-other {
  102. margin-top: 16px;
  103. }
  104.  
  105. .item-details-control-root .ux-section-h2 > h2 {
  106. border-bottom: 1px solid #eee;
  107. padding-bottom: 10px;
  108. color: #5c2d91;
  109. }
  110.  
  111. .download-dropbutton-container {
  112. display: inline-block;
  113. position: relative;
  114. }
  115.  
  116. .download-dropbutton-arrow {
  117. display: inline-block;
  118. transform: rotate(45deg);
  119. margin: 0 0 2px 5px;
  120. border: solid white;
  121. border-width: 0 2px 2px 0;
  122. padding: 3px;
  123. }
  124.  
  125. .download-dropdown-content {
  126. display: none;
  127. position: absolute;
  128. z-index: 1;
  129. margin: 5px 0 0 16px;
  130. box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
  131. padding: 0;
  132. min-width: 202px;
  133. text-align: left;
  134. }
  135.  
  136. .download-dropdown-content li {
  137. display: block;
  138. cursor: pointer;
  139. background-color: #fafafa;
  140. padding: 12px 16px;
  141. color: black;
  142. text-decoration: none;
  143. }
  144.  
  145. .download-dropdown-content li:hover {
  146. background-color: #f1f1f1;
  147. }
  148.  
  149. .download-dropbutton-container:hover
  150. .download-dropdown-content {
  151. display: block;
  152. }
  153.  
  154. .itemDetails .markdown {
  155. position: relative;
  156. color: #222;
  157. line-height: 1.6;
  158. }
  159.  
  160. .itemDetails .markdown blockquote {
  161. color: #222 !important;
  162. }
  163.  
  164. .itemDetails .markdown > *:first-child {
  165. margin-top: 0 !important;
  166. }
  167.  
  168. .item-details-control-root .markdown {
  169. position: relative;
  170. color: #222;
  171. line-height: 1.6;
  172. }
  173.  
  174. .item-details-control-root
  175. .markdown
  176. > *:first-child {
  177. margin-top: 0 !important;
  178. }
  179.  
  180. .ux-section-details-tabs {
  181. margin-top: -20px;
  182. }
  183.  
  184. .ux-section-details-tabs
  185. .ms-Pivot
  186. button:first-child {
  187. margin-left: -8px;
  188. }
  189.  
  190. .ux-section-details-tabs .ms-Pivot {
  191. margin-bottom: 25px;
  192. border-bottom: 1px solid;
  193. border-bottom-color: rgb(200 200 200 / 100%);
  194. border-bottom-color: rgba(
  195. var(--palette-neutral-20, 200, 200, 200),
  196. 1
  197. );
  198. }
  199.  
  200. .ux-section-details-tabs .ms-Pivot-text {
  201. font-weight: 400;
  202. font-size: 16px;
  203. }
  204.  
  205. .ux-section-details-tabs .ms-Pivot button:focus,
  206. .ux-section-details-tabs
  207. .ms-Pivot
  208. button:hover {
  209. color: #106ebe;
  210. }
  211.  
  212. .meta-data-list-container
  213. .ux-section-meta-data-list
  214. .meta-data-list {
  215. margin-top: 3px;
  216. }
  217.  
  218. .meta-data-list-container
  219. a.meta-data-list-link:hover,
  220. .meta-data-list-container
  221. a.meta-data-list-link:focus {
  222. cursor: pointer;
  223. border: 1px solid #0078d4;
  224. background-color: #0078d4;
  225. color: white;
  226. }
  227.  
  228. .meta-data-list-container
  229. .ux-section-meta-data-list
  230. > div:nth-last-child(1) {
  231. padding-bottom: 16px;
  232. }
  233.  
  234. .meta-data-list-container
  235. .ux-section-meta-data-list
  236. a,
  237. .meta-data-list-container
  238. .ux-section-meta-data-list
  239. span {
  240. display: inline-block;
  241. margin: 0 6px 4px 0;
  242. border: 1px solid #ddd;
  243. border-radius: 3px;
  244. padding: 4px 6px;
  245. color: #333;
  246. font-size: 13px;
  247. }
  248.  
  249. .meta-data-list-container
  250. .ux-section-meta-data-list
  251. a:hover {
  252. text-decoration: none;
  253. }
  254.  
  255. .meta-data-list-container
  256. .ux-section-meta-data-list
  257. a.tag {
  258. cursor: default;
  259. background-color: #eff1f3;
  260. }
  261.  
  262. .meta-data-list-container .ux-section-header {
  263. padding-bottom: 16px;
  264. color: #555;
  265. font-weight: 700;
  266. font-size: 16px;
  267. }
  268.  
  269. .meta-data-list-container
  270. .ux-section-header.right {
  271. margin: 0;
  272. padding: 0 0 5px;
  273. }
  274.  
  275. .item-details-control-root .ux-table-metadata {
  276. margin-top: 0;
  277. border-collapse: collapse;
  278. padding: 0;
  279. color: #666;
  280. font-size: 12px;
  281. }
  282.  
  283. .item-details-control-root
  284. .ux-table-metadata
  285. td {
  286. padding: 4px 18px 4px 0;
  287. }
  288.  
  289. .badges-container {
  290. margin-top: 14px;
  291. }
  292.  
  293. .badges-container ul li {
  294. margin-left: 5px;
  295. }
  296.  
  297. .item-details-control-root
  298. .ux-section-project-details {
  299. margin-top: 16px;
  300. }
  301.  
  302. .item-details-control-root
  303. .ux-section-project-details
  304. .itemdetails-section-header.right {
  305. margin-bottom: 8px;
  306. padding: 0;
  307. }
  308.  
  309. .item-details-control-root
  310. .ux-section-project-details-spinner
  311. .spinner-control-root {
  312. margin-top: 22px;
  313. width: 25px;
  314. height: 25px;
  315. }
  316.  
  317. .item-details-control-root
  318. .ux-section-project-details
  319. ul {
  320. margin: 0 0 0 -3px;
  321. padding: 0;
  322. list-style-type: none;
  323. }
  324.  
  325. .item-details-control-root
  326. .ux-section-project-details
  327. ul
  328. li {
  329. margin-bottom: 4px;
  330. }
  331.  
  332. .item-details-control-root
  333. .ux-section-project-details
  334. ul
  335. li
  336. .api-github-response.bowtie-icon {
  337. color: rgb(0 0 0 / 100%);
  338. color: rgba(
  339. var(--palette-neutral-100, 0, 0, 0),
  340. 1
  341. );
  342. }
  343.  
  344. .item-details-control-root
  345. .ux-section-project-details
  346. ul
  347. li
  348. .api-github-response.bowtie-icon.bowtie-brand-github {
  349. margin-top: 2px;
  350. margin-right: 1px;
  351. margin-left: 4px;
  352. }
  353.  
  354. .item-details-control-root
  355. .ux-section-project-details
  356. span {
  357. vertical-align: top;
  358. margin-left: 5px;
  359. text-align: center;
  360. }
  361.  
  362. .item-details-control-root
  363. .item-share-container {
  364. display: inline-block;
  365. vertical-align: -4px;
  366. margin: 20px -2px;
  367. }
  368.  
  369. .item-details-control-root
  370. .item-share-container
  371. a:hover {
  372. text-decoration: none;
  373. }
  374.  
  375. .item-details-control-root
  376. .ux-social-icons
  377. span {
  378. margin: 10px 0;
  379. }
  380.  
  381. .item-details-control-root .social-link {
  382. display: inline-block;
  383. margin: 0 2px;
  384. width: 23px;
  385. height: 23px;
  386. }
  387.  
  388. .item-share-container a:focus {
  389. outline: none;
  390. }
  391.  
  392. .item-share-container a:focus .social-link {
  393. outline: 1px dotted #666;
  394. }
  395.  
  396. .item-details-control-root
  397. .ux-table-metadata
  398. .info-list-callout
  399. td {
  400. padding: 0 5px 0 0;
  401. }
  402.  
  403. .item-details-control-root
  404. .ux-table-metadata
  405. .info-list-callout
  406. .info-icon {
  407. margin-top: 1px;
  408. width: 15px;
  409. height: 15px;
  410. }
  411.  
  412. .item-details-control-root
  413. .ux-table-metadata
  414. .info-list-callout
  415. .info-icon
  416. .ms-Button-icon {
  417. font-size: 12px;
  418. }
  419.  
  420. .row-callout .callout-container {
  421. margin: 10px;
  422. max-width: 200px;
  423. font-size: 12px;
  424. }
  425.  
  426. .report-abuse-callout .ms-Callout-beak {
  427. background-color: rgb(43 136 216 / 100%);
  428. background-color: rgba(
  429. var(
  430. --palette-primary-tint-10,
  431. 43,
  432. 136,
  433. 216
  434. ),
  435. 1
  436. );
  437. }
  438.  
  439. .report-abuse-callout .callout-container {
  440. background-color: rgb(43 136 216 / 100%);
  441. background-color: rgba(
  442. var(
  443. --palette-primary-tint-10,
  444. 43,
  445. 136,
  446. 216
  447. ),
  448. 1
  449. );
  450. padding: 20px;
  451. color: white;
  452. }
  453.  
  454. .report-abuse-callout
  455. .callout-container
  456. .report-abuse-callout-header {
  457. padding-bottom: 15px;
  458. font-weight: 200;
  459. font-size: 20px;
  460. }
  461.  
  462. .report-abuse-callout
  463. .callout-container
  464. .report-abuse-callout-header
  465. .report-abuse-heading {
  466. display: inline-block;
  467. padding-left: 10px;
  468. }
  469.  
  470. .calculator-container .currency-dropdown {
  471. width: 200px;
  472. }
  473.  
  474. .calculator-container
  475. .currency-container
  476. .currency-header {
  477. margin-bottom: 10px;
  478. }
  479.  
  480. .calculator-container .calculator-header {
  481. margin-top: 0;
  482. margin-bottom: 10px;
  483. }
  484.  
  485. .calculator-container .quantity-price {
  486. display: flex;
  487. margin-top: 20px;
  488. }
  489.  
  490. .calculator-container
  491. .quantity-price
  492. .quantity-header {
  493. margin-bottom: 10px;
  494. }
  495.  
  496. .calculator-container
  497. .quantity-price
  498. .quantity-dropdown {
  499. width: 90px;
  500. }
  501.  
  502. .calculator-container
  503. .quantity-price
  504. .price-section {
  505. margin-left: 60px;
  506. }
  507.  
  508. .calculator-container
  509. .quantity-price
  510. .price-section
  511. .price-header {
  512. margin-bottom: 10px;
  513. }
  514.  
  515. .ms-Dialog.gallery-dialog.oneclick-install-popup
  516. .ms-Dialog-main {
  517. width: 425px;
  518. max-width: 425px;
  519. }
  520.  
  521. .ms-Dialog.gallery-dialog.oneclick-install-popup
  522. .ms-Dialog-main
  523. .ms-Dialog--lgHeader
  524. .ms-Dialog-title {
  525. font-size: 21px;
  526. }
  527.  
  528. .ms-Dialog.gallery-dialog.oneclick-install-popup
  529. .ms-Dialog-main
  530. .ms-Dialog-inner
  531. .ms-Dialog-content {
  532. margin-top: 15px;
  533. }
  534.  
  535. .ms-Dialog.gallery-dialog.oneclick-install-popup
  536. .ms-Dialog-main
  537. .ms-Dialog-inner
  538. .ms-Dialog-content
  539. .vscode-download-link {
  540. margin-left: 5px;
  541. }
  542.  
  543. .ms-Dialog.gallery-dialog.oneclick-install-popup
  544. .ms-Dialog-main
  545. .ms-Dialog-inner
  546. .ms-Dialog-content
  547. .ms-Checkbox {
  548. margin-top: 20px;
  549. }
  550.  
  551. .item-details-control-root
  552. .ux-section-resources
  553. ul
  554. li {
  555. margin-bottom: 4px;
  556. }
  557.  
  558. .item-details-control-root
  559. .ux-section-resources
  560. ul {
  561. margin: 0;
  562. padding: 0;
  563. list-style-type: none;
  564. }
  565.  
  566. .item-details-control-root
  567. .ux-section-resources
  568. ul
  569. .download-specific-version {
  570. border: 2px solid rgb(0 0 0 / 90%);
  571. border: 2px solid
  572. var(--text-primary-color, rgb(0 0 0 / 90%));
  573. background-color: transparent;
  574. width: 50%;
  575. color: rgb(0 0 0 / 90%);
  576. color: var(
  577. --text-primary-color,
  578. rgb(0 0 0 / 90%)
  579. );
  580. }
  581.  
  582. .item-details-control-root
  583. .ux-section-resources {
  584. margin-top: 16px;
  585. }
  586.  
  587. .copied-display-container {
  588. position: relative;
  589. float: right;
  590. margin-left: 10px;
  591. }
  592.  
  593. .copyID-display-div {
  594. display: none;
  595. position: absolute;
  596. left: 50px;
  597. border: 1px solid #ffffff;
  598. border-radius: 5px;
  599. background-color: #000000;
  600. padding: 2px 4px;
  601. width: 120px;
  602. color: #ffffff;
  603. font-size: 11px;
  604. text-align: center;
  605. }
  606.  
  607. .item-details-download-dropbutton-container {
  608. display: inline-block;
  609. position: relative;
  610. }
  611.  
  612. .item-details-download-dropbutton-container
  613. .item-details-download-button {
  614. border: none;
  615. padding: 0;
  616. }
  617.  
  618. .item-details-download-dropbutton {
  619. cursor: pointer;
  620. padding: 0;
  621. color: #0078d4;
  622. font-weight: 400;
  623. font-size: 14px;
  624. }
  625.  
  626. .item-details-download-dropdown-content {
  627. display: none;
  628. position: absolute;
  629. z-index: 1;
  630. margin: 5px 0 0 16px;
  631. box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
  632. background-color: white;
  633. padding: 0;
  634. min-width: 160px;
  635. }
  636.  
  637. .item-details-download-dropdown-content li {
  638. display: block;
  639. cursor: pointer;
  640. background-color: white;
  641. padding: 12px 16px;
  642. color: black;
  643. text-decoration: none;
  644. }
  645.  
  646. .item-details-download-dropbutton-arrow {
  647. display: inline-block;
  648. transform: rotate(45deg);
  649. margin: 0 0 2px 5px;
  650. border: solid #0078d4;
  651. border-width: 0 1px 1px 0;
  652. padding: 3px;
  653. }
  654.  
  655. #item-details-download-dropdown-list {
  656. margin-bottom: 0;
  657. }
  658.  
  659. .item-details-download-dropdown-content
  660. li:hover {
  661. background-color: #f1f1f1;
  662. }
  663.  
  664. .item-details-download-dropbutton-container:hover
  665. .item-details-download-dropdown-content {
  666. display: block;
  667. }
  668.  
  669. .item-details-control-root
  670. .ux-section-media
  671. .item-carousel
  672. > div
  673. > div {
  674. padding-bottom: 16px;
  675. }
  676.  
  677. .item-details-control-root
  678. .ux-section-media
  679. .carousel-wrapper {
  680. border: 1px solid #b0bec5;
  681. height: 247.5px;
  682. }
  683.  
  684. .item-details-control-root
  685. .ux-section-media
  686. .item-carousel-container {
  687. width: auto;
  688. }
  689.  
  690. .item-details-control-root
  691. .ux-section-media
  692. .item-screenshot {
  693. width: 370px;
  694. height: 225px;
  695. }
  696.  
  697. .item-details-control-root
  698. .item-carousel-container
  699. .carousel-nav {
  700. display: none;
  701. }
  702.  
  703. .item-details-control-root
  704. .item-carousel-container
  705. .carousel {
  706. cursor: pointer;
  707. }
  708.  
  709. .item-details-screenshot-popup {
  710. position: fixed;
  711. }
  712.  
  713. .item-details-screenshot-popup .img-screenshot {
  714. max-width: 80vw;
  715. min-height: 0;
  716. max-height: 80vh;
  717. }
  718.  
  719. .item-details-screenshot-popup .ms-Dialog-main {
  720. max-width: none;
  721. max-height: none;
  722. }
  723.  
  724. .ux-section-details-tabs
  725. .version-history-top-container {
  726. width: 100%;
  727. }
  728.  
  729. .version-history-top-container {
  730. display: inline-block;
  731. margin-bottom: 34px;
  732. }
  733.  
  734. .version-history-top-container
  735. .version-history-header-container {
  736. padding-left: 0;
  737. }
  738.  
  739. .version-history-top-container
  740. .version-history-table {
  741. margin-bottom: 22px;
  742. border-bottom: 1px solid;
  743. border-width: 1px 0;
  744. border-bottom-color: rgb(234 234 234 / 100%);
  745. border-bottom-color: rgba(
  746. var(--palette-neutral-8, 234, 234, 234),
  747. 1
  748. );
  749. border-collapse: collapse;
  750. border-spacing: 0;
  751. padding-bottom: 10px;
  752. width: 60%;
  753. font-size: 14px;
  754. }
  755.  
  756. .version-history-top-container
  757. .version-history-table-thead {
  758. display: table-header-group;
  759. border-color: inherit;
  760. width: 100%;
  761. text-align: left;
  762. }
  763.  
  764. .version-history-top-container
  765. .version-history-table-body
  766. tr:hover {
  767. background-color: #d9edf7;
  768. }
  769.  
  770. .version-history-top-container
  771. .version-history-table-body {
  772. display: table-row-group;
  773. }
  774.  
  775. .version-history-top-container
  776. .version-history-container-row {
  777. border-bottom: 1px solid #d3d3d3;
  778. border-width: 1px 0;
  779. border-collapse: collapse;
  780. padding-bottom: 10px;
  781. width: 100%;
  782. height: 40px;
  783. }
  784.  
  785. .version-history-top-container
  786. .version-history-container-column {
  787. display: inline-block;
  788. padding-top: 10px;
  789. width: 33%;
  790. text-align: left;
  791. }
  792.  
  793. .version-history-top-container
  794. .bowtie-status-info-outline::before {
  795. content: '\EA09';
  796. }
  797.  
  798. .version-history-top-container
  799. .vh-redirection-message-bar-container {
  800. margin-bottom: 14px;
  801. background-color: rgb(244 244 244 / 100%);
  802. background-color: rgba(
  803. var(--palette-neutral-4, 244, 244, 244),
  804. 1
  805. );
  806. padding-top: 15px;
  807. padding-bottom: 15px;
  808. width: 60%;
  809. color: rgb(0 0 0 / 90%);
  810. color: var(
  811. --text-primary-color,
  812. rgb(0 0 0 / 90%)
  813. );
  814. }
  815.  
  816. .version-history-top-container
  817. .vh-redirection-message-bar-container
  818. .vh-redirection-message-bar {
  819. font-size: 14px;
  820. }
  821.  
  822. .version-history-top-container
  823. .vh-redirection-message-bar-container
  824. .vh-redirection-message-bar
  825. .vh-redirection-info-icon {
  826. padding-right: 8px;
  827. padding-left: 8px;
  828. color: rgb(0 0 0 / 90%);
  829. color: var(
  830. --text-primary-color,
  831. rgb(0 0 0 / 90%)
  832. );
  833. }
  834.  
  835. .version-history-top-container
  836. .vh-redirection-message-bar-container
  837. .vh-redirection-message-bar
  838. .vh-redirection-info-text {
  839. color: #006cbe;
  840. }
  841.  
  842. .version-history-top-container
  843. .vh-redirection-message-bar-container
  844. .vh-redirection-message-bar
  845. .vh-redirection-info-text-anchor-tag {
  846. color: #006cbe;
  847. }
  848.  
  849. .version-history-download-dropbutton-container {
  850. display: inline-block;
  851. position: relative;
  852. }
  853.  
  854. .version-history-download-dropbutton {
  855. cursor: pointer;
  856. padding: 16px;
  857. color: black;
  858. font-weight: 600;
  859. font-size: 14px;
  860. }
  861.  
  862. .version-history-download-dropdown-content {
  863. display: none;
  864. position: absolute;
  865. z-index: 1;
  866. margin: 5px 0 0 16px;
  867. box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
  868. padding: 0;
  869. min-width: 160px;
  870. }
  871.  
  872. .version-history-download-dropdown-content li {
  873. display: block;
  874. cursor: pointer;
  875. background-color: #fafafa;
  876. padding: 12px 16px;
  877. color: black;
  878. text-decoration: none;
  879. }
  880.  
  881. .version-history-download-dropbutton-arrow {
  882. display: inline-block;
  883. transform: rotate(45deg);
  884. margin: 0 0 2px 5px;
  885. border: solid black;
  886. border-width: 0 2px 2px 0;
  887. padding: 3px;
  888. }
  889.  
  890. .version-history-download-dropdown-content
  891. li:hover {
  892. background-color: #f1f1f1;
  893. }
  894.  
  895. .version-history-download-dropbutton-container:hover
  896. .version-history-download-dropdown-content {
  897. display: block;
  898. }
  899.  
  900. h1.vss-HubTitle {
  901. display: flex;
  902. align-items: center;
  903. margin: 0 12px 0 8px;
  904. height: 38px;
  905. font-weight: 300;
  906. font-size: 18px;
  907. }
  908.  
  909. h1.vss-HubTitle .vss-HubTitle-titleIcon {
  910. margin-right: 8px;
  911. font-size: 18px;
  912. }
  913.  
  914. .vss-contextualMenu-list {
  915. max-width: 300px;
  916. }
  917.  
  918. .vss-ContextualMenu--container {
  919. display: inline-block;
  920. }
  921.  
  922. .vss-ContextualMenu--container
  923. .ms-Button.vss-ContextualMenuButton {
  924. border: none;
  925. padding: 0;
  926. width: 32px;
  927. min-width: 32px;
  928. max-width: 32px;
  929. height: 32px;
  930. }
  931.  
  932. .vss-ContextualMenu--container
  933. .ms-Button.vss-ContextualMenuButton:focus.space-unallocated,
  934. .vss-ContextualMenu--container
  935. .ms-Button.vss-ContextualMenuButton.open.space-unallocated {
  936. display: inline-block;
  937. }
  938.  
  939. .vss-ContextualMenu--container
  940. .ms-Button.vss-ContextualMenuButton:focus.space-allocated,
  941. .vss-ContextualMenu--container
  942. .ms-Button.vss-ContextualMenuButton.open.space-allocated {
  943. visibility: visible;
  944. }
  945.  
  946. .vss-DateTimePicker {
  947. display: flex;
  948. flex-direction: row;
  949. width: 280px;
  950. }
  951.  
  952. .vss-DateTimePicker
  953. .vss-DateTimePicker--dateField {
  954. width: 50%;
  955. }
  956.  
  957. .vss-DateTimePicker
  958. .vss-DateTimePicker--timeField {
  959. padding-left: 4px;
  960. width: 50%;
  961. }
  962.  
  963. .vss-FilterBar {
  964. display: flex;
  965. }
  966.  
  967. .vss-FilterBar .vss-FilterBar--list {
  968. display: flex;
  969. flex-wrap: nowrap;
  970. align-items: flex-start;
  971. padding-left: 0;
  972. width: 100%;
  973. }
  974.  
  975. .vss-FilterBar
  976. .vss-FilterBar--list
  977. .vss-FilterBar--item {
  978. flex-shrink: 0;
  979. margin-right: 10px;
  980. margin-bottom: 10px;
  981. min-width: 200px;
  982. max-width: 100%;
  983. }
  984.  
  985. .vss-FilterBar
  986. .vss-FilterBar--list
  987. .vss-FilterBar--item
  988. input::-ms-clear {
  989. display: none;
  990. }
  991.  
  992. .vss-FilterBar
  993. .vss-FilterBar--list
  994. .vss-FilterBar--item
  995. .ms-TextField {
  996. margin-bottom: 0;
  997. }
  998.  
  999. .vss-FilterBar
  1000. .vss-FilterBar--list
  1001. .vss-FilterBar--item
  1002. .vss-PickListDropdown {
  1003. width: 200px;
  1004. }
  1005.  
  1006. .vss-FilterBar
  1007. .vss-FilterBar--list
  1008. .vss-FilterBar--item
  1009. .vss-FilterBar--item-text
  1010. input,
  1011. .vss-FilterBar
  1012. .vss-FilterBar--list
  1013. .vss-FilterBar--item
  1014. .vss-FilterBar--item-keyword
  1015. input,
  1016. .vss-FilterBar
  1017. .vss-FilterBar--list
  1018. .vss-FilterBar--item
  1019. .vss-FilterBar--item-keyword
  1020. div {
  1021. background-color: transparent;
  1022. }
  1023.  
  1024. .vss-FilterBar
  1025. .vss-FilterBar--list
  1026. .vss-FilterBar--item
  1027. .vss-FilterBar--item-keyword
  1028. input {
  1029. padding-left: 2px;
  1030. }
  1031.  
  1032. .vss-FilterBar
  1033. .vss-FilterBar--list
  1034. .vss-FilterBar--item
  1035. .clear-filter-input {
  1036. align-self: center;
  1037. cursor: pointer;
  1038. margin-right: 10px;
  1039. padding: 2px;
  1040. color: #666;
  1041. }
  1042.  
  1043. .vss-FilterBar
  1044. .vss-FilterBar--list
  1045. .vss-FilterBar--item-keyword {
  1046. width: 240px;
  1047. }
  1048.  
  1049. .vss-FilterBar
  1050. .vss-FilterBar--list
  1051. .vss-FilterBar--right-items {
  1052. display: flex;
  1053. flex-shrink: 0;
  1054. }
  1055.  
  1056. .vss-FilterBar
  1057. .vss-FilterBar--list
  1058. .vss-FilterBar--right-items.vss-FilterBar--right-items-align-right {
  1059. margin-left: auto;
  1060. }
  1061.  
  1062. .vss-FilterBar
  1063. .vss-FilterBar--list
  1064. .vss-FilterBar--right-items
  1065. .vss-FilterBar--action {
  1066. margin-bottom: 10px;
  1067. }
  1068.  
  1069. .vss-FilterBar
  1070. .vss-FilterBar--list
  1071. .vss-FilterBar--right-items
  1072. .vss-FilterBar--action.vss-FilterBar--action-apply
  1073. .ms-Icon {
  1074. font-size: 14px;
  1075. }
  1076.  
  1077. .vss-FilterBar
  1078. .vss-FilterBar--list
  1079. .vss-FilterBar--right-items
  1080. .vss-FilterBar--action.vss-FilterBar--action-clear {
  1081. display: flex;
  1082. justify-content: center;
  1083. align-items: center;
  1084. }
  1085.  
  1086. .vss-FilterBar
  1087. .vss-FilterBar--list
  1088. .vss-FilterBar--right-items
  1089. .vss-FilterBar--action
  1090. .vss-FilterBar--filter-count {
  1091. display: flex;
  1092. justify-content: center;
  1093. align-items: center;
  1094. border-radius: 50%;
  1095. background-color: #f4f4f4;
  1096. width: 25px;
  1097. height: 20px;
  1098. }
  1099.  
  1100. .vss-FilterBar
  1101. .vss-FilterBar--list
  1102. .vss-FilterBar--right-items
  1103. .vss-FilterBar--action.vss-FilterBar--action-clear
  1104. .ms-Icon {
  1105. font-size: 14px;
  1106. }
  1107.  
  1108. .vss-FilterBar
  1109. .vss-FilterBar--list
  1110. .vss-FilterBar--right-items
  1111. .vss-FilterBar--action
  1112. button {
  1113. height: 32px;
  1114. overflow: visible;
  1115. }
  1116.  
  1117. @media screen and (-ms-high-contrast: active) {
  1118. .vss-FilterBar
  1119. .vss-FilterBar--list
  1120. .vss-FilterBar--right-items
  1121. .vss-FilterBar--action
  1122. button {
  1123. border-color: Background;
  1124. }
  1125. }
  1126.  
  1127. .vss-FilterBar
  1128. .vss-FilterBar--list
  1129. .vss-FilterBar--right-items
  1130. .vss-FilterBar--action
  1131. button[disabled] {
  1132. border: none;
  1133. }
  1134.  
  1135. .vss-FilterBar
  1136. .vss-FilterBar--list
  1137. .vss-FilterBar--right-items
  1138. .vss-FilterBar--page-button-container {
  1139. display: flex;
  1140. margin-bottom: 10px;
  1141. }
  1142.  
  1143. .vss-FilterBar
  1144. .vss-FilterBar--list
  1145. .vss-FilterBar--right-items
  1146. .vss-FilterBar--page-button-container
  1147. .vss-FilterBar-page-button {
  1148. margin-right: 10px;
  1149. width: 32px;
  1150. min-width: 32px;
  1151. }
  1152.  
  1153. .vss-FilterBar
  1154. .vss-FilterBar--list
  1155. .vss-FilterBar--right-items
  1156. .vss-FilterBar--page-button-container
  1157. .vss-FilterBar-page-button
  1158. .ms-Button-flexContainer {
  1159. flex-direction: column;
  1160. }
  1161.  
  1162. .vss-FilterBar
  1163. .vss-FilterBar--list
  1164. .vss-FilterBar--right-items
  1165. .vss-FilterBar--page-button-container
  1166. .vss-FilterBar-page-button:not([disabled]) {
  1167. border-color: #c8c8c8;
  1168. background-color: #fff;
  1169. }
  1170.  
  1171. .vss-FilterBar
  1172. .vss-FilterBar--list
  1173. .vss-FilterBar--right-items
  1174. .vss-FilterBar--page-button-container
  1175. .vss-FilterBar-page-button:not(
  1176. [disabled]
  1177. ):hover,
  1178. .vss-FilterBar
  1179. .vss-FilterBar--list
  1180. .vss-FilterBar--right-items
  1181. .vss-FilterBar--page-button-container
  1182. .vss-FilterBar-page-button:not(
  1183. [disabled]
  1184. ):focus {
  1185. border-color: #666;
  1186. }
  1187.  
  1188. .vss-DateTimeRangePicker
  1189. .vss-DateTimeRangePicker--label {
  1190. float: left;
  1191. padding-left: 8px;
  1192. width: 80px;
  1193. line-height: 30px;
  1194. }
  1195.  
  1196. .vss-FileInput .vss-FileInput-dragDropLabel {
  1197. vertical-align: middle;
  1198. font-size: 12px;
  1199. text-align: right;
  1200. }
  1201.  
  1202. .vss-FileInput .vss-FileInput-filesDropTarget {
  1203. border: 1px dashed #c8c8c8;
  1204. background-color: #eaeaea;
  1205. padding-top: 15px;
  1206. padding-bottom: 15px;
  1207. color: #666;
  1208. text-align: center;
  1209. }
  1210.  
  1211. .vss-FileInput .vss-FileInput-browseContainer {
  1212. display: inline-block;
  1213. cursor: pointer;
  1214. margin-left: 20px;
  1215. border: 1px solid #c8c8c8;
  1216. border-radius: 0;
  1217. background-color: #fff;
  1218. padding: 5px 15px;
  1219. color: #212121;
  1220. }
  1221.  
  1222. .vss-FileInput
  1223. .vss-FileInput-browseContainer:hover {
  1224. text-decoration: none;
  1225. }
  1226.  
  1227. .vss-focus-visible
  1228. .vss-FileInput
  1229. .vss-FileInput-browseContainer:focus {
  1230. outline: 1px solid #212121;
  1231. }
  1232.  
  1233. @media screen and (-ms-high-contrast: active) {
  1234. .vss-focus-visible
  1235. .vss-FileInput
  1236. .vss-FileInput-browseContainer:focus {
  1237. outline: 1px dashed windowtext !important;
  1238. }
  1239. }
  1240.  
  1241. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: white-on-black) {
  1242. .vss-focus-visible
  1243. .vss-FileInput
  1244. .vss-FileInput-browseContainer:focus {
  1245. outline: 1px dashed #002033 !important;
  1246. }
  1247. }
  1248.  
  1249. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: black-on-white) {
  1250. .vss-focus-visible
  1251. .vss-FileInput
  1252. .vss-FileInput-browseContainer:focus {
  1253. outline: 1px dashed #fff !important;
  1254. }
  1255. }
  1256.  
  1257. .vss-FileInput .vss-FileInput-dragDropTable {
  1258. display: flex;
  1259. justify-content: space-between;
  1260. align-items: center;
  1261. width: 100%;
  1262. }
  1263.  
  1264. .vss-FileInput .vss-FileInput-browseButton {
  1265. padding-right: 10px;
  1266. padding-left: 10px;
  1267. text-align: left;
  1268. }
  1269.  
  1270. .vss-FileInput-filesDropTarget.vss-FileInput-dragOver {
  1271. background-color: #dff6dd !important;
  1272. }
  1273.  
  1274. .vss-FileInput
  1275. .vss-FileInput-fileList
  1276. .vss-FileInput-detailsContainer
  1277. .vss-FileInput-status {
  1278. color: #666;
  1279. }
  1280.  
  1281. .vss-FileInput
  1282. .vss-FileInput-fileList
  1283. .vss-FileInput-detailsContainer
  1284. .vss-FileInput-links {
  1285. margin-left: 10px;
  1286. }
  1287.  
  1288. .vss-FileInput
  1289. .vss-FileInput-fileList
  1290. .vss-FileInput-fileName {
  1291. font-size: 14px;
  1292. }
  1293.  
  1294. .vss-FileInput .vss-FileInput-fileList > li {
  1295. margin-bottom: 5px;
  1296. list-style: none;
  1297. }
  1298.  
  1299. .vss-FileInput .vss-FileInput-fileList {
  1300. display: none;
  1301. padding-left: 0;
  1302. max-height: 100px;
  1303. overflow-y: scroll;
  1304. }
  1305.  
  1306. .vss-FileInput
  1307. .vss-FileInput-overallStatusContainer {
  1308. margin-top: 10px;
  1309. color: #666;
  1310. text-align: center;
  1311. }
  1312.  
  1313. .vss-FileInput
  1314. .vss-FileInput-overallStatusContainer
  1315. .vss-FileInput-overallStatusActions {
  1316. margin-left: 10px;
  1317. }
  1318.  
  1319. .vss-PickList {
  1320. display: flex;
  1321. flex-direction: column;
  1322. overflow: hidden;
  1323. }
  1324.  
  1325. .vss-PickList .vss-PickList--focusContainer {
  1326. display: flex;
  1327. flex-direction: column;
  1328. overflow: hidden;
  1329. }
  1330.  
  1331. .vss-PickList .ms-ChoiceFieldGroup {
  1332. display: flex;
  1333. }
  1334.  
  1335. .vss-PickList
  1336. .ms-ChoiceFieldGroup
  1337. .ms-ChoiceFieldGroup-flexContainer {
  1338. display: flex;
  1339. flex: 1;
  1340. }
  1341.  
  1342. .vss-PickList
  1343. .ms-ChoiceFieldGroup
  1344. .ms-ChoiceField {
  1345. flex: 1;
  1346. }
  1347.  
  1348. .vss-PickList
  1349. .ms-ChoiceFieldGroup
  1350. .ms-ChoiceField:first-child {
  1351. margin-left: 5px;
  1352. }
  1353.  
  1354. .vss-PickList
  1355. .ms-ChoiceFieldGroup
  1356. .ms-ChoiceField::last-child {
  1357. margin-right: 5px;
  1358. }
  1359.  
  1360. .vss-PickList .vss-PickList--noItemsText {
  1361. text-align: center;
  1362. }
  1363.  
  1364. .vss-PickList .vss-PickList--searchTextField {
  1365. margin: 8px 6px;
  1366. }
  1367.  
  1368. .vss-PickList
  1369. .vss-PickList--searchTextField
  1370. input {
  1371. background-color: transparent;
  1372. }
  1373.  
  1374. .vss-PickList
  1375. .vss-PickList--searchTextField
  1376. input::-ms-clear {
  1377. display: none;
  1378. }
  1379.  
  1380. .vss-PickList
  1381. .vss-PickList--searchTextField
  1382. .clear-filter-input {
  1383. align-self: center;
  1384. cursor: pointer;
  1385. margin-right: 10px;
  1386. padding: 2px;
  1387. color: #666;
  1388. }
  1389.  
  1390. .vss-PickList
  1391. .vss-PickList--searchTextField
  1392. .ms-TextField-fieldGroup {
  1393. display: flex;
  1394. }
  1395.  
  1396. .vss-PickList
  1397. .vss-PickList--searchTextField
  1398. .ms-TextField-fieldGroup
  1399. input {
  1400. flex-grow: 1;
  1401. width: 0;
  1402. }
  1403.  
  1404. .vss-PickList .vss-PickList--items {
  1405. overflow: auto;
  1406. }
  1407.  
  1408. .vss-PickList
  1409. .vss-PickList--items
  1410. .vss-PickList--groupHeader {
  1411. padding-right: 10px;
  1412. padding-left: 10px;
  1413. color: #71afe5;
  1414. font-size: 11px;
  1415. }
  1416.  
  1417. .vss-PickList
  1418. .vss-PickList--items
  1419. .vss-PickList--groupSeparator {
  1420. border: 1px solid #eaeaea;
  1421. }
  1422.  
  1423. .vss-PickList
  1424. .vss-PickList--items
  1425. .vss-PickList--message {
  1426. margin-bottom: 8px;
  1427. padding-right: 10px;
  1428. padding-left: 10px;
  1429. color: #767676;
  1430. }
  1431.  
  1432. .vss-PickList
  1433. .vss-PickList--items
  1434. .vss-PickList--loading {
  1435. padding: 12px;
  1436. }
  1437.  
  1438. .vss-PickList .vss-PickList--row,
  1439. .vss-PickList .vss-PickList--action {
  1440. position: relative;
  1441. cursor: pointer;
  1442. }
  1443.  
  1444. .ms-Fabric.is-focusVisible
  1445. .vss-PickList
  1446. .vss-PickList--row:focus,
  1447. .ms-Fabric.is-focusVisible
  1448. .vss-PickList
  1449. .vss-PickList--action:focus {
  1450. outline: none;
  1451. background-color: #f4f4f4;
  1452. }
  1453.  
  1454. @media screen and (-ms-high-contrast: active) {
  1455. .ms-Fabric.is-focusVisible
  1456. .vss-PickList
  1457. .vss-PickList--row:focus,
  1458. .ms-Fabric.is-focusVisible
  1459. .vss-PickList
  1460. .vss-PickList--row:focus
  1461. .ms-Button-label,
  1462. .ms-Fabric.is-focusVisible
  1463. .vss-PickList
  1464. .vss-PickList--action:focus,
  1465. .ms-Fabric.is-focusVisible
  1466. .vss-PickList
  1467. .vss-PickList--action:focus
  1468. .ms-Button-label {
  1469. font-weight: 700;
  1470. }
  1471. }
  1472.  
  1473. .ms-Fabric.is-focusVisible
  1474. .vss-PickList
  1475. .vss-PickList--row:focus::after,
  1476. .ms-Fabric.is-focusVisible
  1477. .vss-PickList
  1478. .vss-PickList--action:focus::after {
  1479. position: absolute;
  1480. inset: 0;
  1481. border: 1px solid #212121;
  1482. pointer-events: none;
  1483. content: '';
  1484. }
  1485.  
  1486. @media screen and (-ms-high-contrast: active) {
  1487. .ms-Fabric.is-focusVisible
  1488. .vss-PickList
  1489. .vss-PickList--row:focus::after,
  1490. .ms-Fabric.is-focusVisible
  1491. .vss-PickList
  1492. .vss-PickList--action:focus::after {
  1493. border-color: #1aebff;
  1494. }
  1495. }
  1496.  
  1497. @media screen and (-ms-high-contrast: black-on-white) {
  1498. .ms-Fabric.is-focusVisible
  1499. .vss-PickList
  1500. .vss-PickList--row:focus::after,
  1501. .ms-Fabric.is-focusVisible
  1502. .vss-PickList
  1503. .vss-PickList--action:focus::after {
  1504. border-color: #37006e;
  1505. }
  1506. }
  1507.  
  1508. .vss-PickList .vss-PickList--row:active,
  1509. .vss-PickList .vss-PickList--row:focus,
  1510. .vss-PickList .vss-PickList--action:active,
  1511. .vss-PickList .vss-PickList--action:focus {
  1512. outline: none;
  1513. }
  1514.  
  1515. .vss-PickList .vss-PickList--row.disabled,
  1516. .vss-PickList .vss-PickList--action.disabled {
  1517. cursor: default;
  1518. }
  1519.  
  1520. .vss-PickList .vss-PickList--action-tooltip {
  1521. width: 100%;
  1522. }
  1523.  
  1524. .vss-PickList .vss-PickList--element {
  1525. display: flex;
  1526. flex-direction: row;
  1527. align-items: center;
  1528. overflow: hidden;
  1529. }
  1530.  
  1531. .vss-PickList .vss-PickList--element:hover {
  1532. background-color: #f4f4f4;
  1533. color: #212121;
  1534. }
  1535.  
  1536. @media screen and (-ms-high-contrast: active) {
  1537. .vss-PickList .vss-PickList--element:hover {
  1538. border-color: #1aebff;
  1539. background-color: #1aebff;
  1540. color: HighlightText;
  1541. }
  1542.  
  1543. .vss-PickList
  1544. .vss-PickList--element:hover:focus {
  1545. border-color: #000;
  1546. }
  1547. }
  1548.  
  1549. @media screen and (-ms-high-contrast: black-on-white) {
  1550. .vss-PickList .vss-PickList--element:hover {
  1551. border-color: #37006e;
  1552. background-color: #37006e;
  1553. color: HighlightText;
  1554. }
  1555. }
  1556.  
  1557. @media screen and (-ms-high-contrast: active),
  1558. screen and (-ms-high-contrast: black-on-white) {
  1559. .vss-PickList .vss-PickList--element:hover {
  1560. -ms-high-contrast-adjust: none;
  1561. }
  1562. }
  1563.  
  1564. @media screen and (-ms-high-contrast: active) {
  1565. .vss-PickList
  1566. .vss-PickList--element:hover
  1567. .vss-PickList--selectableElementButton
  1568. .vss-PickList--selectableElementButton-text {
  1569. border-color: #1aebff;
  1570. background-color: #1aebff;
  1571. color: HighlightText;
  1572. }
  1573.  
  1574. .vss-PickList
  1575. .vss-PickList--element:hover
  1576. .vss-PickList--selectableElementButton
  1577. .vss-PickList--selectableElementButton-text:focus {
  1578. border-color: #000;
  1579. }
  1580. }
  1581.  
  1582. @media screen and (-ms-high-contrast: black-on-white) {
  1583. .vss-PickList
  1584. .vss-PickList--element:hover
  1585. .vss-PickList--selectableElementButton
  1586. .vss-PickList--selectableElementButton-text {
  1587. border-color: #37006e;
  1588. background-color: #37006e;
  1589. color: HighlightText;
  1590. }
  1591. }
  1592.  
  1593. @media screen and (-ms-high-contrast: active),
  1594. screen and (-ms-high-contrast: black-on-white) {
  1595. .vss-PickList
  1596. .vss-PickList--element:hover
  1597. .vss-PickList--selectableElementButton
  1598. .vss-PickList--selectableElementButton-text {
  1599. -ms-high-contrast-adjust: none;
  1600. }
  1601. }
  1602.  
  1603. @media screen and (-ms-high-contrast: active) {
  1604. .vss-PickList
  1605. .vss-PickList--element:hover
  1606. .vss-PickList--selectableElementButton
  1607. .vss-PickList--selectableElementButtonIcon {
  1608. border-color: #1aebff;
  1609. background-color: #1aebff;
  1610. color: HighlightText;
  1611. }
  1612.  
  1613. .vss-PickList
  1614. .vss-PickList--element:hover
  1615. .vss-PickList--selectableElementButton
  1616. .vss-PickList--selectableElementButtonIcon:focus {
  1617. border-color: #000;
  1618. }
  1619. }
  1620.  
  1621. @media screen and (-ms-high-contrast: black-on-white) {
  1622. .vss-PickList
  1623. .vss-PickList--element:hover
  1624. .vss-PickList--selectableElementButton
  1625. .vss-PickList--selectableElementButtonIcon {
  1626. border-color: #37006e;
  1627. background-color: #37006e;
  1628. color: HighlightText;
  1629. }
  1630. }
  1631.  
  1632. @media screen and (-ms-high-contrast: active),
  1633. screen and (-ms-high-contrast: black-on-white) {
  1634. .vss-PickList
  1635. .vss-PickList--element:hover
  1636. .vss-PickList--selectableElementButton
  1637. .vss-PickList--selectableElementButtonIcon {
  1638. -ms-high-contrast-adjust: none;
  1639. }
  1640. }
  1641.  
  1642. @media screen and (-ms-high-contrast: active) {
  1643. .vss-PickList .vss-PickList--element:hover a,
  1644. .vss-PickList
  1645. .vss-PickList--element:hover
  1646. a:hover,
  1647. .vss-PickList
  1648. .vss-PickList--element:hover
  1649. a:visited {
  1650. border-color: #1aebff;
  1651. background-color: #1aebff;
  1652. color: HighlightText;
  1653. }
  1654.  
  1655. .vss-PickList
  1656. .vss-PickList--element:hover
  1657. a:focus,
  1658. .vss-PickList
  1659. .vss-PickList--element:hover
  1660. a:hover:focus,
  1661. .vss-PickList
  1662. .vss-PickList--element:hover
  1663. a:visited:focus {
  1664. border-color: #000;
  1665. }
  1666. }
  1667.  
  1668. @media screen and (-ms-high-contrast: black-on-white) {
  1669. .vss-PickList .vss-PickList--element:hover a,
  1670. .vss-PickList
  1671. .vss-PickList--element:hover
  1672. a:hover,
  1673. .vss-PickList
  1674. .vss-PickList--element:hover
  1675. a:visited {
  1676. border-color: #37006e;
  1677. background-color: #37006e;
  1678. color: HighlightText;
  1679. }
  1680. }
  1681.  
  1682. @media screen and (-ms-high-contrast: active),
  1683. screen and (-ms-high-contrast: black-on-white) {
  1684. .vss-PickList .vss-PickList--element:hover a,
  1685. .vss-PickList
  1686. .vss-PickList--element:hover
  1687. a:hover,
  1688. .vss-PickList
  1689. .vss-PickList--element:hover
  1690. a:visited {
  1691. -ms-high-contrast-adjust: none;
  1692. }
  1693. }
  1694.  
  1695. .vss-PickList .vss-PickList--element:active {
  1696. background-color: #f4f4f4;
  1697. color: #212121;
  1698. }
  1699.  
  1700. .vss-PickList .vss-PickList--element.disabled {
  1701. cursor: default;
  1702. background: #fff;
  1703. color: #a6a6a6;
  1704. }
  1705.  
  1706. .vss-PickList
  1707. .vss-PickList--element.disabled
  1708. .vss-PickList--selectableElementButton
  1709. .vss-PickList--selectableElementButtonIcon {
  1710. color: #a6a6a6;
  1711. }
  1712.  
  1713. .vss-PickList
  1714. .vss-PickList--element.disabled
  1715. .vss-PickList--selectableElementButton:hover,
  1716. .vss-PickList
  1717. .vss-PickList--element.disabled
  1718. .vss-PickList--selectableElementButton:active {
  1719. color: #a6a6a6;
  1720. }
  1721.  
  1722. .vss-PickList
  1723. .vss-PickList--element.disabled
  1724. .vss-PickList--selectableElementButton:hover
  1725. .vss-PickList--selectableElementButtonIcon,
  1726. .vss-PickList
  1727. .vss-PickList--element.disabled
  1728. .vss-PickList--selectableElementButton:active
  1729. .vss-PickList--selectableElementButtonIcon {
  1730. color: #a6a6a6;
  1731. }
  1732.  
  1733. .vss-PickList
  1734. .vss-PickList--element
  1735. .vss-IndicatorSet {
  1736. flex-shrink: 0;
  1737. }
  1738.  
  1739. .vss-PickList
  1740. .vss-PickList--element
  1741. .vss-PickList--selectableElementButton {
  1742. display: flex;
  1743. flex-grow: 1;
  1744. align-items: center;
  1745. outline: transparent;
  1746. border: none;
  1747. padding: 0 0 0 8px;
  1748. height: 34px;
  1749. overflow: hidden;
  1750. color: #333;
  1751. text-decoration: none;
  1752. }
  1753.  
  1754. .vss-PickList
  1755. .vss-PickList--element
  1756. .vss-PickList--selectableElementButton:visited {
  1757. color: #333;
  1758. }
  1759.  
  1760. .vss-PickList
  1761. .vss-PickList--element
  1762. .vss-PickList--selectableElementButton
  1763. .vss-PickList--selectableElementButtonIcon {
  1764. flex-shrink: 0;
  1765. margin-right: 8px;
  1766. margin-left: 0;
  1767. height: 16px;
  1768. font-size: 16px;
  1769. }
  1770.  
  1771. .vss-PickList
  1772. .vss-PickList--element
  1773. .vss-PickList--selectableElementButton
  1774. .vss-PickList--selectableElementButton-textContainer {
  1775. flex-grow: 1;
  1776. overflow: hidden;
  1777. text-overflow: ellipsis;
  1778. }
  1779.  
  1780. .vss-PickList
  1781. .vss-PickList--element
  1782. .vss-PickList--selectableElementButton
  1783. .vss-PickList--selectableElementButton-textContainer
  1784. .vss-PickList--selectableElementButton-text {
  1785. white-space: nowrap;
  1786. }
  1787.  
  1788. .vss-PickList
  1789. .vss-PickList--element
  1790. .vss-PickList--selectableElementButton:hover,
  1791. .vss-PickList
  1792. .vss-PickList--element
  1793. .vss-PickList--selectableElementButton:active {
  1794. color: #212121;
  1795. }
  1796.  
  1797. .vss-PickList
  1798. .vss-PickList--element
  1799. .vss-PickList--selectableElementButton:hover
  1800. .vss-PickList--selectableElementButtonIcon,
  1801. .vss-PickList
  1802. .vss-PickList--element
  1803. .vss-PickList--selectableElementButton:active
  1804. .vss-PickList--selectableElementButtonIcon {
  1805. color: #212121;
  1806. }
  1807.  
  1808. .vss-PickList
  1809. .vss-PickList--element.is-selected {
  1810. background-color: #dadada;
  1811. }
  1812.  
  1813. .vss-PickList
  1814. .vss-PickList--element.is-selected:hover {
  1815. background-color: #dadada;
  1816. }
  1817.  
  1818. @media screen and (-ms-high-contrast: active) {
  1819. .vss-PickList
  1820. .vss-PickList--element.is-selected:hover {
  1821. border-color: #1aebff;
  1822. background-color: #1aebff;
  1823. color: HighlightText;
  1824. }
  1825.  
  1826. .vss-PickList
  1827. .vss-PickList--element.is-selected:hover:focus {
  1828. border-color: #000;
  1829. }
  1830. }
  1831.  
  1832. @media screen and (-ms-high-contrast: black-on-white) {
  1833. .vss-PickList
  1834. .vss-PickList--element.is-selected:hover {
  1835. border-color: #37006e;
  1836. background-color: #37006e;
  1837. color: HighlightText;
  1838. }
  1839. }
  1840.  
  1841. @media screen and (-ms-high-contrast: active),
  1842. screen and (-ms-high-contrast: black-on-white) {
  1843. .vss-PickList
  1844. .vss-PickList--element.is-selected:hover {
  1845. -ms-high-contrast-adjust: none;
  1846. }
  1847. }
  1848.  
  1849. @media screen and (-ms-high-contrast: active) {
  1850. .vss-PickList
  1851. .vss-PickList--element.is-selected {
  1852. border-color: #1aebff;
  1853. background-color: #1aebff;
  1854. color: HighlightText;
  1855. }
  1856.  
  1857. .vss-PickList
  1858. .vss-PickList--element.is-selected:focus {
  1859. border-color: #000;
  1860. }
  1861. }
  1862.  
  1863. @media screen and (-ms-high-contrast: black-on-white) {
  1864. .vss-PickList
  1865. .vss-PickList--element.is-selected {
  1866. border-color: #37006e;
  1867. background-color: #37006e;
  1868. color: HighlightText;
  1869. }
  1870. }
  1871.  
  1872. @media screen and (-ms-high-contrast: active),
  1873. screen and (-ms-high-contrast: black-on-white) {
  1874. .vss-PickList
  1875. .vss-PickList--element.is-selected {
  1876. -ms-high-contrast-adjust: none;
  1877. }
  1878. }
  1879.  
  1880. @media screen and (-ms-high-contrast: active) {
  1881. .vss-PickList
  1882. .vss-PickList--element.is-selected
  1883. .vss-PickList--selectableElementButton
  1884. .vss-PickList--selectableElementButton-text {
  1885. border-color: #1aebff;
  1886. background-color: #1aebff;
  1887. color: HighlightText;
  1888. }
  1889.  
  1890. .vss-PickList
  1891. .vss-PickList--element.is-selected
  1892. .vss-PickList--selectableElementButton
  1893. .vss-PickList--selectableElementButton-text:focus {
  1894. border-color: #000;
  1895. }
  1896. }
  1897.  
  1898. @media screen and (-ms-high-contrast: black-on-white) {
  1899. .vss-PickList
  1900. .vss-PickList--element.is-selected
  1901. .vss-PickList--selectableElementButton
  1902. .vss-PickList--selectableElementButton-text {
  1903. border-color: #37006e;
  1904. background-color: #37006e;
  1905. color: HighlightText;
  1906. }
  1907. }
  1908.  
  1909. @media screen and (-ms-high-contrast: active),
  1910. screen and (-ms-high-contrast: black-on-white) {
  1911. .vss-PickList
  1912. .vss-PickList--element.is-selected
  1913. .vss-PickList--selectableElementButton
  1914. .vss-PickList--selectableElementButton-text {
  1915. -ms-high-contrast-adjust: none;
  1916. }
  1917. }
  1918.  
  1919. @media screen and (-ms-high-contrast: active) {
  1920. .vss-PickList
  1921. .vss-PickList--element.is-selected
  1922. .vss-PickList--selectableElementButton
  1923. .vss-PickList--selectableElementButtonIcon {
  1924. border-color: #1aebff;
  1925. background-color: #1aebff;
  1926. color: HighlightText;
  1927. }
  1928.  
  1929. .vss-PickList
  1930. .vss-PickList--element.is-selected
  1931. .vss-PickList--selectableElementButton
  1932. .vss-PickList--selectableElementButtonIcon:focus {
  1933. border-color: #000;
  1934. }
  1935. }
  1936.  
  1937. @media screen and (-ms-high-contrast: black-on-white) {
  1938. .vss-PickList
  1939. .vss-PickList--element.is-selected
  1940. .vss-PickList--selectableElementButton
  1941. .vss-PickList--selectableElementButtonIcon {
  1942. border-color: #37006e;
  1943. background-color: #37006e;
  1944. color: HighlightText;
  1945. }
  1946. }
  1947.  
  1948. @media screen and (-ms-high-contrast: active),
  1949. screen and (-ms-high-contrast: black-on-white) {
  1950. .vss-PickList
  1951. .vss-PickList--element.is-selected
  1952. .vss-PickList--selectableElementButton
  1953. .vss-PickList--selectableElementButtonIcon {
  1954. -ms-high-contrast-adjust: none;
  1955. }
  1956. }
  1957.  
  1958. @media screen and (-ms-high-contrast: active) {
  1959. .vss-PickList
  1960. .vss-PickList--element.is-selected
  1961. a,
  1962. .vss-PickList
  1963. .vss-PickList--element.is-selected
  1964. a:hover,
  1965. .vss-PickList
  1966. .vss-PickList--element.is-selected
  1967. a:visited {
  1968. border-color: #1aebff;
  1969. background-color: #1aebff;
  1970. color: HighlightText;
  1971. }
  1972.  
  1973. .vss-PickList
  1974. .vss-PickList--element.is-selected
  1975. a:focus,
  1976. .vss-PickList
  1977. .vss-PickList--element.is-selected
  1978. a:hover:focus,
  1979. .vss-PickList
  1980. .vss-PickList--element.is-selected
  1981. a:visited:focus {
  1982. border-color: #000;
  1983. }
  1984. }
  1985.  
  1986. @media screen and (-ms-high-contrast: black-on-white) {
  1987. .vss-PickList
  1988. .vss-PickList--element.is-selected
  1989. a,
  1990. .vss-PickList
  1991. .vss-PickList--element.is-selected
  1992. a:hover,
  1993. .vss-PickList
  1994. .vss-PickList--element.is-selected
  1995. a:visited {
  1996. border-color: #37006e;
  1997. background-color: #37006e;
  1998. color: HighlightText;
  1999. }
  2000. }
  2001.  
  2002. @media screen and (-ms-high-contrast: active),
  2003. screen and (-ms-high-contrast: black-on-white) {
  2004. .vss-PickList
  2005. .vss-PickList--element.is-selected
  2006. a,
  2007. .vss-PickList
  2008. .vss-PickList--element.is-selected
  2009. a:hover,
  2010. .vss-PickList
  2011. .vss-PickList--element.is-selected
  2012. a:visited {
  2013. -ms-high-contrast-adjust: none;
  2014. }
  2015. }
  2016.  
  2017. .vss-PickList .vss-PickList--actions {
  2018. border-top: 1px solid #eaeaea;
  2019. }
  2020.  
  2021. .vss-PickList
  2022. .vss-PickList--actions
  2023. .vss-PickList--action {
  2024. overflow: hidden;
  2025. }
  2026.  
  2027. .vss-PickList
  2028. .vss-PickList--actions
  2029. .vss-PickList--action:focus,
  2030. .vss-PickList
  2031. .vss-PickList--actions
  2032. .vss-PickList--action:hover {
  2033. background-color: #f4f4f4;
  2034. color: #212121;
  2035. }
  2036.  
  2037. .vss-PickList
  2038. .vss-PickList--actions
  2039. .vss-PickList--action
  2040. .vss-PickList--selectableElementButton {
  2041. border: none;
  2042. width: 100%;
  2043. height: 34px;
  2044. }
  2045.  
  2046. .vss-PickList
  2047. .vss-PickList--multiSelectableElement {
  2048. display: flex;
  2049. overflow: hidden;
  2050. }
  2051.  
  2052. .vss-PickList
  2053. .vss-PickList--multiSelectableElement:focus {
  2054. outline: none;
  2055. }
  2056.  
  2057. .vss-PickList
  2058. .vss-PickList--multiSelectableElement
  2059. .vss-PickList--checkbox {
  2060. flex-shrink: 0;
  2061. margin: 0 8px 0 5px;
  2062. min-height: 34px;
  2063. }
  2064.  
  2065. .vss-PickList
  2066. .vss-PickList--multiSelectableElement
  2067. .vss-PickList--checkbox[disabled] {
  2068. border: none;
  2069. }
  2070.  
  2071. .vss-PickList
  2072. .vss-PickList--multiSelectableElement
  2073. .vss-PickList--multiSelectIcon {
  2074. margin-right: 5px;
  2075. overflow: visible;
  2076. }
  2077.  
  2078. .vss-PickList
  2079. .vss-PickList--multiSelectableElement
  2080. .vss-PickList--multiSelectIcon
  2081. .ms-Image
  2082. .ms-Image-image {
  2083. width: 24px;
  2084. height: 24px;
  2085. }
  2086.  
  2087. .vss-PickList
  2088. .vss-PickList--multiSelectableElement
  2089. .vss-PickList--multiSelectTextContainer {
  2090. flex-grow: 1;
  2091. margin-right: 5px;
  2092. overflow: hidden;
  2093. text-overflow: ellipsis;
  2094. }
  2095.  
  2096. .vss-PickList
  2097. .vss-PickList--multiSelectableElement
  2098. .vss-PickList--multiSelectTextContainer
  2099. .vss-PickList--multiSelectText {
  2100. padding-top: 8px;
  2101. height: 34px;
  2102. overflow: hidden;
  2103. text-overflow: ellipsis;
  2104. white-space: nowrap;
  2105. }
  2106.  
  2107. .vss-PickList
  2108. .vss-PickList--multiSelectableElement
  2109. .vss-PickList--multiSelectTextContainer
  2110. .vss-PickList--multiSelectText.disabled {
  2111. color: #a6a6a6;
  2112. }
  2113.  
  2114. .vss-PickList.item-picker-list
  2115. .vss-PickList--items
  2116. .vss-PickList--groupHeader {
  2117. padding: 30px 0 10px;
  2118. color: #767676;
  2119. font-size: inherit;
  2120. }
  2121.  
  2122. .vss-PickList.item-picker-list
  2123. .vss-PickList--items
  2124. .vss-PickList--groupHeader.first-group {
  2125. padding-top: 0;
  2126. }
  2127.  
  2128. .vss-PickList.item-picker-list
  2129. .vss-PickList--items
  2130. .vss-PickList--row {
  2131. border-top: 1px solid #f4f4f4;
  2132. }
  2133.  
  2134. .vss-PickList.item-picker-list
  2135. .vss-PickList--items
  2136. .vss-PickList--row.first-in-group {
  2137. border-top: none;
  2138. }
  2139.  
  2140. .vss-PickList.item-picker-list
  2141. .vss-PickList--searchTextField {
  2142. margin: 0 0 20px;
  2143. max-width: 400px;
  2144. }
  2145.  
  2146. .vss-IndicatorSet {
  2147. display: flex;
  2148. margin: 1px;
  2149. }
  2150.  
  2151. .vss-IndicatorSet .vss-ItemIndicator {
  2152. flex-shrink: 0;
  2153. align-self: center;
  2154. }
  2155.  
  2156. .vss-IndicatorSet .vss-ItemIndicator button {
  2157. overflow: visible;
  2158. }
  2159.  
  2160. .vss-PickListDropdown--title {
  2161. display: flex;
  2162. position: relative;
  2163. cursor: pointer;
  2164. border: 1px solid #c8c8c8;
  2165. background: #fff;
  2166. padding: 0 5px;
  2167. height: 32px;
  2168. overflow: hidden;
  2169. font-size: 14px;
  2170. line-height: 30px;
  2171. text-overflow: ellipsis;
  2172. white-space: nowrap;
  2173. }
  2174.  
  2175. .vss-PickListDropdown--title:hover {
  2176. border-color: #767676;
  2177. }
  2178.  
  2179. @media screen and (-ms-high-contrast: active) {
  2180. .vss-PickListDropdown--title:hover {
  2181. border-color: #1aebff;
  2182. }
  2183. }
  2184.  
  2185. .vss-PickListDropdown--title.vss-PickListDropdown--placeholder {
  2186. color: #666;
  2187. }
  2188.  
  2189. .vss-PickListDropdown--title.disabled {
  2190. cursor: default;
  2191. border-color: #f4f4f4;
  2192. background-color: #f4f4f4;
  2193. color: #a6a6a6;
  2194. }
  2195.  
  2196. .vss-PickListDropdown--title:focus,
  2197. .vss-PickListDropdown--title.focused {
  2198. outline: none;
  2199. border-color: #0078d4;
  2200. }
  2201.  
  2202. @media screen and (-ms-high-contrast: active) {
  2203. .vss-PickListDropdown--title:focus,
  2204. .vss-PickListDropdown--title.focused {
  2205. border-color: #1aebff;
  2206. }
  2207. }
  2208.  
  2209. .vss-PickListDropdown--title
  2210. .vss-PickListDropdown--title-caretIcon {
  2211. margin: 0 5px;
  2212. font-size: 14px;
  2213. }
  2214.  
  2215. .vss-PickListDropdown--title
  2216. .vss-PickListDropdown--title-checkIcon {
  2217. margin: 0 5px;
  2218. color: #0078d4;
  2219. }
  2220.  
  2221. .vss-PickListDropdown--title
  2222. .vss-PickListDropdown--title-textContainer {
  2223. left: 12px;
  2224. flex-grow: 1;
  2225. margin: 0 5px;
  2226. overflow: hidden;
  2227. text-overflow: ellipsis;
  2228. }
  2229.  
  2230. .vss-PickListDropdown--title
  2231. .vss-PickListDropdown--title-textContainer
  2232. .vss-PickListDropdown--title-text-withSelections {
  2233. font-weight: 600;
  2234. }
  2235.  
  2236. .vss-PickListDropdown--list
  2237. .vss-PickList--items {
  2238. max-height: 270px;
  2239. }
  2240.  
  2241. body .vss-PickListDropdown--callout {
  2242. animation: none;
  2243. }
  2244.  
  2245. .vss-PickList--filterBar {
  2246. justify-content: center;
  2247. min-height: 36px;
  2248. }
  2249.  
  2250. .vss-HubBreadcrumb--container {
  2251. overflow: hidden;
  2252. }
  2253.  
  2254. .vss-HubBreadcrumb.ms-Breadcrumb {
  2255. margin: 4px 0;
  2256. }
  2257.  
  2258. .vss-HubBreadcrumb li.ms-Breadcrumb-listItem {
  2259. margin-left: 2px;
  2260. }
  2261.  
  2262. .vss-HubBreadcrumb
  2263. li.ms-Breadcrumb-listItem:first-of-type {
  2264. margin-left: 0;
  2265. }
  2266.  
  2267. .vss-HubBreadcrumb .vss-HubBreadcrumb--item {
  2268. display: inline-flex;
  2269. align-items: center;
  2270. min-height: 30px;
  2271. }
  2272.  
  2273. .vss-HubBreadcrumb
  2274. .vss-HubBreadcrumb--item:hover {
  2275. background-color: #f4f4f4;
  2276. }
  2277.  
  2278. .vss-HubBreadcrumb
  2279. .vss-HubBreadcrumb--item:active {
  2280. background-color: #c8c8c8;
  2281. }
  2282.  
  2283. .vss-HubBreadcrumb
  2284. .vss-HubBreadcrumb--item.no-click
  2285. button {
  2286. cursor: default;
  2287. }
  2288.  
  2289. .vss-HubBreadcrumb
  2290. .vss-HubBreadcrumb--item.no-click
  2291. button:hover {
  2292. background-color: transparent;
  2293. }
  2294.  
  2295. .vss-HubBreadcrumb
  2296. .vss-HubBreadcrumb--item.no-click
  2297. button
  2298. span.ms-Breadcrumb-item {
  2299. cursor: default;
  2300. }
  2301.  
  2302. .vss-HubBreadcrumb
  2303. .vss-HubBreadcrumb--item
  2304. .vss-HubBreadcrumb--itemContainer {
  2305. display: flex;
  2306. align-items: center;
  2307. }
  2308.  
  2309. .vss-HubBreadcrumb
  2310. .vss-HubBreadcrumb--item
  2311. .vss-HubBreadcrumb--itemContainer
  2312. span.ms-Breadcrumb-item {
  2313. cursor: pointer;
  2314. }
  2315.  
  2316. .vss-HubBreadcrumb
  2317. .vss-HubBreadcrumb--item
  2318. .vss-HubBreadcrumb--itemText {
  2319. font-weight: 300;
  2320. font-size: 18px;
  2321. }
  2322.  
  2323. .vss-HubBreadcrumb
  2324. .vss-HubBreadcrumb--item
  2325. .vss-HubBreadcrumb--item-leftIcon {
  2326. margin-right: 4px;
  2327. margin-left: 8px;
  2328. font-size: 18px;
  2329. }
  2330.  
  2331. .vss-HubBreadcrumb
  2332. .vss-HubBreadcrumb--item
  2333. .vss-HubBreadcrumb--item-dropdown {
  2334. margin-top: 4px;
  2335. margin-right: 8px;
  2336. }
  2337.  
  2338. .vss-PickList.picker-dropdown {
  2339. justify-content: center;
  2340. min-width: 220px;
  2341. min-height: 36px;
  2342. }
  2343.  
  2344. .vss-PickList.picker-dropdown
  2345. .vss-PickList--items {
  2346. max-height: 270px;
  2347. }
  2348.  
  2349. .vss-Icon {
  2350. font-style: normal;
  2351. }
  2352.  
  2353. .vss-Icon.vss-Icon--bowtie {
  2354. font-family: bowtie;
  2355. }
  2356.  
  2357. .vss-HubHeader {
  2358. display: flex;
  2359. align-items: center;
  2360. overflow: hidden;
  2361. }
  2362.  
  2363. .vss-HubTileRegion {
  2364. display: flex;
  2365. flex-shrink: 0;
  2366. height: 38px;
  2367. }
  2368.  
  2369. .vss-HubTileRegion .vss-HubTile {
  2370. margin-left: 10px;
  2371. width: 120px;
  2372. }
  2373.  
  2374. .vss-HubTileRegion .vss-HubTextTile {
  2375. display: flex;
  2376. flex-direction: column;
  2377. justify-content: center;
  2378. text-align: center;
  2379. }
  2380.  
  2381. .vss-HubTileRegion
  2382. .vss-HubTextTile
  2383. .vss-HubTextTile--primaryText {
  2384. color: #333;
  2385. font-size: 14px;
  2386. }
  2387.  
  2388. .vss-HubTileRegion
  2389. .vss-HubTextTile
  2390. .vss-HubTextTile--primaryText.vss-HubTextTile--primaryTextOnly {
  2391. font-weight: 600;
  2392. }
  2393.  
  2394. .vss-HubTileRegion
  2395. .vss-HubTextTile
  2396. .vss-HubTextTile--secondaryText {
  2397. color: #666;
  2398. font-size: 11px;
  2399. }
  2400.  
  2401. .vss-Splitter--container {
  2402. position: relative;
  2403. flex-grow: 1;
  2404. }
  2405.  
  2406. .vss-Splitter--container
  2407. .vss-Splitter--pane-fixed {
  2408. flex-grow: 0;
  2409. flex-shrink: 0;
  2410. max-width: 100%;
  2411. }
  2412.  
  2413. .vss-Splitter--container
  2414. .vss-Splitter--pane-flexible {
  2415. flex: 1 1 0%;
  2416. width: 0;
  2417. min-width: 0;
  2418. min-height: 0;
  2419. }
  2420.  
  2421. .vss-Splitter--container
  2422. .vss-Splitter--divider {
  2423. position: relative;
  2424. flex: 0 0 4px;
  2425. user-select: none;
  2426. user-select: none;
  2427. user-select: none;
  2428. }
  2429.  
  2430. .vss-Splitter--container
  2431. .vss-Splitter--divider::after {
  2432. position: absolute;
  2433. background-color: #a6a6a6;
  2434. pointer-events: none;
  2435. content: '';
  2436. user-select: none;
  2437. user-select: none;
  2438. user-select: none;
  2439. }
  2440.  
  2441. .vss-Splitter--container
  2442. .vss-Splitter--drag-placeholder {
  2443. position: absolute;
  2444. z-index: 1000;
  2445. background-color: #a6a6a6;
  2446. }
  2447.  
  2448. .vss-Splitter--container.vss-Splitter--container-row {
  2449. display: -webkit-box;
  2450. display: flex;
  2451. flex-flow: row nowrap;
  2452. }
  2453.  
  2454. .vss-Splitter--container.vss-Splitter--container-row
  2455. .vss-Splitter--divider {
  2456. cursor: ew-resize;
  2457. }
  2458.  
  2459. .vss-Splitter--container.vss-Splitter--container-row
  2460. .vss-Splitter--divider::after {
  2461. top: 0;
  2462. bottom: 0;
  2463. left: 50%;
  2464. transition:
  2465. 100ms width,
  2466. 100ms left;
  2467. width: 1px;
  2468. }
  2469.  
  2470. .vss-Splitter--container.vss-Splitter--container-row
  2471. .vss-Splitter--divider:not(
  2472. .vss-Splitter--divider-dragging
  2473. ):hover::after,
  2474. .vss-Splitter--container.vss-Splitter--container-row
  2475. .vss-Splitter--divider:focus::after {
  2476. left: calc(50% - 2px);
  2477. width: 4px;
  2478. }
  2479.  
  2480. .vss-Splitter--container.vss-Splitter--container-row
  2481. .vss-Splitter--drag-placeholder {
  2482. width: 4px;
  2483. height: 100%;
  2484. }
  2485.  
  2486. .vss-Splitter--container.vss-Splitter--container-column {
  2487. display: -webkit-box;
  2488. display: flex;
  2489. flex-flow: column nowrap;
  2490. }
  2491.  
  2492. .vss-Splitter--container.vss-Splitter--container-column
  2493. .vss-Splitter--divider {
  2494. cursor: ns-resize;
  2495. }
  2496.  
  2497. .vss-Splitter--container.vss-Splitter--container-column
  2498. .vss-Splitter--divider::after {
  2499. top: 50%;
  2500. right: 0;
  2501. left: 0;
  2502. transition:
  2503. 100ms height,
  2504. 100ms top;
  2505. height: 1px;
  2506. }
  2507.  
  2508. .vss-Splitter--container.vss-Splitter--container-column
  2509. .vss-Splitter--divider:not(
  2510. .vss-Splitter--divider-dragging
  2511. ):hover::after,
  2512. .vss-Splitter--container.vss-Splitter--container-column
  2513. .vss-Splitter--divider:focus::after {
  2514. top: calc(50% - 2px);
  2515. height: 4px;
  2516. }
  2517.  
  2518. .vss-Splitter--container.vss-Splitter--container-column
  2519. .vss-Splitter--drag-placeholder {
  2520. width: 100%;
  2521. height: 4px;
  2522. }
  2523.  
  2524. .vss-PivotBar {
  2525. display: flex;
  2526. flex-direction: column;
  2527. }
  2528.  
  2529. .vss-PivotBar .vss-PivotBar--bar-one-line,
  2530. .vss-PivotBar .vss-PivotBar--bar-two-line {
  2531. flex-shrink: 0;
  2532. border-bottom: 1px solid #eaeaea;
  2533. }
  2534.  
  2535. .vss-PivotBar .vss-PivotBar--bar-one-line {
  2536. display: flex;
  2537. }
  2538.  
  2539. .vss-PivotBar
  2540. .vss-PivotBar--bar-one-line
  2541. .vss-PivotBar--bar {
  2542. flex: 1;
  2543. }
  2544.  
  2545. .vss-PivotBar .vss-PivotBar--header {
  2546. display: flex;
  2547. flex-shrink: 0;
  2548. }
  2549.  
  2550. .vss-PivotBar .vss-PivotBar--header.vertical {
  2551. margin-right: 20px;
  2552. margin-left: 24px;
  2553. }
  2554.  
  2555. .vss-PivotBar
  2556. .vss-PivotBar--header
  2557. .vss-HubHeader {
  2558. flex-grow: 1;
  2559. }
  2560.  
  2561. .vss-PivotBar .vss-PivotBar--pivotsContainer {
  2562. display: flex;
  2563. flex-grow: 1;
  2564. margin-right: 20px;
  2565. margin-left: 12px;
  2566. padding-top: 5px;
  2567. overflow: hidden;
  2568. }
  2569.  
  2570. .vss-PivotBar
  2571. .vss-PivotBar--pivotsContainer.vertical {
  2572. margin-left: 0;
  2573. }
  2574.  
  2575. .vss-PivotBar
  2576. .vss-PivotBar--pivotsContainer
  2577. .ms-Nav {
  2578. max-width: 225px;
  2579. }
  2580.  
  2581. .vss-PivotBar
  2582. .vss-PivotBar--pivotsContainer
  2583. .ms-Nav
  2584. .ms-Nav-group.is-expanded
  2585. .ms-Nav-groupContent {
  2586. visibility: visible;
  2587. margin-bottom: 40px;
  2588. height: auto;
  2589. overflow: visible;
  2590. }
  2591.  
  2592. .vss-PivotBar
  2593. .vss-PivotBar--pivotsContainer
  2594. .ms-Nav
  2595. .ms-Nav-groupContent {
  2596. display: block;
  2597. visibility: hidden;
  2598. margin-bottom: 0;
  2599. height: 0;
  2600. overflow: hidden;
  2601. }
  2602.  
  2603. .vss-PivotBar
  2604. .vss-PivotBar--pivotsContainer
  2605. .ms-Nav
  2606. .ms-Nav-compositeLink
  2607. .ms-Nav-link {
  2608. color: #333;
  2609. }
  2610.  
  2611. .vss-PivotBar
  2612. .vss-PivotBar--pivotsContainer
  2613. .ms-Nav
  2614. .ms-Nav-compositeLink.is-selected
  2615. .ms-Nav-link {
  2616. font-weight: 600;
  2617. }
  2618.  
  2619. .vss-PivotBar
  2620. .vss-PivotBar--pivotsContainer
  2621. .ms-Nav
  2622. .ms-Nav-chevronButton {
  2623. border-bottom: 1px #eaeaea solid;
  2624. }
  2625.  
  2626. .vss-PivotBar
  2627. .vss-PivotBar--barAndContentContainer {
  2628. display: flex;
  2629. flex-grow: 1;
  2630. flex-direction: column;
  2631. }
  2632.  
  2633. .vss-PivotBar .vss-PivotBar--pivots {
  2634. flex: 0 1 auto;
  2635. margin-right: 8px;
  2636. white-space: nowrap;
  2637. }
  2638.  
  2639. .vss-PivotBar .vss-PivotBar--pivots.vertical {
  2640. border-right: 1px #eaeaea solid;
  2641. overflow-y: auto;
  2642. }
  2643.  
  2644. .vss-PivotBar
  2645. .vss-PivotBar--pivots
  2646. .vss-PivotBar--itemLink {
  2647. margin-right: 8px;
  2648. color: inherit;
  2649. }
  2650.  
  2651. .vss-PivotBar
  2652. .vss-PivotBar--pivots
  2653. .vss-PivotBar--itemLink:last-child {
  2654. margin-right: 0;
  2655. }
  2656.  
  2657. .vss-PivotBar
  2658. .vss-PivotBar--pivots
  2659. .vss-PivotBar--itemLink:focus {
  2660. outline: none;
  2661. }
  2662.  
  2663. .vss-PivotBar
  2664. .vss-PivotBar--pivots
  2665. .vss-PivotBar--button {
  2666. display: inline-block;
  2667. position: relative;
  2668. border: 0;
  2669. background-color: transparent;
  2670. padding: 0 8px;
  2671. overflow: visible;
  2672. text-align: center;
  2673. }
  2674.  
  2675. .vss-PivotBar
  2676. .vss-PivotBar--pivots
  2677. .vss-PivotBar--button:focus {
  2678. outline: none;
  2679. }
  2680.  
  2681. .vss-PivotBar
  2682. .vss-PivotBar--pivots
  2683. .vss-PivotBar--button:hover {
  2684. color: inherit;
  2685. }
  2686.  
  2687. .vss-PivotBar
  2688. .vss-PivotBar--pivots
  2689. .vss-PivotBar--button
  2690. .text {
  2691. padding: 0 1px;
  2692. overflow: hidden;
  2693. text-overflow: ellipsis;
  2694. white-space: nowrap;
  2695. }
  2696.  
  2697. .vss-PivotBar
  2698. .vss-PivotBar--pivots
  2699. .vss-PivotBar--button
  2700. .text,
  2701. .vss-PivotBar
  2702. .vss-PivotBar--pivots
  2703. .vss-PivotBar--button
  2704. .badge {
  2705. display: inline-block;
  2706. vertical-align: top;
  2707. }
  2708.  
  2709. .vss-PivotBar
  2710. .vss-PivotBar--pivots
  2711. .vss-PivotBar--button
  2712. .icon
  2713. + .text {
  2714. margin-left: 4px;
  2715. }
  2716.  
  2717. .vss-PivotBar
  2718. .vss-PivotBar--pivots
  2719. .vss-PivotBar--button
  2720. .badge {
  2721. vertical-align: baseline;
  2722. margin-left: 4px;
  2723. border-radius: 5px;
  2724. background-color: #dadada;
  2725. padding: 0 3px;
  2726. font-size: 12px;
  2727. }
  2728.  
  2729. .vss-PivotBar
  2730. .vss-PivotBar--pivots
  2731. .vss-PivotBar--button.selected {
  2732. border-bottom: 2px solid #005a9e;
  2733. padding-top: 2px;
  2734. font-weight: 600;
  2735. }
  2736.  
  2737. .vss-PivotBar
  2738. .ms-Nav
  2739. .ms-Nav-compositeLink
  2740. .ms-Nav-linkButton,
  2741. .vss-PivotBar
  2742. .ms-Nav
  2743. .ms-Nav-compositeLink
  2744. .ms-Nav-linkButton:hover {
  2745. color: inherit;
  2746. }
  2747.  
  2748. .vss-PivotBar .vss-PivotBar--bar {
  2749. display: flex;
  2750. }
  2751.  
  2752. .vss-PivotBar
  2753. .vss-PivotBar--bar
  2754. .vss-PivotBar--dropdown {
  2755. height: 100%;
  2756. }
  2757.  
  2758. .vss-PivotBar
  2759. .vss-PivotBar--bar
  2760. .vss-PivotBar--dropdown
  2761. .ms-Dropdown-title {
  2762. border: 0;
  2763. background: transparent;
  2764. padding-top: 4px;
  2765. padding-left: 9px;
  2766. font-weight: 600;
  2767. }
  2768.  
  2769. .vss-PivotBar
  2770. .vss-PivotBar--bar
  2771. .vss-PivotBar--dropdown
  2772. .ms-Dropdown-caretDownWrapper {
  2773. cursor: pointer;
  2774. background: transparent;
  2775. padding-top: 4px;
  2776. }
  2777.  
  2778. .vss-PivotBar
  2779. .vss-PivotBar--bar
  2780. .vss-PivotBar--dropdown.is-open,
  2781. .vss-PivotBar
  2782. .vss-PivotBar--bar
  2783. .vss-PivotBar--dropdown:hover {
  2784. background-color: #eaeaea;
  2785. }
  2786.  
  2787. @media screen and (-ms-high-contrast: active) {
  2788. .vss-PivotBar
  2789. .vss-PivotBar--bar
  2790. .vss-PivotBar--dropdown:focus,
  2791. .vss-PivotBar
  2792. .vss-PivotBar--bar
  2793. .vss-PivotBar--dropdown:focus
  2794. .ms-Dropdown-title,
  2795. .vss-PivotBar
  2796. .vss-PivotBar--bar
  2797. .vss-PivotBar--dropdown:focus
  2798. .ms-Dropdown-caretDownWrapper,
  2799. .vss-PivotBar
  2800. .vss-PivotBar--bar
  2801. .vss-PivotBar--dropdown:focus
  2802. .ms-Dropdown-caretDown {
  2803. background: Highlight;
  2804. color: HighlightText;
  2805. }
  2806. }
  2807.  
  2808. .vss-PivotBar
  2809. .vss-PivotBar--bar
  2810. .vss-PivotBar--right {
  2811. display: flex;
  2812. flex: 1 1 100%;
  2813. }
  2814.  
  2815. .vss-PivotBar
  2816. .vss-PivotBar--bar
  2817. .vss-PivotBar--separator {
  2818. flex: 0 1 auto;
  2819. align-self: center;
  2820. margin: 0 8px;
  2821. background-color: #c8c8c8;
  2822. width: 1px;
  2823. min-width: 1px;
  2824. height: 24px;
  2825. }
  2826.  
  2827. .vss-PivotBar
  2828. .vss-PivotBar--bar
  2829. .vss-PivotBar--commandBar {
  2830. flex: 1 1 auto;
  2831. background-color: transparent;
  2832. width: 100px;
  2833. }
  2834.  
  2835. .vss-PivotBar
  2836. .vss-PivotBar--bar
  2837. .vss-PivotBar--commandBar
  2838. .vss-Icon {
  2839. color: #0078d4;
  2840. }
  2841.  
  2842. .vss-PivotBar
  2843. .vss-PivotBar--bar
  2844. .vss-PivotBar--commandBar
  2845. .bowtie-icon {
  2846. vertical-align: top;
  2847. line-height: 40px;
  2848. }
  2849.  
  2850. .vss-PivotBar
  2851. .vss-PivotBar--bar
  2852. .vss-PivotBar--commandBar
  2853. .ms-CommandBarItem-link {
  2854. padding: 0 8px;
  2855. }
  2856.  
  2857. .vss-PivotBar
  2858. .vss-PivotBar--bar
  2859. .vss-PivotBar--commandBar
  2860. .ms-CommandBar-primaryCommands {
  2861. margin-left: 0;
  2862. }
  2863.  
  2864. .vss-PivotBar
  2865. .vss-PivotBar--bar
  2866. .vss-PivotBar--commandBar
  2867. .ms-CommandBar-sideCommands {
  2868. padding-right: 0;
  2869. }
  2870.  
  2871. .vss-PivotBar
  2872. .vss-PivotBar--bar
  2873. .vss-PivotBar--commandBar
  2874. .ms-CommandBar-sideCommands
  2875. > .ms-CommandBarItem.vss-PivotBar--commandBar-barChoiceGroup
  2876. .ms-Button-icon {
  2877. color: #666;
  2878. font-size: 12px;
  2879. }
  2880.  
  2881. .vss-PivotBar
  2882. .vss-PivotBar--bar
  2883. .vss-PivotBar--commandBar
  2884. .ms-CommandBar-sideCommands
  2885. > .ms-CommandBarItem.vss-PivotBar--commandBar-barChoiceGroup:hover {
  2886. background-color: inherit;
  2887. }
  2888.  
  2889. .vss-PivotBar
  2890. .vss-PivotBar--bar
  2891. .vss-PivotBar--commandBar
  2892. .ms-CommandBar-sideCommands
  2893. > .ms-CommandBarItem.vss-PivotBar--commandBar-barChoiceGroup:hover
  2894. .vss-PivotBar--commandBar-barChoiceCycle:hover,
  2895. .vss-PivotBar
  2896. .vss-PivotBar--bar
  2897. .vss-PivotBar--commandBar
  2898. .ms-CommandBar-sideCommands
  2899. > .ms-CommandBarItem.vss-PivotBar--commandBar-barChoiceGroup:hover
  2900. .vss-PivotBar--commandBar-barChoiceDrop:hover {
  2901. background-color: #eaeaea;
  2902. }
  2903.  
  2904. .vss-PivotBar
  2905. .vss-PivotBar--bar
  2906. .vss-PivotBar--commandBar
  2907. .ms-CommandBar-sideCommands
  2908. > .ms-CommandBarItem.vss-PivotBar--commandBar-text {
  2909. display: inline-flex;
  2910. align-items: center;
  2911. cursor: default;
  2912. padding: 0 4px;
  2913. color: #212121;
  2914. }
  2915.  
  2916. .vss-PivotBar
  2917. .vss-PivotBar--bar
  2918. .vss-PivotBar--commandBar
  2919. .ms-CommandBar-sideCommands
  2920. > .ms-CommandBarItem.vss-PivotBar--commandBar-text:hover {
  2921. background-color: inherit;
  2922. }
  2923.  
  2924. .vss-PivotBar
  2925. .vss-PivotBar--bar
  2926. .vss-PivotBar--commandBar
  2927. .ms-CommandBar-sideCommands
  2928. > .ms-CommandBarItem.vss-PivotBar--commandBar-barSlider {
  2929. display: inline-flex;
  2930. align-items: center;
  2931. }
  2932.  
  2933. .vss-PivotBar
  2934. .vss-PivotBar--bar
  2935. .vss-PivotBar--commandBar
  2936. .ms-CommandBar-sideCommands
  2937. > .ms-CommandBarItem.vss-PivotBar--commandBar-barSlider:hover {
  2938. background-color: inherit;
  2939. }
  2940.  
  2941. .vss-PivotBar
  2942. .vss-PivotBar--bar
  2943. .vss-PivotBar--commandBar
  2944. .ms-CommandBar-sideCommands
  2945. > .ms-CommandBarItem.vss-PivotBar--commandBar-barSlider
  2946. .vss-PivotBar--commandBar-slider.ms-Slider {
  2947. display: flex;
  2948. justify-content: center;
  2949. align-items: center;
  2950. margin: 0;
  2951. }
  2952.  
  2953. .vss-PivotBar
  2954. .vss-PivotBar--bar
  2955. .vss-PivotBar--commandBar
  2956. .ms-CommandBar-sideCommands
  2957. > .ms-CommandBarItem.vss-PivotBar--commandBar-barSlider
  2958. .vss-PivotBar--commandBar-slider.ms-Slider
  2959. .ms-Slider-container {
  2960. width: 100px;
  2961. }
  2962.  
  2963. .vss-PivotBar
  2964. .vss-PivotBar--bar
  2965. .vss-PivotBar--commandBar
  2966. .ms-CommandBar-sideCommands
  2967. > .ms-CommandBarItem
  2968. .vss-PivotBar--commandBar-toggle {
  2969. border: 0;
  2970. padding: 0 8px;
  2971. }
  2972.  
  2973. .vss-PivotBar
  2974. .vss-PivotBar--bar
  2975. .vss-PivotBar--commandBar
  2976. .ms-CommandBar-sideCommands
  2977. .vss-ChoiceGroupButton {
  2978. display: inline-flex;
  2979. align-items: center;
  2980. padding: 0 8px;
  2981. }
  2982.  
  2983. .vss-PivotBar
  2984. .vss-PivotBar--bar
  2985. .vss-PivotBar--commandBar
  2986. .ms-CommandBar-sideCommands
  2987. .vss-ChoiceGroupButton
  2988. .vss-ChoiceGroupButton--separator {
  2989. border-left: 1px solid #c8c8c8;
  2990. height: 16px;
  2991. }
  2992.  
  2993. .vss-PivotBar
  2994. .vss-PivotBar--bar
  2995. .vss-PivotBar--commandBar
  2996. .ms-CommandBar-sideCommands
  2997. .vss-PivotBarSlider {
  2998. position: relative;
  2999. outline: 0;
  3000. padding: 6px 8px;
  3001. }
  3002.  
  3003. .vss-PivotBar
  3004. .vss-PivotBar--bar
  3005. .vss-PivotBar--commandBar
  3006. .vss-PivotBar--commandBar-item
  3007. .ms-CommandBarItem-link[disabled] {
  3008. border: 0;
  3009. color: #c8c8c8;
  3010. }
  3011.  
  3012. .vss-PivotBar
  3013. .vss-PivotBar--bar
  3014. .vss-PivotBar--commandBar
  3015. .vss-PivotBar--commandBar-item
  3016. .ms-CommandBarItem-link[disabled]
  3017. .vss-Icon {
  3018. color: #c8c8c8;
  3019. }
  3020.  
  3021. .vss-PivotBar
  3022. .vss-PivotBar--bar
  3023. .vss-PivotBar--inlineFilterBar {
  3024. background-color: transparent;
  3025. }
  3026.  
  3027. .vss-PivotBar
  3028. .vss-PivotBar--bar
  3029. .vss-PivotBar--inlineFilterBar
  3030. .vss-FilterBar {
  3031. padding-top: 0;
  3032. height: 100%;
  3033. }
  3034.  
  3035. .vss-PivotBar
  3036. .vss-PivotBar--bar
  3037. .vss-PivotBar--inlineFilterBar
  3038. .vss-FilterBar
  3039. .vss-FilterBar--list {
  3040. align-items: center;
  3041. }
  3042.  
  3043. .vss-PivotBar
  3044. .vss-PivotBar--bar
  3045. .vss-PivotBar--inlineFilterBar
  3046. .vss-FilterBar
  3047. .vss-FilterBar--action {
  3048. display: none;
  3049. }
  3050.  
  3051. .vss-PivotBar
  3052. .vss-PivotBar--bar
  3053. .vss-PivotBar--inlineFilterBar
  3054. .vss-FilterBar
  3055. .vss-FilterBar--item {
  3056. margin-bottom: 0;
  3057. }
  3058.  
  3059. .vss-PivotBar .vss-PivotBar--content {
  3060. display: flex;
  3061. position: relative;
  3062. flex-grow: 1;
  3063. outline: 0;
  3064. overflow-y: auto;
  3065. }
  3066.  
  3067. .vss-PivotBar
  3068. .vss-PivotBar--content.hide-content {
  3069. display: none;
  3070. }
  3071.  
  3072. .vss-PivotBar
  3073. .vss-PivotBar--content
  3074. .vss-PivotBarItem {
  3075. flex-grow: 1;
  3076. }
  3077.  
  3078. .vss-PivotBar
  3079. .vss-PivotBar--content
  3080. .vss-PivotBarItem.content-host {
  3081. display: flex;
  3082. }
  3083.  
  3084. .vss-PivotBar
  3085. .vss-PivotBar--content
  3086. .vss-PivotBarItem.content-host
  3087. .internal-content-host,
  3088. .vss-PivotBar
  3089. .vss-PivotBar--content
  3090. .vss-PivotBarItem.content-host
  3091. .external-content-host {
  3092. flex-grow: 1;
  3093. }
  3094.  
  3095. .vss-PivotBar
  3096. .vss-PivotBar--content.vss-PivotBar--content-unscrollable {
  3097. overflow-y: visible;
  3098. }
  3099.  
  3100. .vss-PivotBar .vss-FilterBar {
  3101. flex-shrink: 0;
  3102. padding-top: 10px;
  3103. }
  3104.  
  3105. .vss-PivotBar--commandBar-icon.vss-Icon {
  3106. color: #0078d4;
  3107. }
  3108.  
  3109. .vss-PivotBar--commandBar-overflow {
  3110. max-width: 300px;
  3111. }
  3112.  
  3113. .vss-PivotBar--commandBar-overflow
  3114. .vss-PivotBar--commandBar-toggle.ms-Toggle {
  3115. margin-top: 4px;
  3116. padding-left: 8px;
  3117. }
  3118.  
  3119. .vss-PivotBar--commandBar-overflow
  3120. .vss-PivotBar--commandBar-toggle.ms-Toggle
  3121. .ms-Toggle-innerContainer {
  3122. align-items: center;
  3123. }
  3124.  
  3125. .vss-PivotBar--commandBar-overflow
  3126. .vss-PivotBar--commandBar-toggle.ms-Toggle
  3127. .ms-Toggle-background {
  3128. font-size: 15px;
  3129. }
  3130.  
  3131. .vss-PivotBar--commandBar-overflow
  3132. .ms-ContextualMenu-header
  3133. .ms-Icon-placeHolder {
  3134. display: none;
  3135. }
  3136.  
  3137. .vss-PivotBar--commandBar-overflow
  3138. .ms-ContextualMenu-header
  3139. .ms-ContextualMenu-itemText {
  3140. color: #666;
  3141. font-weight: 400;
  3142. }
  3143.  
  3144. .vss-PivotBar--commandBar-item
  3145. .ms-ContextualMenu-link[disabled],
  3146. .vss-PivotBar--commandBar-item
  3147. .ms-ContextualMenu-link.is-disabled {
  3148. border: 0;
  3149. color: #c8c8c8;
  3150. }
  3151.  
  3152. .vss-PivotBar--commandBar-item
  3153. .ms-ContextualMenu-link[disabled]
  3154. .vss-Icon,
  3155. .vss-PivotBar--commandBar-item
  3156. .ms-ContextualMenu-link.is-disabled
  3157. .vss-Icon {
  3158. color: #c8c8c8;
  3159. }
  3160.  
  3161. .ms-Fabric.is-focusVisible
  3162. .vss-PivotBar
  3163. .vss-ChoiceGroupButton
  3164. button:focus::after,
  3165. .ms-Fabric.is-focusVisible
  3166. .vss-PivotBar
  3167. .vss-PivotBarSlider:focus::after,
  3168. .ms-Fabric.is-focusVisible
  3169. .vss-PivotBar
  3170. .vss-PivotBar--dropdown:focus::after,
  3171. .ms-Fabric.is-focusVisible
  3172. .vss-PivotBar
  3173. .vss-PivotBar--commandBar-toggle:focus::after {
  3174. position: absolute;
  3175. inset: 2px;
  3176. outline: 0;
  3177. border: 1px solid #212121;
  3178. pointer-events: none;
  3179. content: '';
  3180. }
  3181.  
  3182. .vss-PivotBar--bar
  3183. .vss-PivotBar--right
  3184. button[data-command-key='viewOptions']
  3185. .ms-CommandBarItem-chevronDown {
  3186. display: none;
  3187. }
  3188.  
  3189. .vss-Hub {
  3190. display: flex;
  3191. flex-direction: column;
  3192. }
  3193.  
  3194. .vss-Hub.ms-Fabric {
  3195. color: inherit;
  3196. font-weight: inherit;
  3197. font-size: inherit;
  3198. font-family: inherit;
  3199. }
  3200.  
  3201. .vss-Hub.ms-Fabric {
  3202. font-size: 14px;
  3203. font-family:
  3204. 'Segoe UI VSS (Regular)',
  3205. -apple-system,
  3206. BlinkMacSystemFont,
  3207. Segoe UI,
  3208. Roboto,
  3209. Helvetica Neue,
  3210. Helvetica,
  3211. Ubuntu,
  3212. Arial,
  3213. sans-serif,
  3214. Apple Color Emoji,
  3215. Segoe UI Emoji,
  3216. Segoe UI Symbol;
  3217. }
  3218.  
  3219. .vss-Hub .vss-HubPivotBar {
  3220. flex-grow: 1;
  3221. overflow-y: hidden;
  3222. }
  3223.  
  3224. .vss-Hub .vss-HubPivotBar .vss-Hub--filterBar,
  3225. .vss-Hub
  3226. .vss-HubPivotBar
  3227. > .vss-PivotBar--content
  3228. .vss-PivotBarItem:not(.customPadding) {
  3229. padding-right: 20px;
  3230. padding-left: 20px;
  3231. }
  3232.  
  3233. .vss-Hub
  3234. .vss-HubPivotBar
  3235. > .vss-PivotBar--content
  3236. .vss-PivotBarItem.detailsListPadding {
  3237. padding-right: 20px;
  3238. padding-left: 12px;
  3239. }
  3240.  
  3241. .vss-Hub
  3242. .vss-HubPivotBar
  3243. .vss-PivotBar--inlineFilterBar
  3244. .vss-Hub--filterBar {
  3245. padding-right: 0;
  3246. padding-left: 0;
  3247. }
  3248.  
  3249. .vss-Hub .vss-HubPivotBar:not(.shadowStyle) {
  3250. padding-top: 10px;
  3251. }
  3252.  
  3253. .vss-Hub
  3254. .vss-HubPivotBar:not(.shadowStyle)
  3255. > .vss-PivotBar--bar-one-line,
  3256. .vss-Hub
  3257. .vss-HubPivotBar:not(.shadowStyle)
  3258. > .vss-PivotBar--bar-two-line {
  3259. margin-right: 20px;
  3260. margin-left: 12px;
  3261. }
  3262.  
  3263. .vss-Hub
  3264. .vss-HubPivotBar.shadowStyle
  3265. > .vss-PivotBar--bar-one-line,
  3266. .vss-Hub
  3267. .vss-HubPivotBar.shadowStyle
  3268. > .vss-PivotBar--bar-two-line {
  3269. padding-right: 20px;
  3270. padding-left: 12px;
  3271. }
  3272.  
  3273. .vss-Hub
  3274. .vss-HubPivotBar.shadowStyle
  3275. > .vss-PivotBar--bar-one-line,
  3276. .vss-Hub
  3277. .vss-HubPivotBar.shadowStyle
  3278. > .vss-PivotBar--bar-two-line {
  3279. box-shadow:
  3280. 0 3px 9px 0 rgb(0 0 0 / 10%),
  3281. 0 0 0 1px rgb(0 0 0 / 4%);
  3282. border-bottom: none;
  3283. background-color: #fff;
  3284. }
  3285.  
  3286. .vss-Hub
  3287. .vss-HubPivotBar.hideHeader
  3288. .vss-Hub--filterBar,
  3289. .vss-Hub
  3290. .vss-HubPivotBar.hideHeader
  3291. > .vss-PivotBar--bar-one-line,
  3292. .vss-Hub
  3293. .vss-HubPivotBar.hideHeader
  3294. > .vss-PivotBar--bar-two-line {
  3295. display: none;
  3296. }
  3297.  
  3298. .vss-Hub
  3299. .vss-HubPivotBar
  3300. .vss-PivotBar--bar-one-line {
  3301. padding-bottom: 10px;
  3302. }
  3303.  
  3304. .vss-Hub
  3305. .vss-HubPivotBar
  3306. .vss-PivotBar--bar-two-line
  3307. .vss-PivotBar--header {
  3308. padding-bottom: 2px;
  3309. }
  3310.  
  3311. .vss-Hub
  3312. .vss-HubPivotBar.vss-HubPivotBar--scrollable {
  3313. overflow-y: auto;
  3314. }
  3315.  
  3316. .vss-IconToggleButton {
  3317. font-weight: 400;
  3318. }
  3319.  
  3320. .icon-toggle-button.ms-Button.ms-Button--default {
  3321. border: none;
  3322. background: none;
  3323. padding: 0;
  3324. width: 30px;
  3325. min-width: 30px;
  3326. height: 30px;
  3327. }
  3328.  
  3329. .icon-toggle-button.ms-Button.ms-Button--default:hover,
  3330. .icon-toggle-button.ms-Button.ms-Button--default:active,
  3331. .icon-toggle-button.ms-Button.ms-Button--default:focus {
  3332. box-shadow: 0 0 0 rgb(160 160 160 / 20%);
  3333. background: none;
  3334. }
  3335.  
  3336. .vss-DetailsList.ms-DetailsList {
  3337. font-size: 14px;
  3338. }
  3339.  
  3340. .vss-DetailsList.ms-DetailsList.noGroupExpand
  3341. .ms-GroupSpacer {
  3342. display: none;
  3343. }
  3344.  
  3345. .vss-DetailsList.ms-DetailsList.noGroupExpand
  3346. .ms-DetailsHeader-cell:first-child {
  3347. display: none;
  3348. }
  3349.  
  3350. .vss-DetailsList.ms-DetailsList
  3351. .ms-GroupedList {
  3352. font-size: 14px;
  3353. }
  3354.  
  3355. .vss-DetailsList.ms-DetailsList
  3356. button:disabled.ms-DetailsHeader-cell {
  3357. cursor: default;
  3358. border: unset;
  3359. }
  3360.  
  3361. .vss-DetailsList.ms-DetailsList
  3362. .ms-DetailsHeader {
  3363. min-height: 34px;
  3364. }
  3365.  
  3366. .vss-DetailsList.ms-DetailsList .ms-List-cell {
  3367. min-height: 36px;
  3368. }
  3369.  
  3370. .vss-DetailsList.ms-DetailsList
  3371. .ms-List-cell
  3372. .ms-DetailsRow {
  3373. margin: 0;
  3374. border: none;
  3375. min-height: 36px;
  3376. }
  3377.  
  3378. .vss-DetailsList.ms-DetailsList
  3379. .ms-List-cell
  3380. .ms-DetailsRow::before {
  3381. border: none;
  3382. }
  3383.  
  3384. .vss-DetailsList.ms-DetailsList
  3385. .ms-List-cell
  3386. .ms-DetailsRow:focus::after {
  3387. border-color: #0078d4;
  3388. }
  3389.  
  3390. .vss-DetailsList.ms-DetailsList
  3391. .ms-List-cell
  3392. .ms-DetailsRow
  3393. a {
  3394. outline: 0;
  3395. border: 1px solid transparent;
  3396. color: #212121;
  3397. }
  3398.  
  3399. .vss-focus-visible
  3400. .vss-DetailsList.ms-DetailsList
  3401. .ms-List-cell
  3402. .ms-DetailsRow
  3403. a:focus {
  3404. border: 1px solid #212121;
  3405. }
  3406.  
  3407. @media screen and (-ms-high-contrast: active) {
  3408. .vss-focus-visible
  3409. .vss-DetailsList.ms-DetailsList
  3410. .ms-List-cell
  3411. .ms-DetailsRow
  3412. a:focus {
  3413. border: 1px dashed windowtext !important;
  3414. }
  3415. }
  3416.  
  3417. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: white-on-black) {
  3418. .vss-focus-visible
  3419. .vss-DetailsList.ms-DetailsList
  3420. .ms-List-cell
  3421. .ms-DetailsRow
  3422. a:focus {
  3423. border: 1px dashed #002033 !important;
  3424. }
  3425. }
  3426.  
  3427. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: black-on-white) {
  3428. .vss-focus-visible
  3429. .vss-DetailsList.ms-DetailsList
  3430. .ms-List-cell
  3431. .ms-DetailsRow
  3432. a:focus {
  3433. border: 1px dashed #fff !important;
  3434. }
  3435. }
  3436.  
  3437. @media screen and (-ms-high-contrast: active) {
  3438. .vss-DetailsList.ms-DetailsList
  3439. .ms-List-cell
  3440. .ms-DetailsRow
  3441. a {
  3442. outline: 0;
  3443. border: 1px solid transparent;
  3444. }
  3445.  
  3446. .vss-focus-visible
  3447. .vss-DetailsList.ms-DetailsList
  3448. .ms-List-cell
  3449. .ms-DetailsRow
  3450. a:focus {
  3451. border: 1px solid #212121;
  3452. }
  3453. }
  3454.  
  3455. @media screen and (-ms-high-contrast: active) {
  3456. .vss-focus-visible
  3457. .vss-DetailsList.ms-DetailsList
  3458. .ms-List-cell
  3459. .ms-DetailsRow
  3460. a:focus {
  3461. border: 1px dashed windowtext !important;
  3462. }
  3463. }
  3464.  
  3465. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: white-on-black) {
  3466. .vss-focus-visible
  3467. .vss-DetailsList.ms-DetailsList
  3468. .ms-List-cell
  3469. .ms-DetailsRow
  3470. a:focus {
  3471. border: 1px dashed #002033 !important;
  3472. }
  3473. }
  3474.  
  3475. @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: black-on-white) {
  3476. .vss-focus-visible
  3477. .vss-DetailsList.ms-DetailsList
  3478. .ms-List-cell
  3479. .ms-DetailsRow
  3480. a:focus {
  3481. border: 1px dashed #fff !important;
  3482. }
  3483. }
  3484.  
  3485. .vss-DetailsList.ms-DetailsList
  3486. .ms-List-cell
  3487. .ms-DetailsRow
  3488. a.ms-Link:focus {
  3489. outline: none;
  3490. }
  3491.  
  3492. .vss-DetailsList.ms-DetailsList
  3493. .ms-List-cell
  3494. .ms-DetailsRow
  3495. .ms-DetailsRow-cell {
  3496. align-items: center;
  3497. margin: 0;
  3498. padding: 0 8px;
  3499. min-height: 34px;
  3500. color: #212121;
  3501. line-height: 34px;
  3502. }
  3503.  
  3504. .vss-DetailsList.ms-DetailsList
  3505. .ms-List-cell
  3506. .ms-DetailsRow
  3507. .vss-DetailsList--cellCheck {
  3508. padding: 0;
  3509. }
  3510.  
  3511. .vss-DetailsList.ms-DetailsList
  3512. .ms-List-cell
  3513. .ms-DetailsRow
  3514. .actions-column-wrapper {
  3515. display: flex;
  3516. flex-direction: row;
  3517. overflow: hidden;
  3518. }
  3519.  
  3520. .vss-DetailsList.ms-DetailsList
  3521. .ms-List-cell
  3522. .ms-DetailsRow
  3523. .actions-column-wrapper
  3524. .original-content {
  3525. display: flex;
  3526. flex: 1;
  3527. overflow: hidden;
  3528. }
  3529.  
  3530. .vss-DetailsList.ms-DetailsList
  3531. .ms-List-cell
  3532. .ms-DetailsRow
  3533. .vss-ContextualMenu--container {
  3534. padding-top: 1px;
  3535. }
  3536.  
  3537. .vss-DetailsList.ms-DetailsList
  3538. .ms-List-cell
  3539. .ms-DetailsRow
  3540. .vss-ContextualMenuButton {
  3541. margin-top: 1px;
  3542. background-color: #f4f4f4;
  3543. width: 36px;
  3544. max-width: 36px;
  3545. height: 32px;
  3546. }
  3547.  
  3548. .vss-DetailsList.ms-DetailsList
  3549. .ms-List-cell
  3550. .ms-DetailsRow
  3551. .vss-ContextualMenuButton:hover,
  3552. .vss-DetailsList.ms-DetailsList
  3553. .ms-List-cell
  3554. .ms-DetailsRow
  3555. .vss-ContextualMenuButton:active {
  3556. background-color: #eaeaea;
  3557. color: #212121;
  3558. }
  3559.  
  3560. .vss-DetailsList.ms-DetailsList
  3561. .ms-List-cell
  3562. .ms-DetailsRow
  3563. .vss-DetailsList--contextual-menu-button.space-unallocated {
  3564. display: none;
  3565. }
  3566.  
  3567. .vss-DetailsList.ms-DetailsList
  3568. .ms-List-cell
  3569. .ms-DetailsRow
  3570. .vss-DetailsList--contextual-menu-button.space-unallocated.open {
  3571. display: block;
  3572. }
  3573.  
  3574. .vss-DetailsList.ms-DetailsList
  3575. .ms-List-cell
  3576. .ms-DetailsRow
  3577. .vss-DetailsList--contextual-menu-button.space-allocated {
  3578. display: block;
  3579. visibility: hidden;
  3580. }
  3581.  
  3582. .vss-DetailsList.ms-DetailsList
  3583. .ms-List-cell
  3584. .ms-DetailsRow
  3585. .vss-DetailsList--contextual-menu-button.space-allocated.open {
  3586. visibility: visible;
  3587. }
  3588.  
  3589. .vss-DetailsList.ms-DetailsList
  3590. .ms-List-cell
  3591. .ms-DetailsRow.is-selected {
  3592. background-color: #eff6fc;
  3593. }
  3594.  
  3595. .vss-DetailsList.ms-DetailsList
  3596. .ms-List-cell
  3597. .ms-DetailsRow.is-selected
  3598. .vss-ContextualMenuButton {
  3599. background-color: #eff6fc;
  3600. }
  3601.  
  3602. .vss-DetailsList.ms-DetailsList
  3603. .ms-List-cell
  3604. .ms-DetailsRow.is-selected
  3605. .vss-ContextualMenuButton:focus,
  3606. .vss-DetailsList.ms-DetailsList
  3607. .ms-List-cell
  3608. .ms-DetailsRow.is-selected
  3609. .vss-ContextualMenuButton:hover,
  3610. .vss-DetailsList.ms-DetailsList
  3611. .ms-List-cell
  3612. .ms-DetailsRow.is-selected
  3613. .vss-ContextualMenuButton:active {
  3614. background-color: #deecf9;
  3615. color: #212121;
  3616. }
  3617.  
  3618. .vss-DetailsList.ms-DetailsList
  3619. .ms-List-cell
  3620. .ms-DetailsRow.is-selected
  3621. .vss-DetailsList--contextual-menu-button.space-unallocated {
  3622. display: block;
  3623. }
  3624.  
  3625. .vss-DetailsList.ms-DetailsList
  3626. .ms-List-cell
  3627. .ms-DetailsRow.is-selected
  3628. .vss-DetailsList--contextual-menu-button.space-allocated {
  3629. visibility: visible;
  3630. }
  3631.  
  3632. .vss-DetailsList.ms-DetailsList
  3633. .ms-List-cell
  3634. .ms-DetailsRow.is-selected
  3635. a {
  3636. color: #106ebe;
  3637. }
  3638.  
  3639. .vss-DetailsList.ms-DetailsList
  3640. .ms-List-cell
  3641. .ms-DetailsRow.is-selected
  3642. a:hover {
  3643. color: #005a9e;
  3644. text-decoration: underline;
  3645. }
  3646.  
  3647. @media screen and (-ms-high-contrast: white-on-black) {
  3648. .vss-DetailsList.ms-DetailsList
  3649. .ms-List-cell
  3650. .ms-DetailsRow.is-selected
  3651. a,
  3652. .vss-DetailsList.ms-DetailsList
  3653. .ms-List-cell
  3654. .ms-DetailsRow.is-selected
  3655. a
  3656. :hover,
  3657. .vss-DetailsList.ms-DetailsList
  3658. .ms-List-cell
  3659. .ms-DetailsRow.is-selected
  3660. span,
  3661. .vss-DetailsList.ms-DetailsList
  3662. .ms-List-cell
  3663. .ms-DetailsRow.is-selected
  3664. label,
  3665. .vss-DetailsList.ms-DetailsList
  3666. .ms-List-cell
  3667. .ms-DetailsRow.is-selected
  3668. i {
  3669. color: #002033;
  3670. }
  3671. }
  3672.  
  3673. @media screen and (-ms-high-contrast: black-on-white) {
  3674. .vss-DetailsList.ms-DetailsList
  3675. .ms-List-cell
  3676. .ms-DetailsRow.is-selected
  3677. a,
  3678. .vss-DetailsList.ms-DetailsList
  3679. .ms-List-cell
  3680. .ms-DetailsRow.is-selected
  3681. a
  3682. :hover,
  3683. .vss-DetailsList.ms-DetailsList
  3684. .ms-List-cell
  3685. .ms-DetailsRow.is-selected
  3686. span,
  3687. .vss-DetailsList.ms-DetailsList
  3688. .ms-List-cell
  3689. .ms-DetailsRow.is-selected
  3690. label,
  3691. .vss-DetailsList.ms-DetailsList
  3692. .ms-List-cell
  3693. .ms-DetailsRow.is-selected
  3694. i {
  3695. color: #fff;
  3696. }
  3697. }
  3698.  
  3699. @media screen and (-ms-high-contrast: white-on-black) {
  3700. .vss-DetailsList.ms-DetailsList
  3701. .ms-List-cell
  3702. .ms-DetailsRow.is-selected
  3703. button
  3704. i,
  3705. .vss-DetailsList.ms-DetailsList
  3706. .ms-List-cell
  3707. .ms-DetailsRow.is-selected
  3708. .ms-Button-label {
  3709. color: HighlightText;
  3710. }
  3711. }
  3712.  
  3713. @media screen and (-ms-high-contrast: black-on-white) {
  3714. .vss-DetailsList.ms-DetailsList
  3715. .ms-List-cell
  3716. .ms-DetailsRow.is-selected
  3717. button
  3718. i,
  3719. .vss-DetailsList.ms-DetailsList
  3720. .ms-List-cell
  3721. .ms-DetailsRow.is-selected
  3722. .ms-Button-label {
  3723. color: HighlightText;
  3724. }
  3725. }
  3726.  
  3727. .vss-DetailsList.ms-DetailsList
  3728. .ms-List-cell
  3729. .ms-DetailsRow:hover {
  3730. background-color: #f4f4f4;
  3731. }
  3732.  
  3733. .vss-DetailsList.ms-DetailsList
  3734. .ms-List-cell
  3735. .ms-DetailsRow:hover.is-selected {
  3736. background-color: #eff6fc;
  3737. }
  3738.  
  3739. .vss-DetailsList.ms-DetailsList
  3740. .ms-List-cell
  3741. .ms-DetailsRow:hover.is-selected
  3742. .vss-ContextualMenuButton {
  3743. background-color: #eff6fc;
  3744. }
  3745.  
  3746. .vss-DetailsList.ms-DetailsList
  3747. .ms-List-cell
  3748. .ms-DetailsRow:hover.is-selected
  3749. .vss-ContextualMenuButton:focus,
  3750. .vss-DetailsList.ms-DetailsList
  3751. .ms-List-cell
  3752. .ms-DetailsRow:hover.is-selected
  3753. .vss-ContextualMenuButton:hover,
  3754. .vss-DetailsList.ms-DetailsList
  3755. .ms-List-cell
  3756. .ms-DetailsRow:hover.is-selected
  3757. .vss-ContextualMenuButton:active {
  3758. background-color: #deecf9;
  3759. color: #212121;
  3760. }
  3761.  
  3762. .vss-DetailsList.ms-DetailsList
  3763. .ms-List-cell
  3764. .ms-DetailsRow:hover
  3765. .vss-DetailsList--contextual-menu-button.space-unallocated {
  3766. display: block;
  3767. }
  3768.  
  3769. .vss-DetailsList.ms-DetailsList
  3770. .ms-List-cell
  3771. .ms-DetailsRow:hover
  3772. .vss-DetailsList--contextual-menu-button.space-allocated {
  3773. visibility: visible;
  3774. }
  3775.  
  3776. .vss-DetailsList.ms-DetailsList
  3777. .ms-List-cell
  3778. .ms-DetailsRow:hover
  3779. a {
  3780. color: #106ebe;
  3781. }
  3782.  
  3783. .vss-DetailsList.ms-DetailsList
  3784. .ms-List-cell
  3785. .ms-DetailsRow:hover
  3786. a:hover {
  3787. color: #005a9e;
  3788. text-decoration: underline;
  3789. }
  3790.  
  3791. @media screen and (-ms-high-contrast: white-on-black) {
  3792. .vss-DetailsList.ms-DetailsList
  3793. .ms-List-cell
  3794. .ms-DetailsRow:hover.is-selected
  3795. a,
  3796. .vss-DetailsList.ms-DetailsList
  3797. .ms-List-cell
  3798. .ms-DetailsRow:hover.is-selected
  3799. a
  3800. :hover,
  3801. .vss-DetailsList.ms-DetailsList
  3802. .ms-List-cell
  3803. .ms-DetailsRow:hover.is-selected
  3804. span,
  3805. .vss-DetailsList.ms-DetailsList
  3806. .ms-List-cell
  3807. .ms-DetailsRow:hover.is-selected
  3808. i {
  3809. color: #002033;
  3810. }
  3811. }
  3812.  
  3813. @media screen and (-ms-high-contrast: black-on-white) {
  3814. .vss-DetailsList.ms-DetailsList
  3815. .ms-List-cell
  3816. .ms-DetailsRow:hover.is-selected
  3817. a,
  3818. .vss-DetailsList.ms-DetailsList
  3819. .ms-List-cell
  3820. .ms-DetailsRow:hover.is-selected
  3821. a
  3822. :hover,
  3823. .vss-DetailsList.ms-DetailsList
  3824. .ms-List-cell
  3825. .ms-DetailsRow:hover.is-selected
  3826. span,
  3827. .vss-DetailsList.ms-DetailsList
  3828. .ms-List-cell
  3829. .ms-DetailsRow:hover.is-selected
  3830. i {
  3831. color: #fff;
  3832. }
  3833. }
  3834.  
  3835. @media screen and (-ms-high-contrast: white-on-black) {
  3836. .vss-DetailsList.ms-DetailsList
  3837. .ms-List-cell
  3838. .ms-DetailsRow:hover.is-selected
  3839. button
  3840. i {
  3841. color: HighlightText;
  3842. }
  3843. }
  3844.  
  3845. @media screen and (-ms-high-contrast: black-on-white) {
  3846. .vss-DetailsList.ms-DetailsList
  3847. .ms-List-cell
  3848. .ms-DetailsRow:hover.is-selected
  3849. button
  3850. i {
  3851. color: HighlightText;
  3852. }
  3853. }
  3854.  
  3855. .vss-DetailsList.ms-DetailsList
  3856. .ms-List-cell
  3857. .ms-DetailsRow
  3858. .vss-DetailsList--titleCellPrimary {
  3859. display: flex;
  3860. flex-grow: 1;
  3861. flex-direction: row;
  3862. overflow: hidden;
  3863. }
  3864.  
  3865. .vss-DetailsList.ms-DetailsList
  3866. .ms-List-cell
  3867. .ms-DetailsRow
  3868. .vss-DetailsList--titleCellText {
  3869. overflow: hidden;
  3870. text-overflow: ellipsis;
  3871. }
  3872.  
  3873. .vss-DetailsList.ms-DetailsList
  3874. .ms-List-cell
  3875. .ms-DetailsRow
  3876. .vss-DetailsList--titleCellText.disabled {
  3877. color: #c8c8c8;
  3878. }
  3879.  
  3880. .vss-DetailsList.ms-DetailsList
  3881. .ms-List-cell
  3882. .ms-DetailsRow
  3883. .vss-DetailsList--titleCellText.disabled
  3884. a:link,
  3885. .vss-DetailsList.ms-DetailsList
  3886. .ms-List-cell
  3887. .ms-DetailsRow
  3888. .vss-DetailsList--titleCellText.disabled
  3889. a:hover,
  3890. .vss-DetailsList.ms-DetailsList
  3891. .ms-List-cell
  3892. .ms-DetailsRow
  3893. .vss-DetailsList--titleCellText.disabled
  3894. a:visited {
  3895. color: #c8c8c8;
  3896. }
  3897.  
  3898. .vss-DetailsList.ms-DetailsList
  3899. .ms-List-cell
  3900. .ms-DetailsRow
  3901. .vss-DetailsList--titleCellIcon {
  3902. display: flex;
  3903. flex: 0 0 auto;
  3904. margin-right: 6px;
  3905. }
  3906.  
  3907. .vss-DetailsList.ms-DetailsList
  3908. .ms-List-cell
  3909. .ms-DetailsRow
  3910. .vss-DetailsList--titleCellOneLine {
  3911. display: flex;
  3912. flex: 1;
  3913. flex-direction: row;
  3914. overflow: hidden;
  3915. }
  3916.  
  3917. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3918. .ms-GroupedList {
  3919. padding-top: 10px;
  3920. }
  3921.  
  3922. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3923. .ms-GroupedList-group {
  3924. padding-bottom: 20px;
  3925. }
  3926.  
  3927. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3928. .ms-List-page:last-child
  3929. .ms-List-cell:last-child {
  3930. border-bottom: none;
  3931. }
  3932.  
  3933. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3934. .ms-GroupedList
  3935. .ms-List-cell {
  3936. border-bottom: none;
  3937. }
  3938.  
  3939. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3940. .ms-GroupedList-group
  3941. .ms-List-cell {
  3942. border-bottom: 1px solid #eaeaea;
  3943. }
  3944.  
  3945. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3946. .ms-List-cell {
  3947. border-bottom: 1px solid #eaeaea;
  3948. min-height: 54px;
  3949. }
  3950.  
  3951. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3952. .ms-List-cell
  3953. .ms-DetailsRow {
  3954. min-height: 54px;
  3955. }
  3956.  
  3957. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3958. .ms-List-cell
  3959. .ms-DetailsRow
  3960. .ms-DetailsRow-cell {
  3961. min-height: 52px;
  3962. line-height: 52px;
  3963. }
  3964.  
  3965. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3966. .ms-List-cell
  3967. .ms-DetailsRow
  3968. .ms-DetailsRow-cell
  3969. .vss-ContextualMenu--container {
  3970. margin-top: 9px;
  3971. }
  3972.  
  3973. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3974. .ms-List-cell
  3975. .ms-DetailsRow
  3976. .ms-DetailsRow-cell
  3977. .vss-DetailsList--titleCellTwoLine {
  3978. display: flex;
  3979. flex: 1;
  3980. flex-direction: row;
  3981. align-items: center;
  3982. margin-left: 10px;
  3983. padding: 6px 0;
  3984. overflow: hidden;
  3985. line-height: 20px;
  3986. }
  3987.  
  3988. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3989. .ms-List-cell
  3990. .ms-DetailsRow
  3991. .ms-DetailsRow-cell
  3992. .vss-DetailsList--titleCellTwoLine.noIcon {
  3993. margin-left: 0;
  3994. }
  3995.  
  3996. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  3997. .ms-List-cell
  3998. .ms-DetailsRow
  3999. .ms-DetailsRow-cell
  4000. .vss-DetailsList--titleCellTwoLine
  4001. .vss-DetailsList--titleCellIcon {
  4002. vertical-align: middle;
  4003. margin-right: 13px;
  4004. font-size: 28px;
  4005. line-height: 40px;
  4006. }
  4007.  
  4008. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  4009. .ms-List-cell
  4010. .ms-DetailsRow
  4011. .ms-DetailsRow-cell
  4012. .vss-DetailsList--titleCellTwoLine
  4013. .vss-DetailsList--titleCellIcon.disabled
  4014. img {
  4015. opacity: 50%;
  4016. }
  4017.  
  4018. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  4019. .ms-List-cell
  4020. .ms-DetailsRow
  4021. .ms-DetailsRow-cell
  4022. .vss-DetailsList--titleCellTwoLine
  4023. .vss-DetailsList--titleCellIcon.vss-DetailsList--titleCellIcon--image {
  4024. margin-right: 13px;
  4025. width: 40px;
  4026. height: 40px;
  4027. }
  4028.  
  4029. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  4030. .ms-List-cell
  4031. .ms-DetailsRow
  4032. .ms-DetailsRow-cell
  4033. .vss-DetailsList--titleCellTwoLine
  4034. .vss-IndicatorSet {
  4035. font-size: 16px;
  4036. }
  4037.  
  4038. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  4039. .ms-List-cell
  4040. .ms-DetailsRow
  4041. .ms-DetailsRow-cell
  4042. .vss-DetailsList--titleCellTwoLine
  4043. .vss-DetailsList--titleCellTwoLineText {
  4044. display: flex;
  4045. flex-grow: 1;
  4046. flex-direction: column;
  4047. overflow: hidden;
  4048. font-size: 15px;
  4049. }
  4050.  
  4051. .vss-DetailsList.ms-DetailsList.vss-DetailsList--twoLine
  4052. .ms-List-cell
  4053. .ms-DetailsRow
  4054. .ms-DetailsRow-cell
  4055. .vss-DetailsList--titleCellTwoLine
  4056. .vss-DetailsList--titleCellTwoLineText
  4057. .vss-DetailsList--titleCellSecondary {
  4058. flex-grow: 1;
  4059. overflow: hidden;
  4060. color: #666;
  4061. font-size: 12px;
  4062. text-overflow: ellipsis;
  4063. }
  4064.  
  4065. .vss-DetailsList--layout.ms-DetailsList {
  4066. cursor: default;
  4067. color: initial;
  4068. }
  4069.  
  4070. .vss-DetailsList--layout.ms-DetailsList a {
  4071. color: initial;
  4072. }
  4073.  
  4074. .vss-DetailsList--layout.ms-DetailsList
  4075. .ms-DetailsHeader {
  4076. border-color: initial;
  4077. font-size: initial;
  4078. line-height: initial;
  4079. }
  4080.  
  4081. .vss-DetailsList--layout.ms-DetailsList
  4082. .ms-DetailsHeader-cell {
  4083. display: inline-flex;
  4084. background: transparent;
  4085. padding: 0;
  4086. height: auto;
  4087. min-height: initial;
  4088. }
  4089.  
  4090. .vss-DetailsList--layout.ms-DetailsList
  4091. .ms-DetailsHeader-cell
  4092. > span {
  4093. display: flex;
  4094. position: relative;
  4095. flex-grow: 1;
  4096. overflow: hidden;
  4097. }
  4098.  
  4099. .vss-DetailsList--layout.ms-DetailsList
  4100. .ms-DetailsHeader-cellTitle {
  4101. display: flex;
  4102. position: relative;
  4103. flex-grow: 1;
  4104. align-items: center;
  4105. padding: 0;
  4106. }
  4107.  
  4108. .vss-DetailsList--layout.ms-DetailsList
  4109. .ms-List-cell,
  4110. .vss-DetailsList--layout.ms-DetailsList
  4111. .ms-DetailsRow,
  4112. .vss-DetailsList--layout.ms-DetailsList
  4113. .ms-DetailsRow-cell {
  4114. margin: 0;
  4115. border: none;
  4116. min-height: inherit;
  4117. }
  4118.  
  4119. .vss-DetailsList--layout.ms-DetailsList
  4120. .ms-DetailsRow::before {
  4121. border: none;
  4122. }
  4123.  
  4124. .vss-DetailsList--layout.ms-DetailsList
  4125. .ms-DetailsRow:hover {
  4126. background-color: initial;
  4127. }
  4128.  
  4129. .vss-DetailsList--layout.ms-DetailsList
  4130. .ms-DetailsRow.is-selected {
  4131. background-color: initial;
  4132. }
  4133.  
  4134. .vss-DetailsList--layout.ms-DetailsList
  4135. .ms-DetailsRow-cell {
  4136. flex-direction: row;
  4137. align-items: center;
  4138. align-self: stretch;
  4139. padding: 0;
  4140. color: initial;
  4141. }
  4142.  
  4143. .vss-DetailsList--layout.ms-DetailsList
  4144. .actions-column-wrapper {
  4145. display: flex;
  4146. flex-grow: 1;
  4147. flex-direction: row;
  4148. overflow: hidden;
  4149. }
  4150.  
  4151. .vss-DetailsList--layout.ms-DetailsList
  4152. .original-content {
  4153. flex-grow: 1;
  4154. overflow: hidden;
  4155. text-overflow: ellipsis;
  4156. }
  4157.  
  4158. .vss-DetailsList--layout.ms-DetailsList
  4159. .vss-ContextualMenu--container {
  4160. display: flex;
  4161. align-items: center;
  4162. }
  4163.  
  4164. .vss-DetailsList--layout.ms-DetailsList
  4165. .vss-DetailsList--contextual-menu-button {
  4166. height: auto;
  4167. }
  4168.  
  4169. .vss-DetailsList--layout.hideActionsButton
  4170. .vss-DetailsList--contextual-menu-button.space-unallocated {
  4171. display: none;
  4172. }
  4173.  
  4174. .vss-DetailsList--layout.hideActionsButton
  4175. .vss-DetailsList--contextual-menu-button.space-unallocated.open {
  4176. display: block;
  4177. }
  4178.  
  4179. .vss-DetailsList--layout.hideActionsButton
  4180. .vss-DetailsList--contextual-menu-button.space-allocated {
  4181. visibility: hidden;
  4182. }
  4183.  
  4184. .vss-DetailsList--layout.hideActionsButton
  4185. .vss-DetailsList--contextual-menu-button.space-allocated.open {
  4186. visibility: visible;
  4187. }
  4188.  
  4189. .vss-DetailsList--layout.hideActionsButton
  4190. .ms-DetailsRow.is-selected
  4191. .vss-DetailsList--contextual-menu-button.space-unallocated,
  4192. .vss-DetailsList--layout.hideActionsButton
  4193. .ms-DetailsRow:hover
  4194. .vss-DetailsList--contextual-menu-button.space-unallocated {
  4195. display: block;
  4196. }
  4197.  
  4198. .vss-DetailsList--layout.hideActionsButton
  4199. .ms-DetailsRow.is-selected
  4200. .vss-DetailsList--contextual-menu-button.space-allocated,
  4201. .vss-DetailsList--layout.hideActionsButton
  4202. .ms-DetailsRow:hover
  4203. .vss-DetailsList--contextual-menu-button.space-allocated {
  4204. visibility: visible;
  4205. }
  4206.  
  4207. .vss-DetailsList--layout.singleLine {
  4208. font-size: 14px;
  4209. }
  4210.  
  4211. .vss-DetailsList--layout.singleLine
  4212. .ms-DetailsRow-cell {
  4213. min-height: 36px;
  4214. }
  4215.  
  4216. .vss-DetailsList--layout.singleLine
  4217. .vss-DetailsList--contextual-menu-button {
  4218. height: 32px;
  4219. }
  4220.  
  4221. .vss-DetailsList--layout.flexCellLayout
  4222. .original-content {
  4223. display: flex;
  4224. align-items: center;
  4225. }
  4226.  
  4227. .vss-DetailsList--layout.flexCellLayout
  4228. .ms-DetailsRow-cell {
  4229. display: flex;
  4230. align-items: center;
  4231. }
  4232.  
  4233. .vss-DetailsList--layout.paddingInCells
  4234. .ms-DetailsHeader-cell,
  4235. .vss-DetailsList--layout.paddingInCells
  4236. .ms-DetailsRow-cell {
  4237. padding: 0 8px;
  4238. }
  4239.  
  4240. .vss-DetailsList--layout.paddingInCells
  4241. .ms-DetailsHeader-cellIsCheck,
  4242. .vss-DetailsList--layout.paddingInCells
  4243. .vss-DetailsList--cellCheck {
  4244. padding: 0;
  4245. }
  4246.  
  4247. .vss-DetailsList--layout.paddingInCells
  4248. .original-content {
  4249. padding-right: 4px;
  4250. }
  4251.  
  4252. .vss-DetailsList--layout.colors {
  4253. color: #212121;
  4254. }
  4255.  
  4256. .vss-DetailsList--layout.colors
  4257. .ms-DetailsHeader-cell {
  4258. color: #212121;
  4259. }
  4260.  
  4261. .vss-DetailsList--layout.colors
  4262. .ms-DetailsRow-cell {
  4263. color: #212121;
  4264. }
  4265.  
  4266. .vss-DetailsList--layout.colors
  4267. .vss-ContextualMenuButton {
  4268. background-color: #f4f4f4;
  4269. }
  4270.  
  4271. .vss-DetailsList--layout.colors
  4272. .vss-ContextualMenuButton:hover,
  4273. .vss-DetailsList--layout.colors
  4274. .vss-ContextualMenuButton:active {
  4275. background-color: #eaeaea;
  4276. color: #212121;
  4277. }
  4278.  
  4279. .vss-DetailsList--layout.colors
  4280. .ms-DetailsRow:hover {
  4281. background-color: #f4f4f4;
  4282. }
  4283.  
  4284. .vss-DetailsList--layout.colors
  4285. .ms-DetailsRow.is-selected {
  4286. background-color: #eff6fc;
  4287. }
  4288.  
  4289. .vss-DetailsList--layout.colors
  4290. .ms-DetailsRow.is-selected
  4291. .vss-ContextualMenuButton {
  4292. background-color: #eff6fc;
  4293. }
  4294.  
  4295. .vss-DetailsList--layout.colors
  4296. .ms-DetailsRow.is-selected
  4297. .vss-ContextualMenuButton:focus,
  4298. .vss-DetailsList--layout.colors
  4299. .ms-DetailsRow.is-selected
  4300. .vss-ContextualMenuButton:hover,
  4301. .vss-DetailsList--layout.colors
  4302. .ms-DetailsRow.is-selected
  4303. .vss-ContextualMenuButton:active {
  4304. background-color: #deecf9;
  4305. color: #212121;
  4306. }
  4307.  
  4308. @media screen and (-ms-high-contrast: active) {
  4309. .vss-DetailsList--layout.colors
  4310. .ms-DetailsRow.is-selected
  4311. .ms-DetailsRow-cell,
  4312. .vss-DetailsList--layout.colors
  4313. .ms-DetailsRow.is-selected
  4314. span,
  4315. .vss-DetailsList--layout.colors
  4316. .ms-DetailsRow.is-selected
  4317. i {
  4318. color: HighlightText;
  4319. }
  4320. }
  4321.  
  4322. @media screen and (-ms-high-contrast: white-on-black) {
  4323. .vss-DetailsList--layout.colors
  4324. .ms-DetailsRow.is-selected
  4325. button
  4326. i {
  4327. color: HighlightText;
  4328. }
  4329. }
  4330.  
  4331. @media screen and (-ms-high-contrast: black-on-white) {
  4332. .vss-DetailsList--layout.colors
  4333. .ms-DetailsRow.is-selected
  4334. button
  4335. i {
  4336. color: HighlightText;
  4337. }
  4338. }
  4339.  
  4340. .vss-DetailsList--layout.linkStyles
  4341. .ms-DetailsRow.is-selected
  4342. a,
  4343. .vss-DetailsList--layout.linkStyles
  4344. .ms-DetailsRow.is-selected
  4345. a:visited,
  4346. .vss-DetailsList--layout.linkStyles
  4347. .ms-DetailsRow:hover
  4348. a {
  4349. color: #106ebe;
  4350. }
  4351.  
  4352. .vss-DetailsList--layout.linkStyles a,
  4353. .vss-DetailsList--layout.linkStyles a:visited {
  4354. padding: 0 2px;
  4355. color: inherit;
  4356. text-decoration: none;
  4357. }
  4358.  
  4359. .vss-DetailsList--layout.linkStyles a:hover,
  4360. .vss-DetailsList--layout.linkStyles
  4361. .ms-DetailsRow.is-selected
  4362. a:hover {
  4363. color: #005a9e;
  4364. text-decoration: underline;
  4365. }
  4366.  
  4367. @media screen and (-ms-high-contrast: active) {
  4368. .vss-DetailsList--layout.linkStyles
  4369. .ms-DetailsRow.is-selected
  4370. a,
  4371. .vss-DetailsList--layout.linkStyles
  4372. .ms-DetailsRow.is-selected
  4373. a:hover,
  4374. .vss-DetailsList--layout.linkStyles
  4375. .ms-DetailsRow.is-selected
  4376. a:visited {
  4377. color: HighlightText;
  4378. }
  4379. }
  4380.  
  4381. .vss-DetailsList--layout.headerRowStyles
  4382. .ms-DetailsHeader {
  4383. border-color: #eaeaea;
  4384. min-height: 34px;
  4385. }
  4386.  
  4387. .vss-DetailsList--layout.headerRowStyles
  4388. .ms-DetailsHeader-cell {
  4389. min-height: 32px;
  4390. color: #212121;
  4391. }
  4392.  
  4393. .vss-DetailsList--groupHeader {
  4394. border-bottom: 1px solid #eaeaea;
  4395. }
  4396.  
  4397. .vss-DetailsList--groupHeaderText {
  4398. padding: 10px 8px;
  4399. color: #666;
  4400. }
  4401.  
  4402. .vss-Persona img {
  4403. border-radius: 50%;
  4404. width: 100%;
  4405. height: 100%;
  4406. }
  4407.  
  4408. .vss-Persona.extra-extra-small {
  4409. width: 16px;
  4410. height: 16px;
  4411. }
  4412.  
  4413. .vss-Persona.extra-small {
  4414. width: 18px;
  4415. height: 18px;
  4416. }
  4417.  
  4418. .vss-Persona.small {
  4419. width: 24px;
  4420. height: 24px;
  4421. }
  4422.  
  4423. .vss-Persona.small-plus {
  4424. width: 28px;
  4425. height: 28px;
  4426. }
  4427.  
  4428. .vss-Persona.medium {
  4429. width: 32px;
  4430. height: 32px;
  4431. }
  4432.  
  4433. .vss-Persona.medium-plus {
  4434. width: 40px;
  4435. height: 40px;
  4436. }
  4437.  
  4438. .vss-Persona.large {
  4439. width: 48px;
  4440. height: 48px;
  4441. }
  4442.  
  4443. .vss-Persona.extra-large {
  4444. width: 72px;
  4445. height: 72px;
  4446. }
  4447.  
  4448. .tree-column-wrapper {
  4449. display: flex;
  4450. }
  4451.  
  4452. .vss-ZeroData {
  4453. display: flex;
  4454. flex-wrap: wrap;
  4455. justify-content: center;
  4456. margin-top: 35px;
  4457. }
  4458.  
  4459. .vss-ZeroData .vss-ZeroDataItem {
  4460. display: flex;
  4461. flex-direction: column;
  4462. align-items: center;
  4463. text-align: center;
  4464. }
  4465.  
  4466. .vss-ZeroData
  4467. .vss-ZeroDataItem
  4468. .vss-ZeroDataItem--image,
  4469. .vss-ZeroData
  4470. .vss-ZeroDataItem
  4471. .vss-ZeroDataItem--primary,
  4472. .vss-ZeroData
  4473. .vss-ZeroDataItem
  4474. .vss-ZeroDataItem--secondary {
  4475. margin-bottom: 15px;
  4476. max-width: 100%;
  4477. }
  4478.  
  4479. .vss-ZeroData
  4480. .vss-ZeroDataItem
  4481. .vss-ZeroDataItem--image:last-child,
  4482. .vss-ZeroData
  4483. .vss-ZeroDataItem
  4484. .vss-ZeroDataItem--primary:last-child,
  4485. .vss-ZeroData
  4486. .vss-ZeroDataItem
  4487. .vss-ZeroDataItem--secondary:last-child {
  4488. margin-bottom: 0;
  4489. }
  4490.  
  4491. .vss-ZeroData.single .vss-ZeroDataItem {
  4492. min-width: 10px;
  4493. max-width: 520px;
  4494. }
  4495.  
  4496. .vss-ZeroData.single
  4497. .vss-ZeroDataItem
  4498. .vss-ZeroDataItem--image {
  4499. height: 160px;
  4500. }
  4501.  
  4502. .vss-ZeroData.multiple .vss-ZeroDataItem {
  4503. flex-grow: 1;
  4504. margin: 0 20px;
  4505. max-width: 235px;
  4506. }
  4507.  
  4508. .vss-ZeroData.multiple
  4509. .vss-ZeroDataItem
  4510. .vss-ZeroDataItem--image {
  4511. height: 75px;
  4512. }
  4513.  
  4514. .vss-ZeroData.multiple
  4515. .vss-ZeroDataItem
  4516. .vss-ZeroDataItem--action {
  4517. margin-top: auto;
  4518. }
  4519.  
  4520. .price-control {
  4521. display: flex;
  4522. }
  4523.  
  4524. .price-control .quantity-field {
  4525. margin-bottom: 0;
  4526. }
  4527.  
  4528. .price-control .quantity-field div {
  4529. height: 26px;
  4530. }
  4531.  
  4532. .price-control .inner-textfield {
  4533. padding: 0;
  4534. width: 50px;
  4535. text-align: center;
  4536. }
  4537.  
  4538. .price-control .button-class {
  4539. border: 1px solid;
  4540. border-color: rgb(200 200 200 / 100%);
  4541. border-color: rgba(
  4542. var(--palette-neutral-20, 200, 200, 200),
  4543. 1
  4544. );
  4545. background: rgb(234 234 234 / 100%);
  4546. background: rgba(
  4547. var(--palette-neutral-8, 234, 234, 234),
  4548. 1
  4549. );
  4550. width: 20px;
  4551. height: 26px;
  4552. }
  4553.  
  4554. .price-control .button-class span {
  4555. line-height: 20px;
  4556. }
  4557.  
  4558. .price-control .button-class i {
  4559. margin: 0;
  4560. color: black;
  4561. font-size: 10px;
  4562. }
  4563.  
  4564. .price-control .button-class:hover {
  4565. background: rgb(218 218 218 / 100%);
  4566. background: rgba(
  4567. var(--palette-neutral-10, 218, 218, 218),
  4568. 1
  4569. );
  4570. }
  4571.  
  4572. .price-control .button-class.is-disabled {
  4573. border-color: rgb(244 244 244 / 100%);
  4574. border-color: rgba(
  4575. var(--palette-neutral-4, 244, 244, 244),
  4576. 1
  4577. );
  4578. background-color: rgb(244 244 244 / 100%);
  4579. background-color: rgba(
  4580. var(--palette-neutral-4, 244, 244, 244),
  4581. 1
  4582. );
  4583. }
  4584.  
  4585. .price-control .button-class.is-disabled i {
  4586. color: rgb(200 200 200 / 100%);
  4587. color: rgba(
  4588. var(--palette-neutral-20, 200, 200, 200),
  4589. 1
  4590. );
  4591. }
  4592.  
  4593. .qna-top-container .user-reply-top-container {
  4594. border-top: 1px solid;
  4595. border-top-color: rgb(234 234 234 / 100%);
  4596. border-top-color: rgba(
  4597. var(--palette-neutral-8, 234, 234, 234),
  4598. 1
  4599. );
  4600. }
  4601.  
  4602. .qna-top-container .qna-user-image-column {
  4603. vertical-align: top;
  4604. border-collapse: collapse;
  4605. padding-top: 14px;
  4606. padding-bottom: 14px;
  4607. text-align: center;
  4608. }
  4609.  
  4610. .qna-top-container .qna-user-image {
  4611. width: 44px;
  4612. height: 44px;
  4613. }
  4614.  
  4615. .qna-top-container .user-reply-container {
  4616. border-collapse: collapse;
  4617. padding: 10px 5px 0 10px;
  4618. }
  4619.  
  4620. .qna-top-container .action-link-container {
  4621. margin-top: 4px;
  4622. }
  4623.  
  4624. .qna-top-container .action-link {
  4625. margin-right: 10px;
  4626. }
  4627.  
  4628. @media (width >= 520px) {
  4629. .ms-Dialog-main.QnAAskQuestionDialog {
  4630. max-width: 500px;
  4631. }
  4632.  
  4633. .ms-Dialog-main.QnAAskQuestionDialog
  4634. .ask-question-text {
  4635. min-width: 444px;
  4636. }
  4637. }
  4638.  
  4639. .ms-Dialog-main.QnAAskQuestionDialog
  4640. .qna-write-review-privacy {
  4641. color: rgb(0 0 0 / 55%);
  4642. color: var(
  4643. --text-secondary-color,
  4644. rgb(0 0 0 / 55%)
  4645. );
  4646. font-size: 12px;
  4647. }
  4648.  
  4649. .ms-Dialog-main.QnAAskQuestionDialog .user-img {
  4650. vertical-align: top;
  4651. padding-right: 5px;
  4652. padding-bottom: 14px;
  4653. }
  4654.  
  4655. .ms-Dialog-main.QnAAskQuestionDialog
  4656. .user-reviews {
  4657. padding-right: 5px;
  4658. padding-bottom: 14px;
  4659. }
  4660.  
  4661. .ms-Dialog-main.QnAAskQuestionDialog
  4662. .qna-user-image {
  4663. width: 44px;
  4664. height: 44px;
  4665. }
  4666.  
  4667. .ms-Dialog-main.QnAAskQuestionDialog
  4668. .save-progress-spinner {
  4669. position: absolute;
  4670. top: 45%;
  4671. left: 45%;
  4672. }
  4673.  
  4674. .ms-Dialog-main.QnAAskQuestionDialog
  4675. .invisibleButton {
  4676. display: none;
  4677. }
  4678.  
  4679. .ux-section-details-tabs .qna-top-container {
  4680. width: 100%;
  4681. }
  4682.  
  4683. .qna-top-container {
  4684. display: inline-block;
  4685. margin-bottom: 34px;
  4686. width: 700px;
  4687. }
  4688.  
  4689. .qna-top-container .qna-header-container {
  4690. padding-left: 0;
  4691. }
  4692.  
  4693. .qna-top-container button.ask-question-button {
  4694. float: right;
  4695. }
  4696.  
  4697. .qna-top-container
  4698. .ask-question-button-container {
  4699. padding-right: 0;
  4700. }
  4701.  
  4702. .qna-top-container .see-more-qna-section {
  4703. padding-right: 0;
  4704. }
  4705.  
  4706. .qna-top-container
  4707. .see-more-qna-section
  4708. button {
  4709. float: right;
  4710. margin-top: 20px;
  4711. }
  4712.  
  4713. .qna-top-container
  4714. .see-more-qna-section
  4715. .qna-loading-more-error-message {
  4716. margin-top: 20px;
  4717. min-width: 700px;
  4718. }
  4719.  
  4720. .qna-top-container
  4721. .see-more-qna-section
  4722. .qna-loading-more-qna-container {
  4723. margin-top: 20px;
  4724. }
  4725.  
  4726. .qna-top-container .qna-container-row {
  4727. border-bottom: 1px solid;
  4728. border-width: 1px 0;
  4729. border-bottom-color: rgb(234 234 234 / 100%);
  4730. border-bottom-color: rgba(
  4731. var(--palette-neutral-8, 234, 234, 234),
  4732. 1
  4733. );
  4734. border-collapse: collapse;
  4735. padding-bottom: 10px;
  4736. }
  4737.  
  4738. .qna-top-container h2 {
  4739. display: block;
  4740. margin-top: 0;
  4741. margin-bottom: 0;
  4742. font-size: 20px;
  4743. }
  4744.  
  4745. .qna-top-container .no-questions-found-text {
  4746. font-size: 14px;
  4747. }
  4748.  
  4749. .qna-top-container .qna-loading-container {
  4750. margin-top: 20px;
  4751. }
  4752.  
  4753. .qna-top-container
  4754. .qna-noitems-or-error-message {
  4755. margin: 14px -8px 0;
  4756. min-width: 700px;
  4757. }
  4758.  
  4759. .qna-top-container
  4760. .qna-redirection-message-bar-container {
  4761. margin-top: 14px;
  4762. background-color: rgb(244 244 244 / 100%);
  4763. background-color: rgba(
  4764. var(--palette-neutral-4, 244, 244, 244),
  4765. 1
  4766. );
  4767. padding-top: 15px;
  4768. padding-bottom: 15px;
  4769. color: rgb(0 0 0 / 90%);
  4770. color: var(
  4771. --text-primary-color,
  4772. rgb(0 0 0 / 90%)
  4773. );
  4774. }
  4775.  
  4776. .qna-top-container
  4777. .qna-redirection-message-bar-container
  4778. .qna-redirection-message-bar {
  4779. font-size: 14px;
  4780. }
  4781.  
  4782. .qna-top-container
  4783. .qna-redirection-message-bar-container
  4784. .qna-redirection-message-bar
  4785. .qna-redirection-info-icon {
  4786. padding-right: 8px;
  4787. padding-left: 8px;
  4788. color: rgb(0 0 0 / 90%);
  4789. color: var(
  4790. --text-primary-color,
  4791. rgb(0 0 0 / 90%)
  4792. );
  4793. }
  4794.  
  4795. .qna-top-container .qna-question-row {
  4796. border-bottom: 1px solid;
  4797. border-width: 1px 0;
  4798. border-bottom-color: rgb(234 234 234 / 100%);
  4799. border-bottom-color: rgba(
  4800. var(--palette-neutral-8, 234, 234, 234),
  4801. 1
  4802. );
  4803. border-collapse: collapse;
  4804. }
  4805.  
  4806. .qna-top-container .qna-question-bottom-margin {
  4807. margin-bottom: 10px;
  4808. }
  4809.  
  4810. .qna-top-container .user-question-container {
  4811. border-collapse: collapse;
  4812. padding: 10px 5px 10px 10px;
  4813. }
  4814.  
  4815. .qna-top-container .seemore-seeless-links {
  4816. margin-top: 5px;
  4817. }
  4818.  
  4819. .qna-top-container .read-more-table-container {
  4820. width: 98%;
  4821. }
  4822.  
  4823. .qna-top-container .flag-table-container {
  4824. vertical-align: top;
  4825. float: right;
  4826. }
  4827.  
  4828. .qna-top-container .qna-table {
  4829. width: 100%;
  4830. table-layout: fixed;
  4831. }
  4832.  
  4833. .ms-Dialog-inner
  4834. .user-reviews
  4835. .read-more-container {
  4836. width: 370px;
  4837. }
  4838.  
  4839. .read-more-container {
  4840. word-wrap: break-word;
  4841. }
  4842.  
  4843. .user-name-div {
  4844. display: inline-block;
  4845. color: rgb(0 0 0 / 55%);
  4846. color: var(
  4847. --text-secondary-color,
  4848. rgb(0 0 0 / 55%)
  4849. );
  4850. font-size: 12px;
  4851. }
  4852.  
  4853. @media (width >= 520px) {
  4854. .ms-Dialog-main.ReviewDialog {
  4855. max-width: 500px;
  4856. }
  4857.  
  4858. .ms-Dialog-main.ReviewDialog .reply-text {
  4859. margin-top: 12px;
  4860. min-width: 444px;
  4861. }
  4862.  
  4863. .ms-Dialog-main.ReviewDialog .reviews-row {
  4864. padding-top: 0;
  4865. min-width: 444px;
  4866. }
  4867. }
  4868.  
  4869. .comments-mandatory-message {
  4870. color: #e50000;
  4871. font-size: 12px;
  4872. }
  4873.  
  4874. .ms-Dialog-main.ReviewDialog
  4875. .write-review-privacy {
  4876. color: rgb(0 0 0 / 55%);
  4877. color: var(
  4878. --text-secondary-color,
  4879. rgb(0 0 0 / 55%)
  4880. );
  4881. font-size: 12px;
  4882. }
  4883.  
  4884. .ms-Dialog-main.ReviewDialog
  4885. .save-progress-spinner {
  4886. position: absolute;
  4887. top: 45%;
  4888. left: 45%;
  4889. }
  4890.  
  4891. .gallery-dialog
  4892. .rating-control
  4893. .ms-Rating-star {
  4894. margin-top: -5px;
  4895. padding-bottom: 5px;
  4896. }
  4897.  
  4898. .gallery-dialog
  4899. .rating-control
  4900. .review-container
  4901. .ms-Rating-star {
  4902. margin-top: 0;
  4903. padding-bottom: 0;
  4904. }
  4905.  
  4906. .gallery-dialog
  4907. .rating-control
  4908. .ms-Rating-star
  4909. button.ms-Rating-button {
  4910. font-size: 24px;
  4911. line-height: 24px;
  4912. }
  4913.  
  4914. .gallery-dialog
  4915. .rating-control
  4916. .ms-Rating-star
  4917. button.ms-Rating-button:focus {
  4918. outline: 1px solid rgb(102 102 102 / 100%);
  4919. outline: 1px solid
  4920. rgba(
  4921. var(--palette-neutral-60, 102, 102, 102),
  4922. 1
  4923. );
  4924. }
  4925.  
  4926. .gallery-dialog
  4927. .rating-control
  4928. .ms-Rating-star
  4929. button.ms-Rating-button
  4930. .ms-RatingStar-front {
  4931. color: #c0442e;
  4932. }
  4933.  
  4934. .gallery-dialog
  4935. .rating-control
  4936. .ms-Rating-star
  4937. button.ms-Rating-button
  4938. .ms-RatingStar-back {
  4939. color: #d2d2d2;
  4940. }
  4941.  
  4942. @media screen and (-ms-high-contrast: active) {
  4943. .gallery-dialog
  4944. .rating-control
  4945. .ms-Rating-star
  4946. button.ms-Rating-button:hover,
  4947. .gallery-dialog
  4948. .rating-control
  4949. .ms-Rating-star
  4950. button.ms-Rating-button:focus {
  4951. border: 0 !important;
  4952. }
  4953.  
  4954. .gallery-dialog
  4955. .rating-control
  4956. .ms-Rating-star
  4957. button.ms-Rating-button
  4958. .ms-RatingStar-front {
  4959. color: #c0442e;
  4960. }
  4961.  
  4962. .gallery-dialog
  4963. .rating-control
  4964. .ms-Rating-star
  4965. button.ms-Rating-button
  4966. .ms-RatingStar-back {
  4967. color: #d2d2d2;
  4968. }
  4969. }
  4970.  
  4971. .gallery-dialog
  4972. .review-container
  4973. .rating-control
  4974. .ms-Rating {
  4975. margin-top: 0;
  4976. padding-bottom: 0;
  4977. }
  4978.  
  4979. .invisibleButton {
  4980. display: none;
  4981. }
  4982.  
  4983. .rnr-top-container .reviews-row .reply-row {
  4984. margin-top: 10px;
  4985. border-top: 1px solid;
  4986. border-top-color: rgb(234 234 234 / 100%);
  4987. border-top-color: rgba(
  4988. var(--palette-neutral-8, 234, 234, 234),
  4989. 1
  4990. );
  4991. padding-top: 5px;
  4992. }
  4993.  
  4994. .rnr-top-container
  4995. .reviews-row
  4996. .reply-row
  4997. .publisher-image-column {
  4998. vertical-align: top;
  4999. border-collapse: collapse;
  5000. padding-top: 3px;
  5001. text-align: center;
  5002. }
  5003.  
  5004. .rnr-top-container
  5005. .reviews-row
  5006. .reply-row
  5007. .publisher-image-column
  5008. .publisher-image {
  5009. width: 44px;
  5010. height: 44px;
  5011. }
  5012.  
  5013. .rnr-top-container
  5014. .reviews-row
  5015. .reply-row
  5016. .ux-publisher-name {
  5017. font-weight: 700;
  5018. font-size: 14px;
  5019. }
  5020.  
  5021. .rnr-top-container
  5022. .reviews-row
  5023. .reply-row
  5024. .ux-updated-date {
  5025. color: #666666;
  5026. font-size: 12px;
  5027. }
  5028.  
  5029. .rnr-top-container
  5030. .reviews-row
  5031. .reply-row
  5032. .reply-container {
  5033. width: 100%;
  5034. }
  5035.  
  5036. .rnr-top-container
  5037. .reviews-row
  5038. .reply-row
  5039. .read-more-container {
  5040. margin-top: 12px;
  5041. margin-bottom: 10px;
  5042. }
  5043.  
  5044. .rnr-top-container
  5045. .reviews-row
  5046. .reply-row
  5047. .edit-action-link {
  5048. height: 15px;
  5049. font-size: 12px;
  5050. }
  5051.  
  5052. .rnr-top-container {
  5053. display: inline-block;
  5054. margin-bottom: 34px;
  5055. width: 100%;
  5056. }
  5057.  
  5058. .rnr-top-container .rnr-loading-container {
  5059. margin-top: 20px;
  5060. }
  5061.  
  5062. .rnr-top-container
  5063. .user-reviews-section-header {
  5064. display: block;
  5065. margin-top: 0.83em;
  5066. margin-bottom: 0.5em;
  5067. margin: 0;
  5068. padding-left: 0;
  5069. font-size: 20px;
  5070. }
  5071.  
  5072. .rnr-top-container .rnr-container-row {
  5073. border-bottom: 1px solid;
  5074. border-width: 1px 0;
  5075. border-bottom-color: rgb(234 234 234 / 100%);
  5076. border-bottom-color: rgba(
  5077. var(--palette-neutral-8, 234, 234, 234),
  5078. 1
  5079. );
  5080. border-collapse: collapse;
  5081. padding-bottom: 10px;
  5082. }
  5083.  
  5084. .rnr-top-container
  5085. .rnr-container-row
  5086. .average-rating {
  5087. padding-top: 10px;
  5088. }
  5089.  
  5090. .rnr-top-container
  5091. .rnr-container-row
  5092. .rating-count {
  5093. padding-top: 10px;
  5094. padding-left: 0;
  5095. }
  5096.  
  5097. .rnr-top-container
  5098. .rnr-container-row
  5099. .write-review-button-container {
  5100. float: right;
  5101. padding-right: 0;
  5102. }
  5103.  
  5104. .rnr-top-container
  5105. .rnr-container-row
  5106. .report-review-button-container {
  5107. float: right;
  5108. padding-right: 0;
  5109. }
  5110.  
  5111. .rnr-top-container
  5112. .rnr-container-row
  5113. .organize-buttons {
  5114. display: inline;
  5115. }
  5116.  
  5117. .rnr-top-container .rnr-loading-more {
  5118. margin-top: 10px;
  5119. }
  5120.  
  5121. .rnr-top-container .see-more-button button {
  5122. float: right;
  5123. margin-top: 20px;
  5124. }
  5125.  
  5126. .rnr-top-container
  5127. .rating-control
  5128. .ms-Rating-star
  5129. button.ms-Rating-button {
  5130. font-size: 11px;
  5131. line-height: 11px;
  5132. }
  5133.  
  5134. .rnr-top-container
  5135. .rating-control
  5136. .ms-Rating-star
  5137. button.ms-Rating-button
  5138. .ms-RatingStar-front {
  5139. color: #c0442e;
  5140. }
  5141.  
  5142. .rnr-top-container
  5143. .rating-control
  5144. .ms-Rating-star
  5145. button.ms-Rating-button
  5146. .ms-RatingStar-back {
  5147. color: #d2d2d2;
  5148. }
  5149.  
  5150. @media screen and (-ms-high-contrast: active) {
  5151. .rnr-top-container
  5152. .rating-control
  5153. .ms-Rating-star
  5154. button.ms-Rating-button {
  5155. border: 0 !important;
  5156. }
  5157.  
  5158. .rnr-top-container
  5159. .rating-control
  5160. .ms-Rating-star
  5161. button.ms-Rating-button:hover,
  5162. .rnr-top-container
  5163. .rating-control
  5164. .ms-Rating-star
  5165. button.ms-Rating-button:focus {
  5166. border: 0 !important;
  5167. }
  5168.  
  5169. .rnr-top-container
  5170. .rating-control
  5171. .ms-Rating-star
  5172. button.ms-Rating-button
  5173. .ms-RatingStar-front {
  5174. color: #c0442e;
  5175. }
  5176.  
  5177. .rnr-top-container
  5178. .rating-control
  5179. .ms-Rating-star
  5180. button.ms-Rating-button
  5181. .ms-RatingStar-back {
  5182. color: #d2d2d2;
  5183. }
  5184. }
  5185.  
  5186. .reviews-row {
  5187. border-bottom: 1px solid;
  5188. border-width: 1px 0;
  5189. border-bottom-color: rgb(234 234 234 / 100%);
  5190. border-bottom-color: rgba(
  5191. var(--palette-neutral-8, 234, 234, 234),
  5192. 1
  5193. );
  5194. border-collapse: collapse;
  5195. padding-top: 10px;
  5196. padding-bottom: 10px;
  5197. }
  5198.  
  5199. .reviews-row .review-container {
  5200. padding-right: 0;
  5201. padding-left: 4px;
  5202. }
  5203.  
  5204. .reviews-row .rnr-user-image-column {
  5205. vertical-align: top;
  5206. border-collapse: collapse;
  5207. padding-top: 5px;
  5208. text-align: center;
  5209. }
  5210.  
  5211. .reviews-row
  5212. .rnr-user-image-column
  5213. .rnr-user-image {
  5214. width: 44px;
  5215. height: 44px;
  5216. }
  5217.  
  5218. .reviews-row .ux-user-name {
  5219. font-weight: 700;
  5220. font-size: 14px;
  5221. }
  5222.  
  5223. .reviews-row .ux-updated-date {
  5224. color: #666666;
  5225. font-size: 12px;
  5226. }
  5227.  
  5228. .reviews-row .review-container .rating-control {
  5229. padding-top: 1px;
  5230. font-size: 11px;
  5231. }
  5232.  
  5233. .reviews-row
  5234. .review-container
  5235. .rating-control
  5236. .ms-Rating-star {
  5237. margin-top: 0;
  5238. outline: 0;
  5239. padding-bottom: 0;
  5240. }
  5241.  
  5242. .reviews-row
  5243. .review-container
  5244. .rating-control
  5245. .ms-Rating-star
  5246. .ms-Rating-button {
  5247. outline: 0 !important;
  5248. border: 0 !important;
  5249. padding: 0;
  5250. height: 100%;
  5251. font-size: 12px;
  5252. line-height: 12px;
  5253. }
  5254.  
  5255. .reviews-row .striked::after {
  5256. position: absolute;
  5257. top: 50%;
  5258. right: 0;
  5259. left: 0;
  5260. border-top: 1px solid;
  5261. content: '';
  5262. }
  5263.  
  5264. .reviews-row .reply-action-link {
  5265. height: 15px;
  5266. font-size: 12px;
  5267. }
  5268.  
  5269. .reviews-row .read-more-container {
  5270. margin-top: 12px;
  5271. margin-bottom: 10px;
  5272. }
  5273.  
  5274. .reviews-row .flag-table-container {
  5275. float: right;
  5276. padding-right: 6px;
  5277. }
  5278.  
  5279. .reviews-row .reply-readMore {
  5280. width: 100%;
  5281. }
  5282.  
  5283. .ms-Dialog-inner .reviews-row {
  5284. border: none;
  5285. }
  5286.  
  5287. .ms-Dialog-inner
  5288. .reviews-row
  5289. .rnr-user-image-column {
  5290. width: 12%;
  5291. }
  5292.  
  5293. .ms-Dialog-inner
  5294. .reviews-row
  5295. .rnr-review-column {
  5296. width: 88%;
  5297. }
  5298.  
  5299. .ms-Dialog-inner
  5300. .reviews-row
  5301. .read-more-container {
  5302. width: 370px;
  5303. }
  5304.  
  5305. .carousel-container {
  5306. position: relative;
  5307. margin: 0;
  5308. }
  5309.  
  5310. .carousel-wrapper,
  5311. .carousel-wrapperHomePage {
  5312. position: relative;
  5313. overflow: hidden;
  5314. }
  5315.  
  5316. .carousel-wrapper:hover .carousel-nav a,
  5317. .carousel-wrapperHomePage:hover
  5318. .carousel-nav
  5319. a {
  5320. display: block;
  5321. }
  5322.  
  5323. .carousel {
  5324. position: absolute;
  5325. /* Carousel item */
  5326. }
  5327.  
  5328. .carousel .carousel-item {
  5329. float: left;
  5330. margin-top: 16px;
  5331. margin-right: 12.5px;
  5332. margin-left: 1px;
  5333. }
  5334.  
  5335. .carousel .carousel-item:nth-last-child(1) {
  5336. /*this is the first one so shift it to the left*/
  5337. margin-right: 0;
  5338. }
  5339.  
  5340. .item-carousel.images .carousel .carousel-item {
  5341. float: left;
  5342. margin: 0;
  5343. padding: 0;
  5344. }
  5345.  
  5346. /*
  5347. The following style will change as we progess in making our view more close to the requirement
  5348. */
  5349. .carousel-spinner {
  5350. position: absolute;
  5351. top: 45%;
  5352. left: 48.5%;
  5353. vertical-align: middle;
  5354. margin: auto;
  5355. background: url('../../_content/big-progress.gif');
  5356. width: 36px;
  5357. height: 36px;
  5358. }
  5359.  
  5360. .carousel-nav a {
  5361. position: absolute;
  5362. top: 50%;
  5363. z-index: 10;
  5364. margin-top: -20px;
  5365. padding: 2px 0 0;
  5366. color: rgb(0 90 158 / 100%);
  5367. color: var(
  5368. --communication-foreground,
  5369. rgb(0 90 158 / 100%)
  5370. );
  5371. font-weight: 100;
  5372. font-size: 40px;
  5373. font-family: monospace;
  5374. text-align: center;
  5375. text-decoration: none;
  5376. }
  5377.  
  5378. .carousel-nav a:hover {
  5379. opacity: 100%;
  5380. background-color: #e2e1e1;
  5381. width: 38px;
  5382. height: auto;
  5383. color: #000000;
  5384. }
  5385.  
  5386. .carousel-nav
  5387. a
  5388. .bowtie-icon.bowtie-chevron-left {
  5389. font-size: 38px;
  5390. }
  5391.  
  5392. .carousel-nav
  5393. a
  5394. .bowtie-icon.bowtie-chevron-right {
  5395. font-size: 38px;
  5396. }
  5397.  
  5398. .carousel-nav a.disabled {
  5399. color: #d5d5d5;
  5400. }
  5401.  
  5402. .carousel-nav a.disabled:hover {
  5403. color: #d5d5d5;
  5404. }
  5405.  
  5406. .carousel-nav .carousel-prev {
  5407. left: -40px;
  5408. }
  5409.  
  5410. .carousel-nav .carousel-next {
  5411. right: -40px;
  5412. }
  5413.  
  5414. .carousel-indicators {
  5415. margin-top: 5px;
  5416. text-align: center;
  5417. }
  5418.  
  5419. .carousel-indicators .indicator {
  5420. display: inline-block;
  5421. margin-right: 12px;
  5422. border: 1px solid;
  5423. border-radius: 50%;
  5424. background: rgb(0 0 0 / 30%);
  5425. width: 12px;
  5426. height: 12px;
  5427. }
  5428.  
  5429. .carousel-indicators .indicator.active,
  5430. .carousel-indicators .indicator:hover {
  5431. background: rgb(0 0 0 / 80%);
  5432. }
  5433.  
  5434. .flag-control {
  5435. color: rgb(0 0 0 / 55%);
  5436. color: var(
  5437. --text-secondary-color,
  5438. rgb(0 0 0 / 55%)
  5439. );
  5440. font-size: 14px;
  5441. }
  5442.  
  5443. .flag-control:focus {
  5444. color: rgb(0 69 120 / 100%);
  5445. color: rgba(
  5446. var(--palette-primary-shade-30, 0, 69, 120),
  5447. 1
  5448. );
  5449. }
  5450.  
  5451. .flag-control:hover {
  5452. cursor: pointer;
  5453. color: rgb(0 69 120 / 100%);
  5454. color: rgba(
  5455. var(--palette-primary-shade-30, 0, 69, 120),
  5456. 1
  5457. );
  5458. }
  5459.  
  5460. .link-as-button {
  5461. height: initial;
  5462. }
  5463.  
  5464. .link-as-button:hover {
  5465. text-decoration: underline;
  5466. }
  5467.  
  5468. .certified-badge-container {
  5469. display: flex;
  5470. flex-direction: row;
  5471. margin-right: 6px;
  5472. }
  5473.  
  5474. .certified-badge-container
  5475. .certified-badge-image {
  5476. color: inherit !important;
  5477. font-size: 17px;
  5478. line-height: 17px;
  5479. }
  5480.  
  5481. .certified-badge-container
  5482. .certified-badge-image
  5483. .certified-badge-foreground {
  5484. position: absolute;
  5485. padding-left: 4px;
  5486. }
  5487.  
  5488. .certified-badge-container
  5489. .certified-badge-text {
  5490. margin-left: 3px;
  5491. border-width: 1px;
  5492. border-style: solid;
  5493. border-color: rgb(200 200 200 / 100%);
  5494. border-color: rgba(
  5495. var(--palette-neutral-20, 200, 200, 200),
  5496. 1
  5497. );
  5498. border-radius: 13px;
  5499. padding: 0 9px 0 16px;
  5500. height: 18px;
  5501. color: inherit !important;
  5502. font-weight: 600;
  5503. font-size: 11px;
  5504. }
  5505.  
  5506. .optIn-bar {
  5507. padding: 8px 0 !important;
  5508. }
  5509.  
  5510. .optIn-bar .optIn-action-button {
  5511. height: auto;
  5512. }
  5513.  
  5514. .react-read-more-text {
  5515. font-size: 14px;
  5516. white-space: pre-line;
  5517. }
  5518.  
  5519. .verified-domain-icon-container {
  5520. display: flex;
  5521. flex-direction: row;
  5522. margin-right: 6px;
  5523. margin-right: 10;
  5524. color: #0078d4;
  5525. font-size: 17px;
  5526. line-height: 17px;
  5527. }
  5528.  
  5529. .verified-domain-icon-container
  5530. .verified-domain-icon-background {
  5531. position: absolute;
  5532. color: #ffffff;
  5533. line-height: 15px;
  5534. }
  5535.  
  5536. .verified-domain-icon-container
  5537. .verified-domain-icon-foreground {
  5538. position: absolute;
  5539. z-index: 1;
  5540. line-height: 15px;
  5541. }
  5542.  
  5543. .verified-publisher-domain-url {
  5544. margin-left: 25px;
  5545. font-size: 16px;
  5546. }
  5547.  
  5548. .ux-section-banner
  5549. .item-header-content.dark
  5550. a.verified-publisher-domain-url {
  5551. color: white;
  5552. text-decoration: underline;
  5553. }
  5554.  
  5555. .verified-publisher-domain-container {
  5556. line-height: 13px;
  5557. }
  5558.  
  5559. .ux-section-capabilities
  5560. .capabilities-list-item {
  5561. margin-bottom: 4px;
  5562. color: #666;
  5563. }
  5564. }