SHARE
TWEET

X Xhamster Widescreen (NEW) PART 1 - v.135

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