/* ==UserStyle==
@name KG_Dark
@namespace klavogonki.ru
@version 1.0.0
@description Dark theme for klavogonki.ru is made to save your eyes from the bright background.
@author Patcher
==/UserStyle== */
@-moz-document domain("klavogonki.ru") {
/* Dark theme for klavogonki.ru made to save the eyes */
:root {
/* container width */
--container: 1300px;
/* global colors */
--black: #000000;
--deepgray: #1a1818;
--darkgray: #282B2F;
--white: #B2B2B2;
--blue: #61839a;
--lightblue: #7aa4c0;
--red: #AA7788;
--middlegray: #676c71;
--orange: #a74;
/* top main page icons */
--topRating: url('https://i.imgur.com/coRjBrH.gif') no-repeat 0 0;
--topToday: url('https://i.imgur.com/oAcuZP9.gif') no-repeat 0 0;
--topWeek: url('https://i.imgur.com/tU8Fe4v.gif') no-repeat 0 0;
--topSuccess: url('https://i.imgur.com/hu7hoxL.gif') no-repeat 0 0;
--topNOError: url('https://i.imgur.com/0YuLUlO.gif') no-repeat 0 0;
/* forum edit btn */
--forumEdit: url('https://i.imgur.com/AaYF4mB.png') no-repeat;
/* virtual keyboard btn */
--virtualKeyboard: url('https://i.imgur.com/CVbMpI4.png') no-repeat;
/* remove voc img */
--rmvoc: url('https://i.imgur.com/vMQOBQd.png') no-repeat;
/* speed img */
--speed: url('https://i.imgur.com/Qg4ztHC.png') no-repeat;
/* close and pin recent games btn's */
--fixedRecent: url('https://i.imgur.com/0lVhZRk.png') no-repeat;
--closeResent: url('https://i.imgur.com/B6eH1ag.png') no-repeat;
--pinResent: url('https://i.imgur.com/k5Ih6ut.png') no-repeat;
/* close btn */
--close: url('https://i.imgur.com/JazoG88.png') no-repeat;
/* logo img */
--logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150px' viewBox='0 0 2712.89 408.86' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M2645.81 399.8V146.98L2428.66 399.8h-69.35l-137.94-146.53V399.8h-66.08V225.14H2000.4V399.8h-65.57V296.65c-34.87 69.33-105.17 112.21-183.27 112.21-113.96 0-205.52-88.16-205.52-202.84 0-48.33 16.24-95.04 46.59-132.39h-113.99V399.8h-65.57V284.55c-31.61 75.49-106.47 124.31-188.83 124.31-74.72 0-140.96-37-178.9-101.54-13.34 61.07-69.46 92.48-129.15 92.48H802.28l-56.71-118.79H607.43L551.31 399.8h-61.16L379.7 142.21 267.39 399.8h-63.38L66.08 253.27V399.8H0V9.06h66.08v116.53L190.49 9.06h64.43v25.38L91.54 186.49 226.61 329.9c46.62-106.95 93.24-213.89 139.87-320.84h27.24c42.75 99.67 85.51 199.34 128.27 299.01L663.16 9.06h27.6l111.52 239.03V9.06h85.89c68.06 0 130.69 26.25 130.69 103.01 0 27.64-10.56 53.52-30.88 72.44 11.66 5.87 21.77 12.87 30.74 22.21C1018.53 93.07 1106.43 0 1221.3 0c83.33 0 159.13 45.74 191.77 123.67V9.06h210.54v34.09C1659.48 14.97 1702.99 0 1748.63 0c78.9 0 150.34 40.43 186.2 111.59V9.06h65.57v151.51h154.89V9.06h65.58l.5 116.53L2346.31 9.06h118.43V265.8L2683.41 9.06h29.48V399.8h-67.08zM676.92 133.87l-39.02 82.57h77.88l-38.86-82.57zm189.93-60.24v86.43c34.74 0 84.53 2.49 84.53-44.63 0-44.66-53.82-41.8-84.53-41.8zm0 152.01v109.59c40.34 0 114.62 4.27 114.62-55.45 0-58.58-73.89-54.14-114.62-54.14zM1222.9 64.57c-77.01 0-137.6 63.04-137.6 141.37 0 77.38 60.06 138.35 137.6 138.35 79.66 0 139.1-60.83 139.1-140.11 0-77.87-60.86-139.61-139.1-139.61zm527.32 0c-77.01 0-137.59 63.04-137.59 141.37 0 77.38 60.05 138.35 137.59 138.35 80.29 0 139.11-61.3 139.11-140.11 0-78.42-61.42-139.61-139.11-139.61zm648.95-19.85l-152.34 141.77 152.34 161.73V44.72z' fill='gray' fill-rule='nonzero'/%3E%3C/svg%3E") center no-repeat;
/* small award icons */
--medal-award: url('https://i.imgur.com/JDhJqcC.png');
--star-award: url('https://i.imgur.com/YmrdFhT.png');
--trophy-award: url('https://i.imgur.com/2FZf6o2.png');
--crown-award: url('https://i.imgur.com/dRmEePR.png');
--gold-helmet-award: url('https://i.imgur.com/ycmbPKe.png');
--platinum-helmet-award: url('https://i.imgur.com/59ELuaN.png');
--black-helmet-award: url('https://i.imgur.com/maRdFQj.png');
--wheel-award: url('https://i.imgur.com/dAJvuUs.png');
--bronze-book-award: url('https://i.imgur.com/rnFZbgd.png');
--silver-book-award: url('https://i.imgur.com/1tJl28k.png');
--gold-book-award: url('https://i.imgur.com/cZzdSKm.png');
/* score img links */
--score0: url('https://i.imgur.com/59wwdDd.png') no-repeat;
--score1: url('https://i.imgur.com/CgPq05c.png') no-repeat;
--score2: url('https://i.imgur.com/AXMSZeu.png') no-repeat;
--score3: url('https://i.imgur.com/f1pZVqG.png') no-repeat;
--score4: url('https://i.imgur.com/EDtk0UY.png') no-repeat;
--score5: url('https://i.imgur.com/EJhbc1l.png') no-repeat;
--score6: url('https://i.imgur.com/mUA1l3t.png') no-repeat;
--score7: url('https://i.imgur.com/5ps97rX.png') no-repeat;
--score8: url('https://i.imgur.com/qfHUx1D.png') no-repeat;
--score9: url('https://i.imgur.com/MAXleXL.png') no-repeat;
--score10: url('https://i.imgur.com/DsZrRpc.png') no-repeat;
--score11: url('https://i.imgur.com/5u1rABS.png') no-repeat;
/* race img icons */
--competition: url('https://i.imgur.com/SBiVd3b.png') no-repeat;
--race: url('https://i.imgur.com/3cCOjvW.png') no-repeat;
--abra: url('https://i.imgur.com/GSgcQHr.png') no-repeat;
--crash: url('https://i.imgur.com/Jtc0hbl.png') no-repeat;
--dictionary: url('https://i.imgur.com/1D7IS4z.png') no-repeat;
--digits: url('https://i.imgur.com/4wGQAmB.png') no-repeat;
--infinity: url('https://i.imgur.com/nv8KiwH.png') no-repeat;
--letters: url('https://i.imgur.com/h9gIqII.png') no-repeat;
--marathone: url('https://i.imgur.com/FrbMx1S.png') no-repeat;
--usual: url('https://i.imgur.com/bc1qtjV.png') no-repeat;
--yandex: url('https://i.imgur.com/2UotZ43.png') no-repeat;
/* textarea forum and comments vocs bbcode buttons */
--background: url('https://i.imgur.com/ehrkyDk.png') no-repeat;
--bold: url('https://i.imgur.com/9OK8lhQ.png') no-repeat;
--center: url('https://i.imgur.com/7MKySx7.png') no-repeat;
--code: url('https://i.imgur.com/8RjyCqp.png') no-repeat;
--color: url('https://i.imgur.com/rlm02Hi.png') no-repeat;
--hide: url('https://i.imgur.com/xDm3rUs.png') no-repeat;
--html: url('https://i.imgur.com/OgwovGX.png') no-repeat;
--image: url('https://i.imgur.com/CPXb6fF.png') no-repeat;
--italic: url('https://i.imgur.com/5ocDivo.png') no-repeat;
--left: url('https://i.imgur.com/mhGYxF3.png') no-repeat;
--link: url('https://i.imgur.com/3EKme2P.png') no-repeat;
--list: url('https://i.imgur.com/wrRH3HC.png') no-repeat;
--listnum: url('https://i.imgur.com/OHdzZda.png') no-repeat;
--quote: url('https://i.imgur.com/5lXzkq5.png') no-repeat;
--quotesel: url('https://i.imgur.com/UfiGb5M.png') no-repeat;
--right: url('https://i.imgur.com/qV4lUmE.png') no-repeat;
--size: url('https://i.imgur.com/QTu5Xbu.png') no-repeat;
--strike: url('https://i.imgur.com/6AyRP37.png') no-repeat;
--sub: url('https://i.imgur.com/K1PKT3j.png') no-repeat;
--sup: url('https://i.imgur.com/rDf6r46.png') no-repeat;
--tab: url('https://i.imgur.com/xuyw8TO.png') no-repeat;
--underlined: url('https://i.imgur.com/vPgSVYU.png') no-repeat;
--smile: url('https://i.imgur.com/QKGLj9X.png') no-repeat;
--youtube: url('https://i.imgur.com/usx9mk9.png') no-repeat;
/* daily done or not img */
--yes: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='lightgreen' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") center no-repeat;
--no: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='orange' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-console.log-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") center no-repeat;
/* user panel pin img */
--pin: transparent url('https://i.imgur.com/XolL9Tj.png') no-repeat 1px 1px;
/* chat buttons ignore filter smilies */
/* not pressed */
--ignoreBlue: url('https://i.imgur.com/bUkrOi5.png') no-repeat;
--filterOFF: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='AliceBlue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-filter'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E") 2px 2px no-repeat;
--smiliesNotActive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='AliceBlue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-meh'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='8' y1='15' x2='16' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'%3E%3C/line%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'%3E%3C/line%3E%3C/svg%3E") 2px 2px no-repeat;
/* pressed */
--ignoreOrange: url('https://i.imgur.com/wh9L78a.png') no-repeat;
--filterON: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='LimeGreen' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-filter'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E") 2px 2px no-repeat;
--smiliesActive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='Gold' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-smile'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'%3E%3C/path%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'%3E%3C/line%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'%3E%3C/line%3E%3C/svg%3E") 2px 2px no-repeat;
/* warning qualification */
--qualificationNoneHover: url('https://i.imgur.com/gBMuws8.png') no-repeat;
--qualificationHover: url('https://i.imgur.com/5IOFgWg.png') no-repeat;
/* wishes img */
--reformalTabDefault: url('https://i.imgur.com/YWgo8Ox.png') no-repeat;
--reformalTabHover: url('https://i.imgur.com/QQTyaUz.png') no-repeat;
/* voc popularity */
--vocPopularity: url('https://i.imgur.com/2eXawT9.png') no-repeat;
/* voc show history button */
--showHistory: transparent url('https://i.imgur.com/GzXGiKX.png') no-repeat 0% 0%;
/* btn fuel */
--btnFuel: url('https://i.imgur.com/DRxzmSe.png') no-repeat;
/* cars */
--car1: transparent url('https://i.imgur.com/uwSNGKd.png') no-repeat !important;
--car2: transparent url('https://i.imgur.com/7Bbb8ET.png') no-repeat !important;
--car3: transparent url('https://i.imgur.com/SXnTafn.png') no-repeat !important;
--car4: transparent url('https://i.imgur.com/uZ3rMfO.png') no-repeat !important;
--car5: transparent url('https://i.imgur.com/bIDJiCM.png') no-repeat !important;
--car6: transparent url('https://i.imgur.com/H81bdnR.png') no-repeat !important;
--car7: transparent url('https://i.imgur.com/tChyLsQ.png') no-repeat !important;
--car8: transparent url('https://i.ibb.co/PxLCw7j/8.png') no-repeat !important;
--car9: transparent url('https://i.imgur.com/jzhpPYu.png') no-repeat !important;
--car10: transparent url('https://i.imgur.com/izRB1FS.png') no-repeat !important;
--car11: transparent url('https://i.imgur.com/d7Ev18i.png') no-repeat !important;
--car12: transparent url('https://i.imgur.com/ne8Z9ik.png') no-repeat !important;
--car13: transparent url('https://i.imgur.com/tO7DgE6.png') no-repeat !important;
--car14: transparent url('https://i.imgur.com/nsOmDce.png') no-repeat !important;
--car15: transparent url('https://i.imgur.com/Mj57DXC.png') no-repeat !important;
--car16: transparent url('https://i.imgur.com/uiYztrv.png') no-repeat !important;
--car17: transparent url('https://i.imgur.com/vBeeRS7.png') no-repeat !important;
--car18: transparent url('https://i.imgur.com/awvJgeH.png') no-repeat !important;
--car19: transparent url('https://i.imgur.com/Dh3ioZS.png') no-repeat !important;
--car20: transparent url('https://i.imgur.com/qu1EHaB.png') no-repeat !important;
--car22: transparent url('https://i.imgur.com/XjAdCEu.png') no-repeat !important;
--car23: transparent url('https://i.imgur.com/ivw7DJ6.png') no-repeat !important;
--car24: transparent url('https://i.ibb.co/w6nKw0L/24.png') no-repeat !important;
--car25: transparent url('https://i.imgur.com/iheYOvs.png') no-repeat !important;
--car26: transparent url('https://i.imgur.com/HVdv2ZL.png') no-repeat !important;
--car27: transparent url('https://i.imgur.com/RLn2dy9.png') no-repeat !important;
--car28: transparent url('https://i.imgur.com/tQSm6kB.png') no-repeat !important;
--car29: transparent url('https://i.imgur.com/8wS5O6W.png') no-repeat !important;
--car30: transparent url('https://i.imgur.com/KHiwTpI.png') no-repeat !important;
--car31: transparent url('https://i.imgur.com/9jEat54.png') no-repeat !important;
--car32: transparent url('https://i.imgur.com/W2E7EvL.png') no-repeat !important;
--car33: transparent url('https://i.imgur.com/Qwucafx.png') no-repeat !important;
--car34: transparent url('https://i.imgur.com/6DBBR8Y.png') no-repeat !important;
--car35: transparent url('https://i.imgur.com/iaeOOWq.png') no-repeat !important;
--car36: transparent url('https://i.imgur.com/iMe92ys.png') no-repeat !important;
--car37: transparent url('https://i.imgur.com/LXzxKGK.png') no-repeat !important;
--car38: transparent url('https://i.imgur.com/xNJbSQF.png') no-repeat !important;
--car39: transparent url('https://i.imgur.com/0hs1xKA.png') no-repeat !important;
--car40: transparent url('https://i.imgur.com/9hBedtu.png') no-repeat !important;
--car41: transparent url('https://i.imgur.com/DD8a1m8.png') no-repeat !important;
--car42: transparent url('https://i.imgur.com/hjtensL.png') no-repeat !important;
--car43: transparent url('https://i.imgur.com/v8Mdsse.png') no-repeat !important;
--car44: transparent url('https://i.imgur.com/o45oF5p.png') no-repeat !important;
/* exclusive cars*/
--batman: transparent url('https://i.imgur.com/xodN8FZ.png') no-repeat !important;
--car1000-1: transparent url('https://i.imgur.com/JHQidUp.png') no-repeat !important;
--car1001-1: transparent url('https://i.imgur.com/w1IKisn.png') no-repeat !important;
--car1002-1: transparent url('https://i.imgur.com/nx2wjJN.png') no-repeat !important;
--car1003-1: transparent url('https://i.imgur.com/fyHwPsb.png') no-repeat !important;
--car1006-1: transparent url('https://i.imgur.com/ioGn0t2.png') no-repeat !important;
--car1008-1: transparent url('https://i.imgur.com/ywycywz.png') no-repeat !important;
--car1009-1: transparent url('https://i.imgur.com/tfM0o3z.png') no-repeat !important;
--car1010-1: transparent url('https://i.imgur.com/lneE69t.png') no-repeat !important;
--car1012-3: transparent url('https://i.imgur.com/WD7jFw4.png') no-repeat !important;
--car1013-3: transparent url('https://i.imgur.com/Oz22rno.png') no-repeat !important;
--car1015-1: transparent url('https://i.imgur.com/e5Hmfk9.png') no-repeat !important;
--car1016-1: transparent url('https://i.imgur.com/sWHgUmT.png') no-repeat !important;
--car1017: transparent url('https://i.imgur.com/uigPeya.png') no-repeat !important;
--car1018: transparent url('https://i.imgur.com/dAG2QAF.png') no-repeat !important;
--car1019: transparent url('https://i.imgur.com/BiFcab1.png') no-repeat !important;
--car1020: transparent url('https://i.imgur.com/BnU9NGH.png') no-repeat !important;
--car1021-1: transparent url('https://i.imgur.com/mzXJiCW.png') no-repeat !important;
--car1022: transparent url('https://i.imgur.com/BkFXr6O.png') no-repeat !important;
--car1023-1: transparent url('https://i.imgur.com/Dk9aRDa.png') no-repeat !important;
--car1024: transparent url('https://i.imgur.com/rMPLyU8.png') no-repeat !important;
/* create btn race normal state */
--createNormal: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIDIwMTggKDY0LUJpdCkgLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjIzNXB4IiBoZWlnaHQ9IjUwcHgiIHZlcnNpb249IjEuMCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDU1LjIzIDExLjc1Ig0KIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiA8ZGVmcz4NCiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCiAgIDwhW0NEQVRBWw0KICAgIC5zdHIwIHtzdHJva2U6IzM3MzQzNTtzdHJva2Utd2lkdGg6MC40OTtzdHJva2UtbWl0ZXJsaW1pdDoyLjYxMzEzfQ0KICAgIC5maWwyIHtmaWxsOiMzNzM0MzV9DQogICAgLmZpbDAge2ZpbGw6IzhFQzVGRn0NCiAgICAuZmlsMSB7ZmlsbDojMzczNDM1O2ZpbGwtcnVsZTpub256ZXJvfQ0KICAgXV0+DQogIDwvc3R5bGU+DQogPC9kZWZzPg0KIDxnIGlkPSJMYXllcl94MDAyMF8xIj4NCiAgPG1ldGFkYXRhIGlkPSJDb3JlbENvcnBJRF8wQ29yZWwtTGF5ZXIiLz4NCiAgPHJlY3QgY2xhc3M9ImZpbDAiIHdpZHRoPSI1NS4yMyIgaGVpZ2h0PSIxMS43NSIvPg0KICA8cGF0aCBjbGFzcz0iZmlsMSIgZD0iTTE5LjA5IDMuODFsMC41OSAwIDAgNC4xNyAtMC41OSAwIDAgLTQuMTd6bS0yLjM3IDBsMC41OSAwIDAgNC4xNyAtMC41OSAwIDAgLTQuMTd6bTAuMzcgMGwyLjMxIDAgMCAwLjU1IC0yLjMxIDAgMCAtMC41NXoiLz4NCiAgPHBhdGggaWQ9IjEiIGNsYXNzPSJmaWwxIiBkPSJNMjIuMDkgOC4wMmMtMC4yOSwwIC0wLjU1LC0wLjA2IC0wLjc3LC0wLjE5IC0wLjIyLC0wLjEzIC0wLjM5LC0wLjMxIC0wLjUxLC0wLjU0IC0wLjEyLC0wLjIzIC0wLjE4LC0wLjUgLTAuMTgsLTAuODFsMCAtMS4xOGMwLC0wLjMgMC4wNiwtMC41NyAwLjE4LC0wLjgxIDAuMTIsLTAuMjMgMC4yOSwtMC40MSAwLjUxLC0wLjUzIDAuMjIsLTAuMTMgMC40OCwtMC4yIDAuNzcsLTAuMiAwLjI5LDAgMC41NSwwLjA3IDAuNzcsMC4yIDAuMjIsMC4xMiAwLjM5LDAuMyAwLjUxLDAuNTMgMC4xMywwLjI0IDAuMTksMC41MSAwLjE5LDAuODFsMCAxLjE4YzAsMC4zMSAtMC4wNiwwLjU4IC0wLjE5LDAuODEgLTAuMTIsMC4yMyAtMC4yOSwwLjQxIC0wLjUxLDAuNTQgLTAuMjIsMC4xMyAtMC40OCwwLjE5IC0wLjc3LDAuMTl6bTAgLTAuNTdjMC4xNywwIDAuMzIsLTAuMDQgMC40NiwtMC4xMiAwLjEzLC0wLjA4IDAuMjMsLTAuMTkgMC4zLC0wLjMzIDAuMDcsLTAuMTQgMC4xMSwtMC4zMSAwLjExLC0wLjVsMCAtMS4yMmMwLC0wLjE4IC0wLjA0LC0wLjM1IC0wLjExLC0wLjQ5IC0wLjA3LC0wLjE1IC0wLjE3LC0wLjI1IC0wLjMsLTAuMzMgLTAuMTQsLTAuMDggLTAuMjksLTAuMTIgLTAuNDYsLTAuMTIgLTAuMTcsMCAtMC4zMiwwLjA0IC0wLjQ1LDAuMTIgLTAuMTQsMC4wOCAtMC4yNCwwLjE4IC0wLjMxLDAuMzMgLTAuMDcsMC4xNCAtMC4xMSwwLjMxIC0wLjExLDAuNDlsMCAxLjIyYzAsMC4xOSAwLjA0LDAuMzYgMC4xMSwwLjUgMC4wNywwLjE0IDAuMTcsMC4yNSAwLjMxLDAuMzMgMC4xMywwLjA4IDAuMjgsMC4xMiAwLjQ1LDAuMTJ6Ii8+DQogIDxwYXRoIGlkPSIyIiBjbGFzcz0iZmlsMSIgZD0iTTI0LjI1IDcuNDJsMCAwYzAuMTYsMCAwLjMsLTAuMDQgMC40LC0wLjExIDAuMTEsLTAuMDggMC4xOSwtMC4yIDAuMjQsLTAuMzYgMC4wNSwtMC4xNyAwLjA3LC0wLjM4IDAuMDcsLTAuNjRsMCAtMi41IDAuNTkgMCAwIDIuNDZjMCwwLjQgLTAuMDUsMC43MyAtMC4xMywwLjk4IC0wLjA5LDAuMjUgLTAuMjIsMC40MyAtMC40MSwwLjU1IC0wLjE4LDAuMTIgLTAuNDEsMC4xOCAtMC43MSwwLjE4bC0wLjA1IDAgMCAtMC41NnptMi43NiAtMy42MWwwLjU5IDAgMCA0LjE3IC0wLjU5IDAgMCAtNC4xN3ptLTEuNjkgMGwyIDAgMCAwLjU1IC0yIDAgMCAtMC41NXoiLz4NCiAgPHBhdGggaWQ9IjMiIGNsYXNzPSJmaWwxIiBkPSJNMjguNjMgMy44MWwwLjU5IDAgMCA0LjE3IC0wLjU5IDAgMCAtNC4xN3ptMC4yOSAzLjYxbDIuMzkgMCAwIDAuNTYgLTIuMzkgMCAwIC0wLjU2em0wIC0xLjc5bDIuMDggMCAwIDAuNTYgLTIuMDggMCAwIC0wLjU2em0wIC0xLjgybDIuMzkgMCAwIDAuNTUgLTIuMzkgMCAwIC0wLjU1eiIvPg0KICA8cGF0aCBpZD0iNCIgY2xhc3M9ImZpbDEiIGQ9Ik0zMi43NSA0LjE1bDAuNTggMCAwIDMuODMgLTAuNTggMCAwIC0zLjgzem0tMS4xOCAtMC4zNGwyLjk0IDAgMCAwLjU1IC0yLjk0IDAgMCAtMC41NXoiLz4NCiAgPHBhdGggaWQ9IjUiIGNsYXNzPSJmaWwxIiBkPSJNMzQuOTcgMy44MWwwLjU5IDAgMCA0LjE3IC0wLjU5IDAgMCAtNC4xN3ptMC4yOSAzLjYxbDIuMzkgMCAwIDAuNTYgLTIuMzkgMCAwIC0wLjU2em0wIC0xLjc5bDIuMDggMCAwIDAuNTYgLTIuMDggMCAwIC0wLjU2em0wIC0xLjgybDIuMzkgMCAwIDAuNTUgLTIuMzkgMCAwIC0wLjU1eiIvPg0KICA8cGF0aCBpZD0iNiIgY2xhc3M9ImZpbDEiIGQ9Ik0zOC4zMSA3LjQybDAgMGMwLjE3LDAgMC4zMSwtMC4wNCAwLjQxLC0wLjExIDAuMTEsLTAuMDggMC4xOCwtMC4yIDAuMjMsLTAuMzYgMC4wNSwtMC4xNyAwLjA4LC0wLjM4IDAuMDgsLTAuNjRsMCAtMi41IDAuNTggMCAwIDIuNDZjMCwwLjQgLTAuMDQsMC43MyAtMC4xMywwLjk4IC0wLjA4LDAuMjUgLTAuMjIsMC40MyAtMC40LDAuNTUgLTAuMTgsMC4xMiAtMC40MiwwLjE4IC0wLjcxLDAuMThsLTAuMDYgMCAwIC0wLjU2em0yLjc3IC0zLjYxbDAuNTkgMCAwIDQuMTcgLTAuNTkgMCAwIC00LjE3em0tMS42OSAwbDIgMCAwIDAuNTUgLTIgMCAwIC0wLjU1eiIvPg0KICA8cG9seWdvbiBpZD0iNyIgY2xhc3M9ImZpbDEiIHBvaW50cz0iNDUuMiw3Ljk4IDQ1LjIsNC43IDQ1LjI3LDQuNzcgNDMuMTgsNy45OCA0Mi43LDcuOTggNDIuNywzLjgxIDQzLjI4LDMuODEgNDMuMjgsNy4xNCA0My4yMSw3LjA2IDQ1LjMxLDMuODEgNDUuNzgsMy44MSA0NS43OCw3Ljk4ICIvPg0KICA8cG9seWdvbiBjbGFzcz0iZmlsMiBzdHIwIiBwb2ludHM9IjEwLjY5LDUuODggOC4zOSw3LjIgNi4xLDguNTMgNi41Nyw1Ljg4IDYuMSwzLjIzIDguMzksNC41NSAiLz4NCiA8L2c+DQo8L3N2Zz4NCg==') no-repeat;
/* save btn race normal state */
--saveNormal: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIDIwMTggKDY0LUJpdCkgLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjIzNXB4IiBoZWlnaHQ9IjUwcHgiIHZlcnNpb249IjEuMCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDEwNi4yMyAyMi42Ig0KIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiA8ZGVmcz4NCiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCiAgIDwhW0NEQVRBWw0KICAgIC5maWwwIHtmaWxsOiM4RUM1RkZ9DQogICAgLmZpbDIge2ZpbGw6IzM3MzQzNTtmaWxsLXJ1bGU6bm9uemVyb30NCiAgICAuZmlsMSB7ZmlsbDojMzczNDM1O2ZpbGwtcnVsZTpub256ZXJvfQ0KICAgXV0+DQogIDwvc3R5bGU+DQogPC9kZWZzPg0KIDxnIGlkPSJMYXllcl94MDAyMF8xIj4NCiAgPG1ldGFkYXRhIGlkPSJDb3JlbENvcnBJRF8wQ29yZWwtTGF5ZXIiLz4NCiAgPHJlY3QgY2xhc3M9ImZpbDAiIHdpZHRoPSIxMDYuMjMiIGhlaWdodD0iMjIuNiIvPg0KICA8cG9seWdvbiBjbGFzcz0iZmlsMSIgcG9pbnRzPSIxNS43NCwxNS45NSAxMC4xMyw2LjI1IDEzLjEyLDYuNzggMTMuMTIsNi4wNCAxOS4xNyw2LjA0IDE5LjE3LDYuNzggMjIuMTUsNi4yNSAxNi4xNCwxNi42NSAiLz4NCiAgPHBhdGggY2xhc3M9ImZpbDIiIGQ9Ik0zMy43NiAxNS40M2MtMC41NiwwIC0xLjA1LC0wLjEyIC0xLjQ3LC0wLjM3IC0wLjQyLC0wLjI1IC0wLjc1LC0wLjYgLTAuOTgsLTEuMDUgLTAuMjMsLTAuNDUgLTAuMzQsLTAuOTggLTAuMzQsLTEuNTdsMCAtMi4yYzAsLTAuNiAwLjExLC0xLjEyIDAuMzQsLTEuNTggMC4yMywtMC40NSAwLjU2LC0wLjggMC45OCwtMS4wNSAwLjQyLC0wLjI1IDAuOTEsLTAuMzcgMS40NywtMC4zNyAwLjQ2LDAgMC44OCwwLjEgMS4yNywwLjMgMC4zOCwwLjE5IDAuNzEsMC40NyAwLjk3LDAuODMgMC4yNSwwLjM2IDAuNDMsMC43OCAwLjUyLDEuMjVsMCAwIC0xLjE1IDAgMCAwYy0wLjA3LC0wLjI1IC0wLjE5LC0wLjQ3IC0wLjM1LC0wLjY3IC0wLjE3LC0wLjE5IC0wLjM2LC0wLjM0IC0wLjU4LC0wLjQ1IC0wLjIyLC0wLjExIC0wLjQ1LC0wLjE2IC0wLjY4LC0wLjE2IC0wLjMzLDAgLTAuNjIsMC4wOCAtMC44NiwwLjIzIC0wLjI1LDAuMTYgLTAuNDQsMC4zOSAtMC41OCwwLjY3IC0wLjEzLDAuMjkgLTAuMiwwLjYyIC0wLjIsMWwwIDIuMmMwLDAuMzcgMC4wNywwLjcgMC4yLDAuOTkgMC4xNCwwLjI5IDAuMzMsMC41MSAwLjU4LDAuNjcgMC4yNCwwLjE1IDAuNTMsMC4yMyAwLjg2LDAuMjMgMC4yNCwwIDAuNDYsLTAuMDUgMC42OCwtMC4xNSAwLjIyLC0wLjEgMC40MSwtMC4yNCAwLjU4LC0wLjQ0IDAuMTYsLTAuMTkgMC4yOCwtMC40MyAwLjM1LC0wLjdsMCAwIDEuMTUgMCAwIDBjLTAuMDksMC40OCAtMC4yNywwLjkgLTAuNTMsMS4yNiAtMC4yNiwwLjM2IC0wLjU4LDAuNjQgLTAuOTcsMC44MyAtMC4zOSwwLjIgLTAuODEsMC4zIC0xLjI2LDAuM3oiLz4NCiAgPHBhdGggaWQ9IjEiIGNsYXNzPSJmaWwyIiBkPSJNNDAuNzggMTUuNDNjLTAuNTYsMCAtMS4wNiwtMC4xMiAtMS40OCwtMC4zNyAtMC40MywtMC4yNCAtMC43NiwtMC41OSAtMC45OSwtMS4wNCAtMC4yNCwtMC40NCAtMC4zNSwtMC45NiAtMC4zNSwtMS41NWwwIC0yLjI3YzAsLTAuNTkgMC4xMSwtMS4xMSAwLjM1LC0xLjU2IDAuMjMsLTAuNDQgMC41NiwtMC43OSAwLjk5LC0xLjAzIDAuNDIsLTAuMjUgMC45MiwtMC4zNyAxLjQ4LC0wLjM3IDAuNTUsMCAxLjA1LDAuMTIgMS40OCwwLjM3IDAuNDIsMC4yNCAwLjc1LDAuNTkgMC45OSwxLjAzIDAuMjMsMC40NSAwLjM1LDAuOTcgMC4zNSwxLjU2bDAgMi4yN2MwLDAuNTkgLTAuMTIsMS4xMSAtMC4zNSwxLjU1IC0wLjI0LDAuNDUgLTAuNTcsMC44IC0wLjk5LDEuMDQgLTAuNDMsMC4yNSAtMC45MywwLjM3IC0xLjQ4LDAuMzd6bTAgLTEuMTFjMC4zMywwIDAuNjIsLTAuMDggMC44NywtMC4yMiAwLjI1LC0wLjE1IDAuNDUsLTAuMzYgMC41OCwtMC42NCAwLjE0LC0wLjI3IDAuMjEsLTAuNTkgMC4yMSwtMC45NWwwIC0yLjM1YzAsLTAuMzYgLTAuMDcsLTAuNjggLTAuMjEsLTAuOTUgLTAuMTMsLTAuMjggLTAuMzMsLTAuNDkgLTAuNTgsLTAuNjQgLTAuMjUsLTAuMTUgLTAuNTQsLTAuMjIgLTAuODcsLTAuMjIgLTAuMzMsMCAtMC42MywwLjA3IC0wLjg4LDAuMjIgLTAuMjUsMC4xNSAtMC40NSwwLjM2IC0wLjU4LDAuNjQgLTAuMTQsMC4yNyAtMC4yMSwwLjU5IC0wLjIxLDAuOTVsMCAyLjM1YzAsMC4zNiAwLjA3LDAuNjggMC4yMSwwLjk1IDAuMTMsMC4yOCAwLjMzLDAuNDkgMC41OCwwLjY0IDAuMjUsMC4xNCAwLjU1LDAuMjIgMC44OCwwLjIyeiIvPg0KICA8cGF0aCBpZD0iMiIgY2xhc3M9ImZpbDIiIGQ9Ik00Ny4zNyAxMS44MmwtMC4xNiAtMC4yOCAtMi42MSAtNC4yMiAxLjI2IDAgMS45NCAzLjI3IDAuMTggMC4zIDIuNzUgNC40NiAtMS4yNyAwIC0yLjA5IC0zLjUzem0tMC4wNCAtMS4wNmwyLjAxIC0zLjQ0IDEuMjYgMCAtMi42NSA0LjM1IC0yLjE1IDMuNjggLTEuMjcgMCAyLjggLTQuNTl6Ii8+DQogIDxwYXRoIGlkPSIzIiBjbGFzcz0iZmlsMiIgZD0iTTUyLjQxIDExLjE2bDIuNTYgMGMwLjI1LDAgMC40NiwtMC4wNSAwLjY0LC0wLjE3IDAuMTksLTAuMTEgMC4zMywtMC4yNyAwLjQzLC0wLjQ4IDAuMSwtMC4yMSAwLjE1LC0wLjQ1IDAuMTUsLTAuNzNsMCAwYzAsLTAuMjcgLTAuMDUsLTAuNTIgLTAuMTUsLTAuNzIgLTAuMSwtMC4yMSAtMC4yNCwtMC4zOCAtMC40MywtMC40OSAtMC4xOCwtMC4xMiAtMC4zOSwtMC4xOCAtMC42NCwtMC4xOGwtMi41NiAwIDAgLTEuMDcgMi41MyAwYzAuNDcsMCAwLjg5LDAuMSAxLjI2LDAuMzEgMC4zNiwwLjIgMC42NSwwLjQ5IDAuODQsMC44NiAwLjIxLDAuMzggMC4zMSwwLjggMC4zMSwxLjI5bDAgMGMwLDAuNDkgLTAuMSwwLjkyIC0wLjMxLDEuMjkgLTAuMTksMC4zNyAtMC40OCwwLjY2IC0wLjg0LDAuODYgLTAuMzcsMC4yIC0wLjc5LDAuMyAtMS4yNiwwLjNsLTIuNTMgMCAwIC0xLjA3em0tMC41OCAtMy44NGwxLjEyIDAgMCA4LjAzIC0xLjEyIDAgMCAtOC4wM3oiLz4NCiAgPHBhdGggaWQ9IjQiIGNsYXNzPSJmaWwyIiBkPSJNNjAuNTUgNy4zMmwwLjk2IDAgMi45NiA4LjAzIC0xLjIxIDAgLTIuMjMgLTYuNDggLTIuMjIgNi40OCAtMS4yMSAwIDIuOTUgLTguMDN6bS0xLjU5IDUuMmw0LjIyIDAgMCAxLjA3IC00LjIyIDAgMCAtMS4wN3oiLz4NCiAgPHBhdGggaWQ9IjUiIGNsYXNzPSJmaWwyIiBkPSJNNzAuMjQgNy4zMmwxLjEzIDAgMCA4LjAzIC0xLjEzIDAgMCAtOC4wM3ptLTQuNTYgMGwxLjEzIDAgMCA4LjAzIC0xLjEzIDAgMCAtOC4wM3ptMC43MSAzLjU0bDQuNDUgMCAwIDEuMDcgLTQuNDUgMCAwIC0xLjA3eiIvPg0KICA8cG9seWdvbiBpZD0iNiIgY2xhc3M9ImZpbDIiIHBvaW50cz0iNzguMTcsMTUuMzQgNzguMTcsOS4wMyA3OC4zLDkuMTggNzQuMjgsMTUuMzQgNzMuMzUsMTUuMzQgNzMuMzUsNy4zMiA3NC40Nyw3LjMyIDc0LjQ3LDEzLjczIDc0LjM0LDEzLjU4IDc4LjM3LDcuMzIgNzkuMjgsNy4zMiA3OS4yOCwxNS4zNCAiLz4NCiAgPHBhdGggaWQ9IjciIGNsYXNzPSJmaWwyIiBkPSJNODIuNDMgNy45OGwxLjEzIDAgMCA3LjM3IC0xLjEzIDAgMCAtNy4zN3ptLTIuMjcgLTAuNjZsNS42NyAwIDAgMS4wNyAtNS42NyAwIDAgLTEuMDd6Ii8+DQogIDxwYXRoIGlkPSI4IiBjbGFzcz0iZmlsMiIgZD0iTTg3LjI5IDE0LjI4bDIuNTQgMGMwLjI1LDAgMC40NywtMC4wNiAwLjY2LC0wLjE2IDAuMTgsLTAuMSAwLjMyLC0wLjI1IDAuNDEsLTAuNDUgMC4xLC0wLjIgMC4xNSwtMC40NCAwLjE1LC0wLjcybDAgMGMwLC0wLjI4IC0wLjA1LC0wLjUyIC0wLjE1LC0wLjcyIC0wLjA5LC0wLjIgLTAuMjMsLTAuMzUgLTAuNDEsLTAuNDYgLTAuMTksLTAuMSAtMC40MSwtMC4xNSAtMC42NiwtMC4xNWwtMi41NCAwIDAgLTEuMDcgMi41IDBjMC41MSwwIDAuOTQsMC4wOSAxLjMsMC4yOCAwLjM2LDAuMTggMC42NCwwLjQ2IDAuODMsMC44MiAwLjE4LDAuMzYgMC4yOCwwLjc5IDAuMjgsMS4zbDAgMGMwLDAuNTEgLTAuMSwwLjk0IC0wLjI4LDEuMyAtMC4xOSwwLjM1IC0wLjQ3LDAuNjMgLTAuODMsMC44MiAtMC4zNiwwLjE4IC0wLjc5LDAuMjggLTEuMywwLjI4bC0yLjUgMCAwIC0xLjA3em0tMC41OCAtNi45NmwxLjEyIDAgMCA4LjAzIC0xLjEyIDAgMCAtOC4wM3oiLz4NCiA8L2c+DQo8L3N2Zz4NCg==') no-repeat;
/* select mine race */
--selectMine: url('https://i.imgur.com/1SwCLQd.png') no-repeat;
/* select created race */
--selectCreated: url('https://i.imgur.com/sMJOtwd.png') no-repeat;
/* select fast start race */
--fastStart: url('https://i.imgur.com/8rF11ao.png') no-repeat;
}
/* Custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* exclusive cars set*/
div[class*=car-base].car1000-1 {
background: var(--car1000-1);
}
div[class*=car-base].car1001-1 {
background: var(--car1001-1);
}
div[class*=car-base].car1002-1 {
background: var(--car1002-1);
}
div[class*=car-base].car1003-1 {
background: var(--car1003-1);
}
div[class*=car-base].car1006-1 {
background: var(--car1006-1);
}
div[class*=car-base].car1008-1 {
background: var(--car1008-1);
}
div[class*=car-base].car1009-1 {
background: var(--car1009-1);
}
div[class*=car-base].car1010-1 {
background: var(--car1010-1);
}
div[class*=car-base].car1012-3 {
background: var(--car1012-3);
}
div[class*=car-base].car1013-3,
div[class*=car-base].car1013,
div[class*=car-base].car1014 {
background: var(--car1013-3);
}
div[class*=car-base].car1015-1 {
background: var(--car1015-1);
}
div[class*=car-base].car1016-1 {
background: var(--car1016-1);
}
div[class*=car-base].car1017 {
background: var(--car1017);
}
div[class*=car-base].car1018 {
background: var(--car1018);
}
div[class*=car-base].car1019,
div[class*=car-base].car45 {
background: var(--car1019);
}
div[class*=car-base].car1020 {
background: var(--car1020);
}
div[class*=car-base].car1021-1,
div[class*=car-base].car1021 {
background: var(--car1021-1);
}
div[class*=car-base].car1022,
div[class*=car-base].car1004 {
background: var(--car1022);
}
div[class*=car-base].car1023-1 {
background: var(--car1023-1);
}
div[class*=car-base].car1024 {
background: var(--car1024);
}
/* fix */
.profile-car .shop .tuning-category .tuning-item .car.light .car-base_ {
opacity: 1 !important;
}
.profile-car .shop.tuning .car .imgcont {
background: #777777 !important;
}
/* change cars bg */
div[class*=car-base].car1,
.car-tuning.car1,
.car1[style*="background-color: #777"] {
background: var(--car1);
}
div[class*=car-base].car2,
.car-tuning.car2 {
background: var(--car2);
}
div[class*=car-base].car3,
.car-tuning.car3 {
background: var(--car3);
}
div[class*=car-base].car4,
.car-tuning.car4 {
background: var(--car4);
}
div[class*=car-base].car5,
.car-tuning.car5 {
background: var(--car5);
}
div[class*=car-base].car6,
.car-tuning.car6 {
background: var(--car6);
}
div[class*=car-base].car7,
.car-tuning.car7 {
background: var(--car7);
}
div[class*=car-base].car8,
.car-tuning.car8 {
background: var(--car8);
}
div[class*=car-base].car9,
.car-tuning.car9 {
background: var(--car9);
}
div[class*=car-base].car10,
.car-tuning.car10 {
background: var(--car10);
}
div[class*=car-base].car11,
.car-tuning.car11 {
background: var(--car11);
}
div[class*=car-base].car12,
.car-tuning.car12 {
background: var(--car12);
}
div[class*=car-base].car13,
.car-tuning.car13 {
background: var(--car13);
}
div[class*=car-base].car14,
.car-tuning.car14 {
background: var(--car14);
}
div[class*=car-base].car15,
.car-tuning.car15 {
background: var(--car15);
}
div[class*=car-base].car16,
.car-tuning.car16 {
background: var(--car16);
}
div[class*=car-base].car17,
.car-tuning.car17 {
background: var(--car17);
}
div[class*=car-base].car18,
.car-tuning.car18 {
background: var(--car18);
}
div[class*=car-base].car19,
.car-tuning.car19 {
background: var(--car19);
}
div[class*=car-base].car20,
.car-tuning.car20 {
background: var(--car20);
}
div[class*=car-base].car22,
.car-tuning.car22 {
background: var(--car22);
}
div[class*=car-base].car23,
.car-tuning.car23 {
background: var(--car23);
}
div[class*=car-base].car24,
.car-tuning.car24 {
background: var(--car24);
}
div[class*=car-base].car25,
.car-tuning.car25 {
background: var(--car25);
}
div[class*=car-base].car26,
.car-tuning.car26 {
background: var(--car26);
}
div[class*=car-base].car27,
.car-tuning.car27 {
background: var(--car27);
}
div[class*=car-base].car28,
.car-tuning.car28 {
background: var(--car28);
}
div[class*=car-base].car29,
.car-tuning.car29 {
background: var(--car29);
}
div[class*=car-base].car30,
.car-tuning.car30 {
background: var(--car30);
}
div[class*=car-base].car31,
.car-tuning.car31 {
background: var(--car31);
}
div[class*=car-base].car32,
.car-tuning.car32 {
background: var(--car32)
}
div[class*=car-base].car33,
.car-tuning.car33 {
background: var(--car33);
}
div[class*=car-base].car34,
.car-tuning.car34 {
background: var(--car34);
}
div[class*=car-base].car35,
.car-tuning.car35 {
background: var(--car35);
}
div[class*=car-base].car36,
.car-tuning.car36 {
background: var(--car36);
}
div[class*=car-base].car37,
.car-tuning.car37 {
background: var(--car37);
}
div[class*=car-base].car38,
.car-tuning.car38 {
background: var(--car38);
}
div[class*=car-base].car39,
.car-tuning.car39 {
background: var(--car39);
}
div[class*=car-base].car40,
.car-tuning.car40 {
background: var(--car40);
}
div[class*=car-base].car41,
.car-tuning.car41 {
background: var(--car41);
}
div[class*=car-base].car42,
.car-tuning.car42 {
background: var(--car42);
}
div[class*=car-base].car43,
.car-tuning.car43 {
background: var(--car43);
}
div[class*=car-base].car44,
.car-tuning.car44 {
background: var(--car44);
}
div[class*=car-base].car1011 {
background: var(--batman);
}
/* car position priorities fix */
.car .car-base_0 {
background-position: -100px 0 !important;
}
.car .car-tuning1_ {
background: transparent !important;
}
.car .car-tuning1_0 {
background-position: 0px -50px !important;
}
.car .car-tuning1_1 {
background-position: -100px -50px !important;
}
.car .car-tuning1_2 {
background-position: -200px -50px !important;
}
.car .car-tuning1_3 {
background-position: -300px -50px !important;
}
.car .car-tuning1_4 {
background-position: -400px -50px !important;
}
.car .car-tuning1_5 {
background-position: -500px -50px !important;
}
.car .car-tuning1_6 {
background-position: -600px -50px !important;
}
.car .car-tuning1_7 {
background-position: -700px -50px !important;
}
.car .car-tuning1_8 {
background-position: -800px -50px !important;
}
.car .car-tuning1_9 {
background-position: -900px -50px !important;
}
.car .car-tuning1_10 {
background-position: -1000px -50px !important;
}
.car .car-tuning1_11 {
background-position: -1100px -50px !important;
}
.car .car-tuning1_12 {
background-position: -1200px -50px !important;
}
.car .car-tuning1_13 {
background-position: -1300px -50px !important;
}
.car .car-base_1 {
background-position: -200px 0 !important;
}
.car .car-tuning2_ {
background: transparent !important;
}
.car .car-tuning2_0 {
background-position: 0px -100px !important;
}
.car .car-tuning2_1 {
background-position: -100px -100px !important;
}
.car .car-tuning2_2 {
background-position: -200px -100px !important;
}
.car .car-tuning2_3 {
background-position: -300px -100px !important;
}
.car .car-tuning2_4 {
background-position: -400px -100px !important;
}
.car .car-tuning2_5 {
background-position: -500px -100px !important;
}
.car .car-tuning2_6 {
background-position: -600px -100px !important;
}
.car .car-tuning2_7 {
background-position: -700px -100px !important;
}
.car .car-tuning2_8 {
background-position: -800px -100px !important;
}
.car .car-tuning2_9 {
background-position: -900px -100px !important;
}
.car .car-tuning2_10 {
background-position: -1000px -100px !important;
}
.car .car-tuning2_11 {
background-position: -1100px -100px !important;
}
.car .car-tuning2_12 {
background-position: -1200px -100px !important;
}
.car .car-tuning2_13 {
background-position: -1300px -100px !important;
}
.car .car-base_2 {
background-position: -300px 0 !important;
}
.car .car-tuning3_ {
background: transparent !important;
}
.car .car-tuning3_0 {
background-position: 0px -150px !important;
}
.car .car-tuning3_1 {
background-position: -100px -150px !important;
}
.car .car-tuning3_2 {
background-position: -200px -150px !important;
}
.car .car-tuning3_3 {
background-position: -300px -150px !important;
}
.car .car-tuning3_4 {
background-position: -400px -150px !important;
}
.car .car-tuning3_5 {
background-position: -500px -150px !important;
}
.car .car-tuning3_6 {
background-position: -600px -150px !important;
}
.car .car-tuning3_7 {
background-position: -700px -150px !important;
}
.car .car-tuning3_8 {
background-position: -800px -150px !important;
}
.car .car-tuning3_9 {
background-position: -900px -150px !important;
}
.car .car-tuning3_10 {
background-position: -1000px -150px !important;
}
.car .car-tuning3_11 {
background-position: -1100px -150px !important;
}
.car .car-tuning3_12 {
background-position: -1200px -150px !important;
}
.car .car-tuning3_13 {
background-position: -1300px -150px !important;
}
.car .car-base_3 {
background-position: -400px 0 !important;
}
.car .car-tuning4_ {
background: transparent !important;
}
.car .car-tuning4_0 {
background-position: 0px -200px !important;
}
.car .car-tuning4_1 {
background-position: -100px -200px !important;
}
.car .car-tuning4_2 {
background-position: -200px -200px !important;
}
.car .car-tuning4_3 {
background-position: -300px -200px !important;
}
.car .car-tuning4_4 {
background-position: -400px -200px !important;
}
.car .car-tuning4_5 {
background-position: -500px -200px !important;
}
.car .car-tuning4_6 {
background-position: -600px -200px !important;
}
.car .car-tuning4_7 {
background-position: -700px -200px !important;
}
.car .car-tuning4_8 {
background-position: -800px -200px !important;
}
.car .car-tuning4_9 {
background-position: -900px -200px !important;
}
.car .car-tuning4_10 {
background-position: -1000px -200px !important;
}
.car .car-tuning4_11 {
background-position: -1100px -200px !important;
}
.car .car-tuning4_12 {
background-position: -1200px -200px !important;
}
.car .car-tuning4_13 {
background-position: -1300px -200px !important;
}
.car .car-base_4 {
background-position: -500px 0 !important;
}
.car .car-tuning5_ {
background: transparent !important;
}
.car .car-tuning5_0 {
background-position: 0px -250px !important;
}
.car .car-tuning5_1 {
background-position: -100px -250px !important;
}
.car .car-tuning5_2 {
background-position: -200px -250px !important;
}
.car .car-tuning5_3 {
background-position: -300px -250px !important;
}
.car .car-tuning5_4 {
background-position: -400px -250px !important;
}
.car .car-tuning5_5 {
background-position: -500px -250px !important;
}
.car .car-tuning5_6 {
background-position: -600px -250px !important;
}
.car .car-tuning5_7 {
background-position: -700px -250px !important;
}
.car .car-tuning5_8 {
background-position: -800px -250px !important;
}
.car .car-tuning5_9 {
background-position: -900px -250px !important;
}
.car .car-tuning5_10 {
background-position: -1000px -250px !important;
}
.car .car-tuning5_11 {
background-position: -1100px -250px !important;
}
.car .car-tuning5_12 {
background-position: -1200px -250px !important;
}
.car .car-tuning5_13 {
background-position: -1300px -250px !important;
}
.car .car-base_5 {
background-position: -600px 0 !important;
}
.car .car-tuning6_ {
background: transparent !important;
}
.car .car-tuning6_0 {
background-position: 0px -300px !important;
}
.car .car-tuning6_1 {
background-position: -100px -300px !important;
}
.car .car-tuning6_2 {
background-position: -200px -300px !important;
}
.car .car-tuning6_3 {
background-position: -300px -300px !important;
}
.car .car-tuning6_4 {
background-position: -400px -300px !important;
}
.car .car-tuning6_5 {
background-position: -500px -300px !important;
}
.car .car-tuning6_6 {
background-position: -600px -300px !important;
}
.car .car-tuning6_7 {
background-position: -700px -300px !important;
}
.car .car-tuning6_8 {
background-position: -800px -300px !important;
}
.car .car-tuning6_9 {
background-position: -900px -300px !important;
}
.car .car-tuning6_10 {
background-position: -1000px -300px !important;
}
.car .car-tuning6_11 {
background-position: -1100px -300px !important;
}
.car .car-tuning6_12 {
background-position: -1200px -300px !important;
}
.car .car-tuning6_13 {
background-position: -1300px -300px !important;
}
.car .car-base_6 {
background-position: -700px 0 !important;
}
.car .car-tuning7_ {
background: transparent !important;
}
.car .car-tuning7_0 {
background-position: 0px -350px !important;
}
.car .car-tuning7_1 {
background-position: -100px -350px !important;
}
.car .car-tuning7_2 {
background-position: -200px -350px !important;
}
.car .car-tuning7_3 {
background-position: -300px -350px !important;
}
.car .car-tuning7_4 {
background-position: -400px -350px !important;
}
.car .car-tuning7_5 {
background-position: -500px -350px !important;
}
.car .car-tuning7_6 {
background-position: -600px -350px !important;
}
.car .car-tuning7_7 {
background-position: -700px -350px !important;
}
.car .car-tuning7_8 {
background-position: -800px -350px !important;
}
.car .car-tuning7_9 {
background-position: -900px -350px !important;
}
.car .car-tuning7_10 {
background-position: -1000px -350px !important;
}
.car .car-tuning7_11 {
background-position: -1100px -350px !important;
}
.car .car-tuning7_12 {
background-position: -1200px -350px !important;
}
.car .car-tuning7_13 {
background-position: -1300px -350px !important;
}
.car .car-base_7 {
background-position: -800px 0 !important;
}
.car .car-tuning8_ {
background: transparent !important;
}
.car .car-tuning8_0 {
background-position: 0px -400px !important;
}
.car .car-tuning8_1 {
background-position: -100px -400px !important;
}
.car .car-tuning8_2 {
background-position: -200px -400px !important;
}
.car .car-tuning8_3 {
background-position: -300px -400px !important;
}
.car .car-tuning8_4 {
background-position: -400px -400px !important;
}
.car .car-tuning8_5 {
background-position: -500px -400px !important;
}
.car .car-tuning8_6 {
background-position: -600px -400px !important;
}
.car .car-tuning8_7 {
background-position: -700px -400px !important;
}
.car .car-tuning8_8 {
background-position: -800px -400px !important;
}
.car .car-tuning8_9 {
background-position: -900px -400px !important;
}
.car .car-tuning8_10 {
background-position: -1000px -400px !important;
}
.car .car-tuning8_11 {
background-position: -1100px -400px !important;
}
.car .car-tuning8_12 {
background-position: -1200px -400px !important;
}
.car .car-tuning8_13 {
background-position: -1300px -400px !important;
}
.car .car-base_8 {
background-position: -900px 0 !important;
}
.car .car-tuning9_ {
background: transparent !important;
}
.car .car-tuning9_0 {
background-position: 0px -450px !important;
}
.car .car-tuning9_1 {
background-position: -100px -450px !important;
}
.car .car-tuning9_2 {
background-position: -200px -450px !important;
}
.car .car-tuning9_3 {
background-position: -300px -450px !important;
}
.car .car-tuning9_4 {
background-position: -400px -450px !important;
}
.car .car-tuning9_5 {
background-position: -500px -450px !important;
}
.car .car-tuning9_6 {
background-position: -600px -450px !important;
}
.car .car-tuning9_7 {
background-position: -700px -450px !important;
}
.car .car-tuning9_8 {
background-position: -800px -450px !important;
}
.car .car-tuning9_9 {
background-position: -900px -450px !important;
}
.car .car-tuning9_10 {
background-position: -1000px -450px !important;
}
.car .car-tuning9_11 {
background-position: -1100px -450px !important;
}
.car .car-tuning9_12 {
background-position: -1200px -450px !important;
}
.car .car-tuning9_13 {
background-position: -1300px -450px !important;
}
.car .car-base_9 {
background-position: -1000px 0 !important;
}
.car .car-tuning10_ {
background: transparent !important;
}
.car .car-tuning10_0 {
background-position: 0px -500px !important;
}
.car .car-tuning10_1 {
background-position: -100px -500px !important;
}
.car .car-tuning10_2 {
background-position: -200px -500px !important;
}
.car .car-tuning10_3 {
background-position: -300px -500px !important;
}
.car .car-tuning10_4 {
background-position: -400px -500px !important;
}
.car .car-tuning10_5 {
background-position: -500px -500px !important;
}
.car .car-tuning10_6 {
background-position: -600px -500px !important;
}
.car .car-tuning10_7 {
background-position: -700px -500px !important;
}
.car .car-tuning10_8 {
background-position: -800px -500px !important;
}
.car .car-tuning10_9 {
background-position: -900px -500px !important;
}
.car .car-tuning10_10 {
background-position: -1000px -500px !important;
}
.car .car-tuning10_11 {
background-position: -1100px -500px !important;
}
.car .car-tuning10_12 {
background-position: -1200px -500px !important;
}
.car .car-tuning10_13 {
background-position: -1300px -500px !important;
}
.car .car-base_10 {
background-position: -1100px 0 !important;
}
.car .car-tuning11_ {
background: transparent !important;
}
.car .car-tuning11_0 {
background-position: 0px -550px !important;
}
.car .car-tuning11_1 {
background-position: -100px -550px !important;
}
.car .car-tuning11_2 {
background-position: -200px -550px !important;
}
.car .car-tuning11_3 {
background-position: -300px -550px !important;
}
.car .car-tuning11_4 {
background-position: -400px -550px !important;
}
.car .car-tuning11_5 {
background-position: -500px -550px !important;
}
.car .car-tuning11_6 {
background-position: -600px -550px !important;
}
.car .car-tuning11_7 {
background-position: -700px -550px !important;
}
.car .car-tuning11_8 {
background-position: -800px -550px !important;
}
.car .car-tuning11_9 {
background-position: -900px -550px !important;
}
.car .car-tuning11_10 {
background-position: -1000px -550px !important;
}
.car .car-tuning11_11 {
background-position: -1100px -550px !important;
}
.car .car-tuning11_12 {
background-position: -1200px -550px !important;
}
.car .car-tuning11_13 {
background-position: -1300px -550px !important;
}
.car .car-base_11 {
background-position: -1200px 0 !important;
}
.car .car-tuning12_ {
background: transparent !important;
}
.car .car-tuning12_0 {
background-position: 0px -600px !important;
}
.car .car-tuning12_1 {
background-position: -100px -600px !important;
}
.car .car-tuning12_2 {
background-position: -200px -600px !important;
}
.car .car-tuning12_3 {
background-position: -300px -600px !important;
}
.car .car-tuning12_4 {
background-position: -400px -600px !important;
}
.car .car-tuning12_5 {
background-position: -500px -600px !important;
}
.car .car-tuning12_6 {
background-position: -600px -600px !important;
}
.car .car-tuning12_7 {
background-position: -700px -600px !important;
}
.car .car-tuning12_8 {
background-position: -800px -600px !important;
}
.car .car-tuning12_9 {
background-position: -900px -600px !important;
}
.car .car-tuning12_10 {
background-position: -1000px -600px !important;
}
.car .car-tuning12_11 {
background-position: -1100px -600px !important;
}
.car .car-tuning12_12 {
background-position: -1200px -600px !important;
}
.car .car-tuning12_13 {
background-position: -1300px -600px !important;
}
.car .car-base_12 {
background-position: -1300px 0 !important;
}
.car .car-tuning13_ {
background: transparent !important;
}
.car .car-tuning13_0 {
background-position: 0px -650px !important;
}
.car .car-tuning13_1 {
background-position: -100px -650px !important;
}
.car .car-tuning13_2 {
background-position: -200px -650px !important;
}
.car .car-tuning13_3 {
background-position: -300px -650px !important;
}
.car .car-tuning13_4 {
background-position: -400px -650px !important;
}
.car .car-tuning13_5 {
background-position: -500px -650px !important;
}
.car .car-tuning13_6 {
background-position: -600px -650px !important;
}
.car .car-tuning13_7 {
background-position: -700px -650px !important;
}
.car .car-tuning13_8 {
background-position: -800px -650px !important;
}
.car .car-tuning13_9 {
background-position: -900px -650px !important;
}
.car .car-tuning13_10 {
background-position: -1000px -650px !important;
}
.car .car-tuning13_11 {
background-position: -1100px -650px !important;
}
.car .car-tuning13_12 {
background-position: -1200px -650px !important;
}
.car .car-tuning13_13 {
background-position: -1300px -650px !important;
}
.car .car-base_13 {
background-position: -1400px 0 !important;
}
.car .car-tuning14_ {
background: transparent !important;
}
.car .car-tuning14_0 {
background-position: 0px -700px !important;
}
.car .car-tuning14_1 {
background-position: -100px -700px !important;
}
.car .car-tuning14_2 {
background-position: -200px -700px !important;
}
.car .car-tuning14_3 {
background-position: -300px -700px !important;
}
.car .car-tuning14_4 {
background-position: -400px -700px !important;
}
.car .car-tuning14_5 {
background-position: -500px -700px !important;
}
.car .car-tuning14_6 {
background-position: -600px -700px !important;
}
.car .car-tuning14_7 {
background-position: -700px -700px !important;
}
.car .car-tuning14_8 {
background-position: -800px -700px !important;
}
.car .car-tuning14_9 {
background-position: -900px -700px !important;
}
.car .car-tuning14_10 {
background-position: -1000px -700px !important;
}
.car .car-tuning14_11 {
background-position: -1100px -700px !important;
}
.car .car-tuning14_12 {
background-position: -1200px -700px !important;
}
.car .car-tuning14_13 {
background-position: -1300px -700px !important;
}
/* stylize input radio buttons */
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--deepgray);
margin: 0;
width: 1.15em;
height: 1.15em;
border: 0.15em solid var(--middlegray);
border-radius: 50% !important;
transform: translateY(-0.075em) !important;
display: inline-grid;
place-content: center;
}
input[type="radio"]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
background-color: var(--orange);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
/* reformal window */
#reformal_widget {
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
filter: invert(.95) brightness(1.2) grayscale(.6) contrast(0.8) hue-rotate(-30deg) !important;
}
/* wishes button */
body #reformal_tab,
#reformal_tab {
top: 25% !important;
bottom: 0 !important;
box-sizing: content-box !important;
margin-top: 0 !important;
padding: 0 !important;
background-color: transparent !important;
background: var(--deepgray) var(--reformalTabDefault) !important;
border: none !important;
border-left: 2px solid var(--blue) !important;
height: 46px !important;
width: 46px !important;
transform: translateY(-50%) !important;
transition: all .2s !important;
}
body #reformal_tab:hover,
#reformal_tab:hover {
top: 25% !important;
box-sizing: content-box !important;
border-radius: 50% !important;
transform: rotate(180deg) translateY(50%) !important;
background-color: transparent !important;
border: 2px solid var(--orange) !important;
background: var(--black) var(--reformalTabHover) !important;
transition: all .2s !important;
}
#reformal_tab img {
display: none !important;
}
/* GLOBAL STYLES START */
/* set html tag dark after page reload */
html {
background: var(--darkgray) !important;
}
/* set text color and bg everything where style missed */
body {
background: var(--darkgray) !important;
color: var(--white) !important;
}
a {
color: var(--blue) !important;
}
a:hover {
color: var(--lightblue) !important;
}
a:visited {
color: var(--blue) !important;
}
/* hr */
hr,
th,
tr,
td {
border-color: var(--middlegray) !important;
}
/* pre */
pre {
background-color: var(--deepgray) !important;
border-color: var(--blue) !important;
}
/* msg */
.msg {
background: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
text-align: center !important;
}
/* remove all shit shadow, outline, border radius */
* {
box-shadow: none !important;
border-radius: 0 !important;
text-shadow: none !important;
}
*:focus {
outline: none !important;
}
/* stylize all buttons */
body .btn {
font-weight: lighter !important;
background: var(--middlegray) !important;
color: var(--deepgray) !important;
border: none !important;
}
body .btn:hover {
font-weight: lighter !important;
background: var(--blue) !important;
color: var(--deepgray) !important;
border: none !important;
}
/* close buttons on modal popup window */
body .close {
background: none !important;
color: var(--middlegray) !important;
opacity: 1 !important;
}
body .close:hover {
background: none !important;
color: var(--blue) !important;
opacity: 1 !important;
}
/* global input type text border color && text color */
input[type='text'] {
color: var(--white) !important;
border: 1px solid var(--middlegray);
}
input.blur {
color: var(--deepgray) !important;
}
.search input[name=text] {
color: var(--white) !important;
}
/* global input form-control class bg color && border && background */
.form-control {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray);
color: var(--white);
}
.form-control:focus {
background: var(--darkgray);
border: 1px solid var(--blue);
color: var(--white);
}
/* action button with dropdown menu */
div.actions button {
background-color: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
div.actions button:hover {
background-color: var(--darkgray) !important;
border: 1px solid var(--blue) !important;
}
/* custom scrollbar */
::-webkit-scrollbar-track {
border: 1px solid var(--deepgray) !important;
background-color: var(--darkgray) !important;
}
::-webkit-scrollbar {
width: 10px !important;
background: var(--deepgray) !important;
}
::-webkit-scrollbar-thumb {
background-color: var(--deepgray) !important;
}
/* global dropdown menu */
div.btn-group .dropdown-menu {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* headers */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--orange) !important;
}
/* textarea global bg color && text coolor */
textarea {
border: 1px solid var(--middlegray) !important;
background-color: var(--darkgray) !important;
color: var(--white) !important;
}
.profile-root textarea,
.modal2 textarea {
border: none !important;
}
/* profile empty journal */
.profile-root .empty {
color: var(--red) !important;
}
blockquote {
color: var(--blue) !important;
background: var(--deepgray) !important;
border: none !important;
}
/* everything warning here something is going wrong block bg color && text color */
.resolve-failed {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* progress bg on all elements with this */
.progress {
background: var(--middlegray) !important;
}
/* change progress bar color to blue */
.progress-bar {
filter: hue-rotate(80deg) !important;
}
.progress-label {
color: var(--darkgray) !important;
}
.next-level-label {
color: var(--white) !important;
}
/* a littlle bit lighter rang colors */
.rang1,
a.rang1,
a.rang1:visited {
color: #cccccc !important;
border-color: #cccccc !important;
}
.rang2,
a.rang2,
a.rang2:visited {
color: #76e4e0 !important;
border-color: #76e4e0 !important;
}
.rang3,
a.rang3,
a.rang3:visited {
color: #2cd42c !important;
border-color: #2cd42c !important;
}
.rang4,
a.rang4,
a.rang4:visited {
color: #ccbc00 !important;
border-color: #ccbc00 !important;
}
.rang5,
a.rang5,
a.rang5:visited {
color: #ff8b22 !important;
border-color: #ff8b22 !important;
}
.rang6,
a.rang6,
a.rang6:visited {
color: #ff1b6b !important;
border-color: #ff1b6b !important;
}
.rang7,
a.rang7,
a.rang7:visited {
color: #BA81E7 !important;
border-color: #BA81E7 !important;
}
.rang8,
a.rang8,
a.rang8:visited {
color: #9EA0FF !important;
border-color: #9EA0FF !important;
}
.rang9,
a.rang9,
a.rang9:visited {
color: rgb(115, 200, 239) !important;
border-color: #7390EF !important;
}
/* updated old mini achievements icons invert */
.award {
position: absolute !important;
top: -4px !important;
right: -6px !important;
}
.award,
#popup_content .popup_profile a {
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: 0 !important;
background-size: 18px 18px !important;
width: 18px !important;
height: 18px !important;
}
.award1,
body .popup_profile a[style*="awards"] {
background-image: var(--medal-award) !important;
}
.award2,
body .popup_profile a[style*="10px 0"] {
background-image: var(--star-award) !important;
}
.award3,
body .popup_profile a[style*="20px 0"] {
background-image: var(--trophy-award) !important;
}
.award4,
body .popup_profile a[style*="30px 0"] {
background-image: var(--crown-award) !important;
}
.award5,
body .popup_profile a[style*="40px 0"] {
background-image: var(--gold-helmet-award) !important;
}
.award6,
body .popup_profile a[style*="50px 0"] {
background-image: var(--platinum-helmet-award) !important;
}
.award7,
body .popup_profile a[style*="60px 0"] {
background-image: var(--black-helmet-award) !important;
}
.award8,
body .popup_profile a[style*="70px 0"] {
background-image: var(--wheel-award) !important;
}
.award1b,
body .popup_profile a[style*="80px 0"] {
background-image: var(--bronze-book-award) !important;
}
.award2b,
body .popup_profile a[style*="90px 0"] {
background-image: var(--silver-book-award) !important;
}
.award3b,
body .popup_profile a[style*="100px 0"] {
background-image: var(--gold-book-award) !important;
}
/* GLOBAL STYLES END */
/* invite race close button img */
img[src*="/img/yellow_cros"] {
box-sizing: border-box;
padding-left: 17px;
height: 17px;
width: 17px;
background: var(--close);
position: relative;
top: 0 !important;
}
/* mini popups */
body .tipsy {
position: absolute !important;
opacity: .9 !important;
font: 12px Tahoma !important;
}
body .tipsy-inner {
max-width: 400px !important;
text-align: center !important;
background-color: var(--blue);
color: var(--deepgray) !important;
margin-left: 5px !important;
margin-top: 2px !important;
}
body .tipsy-arrow {
display: none !important;
}
/* daily task borders */
.userpanel .user-block .daily-task {
border-left: 1px solid var(--middlegray) !important;
border-right: 1px solid var(--middlegray) !important;
}
.userpanel .user-block .daily-task,
.userpanel #change_theme,
.userpanel #change_theme img {
width: 50px !important;
height: 44px !important;
}
.userpanel #change_theme {
border-right: 1px solid var(--middlegray) !important;
}
/* daily not done img */
.userpanel .user-block .daily-task .icon[src*="active"] {
box-sizing: border-box;
padding-left: 32px;
height: 32px;
width: 32px;
background: var(--no) !important;
position: relative;
top: 6px;
left: -9px;
}
/* daily done img */
.userpanel .user-block .daily-task .icon[src*="completed"] {
box-sizing: border-box;
padding-left: 32px;
height: 32px;
width: 32px;
background: var(--yes) !important;
position: relative;
top: 6px;
left: -9px;
}
/* forum and comments vocs bbcode buttons attach */
body img[src*=rte-background] {
background: var(--background) !important;
}
body img[src*=rte-bold] {
background: var(--bold) !important;
}
body img[src*=rte-center] {
background: var(--center) !important;
}
body img[src*=rte-code] {
background: var(--code) !important;
}
body img[src*=rte-color] {
background: var(--color) !important;
}
body img[src*=rte-hide] {
background: var(--hide) !important;
}
body img[src*=rte-html] {
background: var(--html) !important;
}
body img[src*=rte-image] {
background: var(--image) !important;
}
body img[src*=rte-italic] {
background: var(--italic) !important;
}
body img[src*=rte-left] {
background: var(--left) !important;
}
body img[src*=rte-link] {
background: var(--link) !important;
}
body img[src*=rte-list_0] {
background: var(--list) !important;
}
body img[src*=rte-list_1] {
background: var(--listnum) !important;
}
body img[src*=rte-quote] {
background: var(--quote) !important;
}
body img[src*=rte-quotesel] {
background: var(--quotesel) !important;
}
body img[src*=rte-right] {
background: var(--right) !important;
}
body img[src*=rte-size] {
background: var(--size) !important;
}
body img[src*=rte-strike] {
background: var(--strike) !important;
}
body img[src*=rte-sub] {
background: var(--sub) !important;
}
body img[src*=rte-sup] {
background: var(--sup) !important;
}
body img[src*=rte-tab] {
background: var(--tab) !important;
}
body img[src*=rte-underlined] {
background: var(--underlined) !important;
}
body img[onclick*=rte-smileTab] {
background: var(--smile) !important;
}
body img[src*=rte-youtube] {
background: var(--youtube) !important;
}
/* forum and comments vocs bbcode buttons on hover */
body img[src*=rte-background],
body img[src*=rte-bold],
body img[src*=rte-center],
body img[src*=rte-code],
body img[src*=rte-color],
body img[src*=rte-hide],
body img[src*=rte-html],
body img[src*=rte-image],
body img[src*=rte-italic],
body img[src*=rte-left],
body img[src*=rte-link],
body img[src*=rte-list],
body img[src*=rte-listnum],
body img[src*=rte-quote],
body img[src*=rte-quotesel],
body img[src*=rte-right],
body img[src*=rte-size],
body img[src*=rte-strike],
body img[src*=rte-sub],
body img[src*=rte-sup],
body img[src*=rte-tab],
body img[src*=rte-underlined],
body img[onclick*=rte-smileTab],
body img[src*=rte-youtube] {
box-sizing: border-box !important;
padding-left: 24px !important;
width: 24px !important;
height: 24px !important;
image-rendering: crisp-edges !important;
transition: all 0.15s !important;
border: 1px solid transparent !important;
}
body img[src*=rte-background]:hover,
body img[src*=rte-bold]:hover,
body img[src*=rte-center]:hover,
body img[src*=rte-code]:hover,
body img[src*=rte-color]:hover,
body img[src*=rte-hide]:hover,
body img[src*=rte-html]:hover,
body img[src*=rte-image]:hover,
body img[src*=rte-italic]:hover,
body img[src*=rte-left]:hover,
body img[src*=rte-link]:hover,
body img[src*=rte-list]:hover,
body img[src*=rte-listnum]:hover,
body img[src*=rte-quote]:hover,
body img[src*=rte-quotesel]:hover,
body img[src*=rte-right]:hover,
body img[src*=rte-size]:hover,
body img[src*=rte-strike]:hover,
body img[src*=rte-sub]:hover,
body img[src*=rte-sup]:hover,
body img[src*=rte-tab]:hover,
body img[src*=rte-underlined]:hover,
body img[onclick*=rte-smileTab]:hover,
body img[src*=rte-youtube]:hover {
background-color: rgba(200, 200, 200, 0.2) !important;
border: 1px solid silver !important;
}
/* hide old userpanel score img bg */
.userpanel #userpanel-level-container {
background: none !important;
height: 45px !important;
width: 45px !important;
top: -5px !important;
}
/* set color userpanel score number and z-index up */
.userpanel #userpanel-level-value {
margin: 0 !important;
height: 45px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 45px !important;
color: #fff3b1 !important;
text-shadow: 0 0 1px !important;
z-index: 2 !important;
margin-left: -1px !important;
font-weight: normal !important;
font-size: 14px !important;
}
/* hide userpanel score number shadow */
.userpanel #userpanel-level-value-shadow {
display: none !important;
}
#userpanel-level-progress[style*="0.png"] {
display: block !important;
box-sizing: border-box !important;
width: 47px !important;
height: 44px !important;
background: var(--score0) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="1.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score1) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="2.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score2) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="3.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score3) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="4.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score4) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="5.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score5) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="6.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score6) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="7.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score7) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="8.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score8) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="9.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score9) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="10.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score10) !important;
padding-left: 46px !important;
position: relative !important;
}
#userpanel-level-progress[style*="11.png"] {
display: block !important;
box-sizing: border-box !important;
width: 45px !important;
height: 44px !important;
background: var(--score11) !important;
padding-left: 46px !important;
position: relative !important;
}
/* userpanel hide bottom border and set background color */
.userpanel {
font-family: 'Montserrat', sans-serif !important;
border: none;
background: var(--deepgray) !important;
color: var(-middlegray) !important;
}
.userpanel #gametype-select {
font-weight: 400 !important;
font-size: 11px !important;
}
.userpanel #gametype-mdash {
color: transparent !important;
}
.userpanel .value,
.userpanel a,
.userpanel #userpanel-scores-container,
.userpanel #userpanel-bonuses {
font-weight: 500 !important;
}
.userpanel .value,
.userpanel a {
font-size: 11px !important;
}
.userpanel .title,
.userpanel .rating,
.userpanel .scores-table {
font-size: 9px !important;
}
/* userpanel left side statistics block best score, stable score, mistakes, count << value color and links color */
.userpanel #stats-block .value,
.userpanel a {
color: var(--blue) !important;
}
/* userpanel left and right side statistics block titles txt color */
.userpanel #stats-block .title,
.userpanel #stats-block .rating,
.userpanel .scores-table {
color: var(--white) !important;
}
/* userpanel left side statistics block remove dotted underline from voc name selector */
.userpanel a.gametype-voc {
border: none !important;
text-decoration: none !important;
}
.gametype-voc {
color: var(--blue) !important;
}
/* userpanel score block remove right border to escape double border on top of other */
.userpanel #userpanel-level {
border-right: none !important;
}
/* userpanel avatar remove border radius and do some opacity */
.userpanel .user-block .name img {
opacity: 0.8 !important;
}
/* userpanel nickname color */
.userpanel .user-block .name span {
color: var(--blue) !important;
}
/* userpanel dropdown menu text-shadow none, bg color, divider border color */
.userpanel .user-block .user-dropdown .active .name {
background: var(--deepgray) !important;
border-right: 1px solid var(--middlegray) !important;
}
/* userpanel dropdown menu button color on hover */
.userpanel .user-block .user-dropdown .drop-btn:hover {
background: var(--darkgray) !important;
}
.userpanel .user-block .user-dropdown {
border: none !important;
z-index: 1 !important;
}
/* userpanel dropdown menu triangle sizing, color */
.userpanel .user-block .name .caret {
border-top: 4px solid var(--blue) !important;
}
/* userpanel dropdown menu bg color, remove border radius, border color and width */
.userpanel .user-block .user-dropdown .dropmenu {
background: var(--deepgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* userpanel dropdown menu switch to profile and logout buttons style */
.userpanel .user-block .user-dropdown .dropmenu .col1 a.btn,
.userpanel .user-block .user-dropdown .dropmenu .col1 ul li.logout a {
background: var(--middlegray) !important;
color: var(--black) !important;
border: none !important;
font-weight: lighter !important;
}
/* userpanel dropdown unread message on hover bg */
.userpanel .user-block .user-dropdown .dropmenu .col1 ul li.unread_mail a:hover {
background-color: var(--black) !important;
}
/* userpanel dropdown menu li color */
.userpanel .user-block .user-dropdown .dropmenu .col1 ul li {
color: var(--white) !important;
}
/* userpanel dropdown menu switch to profile and logout buttons style on hover */
.userpanel .user-block .user-dropdown .dropmenu .col1 a.btn:hover,
.userpanel .user-block .user-dropdown .dropmenu .col1 ul li.logout a:hover {
background: var(--blue) !important;
color: var(--black) !important;
}
/* userpanel dropdown menu col2 (right side) border left color */
.userpanel .user-block .user-dropdown .dropmenu .col2 ul {
border-left: 1px solid var(--middlegray) !important;
}
/* userpanel dropdown menu links default state color */
.userpanel .user-block .user-dropdown .dropmenu a {
color: var(--blue) !important;
}
/* userpanel dropdown menu col2 (right side) links style on hover */
.userpanel .user-block .user-dropdown .dropmenu .col2 ul li a:hover {
background: var(--blue) !important;
color: var(--deepgray) !important;
}
/* userpanel dropdown menu about premium color on hover */
.userpanel .user-block .user-dropdown .dropmenu .col1 a.note:hover {
color: var(--lightblue) !important;
}
/* userpanel dropdown menu note color */
.userpanel .user-block .user-dropdown .dropmenu .col1 .note {
color: var(--white) !important;
}
/* userpanel pin img */
.userpanel #pin {
display: block !important;
box-sizing: border-box !important;
width: 20px !important;
height: 20px !important;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-anchor'%3E%3Ccircle cx='12' cy='5' r='3'%3E%3C/circle%3E%3Cline x1='12' y1='22' x2='12' y2='8'%3E%3C/line%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'%3E%3C/path%3E%3C/svg%3E") center no-repeat !important;
padding-left: 16px !important;
z-index: 1 !important;
}
/* userpanel pin img attached */
.userpanel #pin.active {
display: block !important;
box-sizing: border-box !important;
width: 20px !important;
height: 20px !important;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-anchor'%3E%3Ccircle cx='12' cy='5' r='3'%3E%3C/circle%3E%3Cline x1='12' y1='22' x2='12' y2='8'%3E%3C/line%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'%3E%3C/path%3E%3C/svg%3E") center no-repeat !important;
padding-left: 16px !important;
border: 1px solid var(--white) !important;
z-index: 1 !important;
}
/* login block */
.login-block {
z-index: 100 !important;
position: fixed !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 45px !important;
width: 45px !important;
padding: 0 !important;
color: transparent !important;
right: 0 !important;
top: 0 !important;
background: rgba(200, 200, 200, .2) !important;
transition: background 0.3s !important;
}
.login-block:hover {
background: rgba(200, 200, 200, .4) !important;
}
.login-block a {
cursor: pointer !important;
padding-left: unset !important;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-key'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
text-decoration: none !important;
height: 45px !important;
position: absolute !important;
width: 45px !important;
}
.login-block a span {
display: none !important;
}
.login-block .error {
color: var(--red) !important;
margin-right: 0 !important;
position: absolute !important;
top: 0px !important;
}
#head .right {
position: relative !important;
width: 100% !important;
padding: 0 !important;
}
/* logo */
#head #logo {
z-index: 1 !important;
width: 150px !important;
height: 45px !important;
padding: 0 !important;
float: none !important;
position: fixed !important;
background-color: var(--darkgray) !important;
border-radius: 0 0 6px 6px !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, .7) !important;
}
#head #logo a {
display: block !important;
width: 150px !important;
height: 45px !important;
transition: all 0.5s !important;
}
#head #logo a:hover {
filter: brightness(1.3) !important;
animation: moveLogo 0.8s 1;
}
@keyframes moveLogo {
0% {
transform: translateX(0px) skew(0deg)
}
10% {
transform: translateX(2px) skew(10deg)
}
35% {
transform: translateX(5px) skew(-12deg)
}
70% {
transform: translateX(-5px) skew(8deg)
}
100% {
transform: translateX(0px) skew(0deg)
}
}
#head #logo a::after {
content: '' !important;
background: var(--logo) !important;
background-size: 120px !important;
position: relative !important;
height: 45px !important;
width: 150px !important;
display: block !important;
transition: all 0.5s !important;
}
/* rm logo default img */
#head #logo img {
display: none !important;
}
/* disable header img */
#head.green-back {
background: transparent !important;
}
/* main menu */
#head .right .menu {
width: auto !important;
position: fixed !important;
top: 45px !important;
right: 50% !important;
transform: translateX(50%) !important;
display: flex !important;
justify-content: center !important;
flex-direction: row-reverse !important;
padding: 0 !important;
margin: 0 !important;
transition: all .2s !important;
opacity: .5 !important;
z-index: 110 !important;
}
#head .right .menu:hover {
opacity: 1 !important;
}
#head .right .menu a,
#head .right .menu a.active {
width: 100px !important;
height: 45px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 12px !important;
font-family: Arial !important;
text-transform: uppercase !important;
text-decoration: none !important;
color: var(--black) !important;
background: var(--middlegray) !important;
border-right: 1px solid var(--darkgray) !important;
border-bottom: 1px solid transparent !important;
transition: all 0.2s !important;
}
#head .right .menu a:hover,
#head .right .menu a.active {
text-decoration: none !important;
background: var(--middlegray) !important;
color: var(--black) !important;
border-right: 1px solid var(--darkgray) !important;
border-bottom: 1px solid var(--white) !important;
transition: all 0.2s !important;
padding: 0 !important;
margin: 0 !important;
filter: brightness(1.1) !important;
}
/* remove wiki link */
#head .right .menu a[href="/wiki/"] {
display: none !important;
}
/* hide header and main container separator */
.bar {
background: none !important;
border: none !important;
}
/* modal fade scroll rm */
body .fade {
overflow: auto !important;
overflow-y: auto !important;
}
/* modal content main styles */
.modal2-dialog,
.modal2-header,
.modal2-content,
.modal2-footer {
background: var(--darkgray) !important;
color: var(--white) !important;
border: none !important;
}
.modal {
border: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
}
.modal-body {
overflow-y: hidden !important;
}
.modal-header,
.modal-body,
.modal-footer {
background: var(--darkgray) !important;
}
.modal-footer {
border-top: 1px solid var(--middlegray) !important;
}
/* daily task modal header border bottom */
.modal-header,
.modal2-header {
border-bottom: 1px solid var(--middlegray) !important;
}
/* modal dialog main styles */
.modal2-dialog {
font-weight: lighter;
border: 1px solid var(--middlegray) !important;
}
/* modal dialog progress bar changing value position */
.modal2-dialog .progress-label {
position: fixed !important;
top: 3px !important;
font-weight: lighter !important;
font-family: Verdana !important;
color: var(--deepgray) !important;
}
/* daily task award block align center */
.modal2-content .award-status-block {
text-align: center !important;
}
/* daily task award description color */
.modal2-content .award-status {
color: var(--blue) !important;
}
/* daily task reset margins */
.modal2-dialog .progress-striped {
margin: 0 !important;
background: var(--middlegray) !important;
}
/* daily task description align left */
.modal2-content .task-description {
padding-left: 0 !important;
}
/* progress value && progress value aim color */
.modal2-content .no-progress-label,
.modal2-content .next-level-label {
color: var(--white) !important;
}
/* edit and preview textarea bg color && text color */
.edit,
.preview {
background: var(--darkgray) !important;
color: var(--white) !important;
border: 1px solid var(--middlegray) !important;
}
/* do b tag lighter */
.modal2-content b {
font-weight: lighter !important;
}
/* description voc color */
.modal2-dialog span {
color: var(--white) !important;
}
/* daily task icon type position */
.gametype-icons {
display: none !important;
}
/* PROFILE ROOT */
/* report dlg */
#popconfirm-content textarea {
min-width: 500px !important;
border: 1px solid var(--middlegray) !important;
background: var(--deepgray) !important;
}
/* report up */
.stdpopup.popup_message .content2 {
top: -150px !important;
}
/* profile everything form insert smiles button && preview button */
.btn-smilies-insert {
background: none !important;
color: var(--white) !important;
}
.btn-smilies-insert:hover {
background: none !important;
color: var(--blue) !important;
}
.preview-change {
background: none !important;
color: var(--white) !important;
}
.preview-change:hover {
background: none !important;
color: var(--blue) !important;
}
/* profile loading text top mini popup box */
.console.log-warning {
font-weight: lighter !important;
background-color: var(--blue) !important;
color: var(--darkgray) !important;
border-radius: 0px !important;
border: none !important;
border-bottom: 1px solid var(--blue) !important;
transition: all .5s !important;
}
/* profile root online user mark */
.profile-root .online {
color: var(--darkgray) !important;
background-color: var(--blue) !important;
}
/* remove inscription click here to open bio content */
#profile-index .bio .content .clickable span {
display: none !important;
}
/* profile root bio edit form && preview */
.profile-edit-bio form {
background-color: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* profile root header popup history changed nicknames */
.profile-root .profile-header .username .history .history-popup {
background-color: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
top: 30px !important;
left: unset !important;
right: 5px !important;
}
/* profile root header popup history changed nicknames label */
.profile-root .profile-header .username .history .history-popup {
color: var(--blue) !important;
}
/* profile root header popup history changed nicknames main txt color */
.profile-root .profile-header .username .history .history-popup ul li {
color: var(--white) !important;
}
.profile-achieves .list .group .item .achieve .achieve-content .levels {
border-top: 1px solid var(--middlegray) !important;
border-left: 1px solid var(--middlegray) !important;
border-right: 1px solid var(--middlegray) !important;
}
.profile-achieves .list .group .item .achieve .achieve-content .levels:hover {
border-top: 1px solid var(--blue) !important;
border-left: 1px solid var(--blue) !important;
border-right: 1px solid var(--blue) !important;
}
.profile-achieves .list .group .item .achieve .achieve-content .levels:hover {
background: none !important;
}
.profile-achieves .list .group .item .achieve .achieve-content .levels {
color: var(--white) !important;
opacity: 1 !important;
}
.profile-achieves .list .group .more-achieves {
background: none !important;
}
/* achieve dotted progress bar achieved dot color active */
.achieve .achieve-content .levels .level .icon-icomoon.done {
color: var(--blue) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* profile friends navigation menu active tab default state, on hover, on focus */
body .profile-root .profile-content .nav-top li a {
color: var(--blue) !important;
}
body .profile-root .profile-content .nav-top li.active a {
color: var(--deepgray) !important;
background-color: var(--blue) !important;
border: 1px solid transparent !important;
}
.profile-root .profile-content .nav-top>li.active>a,
.profile-root .profile-content .nav-top>li.active>a:hover,
.profile-root .profile-content .nav-top>li.active>a:focus {
color: var(--deepgray) !important;
background-color: var(--blue) !important;
border: 1px solid transparent !important;
}
/* profile friends navigation menu NOT active tab default state, on hover, on focus */
.profile-root .profile-content .nav-top>li>a:hover,
.profile-root .profile-content .nav-top>li>a:focus {
color: var(--deepgray) !important;
background-color: var(--blue) !important;
border: 1px solid transparent !important;
}
.profile-root .profile-content .nav-top>li>a {
color: var(--blue) !important;
background-color: var(--darkgray) !important;
border: 1px solid var(--blue) !important;
}
.profile-root .profile-content .nav-top {
border-bottom: none !important;
}
.profile-achieves .options .btn-group .btn .toggle-text b {
color: var(--blue) !important;
}
.btn-group .dropdown-menu a {
color: var(--white) !important;
}
/* profile journal placeholder bg color */
.profile-root .journal .write .placeholder {
background: var(--darkgray) !important;
border: none !important;
}
.profile-root .profile-header {
background: var(--darkgray) !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* profile root achievements + place button styles */
#profile-index .trophy .item .dummy {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
#profile-index .trophy .item .dummy:hover {
background: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
}
#profile-index .trophy .item .dummy::after {
color: var(--middlegray) !important;
}
#profile-index .trophy .item .dummy:hover::after {
color: var(--blue) !important;
}
/* profile move to top of the page wide button */
.profile-root .scroll-to-top {
background-color: var(--deepgray) !important;
color: var(--white) !important;
}
.profile-root .scroll-to-top:hover {
background-color: var(--deepgray) !important;
opacity: 0.8 !important;
}
/* profile root header nickname color */
.profile-root .profile-header .username .name {
color: var(--orange) !important;
}
/* profile history nickname change caret color */
.profile-root .profile-header .username .history .caret {
background: var(--deepgray) !important;
height: 15px !important;
width: 15px !important;
border-radius: 50% !important;
position: relative !important;
top: -4px !important;
border: 2px solid var(--blue) !important;
transition: background .2s !important;
}
.profile-root .profile-header .username .history .caret:hover {
background: var(--blue) !important;
transition: background .2s !important;
}
/* profile root remove border top under journal text input */
.profile-root .journal .post {
border: none !important;
}
/* profile root main block journal text input styles */
.profile-root .journal .write {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* profile navigation menu */
.profile-root .sidebar .profile-nav li a .icon-icomoon {
color: var(--white) !important;
}
/* keep bg color nav selected item colored before selected another item */
.profile-root .sidebar .profile-nav>li.active>a,
.profile-root .sidebar .profile-nav>li.active>a:hover,
.profile-root .sidebar .profile-nav>li.active>a:focus {
background: var(--blue) !important;
}
/* bg color nav hovering and focus color items */
.profile-root .sidebar .profile-nav>li>a:hover,
.profile-root .sidebar .profile-nav>li>a:focus {
text-decoration: none !important;
background-color: var(--deepgray) !important;
}
/* active item nav menu icon color */
.profile-root .sidebar .profile-nav>li.active span {
color: var(--deepgray) !important;
}
/* remove border near the blocks */
#profile-index .stats {
position: fixed !important;
width: 185px !important;
border: none !important;
}
/* profile nav menu position fixed */
.profile-root .sidebar .profile-nav:nth-child(1) {
position: fixed !important;
width: 165px !important;
}
.profile-root .sidebar .profile-nav:nth-child(2) {
position: fixed !important;
width: 165px !important;
top: 429px !important;
}
.profile-root .sidebar .profile-nav:nth-child(3) {
position: fixed !important;
width: 165px !important;
top: 507px !important;
}
/* profile journal options position fixed */
.col-xs-3 .options {
position: fixed !important;
width: 170px !important;
top: 193px !important;
}
/* remove stats header h3 */
#profile-index .stats h3 {
display: none !important;
}
/* blocks titles */
#profile-index .stats .content .stats-block .title {
color: var(--darkgray) !important;
}
/* profile root statistics eight blocks */
#profile-index .stats .content .stats-block {
background-color: var(--blue);
margin: 0 !important;
border: none !important;
}
/* profile root statistics eight blocks bg color content */
#profile-index .stats .content .stats-block .stats-content {
background-color: var(--darkgray) !important;
border: none !important;
color: var(--blue) !important;
}
/* profile root statistics eight blocks on hover */
#profile-index .stats .content .stats-block .stats-content.clickable:hover {
background-color: var(--deepgray) !important;
color: var(--blue) !important;
}
/* profile root statistics eight blocks animation timing */
/* text */
#profile-index .stats .content .stats-block:nth-child(1) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(1) span {
animation: block1span 3s linear 0.1s infinite;
}
#profile-index .stats .content .stats-block:nth-child(2) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(2) span {
animation: block2span 3s linear 0.3s infinite;
}
#profile-index .stats .content .stats-block:nth-child(3) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(3) span {
animation: block3span 3s linear 0.5s infinite;
}
#profile-index .stats .content .stats-block:nth-child(4) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(4) span {
animation: block4span 3s linear 0.7s infinite;
}
#profile-index .stats .content .stats-block:nth-child(5) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(5) span {
animation: block5span 3s linear 0.9s infinite;
}
#profile-index .stats .content .stats-block:nth-child(6) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(6) span {
animation: block6span 3s linear 1.1s infinite;
}
#profile-index .stats .content .stats-block:nth-child(7) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(7) span {
animation: block7span 3s linear 1.3s infinite;
}
#profile-index .stats .content .stats-block:nth-child(8) .stats-content .icon-icomoon,
#profile-index .stats .content .stats-block:nth-child(8) span {
animation: block8span 3s linear 1.5s infinite;
}
/* blocks */
#profile-index .stats .content .stats-block:nth-child(1) {
animation: block1 3s linear 0.1s infinite;
}
#profile-index .stats .content .stats-block:nth-child(2) {
animation: block2 3s linear 0.3s infinite;
}
#profile-index .stats .content .stats-block:nth-child(3) {
animation: block3 3s linear 0.5s infinite;
}
#profile-index .stats .content .stats-block:nth-child(4) {
animation: block4 3s linear 0.7s infinite;
}
#profile-index .stats .content .stats-block:nth-child(5) {
animation: block5 3s linear 0.9s infinite;
}
#profile-index .stats .content .stats-block:nth-child(6) {
animation: block6 3s linear 1.1s infinite;
}
#profile-index .stats .content .stats-block:nth-child(7) {
animation: block7 3s linear 1.3s infinite;
}
#profile-index .stats .content .stats-block:nth-child(8) {
animation: block8 3s linear 1.5s infinite;
}
/* profile root statistics eight blocks do animation */
@keyframes block1 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block2 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block3 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block4 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block5 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block6 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block7 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
@keyframes block8 {
0% {
background-color: var(--blue);
}
50% {
background-color: var(--orange);
}
100% {
background-color: var(--blue);
}
}
/* for text animation */
@keyframes block1span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block2span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block3span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block4span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block5span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block6span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block7span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
@keyframes block8span {
0% {
color: var(--blue);
}
50% {
color: var(--orange);
}
100% {
color: var(--blue);
}
}
/* blocked user */
.profile-root .profile-hidden .icon-icomoon {
color: var(--blue) !important;
}
.profile-root .profile-hidden {
color: var(--blue) !important;
}
.profile-root .profile-hidden {
background: var(--darkgray) !important;
border: 1px solid var(--blue) !important;
}
/* profile root bio not opened bg */
#profile-index .bio .content {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
#profile-index .bio .content:hover {
border: 1px solid var(--blue) !important;
}
/* profile root filter && sort links color */
.profile-root .options-block ul li span,
.profile-root .options-block .checkbox .selected::before {
color: var(--white) !important;
}
.profile-root .options-block ul li span:hover {
color: var(--blue) !important;
}
.profile-root .options-block ul li:hover {
color: white !important;
}
/* PROFILE FRIENDS */
/* profile friends list border bottom */
.profile-friends .friends-list ul.users>li {
background: none !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* profile friends list broder bottom on hover */
.profile-friends .friends-list ul.users>li:hover {
background: none !important;
border-bottom: 1px solid var(--blue) !important;
}
/* profile friends list nickname color */
.profile-friends .friends-list .name {
color: var(--white) !important;
}
.profile-friends .friends-list .name:hover {
color: var(--blue) !important;
}
/* PROFILE MESSAGES */
/* profile messages global name color */
.profile-messages .name {
color: var(--blue) !important;
}
/* profile messages global name color on hover */
.profile-messages .name:hover {
color: var(--lightblue) !important;
}
/* main messages container border around */
.profile-messages .dialog {
border: 1px solid var(--middlegray) !important;
}
/* profile unread messages bg color */
/* not readed message by him her */
.message.unread {
background-color: var(--deepgray) !important;
}
/* not readed message by him her not opened message dialog */
.profile-messages .messages-contacts .message.unread {
background-color: var(--blue) !important;
}
.profile-messages .messages-contacts .message.unread .text {
color: var(--deepgray) !important;
}
/* message not readed not opened dialog by me */
.profile-messages .messages-content .messages-contacts .contacts-content .contact.unread {
background-color: var(--deepgray) !important;
border-bottom: 1px solid var(--blue) !important;
}
/* profile messages bg color on hover message block item */
.profile-messages .messages-contacts .contact:hover {
background: var(--deepgray) !important;
}
/* profile deleted message bg color block */
.deleted {
border: 1px solid var(--blue) !important;
background-color: var(--deepgray) !important;
}
/* profile messages bottom border color under messages content */
.profile-messages .dialog-header {
background: var(--darkgray) !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* profile messages opened dlg container header back button text color */
.profile-messages .dialog-header .controls .btn {
color: var(--deepgray) !important;
}
/* profile messages top border color under type block */
.profile-messages .dialog-write {
border-top: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
}
/* smiles && preview icons change */
.icon-smiles::before {
content: '\e60e' !important;
}
.preview-change::before {
content: '\e093' !important;
}
/* PROFILE ACHIEVEMENTS */
/* popup achieve main block styles */
.popover * {
background: var(--darkgray) !important;
border: none !important;
}
/* PROFILE STATISTICS */
/* statistics more info result container inner graph */
.chart-graph div {
border: none !important;
background: var(--darkgray) !important;
}
/* statistics more info best result container */
.profile-stats .profile-stats-details .top-stats .best-speed {
background-color: var(--blue) !important;
}
/* best result title */
.profile-stats .profile-stats-details .top-stats .best-speed .title {
color: var(--darkgray) !important;
}
/* best result content */
.profile-stats .profile-stats-details .top-stats .best-speed .content {
background-color: var(--darkgray) !important;
border-bottom: 1px solid var(--white) !important;
border-top: 1px solid var(--deepgray) !important;
color: var(--blue) !important;
}
/* book progress bar indicator */
.profile-stats .profile-stats-details .top-stats .counter .value .book-progress .item {
background-color: var(--blue) !important;
}
/* profile stats book parts odd */
.dlg-profile-stats-book-parts .parts .col-xs-1 .item {
background: var(--darkgray) !important;
}
.dlg-profile-stats-book-parts .parts .col-xs-1 {
border-right: 1px solid var(--middlegray) !important;
}
.dlg-profile-stats-book-parts .parts .col-xs-1 .item:hover {
background: var(--blue) !important;
color: var(--deepgray) !important;
}
/* profile stats book parts even */
.dlg-profile-stats-book-parts .parts .col-xs-1 .item.even {
background-color: var(--deepgray) !important;
}
.dlg-profile-stats-book-parts .parts .col-xs-1 .item.even:hover {
background-color: var(--blue) !important;
color: var(--deepgray) !important;
}
/* profile root new message badge */
.badge {
border: 1px solid var(--darkgray) !important;
background: var(--blue) !important;
color: var(--deepgray) !important;
}
.profile-root .profile-header .mini-nav {
display: none !important;
opacity: 0 !important;
}
/* empty stats */
.stats-empty {
background: var(--darkgray) !important;
}
.stats-empty .icon-icomoon {
color: var(--blue) !important;
}
/* statistics wheel main container bg color */
.profile-root rect {
fill: var(--darkgray) !important;
}
/* total games count script */
#totalGamesCounter {
background-color: var(--blue) !important;
}
#totalGamesCounter .value {
color: var(--blue) !important;
background-color: var(--darkgray) !important;
}
#totalGamesCounter .value .icon-icomoon {
color: var(--blue) !important;
}
/* stats table header txt color */
.profile-stats .chart-table {
color: var(--darkgray) !important;
}
/* profile stats counters colors stable speed, best speed on top, mistypes, total txt count */
.profile-stats .counter {
background-color: var(--blue) !important;
}
.profile-stats .counter .title {
color: var(--darkgray) !important;
}
.profile-stats .counter .value {
border-bottom: 1px solid var(--lightblue) !important;
border-top: 1px solid var(--deepgray) !important;
color: var(--blue) !important;
background-color: var(--darkgray) !important;
}
div.btn-group .dropdown-toggle b,
div.btn-group .dropdown-toggle span {
color: var(--deepgray) !important;
}
div.btn-group .dropdown-toggle .toggle-text {
color: var(--white) !important;
}
/* profile stats period dropdown menu */
.dropdown-menu {
overflow: hidden !important;
}
.col-xs-5 input {
border: 1px solid var(--middlegray) !important;
}
.col-xs-7 {
border-left: 1px solid var(--middlegray) !important;
}
.col-xs-7 a {
border: none !important;
}
/* profile stats navigation menu styles */
.profile-stats .profile-stats-overview .recent {
background-color: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* profile stats navigation menu links color */
.profile-stats .recent a {
color: var(--white) !important;
font-weight: lighter !important;
}
.profile-stats .recent a:hover {
color: var(--blue) !important;
font-weight: lighter !important;
}
/* profle stats navigation menu remove bg from li elements */
.profile-stats .recent li:hover {
background: none !important;
color: var(--blue) !important;
}
/* profile stats graphic page main block bg */
.profile-stats .profile-stats-details .charts {
background: var(--darkgray) !important;
}
/* profile stats graphic page graphic font color fix */
.profile-stats .profile-stats-details .charts .chart-graph text:nth-child(1) {
stroke: var(--blue) !important;
fill: none !important;
stroke-width: 1px !important;
}
.profile-stats .profile-stats-details .charts .chart-graph text:nth-child(2) {
fill: none !important;
}
.google-visualization-table-tr-even {
background: var(--darkgray) !important;
}
.google-visualization-table-tr-odd {
background: var(--deepgray) !important;
}
.google-visualization-table-table th,
.google-visualization-table-table td {
border: none !important;
}
.profile-stats .profile-stats-overview .chart-table tr td,
.profile-stats .profile-stats-details .chart-table tr td {
color: var(--blue) !important;
}
.google-visualization-table-tr-head {
background-color: var(--blue) !important;
}
.google-visualization-table .gradient {
background: none !important;
}
.google-visualization-table-sortind {
color: var(--darkgray) !important;
}
.profile-root .sidebar .profile-nav {
margin-bottom: 0 !important;
}
/* klavotols profile user nav menu */
.profile-root .sidebar .profile-nav li a {
color: var(--white) !important;
background: var(--deepgray) !important;
}
.profile-root .sidebar .profile-nav li a:hover {
background: var(--black) !important;
}
body .profile-root .sidebar .profile-nav li.active a .icon-icomoon {
color: var(--deepgray) !important;
}
.profile-root .sidebar .profile-nav li.active a .badge {
background: var(--darkgray) !important;
color: var(--blue) !important;
}
.profile-root .sidebar .profile-nav span {
color: var(--white) !important;
}
/* PROFILE JOURNAL */
/* journal btn calendar icon color */
.profile-root .options .date-select .btn .icon-icomoon {
color: var(--deepgray) !important;
}
/* CALENDAR */
/* colorize main window calendar excluding buttons icons left right to switch between months */
.calendar *:not(.ui-icon) {
border: none !important;
background: none !important;
}
/* stilize all a tags in cells */
.calendar * a {
text-align: center !important;
color: var(--white) !important;
}
/* default state calendar state */
.calendar td.ui-state-disabled,
.calendar span.ui-state-default {
border: 1px solid transparent !important;
background: var(--darkgray) !important;
}
/* clickable cells calendar state */
.calendar td[data-handler="selectDay"] {
background-color: var(--darkgray) !important;
border-bottom: 1px solid transparent !important;
}
/* cells on hover */
.calendar td[data-handler="selectDay"]:hover {
background-color: var(--deepgray) !important;
border-bottom: 1px solid var(--blue) !important;
}
/* header bg color && text color */
.calendar .ui-datepicker-header {
background: var(--blue) !important;
color: var(--darkgray) !important;
}
/* calendar Mo Tu We Th Fr Sa Su */
.calendar .ui-datepicker-calendar span {
color: var(--blue) !important;
}
/* profile journal root profile comments bg containers color */
.profile-root .journal .comments {
background: none !important;
}
/* profile journal root profile comments show more comments button bg color && text color */
.profile-root .journal .comments .more {
background: var(--middlegray) !important;
color: var(--white) !important;
}
.profile-root .journal .comments .more:hover {
background: var(--deepgray) !important;
color: var(--white) !important;
}
/* journal popup window typed text block border none && messages area border remove */
.profile-root .journal .record-info .game-text,
.profile-journal-post-dlg .journal .comments .post {
border: none !important;
}
/* journal popup window typed results borders around */
.profile-root .journal .record-info .stats .stats-col * tr,
.profile-root .journal .record-info .stats .stats-col * td,
.profile-root .journal .record-info .stats .stats-col * th {
border: 1px solid var(--middlegray) !important;
}
/* profile everywhere hidden mark text color */
.hidden-mark>span {
color: var(--deepgray) !important;
}
/* profile journal hidden posts bg color and borer */
.profile-root .journal .post.post-hidden {
background-color: var(--darkgray) !important;
border: none !important;
}
/* profile journal nickname color */
.profile-root .journal .post .content .author a {
color: var(--blue) !important;
}
/* profile journal nickname color on hover */
.profile-root .journal .post .content .author a:hover {
color: var(--lightblue) !important;
}
/* profile journal description text color */
.profile-root .journal .post .content .text {
color: var(--white) !important;
}
/* profile root journal comments read more bg img remove and color with simple color and add border top */
.profile-root .journal .post .content .readmore.fade-top {
background: var(--darkgray) !important;
border-top: 1px solid var(--middlegray) !important;
}
/* profile journal write insert smilies dialog bg color & smilies a little bit hue rotation */
.dlg-smilies-insert {
background: var(--darkgray) !important;
border: 1px solid var(--blue) !important;
}
.dlg-smilies-insert img {
filter: invert(10%) hue-rotate(330deg) !important;
}
/* PROFILE ACHIEVEMENTS */
/* no one achieve will have opacity */
.profile-achieves img {
opacity: 1 !important;
}
/* achieve title color */
.achieve .achieve-content .title {
color: var(--white) !important;
}
/* achieve description color */
.achieve .achieve-content .description {
color: var(--white) !important;
}
.achieve:not(.reduced) {
border: 1px solid var(--middlegray);
background: none !important;
}
/* achieve icon rules */
.achieve .achieve-icon {
background: var(--darkgray) !important;
border: 1px solid var(--darkgray) !important;
}
.achieve .achieve-icon:hover {
background: var(--darkgray) !important;
border: 1px solid var(--blue) !important;
}
/* PROFILE CAR */
/* draw main container border none */
.dlg-profile-car-aero .aero-canvas {
border: none !important;
}
/* draw canvas bg */
.dlg-profile-car-aero .aero-canvas .content {
background: var(--middlegray) !important;
}
/* toolbar bg */
.literally .toolbar {
background: var(--deepgray) !important;
}
/* tollbar row border none */
.literally .toolbar-row {
border: none !important;
}
/* tollbar btn */
.literally .button.danger {
background: rgba(225, 20, 0, .5) !important;
}
.literally .button {
border: none !important;
color: var(--white) !important;
background: var(--darkgray) !important;
}
.literally .button.active,
.literally .button:hover {
border: none !important;
color: var(--darkgray) !important;
background: var(--blue) !important;
}
/* choose file btn */
#file-input:hover {
cursor: pointer !important;
}
/* car paint bottom warning no premium */
.dlg-profile-car-aero .warning {
background: rgba(225, 20, 0, .5) !important;
color: var(--white) !important;
}
/* profile car service block */
.profile-car .my-car {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
.profile-car .my-car .car {
background: var(--darkgray) !important;
}
/* profile car service block title color && border bottom */
.profile-car .my-car .title {
color: var(--orange) !important;
border-bottom: 1px solid var(--middlegray) !important;
}
.profile-car .shop .no-tuning {
color: var(--white) !important;
}
.profile-car .shop .car-block .name {
color: var(--blue) !important;
}
/* car tuning select border color */
.profile-car .shop .tuning-category .tuning-item.active {
border: 1px solid var(--blue) !important;
}
.profile-car .shop .tuning-category .tuning-item {
border: 1px solid transparent !important;
}
/* profile settings change avatar right side main container border none */
.dlg-profile-prefs-change-avatar .avatar-preview .preview {
border: none !important;
}
/* profile settings panels background */
#profile-prefs .prefs-block {
background: var(--darkgray) !important;
}
/* remove border around choose color colored little block in garage && settings section profile */
.btn>.view-color {
border: none !important;
}
/* VOCS */
/* profile vocs count use */
.dlg-profile-vocs .vocs th,
.dlg-profile-vocs .vocs td {
border-bottom: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
}
/* profile vocs count use a span color */
.dlg-profile-vocs .vocs a {
color: var(--blue) !important;
}
.dlg-profile-vocs .vocs a span {
color: var(--blue) !important;
}
.dlg-profile-vocs .vocs a span:hover {
color: var(--lightblue) !important;
}
/* records for a day, week left navigation links to vocs color */
a.gametype-voc {
color: var(--blue) !important;
}
a.gametype-voc:hover {
color: var(--lightblue) !important;
}
/* records for a day, week left navigation links left img squares color */
#toplist ul.mode li.gametype-voc img {
filter: brightness(2) !important;
}
#toplist ul.mode li.yeargroup {
margin-left: 0px !important;
font-weight: normal !important;
text-align: center !important;
}
/* vocs dictionary page text even bg color */
.vocview-block .words tr.even td {
background-color: var(--deepgray) !important;
}
/* vocs dictionary page text count color && comments nickname color */
.vocview-block .words tr td.num,
.comments .info a.name {
color: var(--blue) !important;
}
/* vocs title and create game button main container */
#profile-block .user-title {
margin: 10px 0 !important;
}
#profile-block .menu>dd:nth-child(1) {
margin: 0 !important;
}
/* vocs title and create game button dd container center position */
.user-title>dd:nth-child(1) {
margin: 0 !important;
display: flex !important;
justify-content: center !important;
}
/* add voc button */
#profile-block.vocview-block .user-title .btn_fav {
filter: invert(100%) !important;
}
/* remove voc btn */
#profile-block.vocview-block .user-title .remove {
color: var(--darkgray) !important;
background: none !important;
background-color: var(--red) !important;
padding-left: 0 !important;
border: 1px solid transparent !important;
transition: all .1s !important;
}
#profile-block.vocview-block .user-title .remove:hover {
background-color: var(--darkgray) !important;
background: none !important;
border: 1px solid var(--white) !important;
color: var(--white) !important;
transition: all .1s !important;
}
/* comments block width */
#profile-block .right-col {
top: 200px !important;
right: 0 !important;
width: 500px !important;
position: absolute !important;
padding: 0 !important;
}
/* dashed vocs history rm */
.dashed {
border-bottom: none !important;
}
.dashed:hover {
color: var(--lightblue) !important;
}
/* comments about voc text color && main block border */
#profile-block .right-col .comments {
background: var(--darkgray);
border: 1px solid var(--middlegray) !important;
}
/* voc author bg row color */
.user-content dd:nth-child(2) {
background-color: var(--darkgray) !important;
}
/* voc play add btn */
.btn80 {
background: var(--blue) !important;
}
.btn80:hover,
.play {
background: var(--orange) !important;
}
/* voc remove btn */
body .voclist .remove {
background: #622020 var(--rmvoc) no-repeat 5px 4px !important;
color: var(--red) !important;
padding: 3px 25px !important;
border: 1px solid var(--red) !important;
transition: all .2s !important;
background-size: 9px !important;
}
body .voclist .remove:hover {
filter: hue-rotate(60deg) !important;
}
/* voc popularity */
body .voc_popularity {
background: var(--vocPopularity);
}
/* voc popularity fix position */
body .popularity0 {
background-position: 0px -96px !important;
}
body .popularity1 {
background-position: 0px -72px !important;
}
body .popularity2 {
background-position: 0px -48px !important;
}
body .popularity3 {
background-position: 0px -24px !important;
}
body .popularity4 {
background-position: 0px 0px !important;
}
body .create_voc {
position: absolute !important;
margin: 0 !important;
top: -17px !important;
border-radius: 5px !important;
border: 1px solid var(--orange) !important;
transition: all .1s !important;
filter: invert(1) !important;
}
body .create_voc:hover {
border: 1px solid var(--blue) !important;
}
/* vocs show history button */
.vocview-block .editfor-title i {
background: var(--showHistory) !important;
}
/* play button */
#profile-block.vocview-block .user-title .btn_play {
filter: hue-rotate(90deg) !important;
}
#profile-block #toplist {
width: 100% !important;
display: block !important;
margin: 0 !important;
}
#profile-block #toplist dt {
display: block !important;
}
#profile-block #toplist>dd:nth-child(2) {
margin: 0 !important;
}
body .columns {
top: 20px !important;
}
body .columns .content-col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 16% !important;
margin-right: 16% !important;
}
body .columns h3 {
display: none !important;
}
body .voclist .content-col {
margin: 0 !important;
padding: 0 !important;
}
body .voclist .left-col {
position: absolute !important;
left: -160px !important;
top: 22px !important;
justify-content: center !important;
display: flex !important;
float: none !important;
width: 150px !important;
flex-direction: column !important;
margin: 0 !important;
padding: 25px 0 5px 0 !important;
}
.left-col>h4 {
display: none !important;
}
/* MAIN PAGE */
/* klavotools recent txt color */
#recent-games-options {
display: inline-flex !important;
width: 105px !important;
height: 35px !important;
justify-content: center !important;
align-items: center !important;
color: transparent !important;
margin-left: 0 !important;
font-size: 0;
}
/* klavotools recent buttons count fast race links */
#recent-games-count-dec,
#recent-games-count-inc,
#recent-games-count {
color: transparent !important;
height: 35px !important;
width: 35px !important;
display: inline-flex;
border: none !important;
outline: none !important;
transition: background-color 0.3s !important;
}
#recent-games-count-dec {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center !important;
border-radius: 5px 0 0 5px !important;
background-color: rgba(200, 200, 200, 0.3) !important;
border-left: 2px solid rgba(200, 200, 200, 0.3) !important;
border-bottom: 2px solid rgba(200, 200, 200, 0.3) !important;
border-top: 2px solid rgba(200, 200, 200, 0.3) !important;
}
#recent-games-count-inc {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center !important;
border-radius: 0 5px 5px 0 !important;
background-color: rgba(200, 200, 200, 0.3) !important;
border-right: 2px solid rgba(200, 200, 200, 0.3) !important;
border-bottom: 2px solid rgba(200, 200, 200, 0.3) !important;
border-top: 2px solid rgba(200, 200, 200, 0.3) !important;
}
#recent-games-count-dec:hover,
#recent-games-count-inc:hover {
background-color: rgba(200, 200, 200, 0.5) !important;
}
#recent-games-count {
font-family: 'Consolas', sans-serif !important;
color: lightgray !important;
font-size: 19px !important;
margin: 0 !important;
padding: 0 5px !important;
font-weight: bold !important;
justify-content: center !important;
align-items: center !important;
border-top: 2px solid rgba(200, 200, 200, 0.5) !important;
border-bottom: 2px solid rgba(200, 200, 200, 0.5) !important;
}
body .gamelist-create #recent-games-container {
margin-top: 0 !important;
overflow-y: auto !important;
height: auto !important;
padding-top: 15px !important;
max-height: 20vh !important;
}
#recent-games-container {
background: var(--darkgray) !important;
}
/* klavotools recent games buttons on main page position bottom left */
#head #recent-games-container {
height: 20vh !important;
width: 100vw !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 100 !important;
overflow-y: auto !important;
padding-top: 15px !important;
}
/* recent games pin delete btn's */
body .recent-game-buttons {
position: absolute !important;
top: 0 !important;
left: -1px !important;
right: -1px !important;
}
body .recent-game-handle {
left: -1px !important;
top: -15px !important;
width: 51% !important;
height: 15px !important;
background: var(--middlegray) var(--fixedRecent) 50% !important;
opacity: .4 !important;
}
body .recent-game-handle:hover {
opacity: 1 !important;
}
body .recent-game-pin,
body .recent-game-delete {
margin: 0 !important;
height: 15px !important;
width: 50% !important;
float: unset !important;
position: absolute !important;
bottom: 0 !important;
}
body .recent-game-pin {
bottom: 0 !important;
}
body .recent-game-delete {
left: 50% !important;
top: unset !important;
bottom: 0 !important;
}
body .recent-game-pin img,
body .recent-game-delete img {
max-width: unset !important;
max-height: unset !important;
height: 15px !important;
width: 100% !important;
opacity: 0 !important;
display: block !important;
clip: unset !important;
}
body .recent-game-pin {
background: #5D7E42 var(--pinResent) 50% !important;
filter: brightness(0.7) !important;
}
body .recent-game-pin:hover {
filter: brightness(1) !important;
}
body .recent-game-delete {
background: #A52525 var(--closeResent) 50% !important;
filter: brightness(0.7) !important;
}
body .recent-game-delete:hover {
filter: brightness(1) !important;
}
/* remove under header airplane road && advertisement shit */
.ownbanner-back,
#index #live .grad,
/* remove images >> fast start, choose game, create myself on main page */
.index-icon-container img,
/* remove news block, , what is this, about people on this site */
#index .col1,
/* remove block count registered humans on main page */
.indexstats-block,
/* remove feedback button */
.feedback-btn {
display: none !important;
}
/* align text >> fast start, choose game, create myself on main page */
.index-icon-container {
text-align: center !important;
width: 100% !important;
margin-left: 0 !important;
}
/* minimal main container with && align content equal space && align main block center */
.minwidth {
width: var(--container) !important;
margin: 0 auto !important;
display: flex !important;
justify-content: space-between !important;
}
/* this inside minwidth keeps width size */
.minwidth_holyhack {
width: var(--container) !important;
background: var(--darkgray) !important;
}
/* main page create race links do space between */
#index .firstrow {
height: 45px !important;
display: flex !important;
justify-content: space-between !important;
top: 5px !important;
}
/* fast start */
.firstrow .col2,
/* choose game */
.firstrow .col3,
/* create game myself */
.firstrow .col4 {
width: 100% !important;
left: 0 !important;
}
/* create game links rm p */
.firstrow .col2 p,
.firstrow .col3 p,
.firstrow .col4 p {
display: none !important;
}
.firstrow .col2,
.firstrow .col3 {
border-right: 1px solid var(--middlegray) !important;
}
/* create game links color */
.firstrow .col2 a,
.firstrow .col3 a,
.firstrow .col4 a {
font: 12px Arial;
text-transform: uppercase !important;
color: var(--white) !important;
text-decoration: none !important;
margin-left: 0 !important;
transition: all .2s !important;
background: rgba(0, 0, 0, .1) !important;
}
/*
.firstrow .col2 a {
background: var(--deepgray) var(--fastStart) 20px 2px !important;
}
.firstrow .col3 a {
background: var(--deepgray) var(--selectCreated) 20px 2px !important;
}
.firstrow .col4 a {
background: var(--deepgray) var(--selectMine) 20px 2px !important;
}
*/
/* create game links on hover */
.firstrow .col2 a:hover,
.firstrow .col3 a:hover,
.firstrow .col4 a:hover {
color: var(--white) !important;
text-decoration: none !important;
background-color: rgba(0, 0, 0, .3) !important;
transition: all .2s !important;
}
.firstrow .col2 a[class=title],
.firstrow .col3 a[class=title],
.firstrow .col4 a[class=title] {
height: 45px !important;
line-height: 45px !important;
transition: all .2s !important;
}
.index-icon-container {
height: 45px !important;
}
/* main page live */
.secondrow .col2,
/* main page top */
.secondrow .col3 {
height: 500px !important;
left: 0 !important;
width: 50% !important;
flex-grow: 1 !important;
}
.secondrow .col2 {
background: transparent !important;
/* border-right: 1px solid var(--middlegray) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important; */
}
/* main page live && top space top */
#index .secondrow {
margin-top: 3px !important;
}
/* main page top bg && border */
#top {
background: transparent !important;
height: 500px !important;
margin: 0 !important;
}
#top h4 {
text-align: center !important;
}
#top .note {
color: var(--white) !important;
}
/* main page top race count color text */
#top td.date {
font-size: 12px !important;
color: var(--blue) !important;
}
/* main page live links */
#live li .title {
color: var(--blue) !important;
}
/* main page live links on hover */
#live li .title:hover {
color: var(--lightblue) !important;
}
/* #live {
padding: 0 !important;
} */
#live h4 {
text-align: center !important;
}
#index #live li .title {
max-width: 395px !important;
display: inline-block !important;
overflow: hidden !important;
position: relative !important;
top: 3px !important;
}
#index #live #discussing_forum li {
margin: 0 !important;
height: 26px !important;
}
body #index #live #discussing_forum li .time {
padding-left: 10px !important;
}
/* selected top && live item */
.switch span {
background: var(--blue) !important;
color: var(--darkgray) !important;
}
/* main page top && live switch not selected link color */
.switch a {
color: var(--blue) !important;
}
.discussing .post-content {
margin-top: 0 !important;
}
/* today, week, fresh writings on live links to vocs */
.discussing .post-content a {
color: var(--blue) !important;
}
.discussing .post-content a:hover {
color: var(--lightblue) !important;
}
/* live post counter */
.discussing .comments-cnt {
border: 1px solid var(--middlegray) !important;
background-color: var(--darkgray) !important;
color: var(--white) !important;
}
.discussing .comments-cnt:hover {
background-color: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
color: var(--blue) !important;
}
/* live comments count */
#index #live li .comments_num,
/* live time posted */
.discussing .date,
#index #live li .title2,
/* live forum time posted */
#index #live li .time {
color: var(--white) !important;
}
/* Best results */
/* Invert icons */
#top .tops-sign {
margin: 0 0 -7px 0 !important;
height: 20px !important;
width: 20px !important;
}
/* invert icon on active tab */
#top .active {
filter: brightness(0.2) !important;
}
/* Assign icons */
/* Competition */
#top .sign-rating {
image-rendering: crisp-edges !important;
background: var(--topRating) !important;
}
/* Today */
#top .sign-today {
image-rendering: crisp-edges !important;
background: var(--topToday) !important;
}
/* Week */
#top .sign-week {
image-rendering: crisp-edges !important;
background: var(--topWeek) !important;
}
/* Success */
#top .sign-success {
image-rendering: crisp-edges !important;
background: var(--topSuccess) !important;
}
/* NOError */
#top .sign-noerror {
image-rendering: crisp-edges !important;
background: var(--topNOError) !important;
}
#top #sw_noerror.on {
width: 135px !important;
text-align: right !important;
}
#top #sw_noerror.on .sign-noerror {
position: absolute !important;
}
/* fix active inactive tabs */
#top .on {
background-color: var(--blue) !important;
}
#top .top-title-on {
color: var(--black) !important;
}
/* LOGIN FORM */
/* login input bg */
#username,
#password {
color: var(--white) !important;
background: var(--darkgray) !important;
border: none !important;
}
/* login && register popup close button */
.popup-box .close ins {
filter: invert(60%) !important;
}
.popup-box .close ins:hover {
filter: invert(70%) !important;
}
/* login form popup z-index */
#login-form {
position: fixed !important;
z-index: 150 !important;
height: 100vh !important;
width: unset !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
display: flex;
justify-content: center !important;
align-items: center !important;
background-color: rgba(0, 0, 0, 0.5) !important;
}
#login-form .c {
background: #484a4e !important;
padding: 0 !important;
height: 300px !important;
width: 250px !important;
border: none !important;
}
#login-form .c form {
margin-top: 45px;
padding-right: 0 !important;
height: 300px !important;
}
#login-form dt {
display: none;
}
#login-form dt,
#login-form dl,
#login-form dd {
margin: 0 !important;
padding: 0 !important;
}
#login-form dd,
#login-form dl,
#login-form input {
width: 100% !important;
}
#login-form #username,
#login-form #password {
background-color: var(--blue) !important;
height: 45px !important;
padding: 10px !important;
color: var(--deepgray) !important;
text-align: center !important;
}
#login-form #username:active,
#login-form #password:active,
#login-form #username:focus,
#login-form #password:focus {
background-color: var(--lightblue) !important;
transition: background-color 0.3s !important;
}
#login-form #username {
border-bottom: 1px solid #484a4e !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") !important;
background-position: 10px !important;
background-repeat: no-repeat !important;
}
#login-form #password {
margin-bottom: 10px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") !important;
background-position: 10px !important;
background-repeat: no-repeat !important;
}
#login-form #login_form_submit {
width: 200px !important;
transform: translate(25px);
height: 45px !important;
border: 2px solid var(--blue) !important;
border-radius: 25px !important;
background-color: var(--deepgray) !important;
color: var(--blue) !important;
text-transform: uppercase !important;
transition: all 0.15s !important;
}
#login-form #login_form_submit:hover {
color: var(--lightblue) !important;
border: 2px solid var(--lightblue) !important;
}
#login-form .close {
top: 0 !important;
right: 0 !important;
height: 45px !important;
width: 45px !important;
background-color: #484a4e !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
transition: background-color 0.3s !important;
}
#login-form .close:hover {
background-color: #626468 !important;
}
#login-form .close ins {
display: none !important;
}
/* login and password description text color */
#login-form table label {
font-weight: lighter !important;
}
#login-form .navigation {
display: inline-flex !important;
width: 100% !important;
justify-content: center !important;
}
#login-form .navigation li {
margin-bottom: 0 !important;
}
#login-form .navigation a {
border-radius: 50% !important;
background-color: rgba(200, 200, 200, 0.3) !important;
display: block !important;
width: 35px !important;
height: 35px !important;
font-size: 0 !important;
border: 2px solid gray;
transition: background-color 0.3s !important;
}
#login-form .navigation a:hover {
background-color: rgba(200, 200, 200, 0.5) !important;
border: 2px solid lightgray;
}
#login-form .navigation li:nth-child(1) a {
margin-right: 10px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-plus'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='20' y1='8' x2='20' y2='14'%3E%3C/line%3E%3Cline x1='23' y1='11' x2='17' y2='11'%3E%3C/line%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
#login-form .navigation li:nth-child(2) a {
margin-left: 10px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-check'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cpolyline points='17 11 19 13 23 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* footer */
#footer {
display: none !important;
background: var(--darkgray) !important;
}
/* footer remove garbage */
#footer #copyright,
#footer #links {
display: none !important;
}
/* gamelist */
/* gamelist create game block background shit none */
.r .tr,
.r .bl,
.r .br,
.r.tl,
.gamelist-create {
margin-bottom: 0 !important;
background: none !important;
}
.gamelist-create .rc {
padding: 10px 0 !important;
}
.gamelist-create #savedModes {
margin-right: 10px !important;
}
.gamelist-create form {
display: inline-flex;
font-size: 0;
}
.gamelist-create form input#create_game,
.gamelist-create form input#delete {
color: transparent !important;
border: none !important;
background-color: rgba(200, 200, 200, 0.3) !important;
padding: 0 !important;
display: inline-flex !important;
width: 35px !important;
height: 35px !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: background-color 0.3s !important;
}
.gamelist-create form input#create_game:hover {
background-color: rgba(134, 226, 213, 0.5) !important;
}
.gamelist-create form input#delete:hover {
background-color: rgba(240, 52, 52, 0.5) !important;
}
.gamelist-create form input#create_game {
margin-right: 5px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
.gamelist-create form input#delete {
margin-right: 5px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
.gamelist-create form span input[type=button] {
margin-right: 5px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye-off'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
/* invite rating && friend */
/* friend styling only */
.notification-bar,
#top-popup {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
position: absolute !important;
left: inherit !important;
right: 0 !important;
background: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
width: 350px !important;
height: 200px !important;
opacity: .5 !important;
transition: all 1s !important;
}
.notification-bar:hover,
#top-popup:hover {
opacity: 1 !important;
}
.notification-bar .content,
#top-popup .content {
text-align: center !important;
}
.notification-bar .right,
#top-popup .right {
float: unset !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
flex-direction: column !important;
}
.notification-bar button,
#top-popup button {
top: 0 !important;
display: block !important;
height: 35px !important;
width: 250px !important;
}
.notification-bar input[type=button],
#top-popup input[type=button] {
width: 250px !important;
height: 35px !important;
}
.notification-bar button:nth-child(2),
#top-popup button:nth-child(2) {
top: -1px !important;
}
.notification-bar .right a {
top: -2px !important;
}
#top-popup .right a {
top: -1px !important;
}
.notification-bar .right a,
#top-popup .right a {
transition: all .1s !important;
position: relative !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 250px !important;
height: 35px !important;
border: 1px solid var(--white) !important;
margin: 0 !important;
padding: 0 !important;
}
.notification-bar .right a img,
#top-popup .right a img {
filter: invert(100%) brightness(2) !important;
}
.notification-bar .right a:hover,
#top-popup .right a:hover {
background: #772a34 !important;
border: 1px solid var(--red) !important;
}
/* rating hide */
#top-popup[style*="display: none"] {
display: none !important;
}
#top-popup {
top: -200px;
}
#top-popup[style*="top: "] {
top: 45px !important;
}
/* rating show */
#top-popup[style*="top: -"] {
top: -200px !important;
transition: all 1s !important;
}
/* notification invite friend default state */
.notification-bar,
.notification-bar.ng-scope.ng-hide,
.notification-bar.ng-scope.ng-hide.fixed {
z-index: 120 !important;
transition: all 2s !important;
top: -200px !important;
}
.notification-bar.ng-scope,
.notification-bar.ng-scope.fixed {
top: 45px !important;
}
/* invite friend button */
.notification-bar button {
border: 1px solid var(--white) !important;
color: var(--white) !important;
background: none !important;
}
.notification-bar button:hover {
border: 1px solid var(--blue) !important;
color: var(--deepgray) !important;
background: var(--blue) !important;
}
/* gamelist rangs labels */
#gamelist .rang1:after,
#gamelist .rang2:after,
#gamelist .rang3:after,
#gamelist .rang4:after,
#gamelist .rang5:after,
#gamelist .rang6:after,
#gamelist .rang7:after,
#gamelist .rang8:after,
#gamelist .rang9:after {
display: block;
margin-top: 0;
font-size: 10px;
}
#gamelist .rang1:after {
content: 'newbie' !important;
}
#gamelist .rang2:after {
content: 'amateur' !important;
}
#gamelist .rang3:after {
content: 'cabbie' !important;
}
#gamelist .rang4:after {
content: 'profi' !important;
}
#gamelist .rang5:after {
content: 'racer' !important;
}
#gamelist .rang6:after {
content: 'maniac' !important;
}
#gamelist .rang7:after {
content: 'superman' !important;
}
#gamelist .rang8:after {
content: 'cyber' !important;
}
#gamelist .rang9:after {
content: 'extra' !important;
}
/* gamelist list games spacing */
#gamelist .item * {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
/* gamelist hide past race mini button styles */
#gamelist-active button.hide-btn {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
color: var(--middlegray) !important;
}
#gamelist-active button.hide-btn:hover {
background: var(--deepgray) !important;
border: 1px solid var(--blue) !important;
color: var(--blue) !important;
}
/* gameist present && past race divider border */
#gamelist-active {
background: var(--darkgray) !important;
border-top: 1px solid var(--middlegray) !important;
}
/* gameist present && past race divider double border remove */
#gamelist #gamelist-active .item td {
border: none !important;
}
/* gamelist hideblock border && background */
#gamelist-active.hide-block {
background-color: var(--darkgray) !important;
border: none !important;
margin: 0 !important;
}
/* gamelist hide show all races vector eye icon */
#gamelist-active button .glyphicon,
/* gamelist animation type auto or disabled */
#gamelist .tl {
display: none !important;
}
#gamelist-active.hide-block h3,
#gamelist-active.hide-block h4 {
color: var(--middlegray) !important;
}
#gamelist-active.hide-block button {
background: var(--darkgray) !important;
color: var(--middlegray) !important;
border: 1px solid var(--middlegray) !important;
}
#gamelist-active.hide-block button:hover {
background: var(--deepgray) !important;
color: var(--blue) !important;
border: 1px solid var(--blue) !important;
}
.recent-game {
margin: 4px 4px !important;
border: 1px solid var(--middlegray) !important;
transition: all .2s !important;
}
.recent-game:hover {
border: 1px solid var(--blue) !important;
background: var(--deepgray) !important;
transition: all .2s !important;
}
#recent-games .recent-game-description,
#recent-games .recent-game-levels,
#recent-games .recent-game-name {
color: var(--white) !important;
}
/* gamelist nickname border bottom solid */
div#gamelist .name a {
border-bottom-style: solid !important;
}
/* gamelist remove races divider border */
div#gamelist .item td {
border-top: none !important;
}
/* gamelist custom info nubies or supermans && up */
div#gamelist .custominfo {
color: var(--white) !important;
}
#gamelist td.enter {
padding: 0 !important;
margin: 0 !important;
}
#gamelist td.sign {
padding: 0 4px 0 8px !important;
}
#gamelist td.enter div.enter {
padding: 0 !important;
margin: 0 5px 0 0 !important;
}
/* gamelist change race icon for competition games */
#gamelist td.enter a.competition {
display: block !important;
box-sizing: border-box !important;
width: 63px !important;
height: 63px !important;
background: var(--competition) !important;
background-size: contain !important;
padding-left: 63px !important;
}
#gamelist td.enter a.competition:hover {
display: block !important;
box-sizing: border-box !important;
width: 63px !important;
height: 63px !important;
padding-left: 63px !important;
filter: brightness(.8) !important;
}
/* gamelist change race icon for simple games */
#gamelist td.enter a {
display: block !important;
box-sizing: border-box !important;
width: 63px !important;
height: 63px !important;
background: var(--race) !important;
background-size: contain !important;
padding-left: 63px !important;
filter: brightness(.8) !important;
}
#gamelist td.enter a:hover {
display: block !important;
box-sizing: border-box !important;
width: 63px !important;
height: 63px !important;
padding-left: 63px !important;
}
/* gamelist remove mini clock icon */
#gamelist .remain span {
color: var(--white) !important;
background-position: 0 -25px !important;
}
.gamelist-create form {
color: var(--white) !important;
}
#savedModes {
border: 1px solid var(--white) !important;
}
/* chat log */
div.logdate {
color: var(--orange) !important;
}
div.rct {
background: var(--darkgray) !important;
}
div.rct div.rc {
color: var(--white) !important;
}
.mn {
color: var(--blue) !important;
}
.mne {
color: var(--red) !important;
}
html[xmlns*='xhtml'] {
font: 18px Tahoma !important;
color: var(--white) !important;
}
html[xmlns*='xhtml'] a[href*='klavogonki.ru/chatlogs/'] {
background-color: var(--red) !important;
color: var(--deepgray) !important;
padding: 1px !important;
border-radius: 3px !important;
}
.rcod,
.rcoe,
.rcot,
.rcos {
background: var(--deepgray) !important;
}
/* chat */
/* chat new message from main block */
#chat-title span.new {
background: orange !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
color: var(--deepgray) !important;
transition: .2s !important;
}
/* chat main messages container overflow hidden fix */
#chat-container .messages-content>div {
overflow: hidden !important;
margin-bottom: 50px !important;
}
/* chat fix firefox user table select border cell */
#chat-fixed-placeholder table {
-moz-user-select: none !important;
-webkit-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
#chat-fixed-placeholder .messages p,
#chat-fixed-placeholder .userlist a {
-moz-user-select: text !important;
-webkit-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
/* chat user script users count */
.chat .userlist .userListCnt {
display: flex !important;
height: 16px !important;
width: 32px !important;
background: var(--deepgray) !important;
justify-content: center !important;
position: absolute !important;
top: 0 !important;
right: 35px !important;
align-items: center !important;
font: 12px Consolas;
border: 1px solid var(--blue) !important;
color: var(--blue) !important;
}
/* every 10 messages space top OFF */
/* .messages p:nth-child(10n) {
padding-top: 20px !important;
} */
.chat {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* chat blocked user nickname color */
ins.revoked a {
text-decoration: none !important;
color: var(--red) !important;
}
/* hide old icon link go to user profile */
.chat .userlist ins a.info img {
display: block !important;
height: 8px !important;
width: 8px !important;
opacity: 0 !important;
}
/* fix userlist go profile button position */
/* chat blocked user nickname add offline icon */
.chat .userlist ins a.info {
margin-left: 5px !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: radial-gradient(ellipse at center, #baf2ba 0%, #2ef459 49%, #26ef80 52%, #1e894b 100%) !important;
}
/* chat blocked user nickname add offline icon */
.chat .userlist ins.revoked a.info {
margin-left: 5px !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
background: radial-gradient(ellipse at center, #f2baba 0%, #f42e2e 49%, #ef2626 52%, #891e1e 100%) !important;
border-radius: 50% !important;
}
.chat .userlist img[src="/img/moderator_icon-2.gif"] {
margin-left: 5px !important;
box-sizing: border-box !important;
display: inline-block !important;
width: 21px !important;
padding-left: 21px !important;
background: url('https://i.imgur.com/aW1ZXJc.png') no-repeat !important;
height: 28px !important;
}
.chat .userlist a[data-user="474104"] {
color: white !important;
}
/* me && blocked messages */
.system-message {
color: lightcoral !important;
font-size: 14px !important;
background: var(--deepgray) !important;
border: 1px solid rgba(240, 128, 128, 0.4) !important;
padding: 6px !important;
border-radius: 4px !important;
}
p:has(.system-message) {
margin: 12px 0 !important;
}
/* code tag preview in chat */
code {
color: var(--red) !important;
filter: hue-rotate(120deg) !important;
font-size: 14px !important;
background: var(--deepgray) !important;
border: 1px solid rgba(225, 20, 0, .5) !important;
padding: 0 10px !important;
}
/* chat bottom space rm */
.chat .messages,
.chat .messages .chat-guest {
padding: 4px !important;
}
/* chat when user not registered && logged */
.chat .messages .chat-guest {
background-color: var(--darkgray) !important;
color: #565656 !important;
border: none !important;
font-weight: lighter !important;
}
.chat .messages .chat-guest a {
display: none !important;
}
/* chat private text color messages */
.chat .messages .private {
color: var(--orange) !important;
font-weight: lighter !important;
font-size: 14px !important;
padding: 3px !important;
}
/* chat private text invert */
.chat .messages .room.private {
filter: hue-rotate(20deg) !important;
font-size: 16px !important;
}
/* chat smiles block tabs active && not selected */
.chat .userlist .smile-groups-action {
color: var(--white) !important;
}
.chat .userlist .smile-groups-action.active {
background-color: var(--middlegray) !important;
color: var(--deepgray) !important;
}
/* chat smiles block tabs main block bg color */
.chat .userlist .smile-groups {
background: var(--darkgray) !important;
}
/* chat nickname panel hide button color */
.chat .panel-btn i {
border: 3px solid var(--orange) !important;
height: 20px !important;
border-radius: 5px !important;
border-radius: 3px !important;
}
/* chat main messages text color */
.messages-content {
color: var(--white) !important;
}
/* chat wide button hide show bg color && hide show userpanel button */
.chat .panel-btn:hover,
#chat-title table .dummy {
background: var(--deepgray) !important;
}
/* chat username <> brackets make invisible */
.chat .messages .username {
visibility: hidden !important;
}
/* return visibility of the nickname after hiding <> brackets */
.chat .messages .username span[data-user] {
visibility: visible !important;
filter: invert(100%) !important;
}
#chat-title table .pin,
#chat-title table .height-btn {
position: absolute !important;
right: 18px !important;
background: transparent !important;
transition: filter 0.15s !important;
filter: brightness(0.5) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#chat-title table .pin:hover,
#chat-title table .height-btn:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") !important;
filter: brightness(1.2) !important;
}
#chat-title table .height-btn.height-btn-max {
position: absolute !important;
right: 18px !important;
background: transparent !important;
transition: filter 0.15s !important;
filter: brightness(0.5) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minimize'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3'%3E%3C/path%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#chat-title table .height-btn.height-btn-max:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minimize'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3'%3E%3C/path%3E%3C/svg%3E") !important;
filter: brightness(1.2) !important;
}
/* chat close button */
#chat-title table .mostright {
position: absolute !important;
right: 0 !important;
background-color: transparent !important;
filter: brightness(0.5) !important;
transition: filter 0.15s !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat !important;
background-position: center !important;
}
#chat-title table .mostright:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
filter: brightness(1.2) !important;
}
#chat-title table .c span {
padding: 0 !important;
}
#chat-title table .c:hover {
background: var(--black) !important;
}
#chat-title table .active.c {
background: var(--blue) !important;
filter: brightness(0.8) !important;
}
/* chat buttons */
.chat table th {
padding-right: 0 !important;
}
.chat .messages table tr {
display: flex !important;
}
.chat .messages table td:nth-child(3),
.chat .messages table td:nth-child(4),
.chat .messages table td:nth-child(5) {
display: inline-flex !important;
flex-direction: row-reverse !important;
height: 35px !important;
background-color: #3b3b3b !important;
}
.chat .messages table td:nth-child(2) {
width: 35px !important;
height: 35px !important;
display: inline-flex !important;
}
.chat .messages table td:nth-child(2):after {
position: relative !important;
left: -26px !important;
z-index: 0 !important;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='DarkTurquoise' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-send'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E");
font: 26px Consolas !important;
color: white !important;
display: flex !important;
align-items: center !important;
}
.chat .messages table td div:nth-child(1) {
width: 0 !important;
height: 0 !important;
}
/* filter mat && smiles button */
.chat .messages table td .chat-opt-btn {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 35px !important;
height: 35px !important;
margin: 0 !important;
padding: 0 !important;
background: #3b3b3b !important;
border: none !important;
}
.chat .messages table td .chat-opt-btn:hover,
.chat .messages table td .chat-opt-btn.active {
background: #4b4b4b !important;
border: none !important;
}
.chat .messages table input.send {
display: block !important;
color: transparent !important;
background: rgba(128, 128, 128, .19) !important;
border: none !important;
width: 35px !important;
height: 35px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1 !important;
}
.chat .messages table input.send:hover {
background: rgba(128, 128, 128, .39) !important;
}
.chat .messages table input[value=BBCode] {
color: var(--white) !important;
background: #3b3b3b !important;
border: none !important;
}
.chat .messages table input[value=BBCode]:hover {
color: var(--white) !important;
background: #4b4b4b !important;
border: none !important;
}
/* chat input text */
/* chat messages input text color && border none */
.chat .messages table input.text {
border: none !important;
background: var(--darkgray) !important;
font: 14px Tahoma !important;
color: var(--white);
line-height: 25px !important;
}
/* add border divider messages content && input text || buttons */
.chat .messages table tr {
border-top: 1px solid var(--middlegray) !important;
}
/* chat messages font size */
.chat .messages {
font-size: 14px !important;
}
.chat .messages .time {
visibility: hidden !important;
}
/* chat messages usual message time */
.chat .messages .time span {
cursor: pointer !important;
visibility: visible !important;
color: var(--blue) !important;
}
.chat .messages .time .clickable:hover {
color: var(--lightblue) !important;
text-decoration: none !important;
}
/* is mention time for me */
.chat .messages .time[style*='background-color: yellow'] {
background: transparent !important;
}
.chat .messages .time[style*='background-color: yellow'] .clickable {
visibility: visible;
color: var(--blue) !important;
}
/* chat nickname block text decoration none */
.chat .userlist ins a.name {
text-decoration: none !important;
}
.chat .userlist ins a.name:hover {
text-decoration: underline !important;
}
/* chat messages container do background dark */
.chat .panel-btn,
.chat .userlist,
.chat .messages,
.chat .messages .messages-border {
background: var(--darkgray) !important;
}
/* chat messages container remove borders */
.chat .messages div {
border: none !important;
}
/* chat replace img buttons ignore, filter, smilies */
/* filter */
.chat .messages img[src='/img/filter.png'] {
box-sizing: border-box !important;
padding-left: 20px !important;
height: 20px !important;
width: 20px !important;
background: var(--filterOFF) !important;
/* fix site shit */
top: 0 !important;
left: 0 !important;
}
/* exclamation */
.chat .messages table td img[src*='exclamation'] {
box-sizing: border-box !important;
padding-left: 35px !important;
margin-top: 8px !important;
width: 35px !important;
background: var(--ignoreBlue) !important;
position: relative !important;
left: 7px !important;
}
/* smilies not active */
.chat .chat-opt-btn img[src='/img/smilies/smile.gif'] {
box-sizing: border-box !important;
padding-left: 20px !important;
height: 20px !important;
width: 20px !important;
background: var(--smiliesNotActive) !important;
}
/* filter active */
.chat .messages .active img[src='/img/filter.png'] {
box-sizing: border-box !important;
padding-left: 20px !important;
height: 20px !important;
width: 20px !important;
background: var(--filterON) !important;
/* fix site shit */
top: 0 !important;
left: 0 !important;
}
/* exclamation active */
.chat .messages .active img[src*='exclamation'] {
box-sizing: border-box !important;
padding-left: 20px !important;
height: 20px !important;
width: 20px !important;
background: var(--ignoreOrange) !important;
}
/* smilies active */
.chat .chat-opt-btn.active img[src='/img/smilies/smile.gif'] {
box-sizing: border-box !important;
padding-left: 20px !important;
height: 20px !important;
width: 20px !important;
background: var(--smiliesActive) !important;
}
/* fuck the rules */
.chat .messages .chat-header,
/* chat remove img parts shit from tabs */
#chat-title table .active.mostleft.l,
#chat-title table .active.r,
#chat-title table .mostleft.l,
#chat-title table .active.l,
#chat-title table .r,
#chat-title table .l {
display: none !important;
}
/* chat active room button text color */
#chat-title table .active.c {
color: var(--deepgray) !important;
}
/* chat not active room button text && background color */
#chat-title table .c {
background: var(--deepgray) !important;
color: var(--white) !important;
}
/* car styles */
.car .name {
color: var(--white) !important;
}
/* race */
/* race nickname block width */
.name_content {
width: 150px !important;
overflow: visible !important;
}
/* race remove margin to do more space around */
.gameblock {
margin: 0 !important;
}
/* race status block under typeblock bg color */
#status {
padding: 0 !important;
background: var(--darkgray) !important;
}
body #status #host_start {
border-bottom: 1px solid var(--blue) !important;
}
#status table {
width: 100% !important;
}
#status table tr:nth-child(1) {
display: block !important;
width: 75% !important;
}
#status table tr:nth-child(2) {
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
}
body #status #gamedesc {
vertical-align: middle !important;
padding-bottom: 0 !important;
}
body #status-inner {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: center;
}
body #status-inner #waiting[style*="none"] {
display: none !important;
}
body #status-inner #waiting {
position: absolute !important;
color: transparent !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: row-reverse !important;
animation: wait 1s infinite ease-in-out;
}
@keyframes wait {
0% {
opacity: 1
}
50% {
opacity: .3
}
100% {
opacity: 1
}
}
body #status-inner #racing[style*="display: none"] {
display: none !important;
}
body #status-inner #racing {
position: absolute !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
body #status-inner #paused {
width: 100% !important;
margin-left: 70px !important;
}
#waiting_timeout {
position: absolute !important;
color: lightcoral !important;
font-size: 25px !important;
display: flex !important;
align-items: center;
justify-content: center;
height: 40px !important;
width: 100px !important;
background: #693333 !important;
border: 1px solid red !important;
}
#racing_time {
color: lightgreen !important;
font-size: 25px !important;
background: #2C482C !important;
height: 40px !important;
width: 100px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
border: 1px solid green !important;
}
/* race advertisement remove */
#playads {
display: none !important;
}
body #params {
order: 1 !important;
width: 270px !important;
}
/* race settings links styles */
#params a {
text-decoration: underline !important;
border-bottom: none !important;
}
/* klavotools sort btn's */
body #sort-panel .sort-button {
text-align: center !important;
width: 60px !important;
padding-top: 20px !important;
}
body #sort-panel div[style*="float: left"] {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 175px !important;
text-align: center !important;
}
body #sort-panel div[style*="float: left"] label,
body #sort-panel div[style*="float: left"] input {
margin: 0 !important;
}
/* race settings panel sliders styles */
/* slider handle */
.slider .handle {
background: var(--white) !important;
border: 2px solid var(--white) !important;
border-radius: 50% !important;
height: 14px !important;
width: 14px !important;
margin: 1px !important;
transition: all .2s !important;
}
.slider .handle:hover {
background: var(--middlegray) !important;
}
/* slider road */
.slider {
background: var(--deepgray) !important;
border: 2px solid var(--middlegray) !important;
border-radius: 10px !important;
box-sizing: content-box !important;
}
/* slider disabled */
#params .slider.off {
background: var(--darkgray) !important;
}
/* race settings && friends onine panel styles */
#params,
#play-right #invite {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
color: var(--white) !important;
}
#play-right #invite {
order: 0 !important;
width: 270px !important;
}
/* klavotools toggle settings btn */
body #play-right>div.play-right-toggle {
background: var(--middlegray) !important;
color: var(--deepgray) !important;
transition: all .2s !important;
top: 325px !important;
}
body #play-right>div.play-right-toggle:hover {
background: var(--blue) !important;
}
body #play-right>div.play-right-toggle .glyphicon {
top: 0 !important;
}
/* invite friends input styles */
#invite-link {
color: var(--blue) !important;
border: none !important;
border-bottom: 1px solid var(--middlegray) !important;
background: none !important;
}
/* invite friends links color */
#play-right #invite a {
color: var(--blue) !important;
}
#play-right #invite a:hover {
color: var(--lightblue) !important;
}
/* destroy race humans */
.people img {
display: none !important;
}
/* remove road user bg color */
.player {
background: none !important;
}
/* now set color to road normal to be */
#players {
overflow: visible !important;
background-color: var(--darkgray) !important;
}
/* race road rm default divider */
.player .divider {
display: none !important;
}
/* alternative devider */
.player {
padding: 10px 0 10px 0 !important;
border-bottom: 1px solid var(--middlegray) !important;
}
.player .rating {
display: flex !important;
width: 70% !important;
align-items: center !important;
justify-content: space-between !important;
height: 30px !important;
}
.player .rating .stats {
color: var(--middlegray) !important;
left: 135px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: space-around !important;
gap: 1em !important;
}
.player .rating .rating_gained {
background: none !important;
background: var(--orange) !important;
color: var(--darkgray) !important;
}
#players-count-lbl {
float: unset !important;
font-size: 13px !important;
}
/* race lable point % count */
#players-count-lbl b {
color: var(--darkgray) !important;
background: var(--blue) !important;
}
#rating_loading {
background: none !important;
bottom: 45px !important;
left: -50px !important;
font-size: 12px !important;
color: var(--blue) !important;
}
#speedpanel #speed-label,
#speedpanel #errors-label {
color: #bbe4ff !important;
}
#speedpanel #speed-label {
top: 60px !important;
}
#speedpanel #errors-label {
top: 35px !important;
}
/* race book bg white bg border remove */
.imobilco-book .imobilco-cover .co {
background: none !important;
}
/* race game description color */
#gamedesc {
color: var(--white) !important;
}
#errors_tab {
background: none !important;
}
#errors_tab a {
text-decoration: underline !important;
border-bottom: none !important;
}
#errors_text p {
background-color: var(--deepgray) !important;
color: var(--white) !important;
}
#errors_text p.premium_abra_errors a {
color: var(--blue) !important;
}
#errors_text p.premium_abra_errors a:hover {
color: var(--lightblue) !important;
}
/* most difficult typing letters style */
#errors_text p.premium_abra_errors span {
color: var(--blue) !important;
background: none !important;
border-bottom: 1px solid var(--blue) !important;
}
#errors_text p.premium_abra_errors sup {
color: var(--white) !important;
}
/* remove how to play */
#report {
display: none !important;
}
/* race how to race && report to text links rules */
#report a {
border-bottom: 1px solid var(--blue) !important;
}
/* remove notification about mistype */
#fixtypo {
display: none !important;
}
/* race normal voc name color white */
.gametype-normal {
color: var(--white) !important;
}
/* race main typeblock bg color and border around */
#typeblock {
background: var(--darkgray) !important;
border: none !important;
}
/* race typeblock darken around */
#typeblock .tl,
#typeblock .tr,
#typeblock .bl,
#typeblock .br {
background: none !important;
}
/* race hidden text before the game starts bg color && text color */
#typeblock #hiddentext {
background-color: var(--darkgray) !important;
border: none !important;
color: var(--blue) !important;
font-weight: lighter !important;
}
/* race typeblock input when you can't type yet */
#typeblock .disabled {
color: var(--middlegray) !important;
background: var(--darkgray) !important;
border: none !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* qualification correct error text bg */
#typeblock .correct_errors_text {
background: var(--darkgray) !important;
color: var(--white) !important;
}
/* qualification race img adjustments */
#typeblock img[src*="tmp/text/"] {
filter: invert(0.9) brightness(0.83) sepia(1) hue-rotate(200deg) saturate(0.4) !important;
}
/* race typeblock input text default color */
#typeblock #inputtext {
color: var(--white);
background: var(--deepgray) !important;
border: none !important;
padding: 8px;
box-sizing: border-box;
}
#typeblock .disabled {
color: transparent !important;
}
/* race typeblock input text when error text color && bg color */
#typeblock #inputtext[class="error"] {
background: #F06C6C !important;
border: none !important;
color: var(--deepgray) !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* rae typeblock rm text decoration */
#typeblock #typetext .highlight {
text-decoration: none !important;
}
/* race typeblock never do opacity with js */
#typeblock #typetext {
opacity: 1 !important;
}
/* race typeblock typed text color */
#typeblock #beforefocus {
color: var(--middlegray) !important;
}
/* race typeblock typing word or letter color */
#typeblock #typefocus {
color: lightgreen !important;
}
/* race tyepblock not typed text yet color */
#typeblock #afterfocus {
color: var(--white) !important;
}
/* race report text textarea */
#report_reason_input {
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* race people block */
.gameblock .people {
display: none !important;
}
/* game handles */
.gameblock .rc .handle,
.gameblock .handle {
margin-left: -5px !important;
opacity: 0.5 !important;
border-radius: 50% !important;
height: 10px !important;
width: 10px !important;
background: var(--middlegray) !important;
}
.gameblock .rc .handle:hover,
.gameblock .handle:hover {
background: var(--blue) !important;
}
body #players-block .handle {
top: -5px !important;
}
/* race typeblock vock name && to list game && play another game links color */
#typeblock #bookinfo a,
#typeblock #bookinfo #again a {
color: var(--blue) !important;
}
#typeblock #bookinfo a:hover,
#typeblock #bookinfo #again a:hover {
color: var(--lightblue) !important;
}
/* race typeblock you typed this && < ctrl ctrl > color */
#typeblock #bookinfo #again .hotkey,
#typeblock #bookinfo div {
color: var(--middlegray) !important;
}
/* race typeblock quotes */
.quoteleft,
.quoteright {
filter: brightness(.3) !important;
}
.gametypes .gametype-sign,
#gamelist .gametype-sign:not(.qual),
#status .gametype-sign:not(.qual) {
background-size: contain !important;
margin: 0 0 0 6px !important;
}
/* signs img replacement */
.sign-normal {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--usual) !important;
padding-left: 0 !important;
filter: brightness(.8) !important;
}
.sign-noerror {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--crash) !important;
padding-left: 0 !important;
}
.sign-chars {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--letters) !important;
padding-left: 0 !important;
}
.sign-marathon {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--marathone) !important;
padding-left: 0 !important;
}
.sign-sprint {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--infinity) !important;
padding-left: 0 !important;
}
.sign-abra {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--abra) !important;
padding-left: 0 !important;
}
.sign-digits {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--digits) !important;
padding-left: 0 !important;
filter: brightness(.8) !important;
}
.sign-voc {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--dictionary) !important;
padding-left: 0 !important;
}
.sign-referats {
display: block !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
background: var(--yandex) !important;
padding-left: 0 !important;
}
#create .gametypes tr.active {
background: var(--deepgray) !important;
}
.gametypes tr:hover {
background: var(--deepgray) !important;
}
.gametypes .note {
color: var(--white) !important;
}
#premium_abra input {
top: 2px !important;
left: 2px !important;
}
#premium_abra label {
vertical-align: middle !important;
background: none !important;
}
#premium_abra,
#premium_abra a {
color: var(--blue) !important;
}
#premium_abra a:hover {
color: var(--lightblue) !important;
}
.gametypes td {
border-bottom: 1px solid var(--middlegray) !important;
}
.gametypes h4 {
color: var(--blue) !important;
}
#create .buttons {
display: flex !important;
justify-content: space-between !important;
}
#create .buttons input {
transition: all .5s !important;
padding: 0 !important;
margin: 0 !important;
width: 235px !important;
height: 50px !important;
}
#create .buttons input.create_game {
background: var(--createNormal) !important;
filter: brightness(.8) !important;
}
#create .buttons input.create_game:hover {
background-position: unset !important;
filter: brightness(.8) hue-rotate(180deg) !important;
}
#create .buttons input.save_game {
background: var(--saveNormal) !important;
filter: brightness(.8) !important;
}
#create .buttons input.save_game:hover {
background-position: unset !important;
filter: brightness(.8) hue-rotate(180deg) !important;
}
#create * {
padding: 2px !important;
}
#create dd .params {
background-color: transparent !important;
border: 1px solid var(--middlegray) !important;
}
body select,
body select #savemodes {
background: var(--deepgray) !important;
color: var(--white) !important;
border: none !important;
}
/* forum */
/* create new branch forum name input text */
input[id="title-input"] {
background: var(--darkgray) !important;
}
/* forum send && preview buttons */
#write-block>p {
display: flex !important;
}
#add-topic #text-controls {
position: absolute !important;
margin-bottom: 100px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
#add-topic #text-controls tbody {
display: flex !important;
justify-content: center !important;
}
#posts-list .post input[type=button][onclick*=submit],
#add-topic dd input[name=send] {
float: left !important;
}
#posts-list .post input[type=button],
#write-block>p>input,
#add-topic input[type=submit] {
color: var(--white) !important;
width: 50% !important;
height: 35px !important;
background: #3b3b3b !important;
border: 1px solid var(--middlegray) !important;
transition: all .1s !important;
}
#posts-list .post input[type=button]:hover,
#write-block>p>input:hover,
#add-topic input[type=submit]:hover {
background: var(--deepgray) !important;
color: var(--white) !important;
border: 1px solid var(--white) !important;
transition: all .1s !important;
}
#write-block>p>input[name=send] {
margin-right: 1px !important;
}
#write-block>p>input[name=preview] {
margin-left: 1px !important;
}
/* forum all post img opacity none on hover */
#posts-list .post-container .text img:hover {
transition: all 0.2s !important;
opacity: 1 !important;
}
/* moved forum messages bg fix */
#posts-list .post-moved th,
#posts-list .post-moved td {
color: var(--white) !important;
background: none !important;
}
#posts-list .posth .moved {
color: var(--white) !important;
}
/* textarea */
/* link styles */
span[style*="990000"] {
color: var(--red) !important;
}
span[style*="000099"] {
color: var(--blue) !important;
}
span[style*="999999"] {
color: var(--white) !important;
}
/* text color klavotools */
/* voc */
span[style*='524ca7'] {
color: #6f67e4 !important;
}
/* sprint */
span[style*='833f3a'] {
color: #bd5b54 !important;
}
/* letters */
span[style*='b55900'] {
color: #e36f00 !important;
}
/* maraphone */
span[style*='d43e68'] {
color: #f34777 !important;
}
/* no mistake */
span[style*='4692aa'] {
color: rgb(85, 177, 206) !important;
}
/* yandex */
span[style*='698725'] {
color: rgb(135, 174, 48) !important;
}
/* abra */
span[style*='3d4856'] {
color: rgb(133, 154, 180) !important;
}
/* nubie */
span[style*='8d8d8d'] {
color: #cccccc !important;
}
/* registered nubie */
span[style*='4f9a97'] {
color: #76e4e0 !important;
}
/* taxi */
span[style*='187818'] {
color: #2cd42c !important;
}
/* profi */
span[style*='ba5800'] {
color: #ccbc00 !important;
}
/* racer */
span[style*='ba5800'] {
color: #ff8b22 !important;
}
/* maniac */
span[style*='bc0143'] {
color: #ff1b6b !important;
}
/* superman */
span[style*='5e0b9e'] {
color: #a03eec !important;
}
/* cyber racer */
span[style*='2e32ce'] {
color: #575bff !important;
}
/* extra cyber racer */
span[style*='061956'] {
color: #2b59ec !important;
}
#profile-block .user-content {
margin-top: 15px !important;
}
#profile-block .user-content .comments .write textarea {
border: none !important;
border: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
}
#profile-block .user-content .comments .title a.name:not(:hover) {
color: var(--blue) !important;
}
#topics-list .item,
#topics-list .even,
#topics-list .item.even td {
border: none !important;
background: var(--darkgray) !important;
}
#topics-list .item td {
border-bottom: 1px solid var(--middlegray) !important;
}
#posts-list table.foot td.pages {
display: none !important;
}
.paginator {
margin-top: 0 !important;
margin-bottom: 0 !important;
position: absolute !important;
width: 60px !important;
font-size: 0 !important;
left: -55px !important;
}
/* forum pages note */
.paginator b {
display: none !important;
}
.pages {
opacity: 0.5 !important;
color: var(--deepgray) !important;
background: transparent !important;
padding: 10px !important;
position: fixed !important;
top: 85px !important;
right: 0px !important;
z-index: 10 !important;
transition: opacity 0.2s !important;
display: flex !important;
font-size: 5px !important;
}
/* forum title edit your post img */
body #topic-title-block img[src*="/img/pencil"] {
display: inline-block !important;
box-sizing: border-box !important;
height: 16px !important;
width: 16px !important;
padding-left: 16px !important;
background: var(--forumEdit) !important;
}
/* forum code pastie */
body .codemain {
color: lightgreen !important;
border: 1px dashed lightgreen !important;
border-left: 3px solid lightgreen !important;
}
.pages:hover {
opacity: 1 !important;
transition: opacity 0.2s !important;
}
/* ctrls display none global */
.ctrls i {
display: none !important;
}
.quotemain {
background: rgba(200, 200, 200, .05) !important;
color: var(--orange) !important;
border: 1px solid #4d4d4d !important;
}
#forums-list .item td {
padding: 0 !important;
height: 75px !important;
position: relative !important;
border: none !important;
}
#forums-list .item a.short-description,
#forums-list .item .long-description {
position: absolute !important;
}
#forums-list .item .long-description {
margin-top: 0px !important;
margin-left: 10px !important;
}
#forums-list .item a.short-description {
color: var(--blue) !important;
text-decoration: none !important;
display: block !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
padding-left: 10px !important;
padding-top: 5px !important;
z-index: 1 !important;
}
#forums-list .item a.short-description:hover {
color: var(--lightblue) !important;
background-color: rgba(0, 0, 0, .15) !important;
}
#forums-list .item .long-description {
color: var(--white) !important;
}
#forums-list .feed-link a {
color: var(--blue) !important;
}
#forums-list .feed-link a:hover {
color: var(--lightblue) !important;
}
.topic-cnt,
.post-cnt {
color: var(--white) !important;
}
#posts-list .post th {
width: 100% !important;
}
#posts-list .post th .rang {
color: var(--white) !important;
}
#posts-list .post .text {
color: var(--white)
}
#posts-list .posth {
background: transparent !important;
border-bottom: 1px solid var(--middlegray) !important;
}
#posts-list .posth.admin {
color: lightgreen !important;
background: transparent !important;
border-bottom: 1px solid lightgreen !important;
}
#posts-list .post th {
padding: 10px !important;
display: flex !important;
justify-content: center !important;
}
#posts-list .post th,
#posts-list .posth th,
#posts-list .posth td {
border: none !important;
}
#posts-list .post th,
#posts-list .post td {
border-bottom: none !important;
}
.hidemain {
margin: 15px 0 !important;
border-color: var(--middlegray) !important;
background: var(--deepgray) !important;
}
.hidemain .hidetop {
font-size: 0 !important;
padding-left: 0 !important;
background: none !important;
background-color: var(--middlegray) !important;
height: 15px !important;
margin: 5px !important;
}
.hidetop.expanded {
font-size: 0 !important;
padding-left: 0 !important;
background: none !important;
background-color: var(--red) !important;
height: 15px !important;
margin: 5px !important;
}
/* forum span links */
#posts-list a[rel="nofollow"],
#posts-list a[rel="nofollow"]:hover {
text-decoration: none !important;
}
#posts-list a[rel="nofollow"]:hover {
filter: invert(.3) !important;
}
#posts-list span[style*=background-color] {
background-color: var(--darkgray) !important;
}
/* posts list colors correction */
span[style="color:#061956"] {
color: var(--blue) !important;
}
span[style="color:#b32004"] {
color: #ff4e2d !important;
}
span[style="color:#6116bd"] {
color: #bf8bff !important;
}
span[style="color:#007800"] {
color: #0dec0d !important;
}
#posts-list table.foot {
margin-bottom: 80px !important;
}
#posts-list .post td .post-container {
padding-right: 100px !important;
}
#add-topic dd {
margin: 10px 0 !important;
}
#add-topic dd input#title-input {
width: 100% !important;
padding: 10px !important;
}
#add-topic dt {
display: none !important;
}
#posts-list .post textarea,
#posts-list .write textarea,
#add-topic textarea {
position: static !important;
font-family: 'Montserrat', sans-serif !important;
border: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
color: var(--white) !important;
font-size: 14px !important;
width: 100% !important;
transition: background 0.3s !important;
height: 40px !important;
cursor: pointer !important;
resize: none !important;
padding: 10px !important;
overflow: hidden !important;
z-index: 100 !important;
}
#posts-list .post textarea:hover,
#posts-list .write textarea:hover,
#add-topic textarea:hover {
background: var(--deepgray) !important;
opacity: 0.8 !important;
}
#posts-list .post textarea:focus,
#posts-list .write textarea:focus,
#add-topic textarea:focus {
background: var(--deepgray) !important;
width: 80vw !important;
height: 60vh !important;
position: fixed !important;
top: calc(0vh - -100px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 16px !important;
border-bottom: 3px solid var(--orange) !important;
overflow-Y: auto !important;
}
#fast-reply-controls td {
opacity: 0.8 !important;
}
/* forum default avatar none uploaded */
div.avatar_big {
display: flex !important;
flex-direction: column !important;
justify-content: space-around !important;
width: 80px !important;
height: 110px !important;
margin-right: 0 !important;
}
div.avatar_big .rang {
margin: 0 !important;
}
div.avatar_big img {
display: block !important;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
}
div.avatar_big img[src*="dummy"] {
filter: invert(83%) !important;
}
/* forum level icon */
div.avatar_big .level_icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
width: 23px !important;
height: 23px !important;
background: #5f5118 !important;
bottom: 0 !important;
right: 0 !important;
border-radius: 50% !important;
border: 2px solid gold !important;
box-sizing: content-box;
}
div.avatar_big .level_icon i {
top: 0 !important;
color: gold !important;
font-size: 11px;
font-weight: normal !important;
}
#posts-list .post .post-opts a[onclick*="edit"],
#posts-list .post .post-opts a[onclick*="reply"],
#forums-list .item td.last-post .go,
#topics-list .item td.last-post .go {
display: inline-flex !important;
font-size: 0 !important;
width: 35px !important;
height: 35px !important;
border-radius: 50% !important;
background-color: rgba(200, 200, 200, 0.3) !important;
transition: all 0.15s !important;
}
#topics-list .item td.last-post {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 47px !important;
}
#topics-list .item td.last-post .go {
top: 0 !important;
margin-left: 10px !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat !important;
background-position: center center !important;
}
#topics-list .item td.last-post .go:hover {
background-color: rgba(134, 255, 249, 0.5) !important;
background-position: 10px center !important;
background-image: url('data:image/svg+xml,');
}
#forums-list .item td.last-post .go {
position: absolute !important;
top: 50% !important;
right: 0 !important;
transform: translateY(-50%) !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat !important;
background-position: center center !important;
}
#forums-list .item td.last-post .go img,
#topics-list .item td.last-post img {
height: 0 !important;
}
#forums-list .item td.last-post .title {
margin-right: 50px !important;
}
#forums-list .item td.last-post .go:hover {
background-color: rgba(134, 255, 249, 0.5) !important;
background-position: 10px center !important;
background-image: url('data:image/svg+xml,');
}
#posts-list .post .post-opts a[onclick*="edit"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
#posts-list .post .post-opts a[onclick*="edit"]:hover {
background-color: rgba(134, 226, 213, 0.5) !important;
}
#posts-list .post .post-opts a[onclick*="reply"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-corner-down-left'%3E%3Cpolyline points='9 10 4 15 9 20'%3E%3C/polyline%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'%3E%3C/path%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
#posts-list .post .post-opts a[onclick*="reply"]:hover {
background-color: rgba(245, 215, 110, 0.5) !important;
}
/* fuel */
/* fuel amount container */
.fuel-dlg-pay .amount {
background: var(--deepgray) !important;
border: 1px solid var(--middlegray) !important;
}
/* fuel i wanna points count input */
input.ng-pristine {
border: 1px solid var(--middlegray) !important;
}
/* fuel active item */
.fuel-dlg-pay ul.benefit>li.active,
.fuel-dlg-pay ul.benefit>li:hover {
background: var(--deepgray) !important;
}
/* fuel my name thanks */
.fuel-dlg-pay .bonus.clickable {
background: var(--darkgray) !important;
}
.fuel-dlg-pay .bonus.clickable:hover {
background: var(--deepgray) !important;
}
/* fuel get premium options */
.fuel-dlg-pay ul.benefit>li .pro-options>li.active,
.fuel-dlg-pay ul.benefit>li .pro-options>li {
background: var(--darkgray) !important;
}
.fuel-dlg-pay ul.benefit>li .pro-options>li {
border: 1px solid var(--middlegray) !important;
}
/* hidden fuel about */
.fuel-root .faq {
height: 0 !important;
visibility: hidden !important;
margin-bottom: 0 !important;
}
/* fuel bg color top and bottom blocks */
.fuel-root .fuel-content,
.fuel-root .thankyou {
background-color: var(--darkgray) !important;
}
/* fuel dividers */
.fuel-root .fuel-content {
border-bottom: 1px solid var(--middlegray) !important;
}
.fuel-root .thankyou {
padding: 0 !important;
}
/* fuel goal more information */
.fuel-root .fuel-content .right-block .goal-list .goal {
background: var(--deepgray) !important;
border-bottom: 1px solid var(--blue) !important;
}
/* aim && aim point */
.fuel-root .fuel-content .right-block .goal-list .goal h4,
.fuel-root .fuel-content .right-block .goal-list .goal h4 .remained {
color: var(--deepgray) !important;
}
/* fuel aim bg img shit remove */
.fuel-root .fuel-content .right-block .goal-list .gradient-bottom,
.fuel-root .fuel-content .right-block .goal-list .gradient-top {
display: none !important;
}
/* fuel donation word */
.fuel-root h2 a.active {
color: var(--orange) !important;
}
/* donated main value color */
.fuel-root .fuel-content .left-block .amount {
color: var(--blue) !important;
}
/* donate button */
.fuel-root .fuel-content .left-block .tank-up {
background: var(--btnFuel) !important;
}
.fuel-root .fuel-content .left-block .tank-up:hover {
background-position: 0 -70px !important;
}
/* donated more */
.fuel-root .thankyou .row>div .user>div.avgmore {
background: var(--blue) !important;
}
/* donated more link colors */
.fuel-root .thankyou .row>div .user>div.avgmore a,
.fuel-root .thankyou .row>div .user>div.avgmore a:hover,
.fuel-root .thankyou .row>div .user>div.avgmore .note {
color: var(--darkgray) !important;
text-decoration: none !important;
}
/* data button select */
.fuel-root .month button {
padding: 5px !important;
background: var(--deepgray) !important;
border-bottom: 1px solid transparent !important;
}
.fuel-root .month button:hover {
text-decoration: none !important;
border-bottom: 1px solid var(--blue) !important;
}
.fuel-root .month span.ng-scope:nth-child(1) {
color: var(--white) !important;
}
/* about game */
/* about menu active */
.trimenu {
display: flex !important;
justify-content: center !important;
}
.trimenu sub {
position: absolute !important;
top: -1px !important;
width: 150px !important;
display: flex !important;
height: 20px !important;
justify-content: center !important;
align-items: center !important;
color: var(--white) !important;
}
.trimenu li {
padding: 0 !important;
margin: 1px !important;
}
.trimenu>li a {
height: 45px !important;
width: 150px !important;
display: flex !important;
text-decoration: none !important;
justify-content: center !important;
align-items: center !important;
background: var(--deepgray) !important;
color: var(--middlegray) !important;
border: 1px solid transparent !important;
}
.trimenu li.active {
height: 45px !important;
width: 150px !important;
display: flex !important;
text-decoration: none !important;
justify-content: center !important;
align-items: center !important;
background: transparent !important;
background-color: var(--middlegray) !important;
border: 1px solid var(--white) !important;
color: var(--white) !important;
}
.trimenu>li a:hover {
background: var(--black) !important;
color: var(--blue) !important;
border: 1px solid var(--blue) !important;
}
/* wtf is dummy */
.trimenu li.dummy {
display: none !important;
}
.about {
width: 80% !important;
font-size: 12px !important;
}
#about table#regular {
display: flex !important;
justify-content: center !important;
}
/* all images invert for rules, training, all the day questions, vip accaunt */
.about img {
filter: invert(83%) !important;
}
/* about premium menu bg under buy button */
.about div[style*="eee"] {
background-color: var(--darkgray) !important;
}
/* about all the day questions headers text color */
#faq .question dt {
color: var(--blue) !important;
}
/* training hint what's about vocs bg color */
#learning .hint {
background: var(--deepgray) !important;
}
/* rules tab ranges table big border remove */
#about table.cars {
border: 1px solid var(--middlegray) !important;
}
/* rules tab ranges table bg color */
#about table.cars td {
background: var(--darkgray) !important;
color: var(--white) !important;
}
/* vocs */
/* main search container rules */
/* search style */
.search input {
border: none !important;
}
.search input,
.search input:hover[name=text],
.yandexform input[name=text] {
background: var(--deepgray) !important;
border-top: 1px solid var(--middlegray) !important;
border-bottom: 1px solid var(--middlegray) !important;
font-size: 20px !important;
height: 50px !important;
padding: 0 20px !important;
width: 100% !important;
}
.search input:focus,
.search input:focus[name=text],
.yandexform input[name=text]:focus {
background: var(--deepgray) !important;
border-top: 1px solid var(--blue) !important;
border-bottom: 1px solid var(--blue) !important;
font-size: 20px !important;
height: 50px !important;
padding: 0 20px !important;
width: 100% !important;
}
/* yandex form main search container */
.yandexform {
padding: 0 !important;
width: 100% !important;
}
/* yandex search width */
.yandexform input[name=text] {
width: 100% !important;
border: none !important;
}
/* yandex search btn */
.yandexform input[type=submit] {
display: none !important;
}
/* yandex form loading */
div[style*='/iframe/loader__progress.gif'] {
filter: hue-rotate(180deg) !important;
}
/* yandex form container everything bg invert */
iframe[src*='http://yandex.ru'] {
filter: invert(90%) !important;
}
/* search base */
.search {
padding: 0 !important;
width: 100% !important;
background: none !important;
border: none !important;
}
/* vocs list search button rm */
.voclist input[type="submit"] {
display: none !important;
}
/* search vocs search bar 100 % width */
div[style*="margin-right: 53px"] {
margin-right: 0 !important;
}
/* vocs rating main vertical long container */
.voclist td.popularity {
background: none !important;
}
/* voc list table two columns */
body .voclist table {
margin-bottom: 10px !important;
display: block !important;
}
body .voclist table tbody {
display: block !important;
width: 100% !important;
column-count: 3 !important;
column-gap: 5px !important;
align-items: center !important;
}
body .voclist table tbody tr {
padding-left: 10px !important;
display: block !important;
-webkit-column-break-inside: avoid;
/* chrome, safari, opera */
page-break-inside: avoid;
/* firefox */
break-inside: avoid;
/* ie 10+ */
}
body .voclist table tbody tr td.title {
width: 60% !important;
display: inline-block !important;
}
body .voclist table tbody tr td.symbols,
body .voclist table tbody tr td.popularity {
width: 18% !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
}
body .voclist table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, .05) !important;
}
body .voclist table tbody tr:nth-child(odd) {
background: rgba(0, 0, 0, .3) !important;
}
/* vocs every voc item border bottom */
.voclist table td {
border-bottom: none !important;
}
/* vocs author link color */
.voclist table .title .author a {
color: var(--blue) !important;
}
.voclist table .title .author a:hover {
color: var(--lightblue) !important;
}
/* vocs text block border color */
.vocview-block .words {
border: 1px solid var(--middlegray) !important;
width: 100% !important;
height: 700px !important;
}
.pages .ctrls {
margin: 0 !important;
display: flex !important;
}
.pages .ctrl {
margin: 0 !important;
width: 30px !important;
height: 30px !important;
}
.pages .ctrl a {
display: inline-block !important;
height: 30px !important;
background-color: var(--middlegray) !important;
text-decoration: none !important;
color: var(--darkgray) !important;
padding: 0 !important;
width: 100% !important;
text-align: center !important;
transition: all .1s !important;
}
/* forward */
.pages .ctrl a:nth-child(1) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-right'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* backward */
.pages .ctrl a:nth-child(2) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='lightgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-left'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.pages .ctrl a:hover {
background-color: var(--blue) !important;
transition: all .1s !important;
}
.pages .ctrl.na {
display: none !important;
}
.pages .page,
.pages .selected {
justify-content: center !important;
align-items: center !important;
margin-top: 0 !important;
font-size: 13px !important;
height: 30px !important;
width: 30px !important;
display: inline-flex !important;
}
/* vocs page active button */
.pages .selected {
background: var(--white) !important;
color: var(--darkgray) !important;
}
.pages .page a {
display: inline-flex !important;
width: 30px !important;
height: 30px !important;
justify-content: center !important;
align-items: center !important;
color: var(--darkgray) !important;
padding: 0 !important;
background: var(--middlegray) !important;
text-decoration: none !important;
transition: all .1s !important;
margin-top: 0 !important;
}
.pages .page:last-child {
position: relative !important;
left: -4px !important;
}
.pages .page a:hover {
background: var(--blue) !important;
transition: all .1s !important;
}
/* vocs lett menu rm margin */
.left-col ul.left-menu {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 150px !important;
margin: 0 !important;
}
/* set 100% width menu li */
.left-col ul.left-menu li {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 20px !important;
}
/* vocs span padding left rm */
.left-col ul.left-menu li.active {
width: 100% !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 20px !important;
}
.left-col ul.left-menu li a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 20px !important;
width: 100% !important;
text-decoration: none !important;
background: var(--darkgray) !important;
color: var(--blue) !important;
transition: all .1s !important;
}
.left-col ul.left-menu li a:hover {
background: var(--blue) !important;
color: var(--darkgray) !important;
}
/* vocs left panel rm shit bg images from active links tabs and set color */
.left-col ul.left-menu li.active,
.left-col ul.left-menu li.active span {
background: var(--blue) !important;
}
/* vocs left panel set color to active links tabs titles */
.left-col ul.left-menu li.active span {
margin: 0 !important;
padding: 0 !important;
color: var(--darkgray) !important;
}
/* vocs type of name color && do lighter */
.voclist table .symbols strong {
color: var(--white) !important;
font-weight: lighter !important;
}
#toplist table {
width: 100% !important;
}
/* toplist offset down && offset up color */
#toplist td.offset_up {
color: #61ff39 !important;
}
#toplist td.offset_down {
color: #fc2727 !important;
}
/* rm info panel block */
.columns .right-col {
display: none !important;
}
/* rating page info panel */
.columns .info {
opacity: .2 !important;
background: var(--deepgray) !important;
border-bottom: 1px solid var(--blue) !important;
transition: .1s !important;
}
.columns .info:hover {
opacity: 1 !important;
}
/* toplist styles */
#toplist table th,
#toplist table tr,
#toplist table td {
border: none !important;
background: var(--darkgray) !important;
}
/* toplist header */
#toplist th,
/* toplist body */
#toplist td.offset_up,
#toplist td.offset_down,
#toplist tr.other>td.pos,
#toplist tr.other>td.highlight,
#toplist tr.other>td.competitions,
#toplist tr.other>td.bonuses,
#toplist tr.other td:nth-child(5),
#toplist tr.other td:nth-child(6) {
text-align: center !important;
vertical-align: middle !important;
}
/* toplist separate */
#toplist table tr.other:nth-child(2n) {
filter: brightness(.8) !important;
}
/* toplist nickname border bottom none */
#toplist .name a {
color: var(--white) !important;
border-bottom: none !important;
border: 1px solid var(--middlegray) !important;
padding: 12px !important;
display: flex !important;
background: transparent !important;
text-align: center !important;
align-items: center !important;
justify-content: center !important;
}
#toplist .name a:hover {
color: var(--blue) !important;
border: 1px solid var(--blue) !important;
background: var(--deepgray) !important;
}
/* toplist correct number position */
#toplist table .pos {
text-align: center !important;
}
/* toplist col left */
#toplist .left-col h4 {
display: none !important;
}
#toplist .left-col {
padding: 0 !important;
}
#toplist ul.mode {
margin: 0 !important;
}
#toplist ul.mode li {
margin-bottom: -1px !important;
width: 100% !important;
}
/* toplist col left active span */
#toplist ul.mode li.active {
display: flex !important;
height: 20px !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
left: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: var(--blue) !important;
}
.vocview-block #toplist dt ul.mode li.active {
padding: 0 !important;
}
body #toplist .gametype-voc a[href*="/vocs/"] {
display: none !important;
}
#toplist ul.mode li.active span {
padding: 0 !important;
margin-right: 0 !important;
color: var(--deepgray) !important;
background: var(--blue) !important;
}
/* toplist col left dicktionary links laka buttons */
#toplist .mode li a {
border: 1px solid transparent !important;
display: flex !important;
height: 20px !important;
width: 100% !important;
text-decoration: none !important;
justify-content: center !important;
align-items: center !important;
}
#toplist .mode li:nth-child(odd) {
background-color: rgba(0, 0, 0, .2) !important;
}
#toplist .mode li:nth-child(even) {
background-color: rgba(0, 0, 0, .3) !important;
}
#toplist .mode li a[class=gametype-voc],
#toplist .mode li a[href*="/top/rating/archive"],
#toplist .mode li a[href*="/top/rating/overall"] {
color: var(--middlegray) !important;
}
#toplist .mode li a[class=gametype-voc]:hover,
#toplist .mode li a[href*="/top/rating/archive"]:hover,
#toplist .mode li a[href*="/top/rating/overall"]:hover,
#toplist .mode li a:hover {
color: var(--blue) !important;
border: 1px solid var(--blue) !important;
background: var(--deepgray) !important;
}
/* toplist col left rm go to vocs */
/* race */
/* race rating number color */
.car .car_rating,
.player .rating div {
color: var(--white) !important;
}
.player .rating div {
margin-right: 0 !important;
}
/* klavotols race statistics */
#spectrumcanvas {
background: var(--deepgray) !important;
filter: contrast(2) !important;
}
#statistics {
width: 270px !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
color: var(--white) !important;
background: var(--darkgray) !important;
border: 1px solid var(--middlegray) !important;
}
#statistics span {
color: var(--blue) !important;
}
/* klavotols race sort block label color && links sort color */
label[for='autosort'] {
color: var(--white) !important;
}
#position,
#nickname,
#errorscount,
#errors,
#rating {
color: var(--blue) !important;
}
#position:hover,
#nickname:hover,
#errorscount:hover,
#errors:hover,
#rating:hover {
color: var(--lightblue) !important;
}
/* race record mini popup note */
#play-overall #players .player .newrecord a {
height: 23px !important;
margin-top: -5px !important;
padding: 3px !important;
background: var(--orange) !important;
border: none !important;
font-weight: bold !important;
color: var(--darkgray) !important;
}
/* hide additional panels */
/* race ads block rm */
body #play-right {
display: flex !important;
flex-direction: column !important;
gap: 1em !important;
position: absolute !important;
margin-left: 0 !important;
padding: 1em !important;
left: 0 !important;
transform: translate(0) !important;
transition: opacity 1s ease-in-out, 0.3s ease-in-out !important;
}
body #play-right[style*="margin-right: 0"] #invite {
right: 1058px !important;
}
body #play-right[style*="position: absolute"] #invite,
body #play-right[style*="margin-right: -"] #invite {
right: 1363px !important;
}
/* race with this we do width for all right side blocks */
#invite {
width: 270px !important;
}
/* opacity for race settings && invite friends blocks */
#invite,
#params {
opacity: 0.2 !important;
transition: opacity 0.2s !important;
}
/* opacity for klavotools complecity && statistics blocks */
#complexity-panel,
#statistics {
opacity: 0.7 !important;
transition: opacity 0.2s !important;
}
#complexity-panel label {
font-size: 10px !important;
margin-right: 8px !important;
}
#complexity-panel #spectrumCanvas {
margin: 10px 0 10px !important;
}
/* disabled opacity for all right side race blocks on hover */
#invite:hover,
#params:hover,
#complexity-panel:hover,
#statistics:hover {
opacity: 1 !important;
transition: opacity 0.2s !important;
}
/* loading animation */
/* invert loading image gif in user popup link hover nickname in race */
img[src*='loading'] {
filter: invert(83%) !important;
}
/* race default game loading hide vosvoiasi */
#gameloading {
height: 40px !important;
width: 40px !important;
background: var(--deepdark) !important;
border: none !important;
}
/* remove text and gif loading img from race loading view block */
.gameloading-content {
width: 20px !important;
height: 40px !important;
background: var(--darkgray) !important;
color: var(--darkgray) !important;
position: relative !important;
top: 0px !important;
left: -20px !important;
}
/* create another loading race progress animation */
.gameloading-content::after {
content: '' !important;
display: block !important;
position: absolute !important;
left: -5px !important;
top: 0 !important;
width: 20px !important;
height: 40px !important;
background: var(--blue) !important;
animation: loading 1s linear infinite !important;
}
.gameloading-content::before {
content: '' !important;
display: block !important;
position: absolute !important;
left: 15px !important;
top: 0 !important;
width: 20px !important;
height: 40px !important;
background: var(--blue) !important;
animation: loading 1s linear 0.2s infinite !important;
}
/* do loading animation */
@keyframes loading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* race virtual keyboard btn */
#keyboard_cont {
display: flex !important;
justify-content: center !important;
}
#keyboard_cont[style*="display: none"] {
display: none !important;
}
#keyboard {
margin: 30px auto 0 auto !important;
}
#keyboard_cont #param_keyboard {
font-size: 0 !important;
position: absolute !important;
border: none !important;
background: var(--virtualKeyboard);
color: transparent !important;
height: 12px;
width: 26px;
display: block;
transition: all .2s !important;
animation: keyboard 10s linear infinite !important;
}
@keyframes keyboard {
0% {
filter: brightness(.8) hue-rotate(0);
}
50% {
filter: brightness(.8) hue-rotate(180deg);
}
100% {
filter: brightness(.8) hue-rotate(0);
}
}
#keyboard_cont #param_keyboard:hover {
filter: brightness(.7) !important;
}
/* race virtual keyboard img invert */
#keyboard {
filter: invert(1) sepia(0) hue-rotate(40deg) grayscale(0.3) !important;
}
/* change img speedpanel night mode */
#speedpanel-canvas {
box-sizing: border-box !important;
padding-left: 262px !important;
height: 87px !important;
width: 262px !important;
background: var(--speed) !important;
}
/* remove unused elements */
#speedpanel-back,
#speedpanel-top,
#speedpanel-arrow {
display: none !important;
}
/* race delete result button */
.delresult {
margin-right: unset !important;
left: 95px !important;
bottom: unset !important;
}
.delresult a {
border: 1px solid var(--blue) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 30px !important;
width: 30px !important;
background: #343442 !important;
}
.delresult a:hover {
filter: hue-rotate(180deg) !important;
}
.delresult img {
box-sizing: border-box !important;
background: var(--close) !important;
width: 16px !important;
height: 16px !important;
padding-left: 16px !important;
}
/* race invite friends links block bg && rm border */
#play-right #invite #friends-list {
background: var(--darkgray) !important;
border: none !important;
}
/* race invite friends selec all link decoration */
#play-right #invite #select-all {
border-bottom: none !important;
text-decoration: underline !important;
}
/* wiki */
a#top {
border: none !important;
}
/* main blocks bg color */
div#content {
/* color for max everything text */
color: var(--white) !important;
background: var(--darkgray) !important;
/* border main conteint && navigation separator */
border: none !important;
/* padding none */
padding: 0 !important;
margin-top: 50px !important;
}
/* inner main blocks bg color */
#mw-content-text table,
#mw-content-text td {
background: var(--darkgray) !important;
}
/* inner main blocks headers bg color */
#mw-content-text th {
background: var(--deepgray) !important;
}
/* remove inner main blocks unnecessary headers bg images and bg color */
#mw-content-text table h2,
#mw-content-text table div {
background: none !important;
}
/* color to white what is still not colored */
#mw-content-text table div,
#mw-content-text td {
color: var(--white) !important;
}
/* nav menu dropdown menu text color */
#mw-panel.collapsible-nav .portal h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a {
color: var(--white) !important;
}
/* nav menu links color */
div#mw-panel div.portal div.body ul li a {
color: var(--blue) !important;
}
div#mw-panel div.portal div.body ul li a:hover {
color: var(--lightblue) !important;
}
/* wiki textarea border none && set border top bottom */
#wptextbox1 {
border: none;
border-bottom: 1px solid var(--middlegray) !important;
border-top: 1px solid var(--middlegray) !important;
}
/* wiki logo */
#p-logo {
left: 2.5em !important;
top: -8em !important;
}
#p-logo a {
display: block !important;
box-sizing: border-box !important;
width: 100px !important;
height: 100px !important;
background: var(--logo) !important;
padding-left: 100px !important;
}
/* wiki header background color */
div#mw-head {
background: var(--darkgray) !important;
}
.catlinks {
background-color: var(--darkgray) !important;
}
div.vectortabs ul li {
background: none !important;
border: none !important;
}
div.vectortabs li a {
color: var(--blue) !important;
}
div.vectortabs li.selected {
background: none !important;
background-color: var(--blue) !important;
color: var(--deepgray) !important;
}
div#simplesearch {
border: 1px solid var(--middlegray) !important;
background: var(--darkgray) !important;
}
div#simplesearch input {
color: var(--white) !important;
}
#pagehistory li.selected,
#pagehistory li {
background-color: var(--deepgray) !important;
border: none !important;
}
.flaggedrevs-color-1 {
background-color: var(--darkgray) !important;
border-bottom: 1px solid var(--middlegray) !important;
}
/* wiki login form buttons && inputs */
input.logintext,
input.loginpassword {
color: var(--white) !important;
border: 1px solid var(--middlegray) !important;
background: var(--darkgray);
box-shadow: none !important;
}
input.logintext:focus,
input.loginpassword:focus,
input.logintext:hover,
input.loginpassword:hover {
color: var(--white) !important;
border: 1px solid var(--blue) !important;
background: var(--darkgray) !important;
box-shadow: none !important;
}
.editoptions {
background-color: var(--deepgray);
border: none !important;
}
table.flaggedrevs_editnotice,
table.flaggedrevs_viewnotice {
border: none !important;
}
#content pre,
#editpage-copywarn2 {
background-color: var(--deepgray) !important;
border: none !important;
color: var(--white) !important;
}
/* wiki end */
/* race hover nickname popup box bg color && border */
.popup-box .c {
background: var(--deepgray) !important;
border: 1px solid var(--middlegray) !important;
padding: 20px !important;
}
/* race hover nickname appear popupx box with statistics */
/* remove all img shit around this popup */
.popup-box .l,
.popup-box .r,
.popup-box .t,
.popup-box .b,
.popup-box .tr,
.popup-box .tl,
.popup-box .bl,
.popup-box .br {
display: none !important;
}
/* klavo events */
/* klavo events container width */
#content_KE .list {
width: var(--container) !important;
margin: 0 auto !important;
}
/* klavo evets past */
#content_KE .list .item,
#content_KE .list .item.past {
background: var(--darkgray) !important;
}
#content_KE .list .item td {
border-bottom: 1px solid var(--middlegray) !important;
border-top: 1px solid var(--middlegray) !important;
}
/* klavo evets will be */
#content_KE .list .item.soon {
background: var(--deepgray) !important;
}
/* register */
/* register note default, error, ok */
#register .big {
background: var(--orange) !important;
border: none !important;
}
#register .big[style*='error.gif'] {
background: red none !important;
}
#register .big[style*='ok.gif'] {
background: green none !important;
}
/* register input */
#register_login,
#register_pass,
#register_confirmpass,
#register_email {
color: var(--white) !important;
background: #3b3b3b !important;
}
#register_login:focus,
#register_pass:focus,
#register_confirmpass:focus,
#register_email:focus {
color: var(--white) !important;
background: var(--deepgray) !important;
}
/* register btn on hover */
#register_submit_button:hover {
cursor: pointer !important;
}
/* register txt note color */
#register .note {
color: var(--white) !important;
}
.gametype-sign .gametype-sign.qual {
box-sizing: border-box !important;
height: 48px !important;
width: 48px !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
background: var(--qualificationNoneHover) !important;
transition: background .2s !important;
z-index: 10 !important;
cursor: pointer !important;
}
.gametype-sign .gametype-sign.qual:hover {
background: var(--qualificationHover) !important;
}
/* min width 1600px (fix best menu no-error icon) */
@media only screen and (min-width: 1600px) {
body .sign-noerror {
display: inline-block !important;
}
}
/* min width 1630px */
@media only screen and (max-width: 1627px) {
body .voclist .left-col {
left: 0 !important;
position: relative !important;
flex-direction: row !important;
width: 100% !important;
justify-content: space-around !important;
}
.pages {
bottom: unset !important;
top: 85px !important;
transform: none !important;
}
}
/* max width 1300px */
@media only screen and (max-width: 1300px) {
body #play-right {
transform: translate(-90%) !important;
opacity: 0 !important;
}
body #play-right:hover {
transform: translate(0) !important;
opacity: 1 !important;
}
.minwidth,
.minwidth_holyhack,
.minwidth_container {
max-width: 100% !important;
min-width: 100% !important;
width: 100% !important;
}
body .voclist table tbody {
column-count: 2 !important;
}
}
@media only screen and (max-width: 750px) {
/* remove speed and errors panel */
#speedpanel-canvas,
#speed-label,
#errors-label {
display: none !important;
}
/* realign speedpanel rest items */
#status table {
display: flex !important;
justify-content: center !important;
}
#status table tr:nth-child(1) {
width: 100% !important;
}
.gameblock,
#typeblock,
.player {
width: 90vw !important;
}
.player {
overflow: hidden !important;
}
#inputtext {
width: 100% !important;
}
#errors_tab {
float: left !important;
width: 50% !important;
padding: 5px !important;
}
#errorwork {
float: right !important;
width: 50% !important;
padding: 5px !important;
text-align: center !important;
}
.player .rating {
font-size: 12px !important;
margin-right: 8px !important;
}
.player .rating .delresult {
left: 75px !important;
margin: 0 !important;
}
.player .rating .stats {
left: 115px !important;
}
.modal2 .modal2-dialog {
width: 100% !important;
}
}
/* play with tablet */
@media only screen and (max-width: 1075px) {
.profile-root .profile-header .username .history .history-popup {
top: 55px !important;
}
#profile-index .bio {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#profile-index .bio .content {
width: 530px !important;
}
#create dd:nth-child(1) {
float: none !important;
width: 100% !important;
}
#create .buttons {
justify-content: space-around !important;
}
#create dt {
margin: 0 !important;
}
.pages {
top: 140px !important;
}
#posts-list tr.post,
#posts-list td.post,
#posts-list tr.posth,
#posts-list td.posth {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
#posts-list .post td .post-container {
padding: 10px !important;
}
#posts-list img[src*="klavogonki.ru/avatars"] {
height: 70px !important;
}
#head .right .menu {
top: 95px !important;
position: fixed !important;
padding: 0 !important;
margin: 0 auto !important;
}
/* logo position */
#head #logo {
top: 45px !important;
z-index: 110 !important;
height: 50px !important;
background-color: unset !important;
box-shadow: unset !important;
border-radius: unset !important;
}
#head #logo a,
#head #logo a::after {
height: 50px !important;
}
#play-right {
display: none !important;
}
.minwidth_container {
height: 0 !important;
}
/* chat width */
#chat-container {
left: 0 !important;
right: 0 !important;
}
/* userpanel */
.userpanel {
max-width: 100% !important;
min-width: 100% !important;
background: none !important;
}
.userpanel::after {
top: 95px !important;
}
td.user-dropdown:nth-child(5)>div:nth-child(1) {
border-right: 1px solid var(--middlegray);
}
.user-block {
position: relative;
width: 100% !important;
right: 0 !important;
top: 45px !important;
background: var(--deepgray) !important;
}
#stats-block {
position: relative;
width: 100% !important;
left: 0 !important;
background: var(--deepgray) !important;
padding: 5px !important;
top: 0 !important;
border-bottom: 1px solid var(--middlegray) !important;
}
.user-block table,
#stats-block table {
margin: 0 auto !important;
}
/* game block top space */
body .play-wrapper {
display: flex !important;
justify-content: center !important;
margin: 25px 0 0 0 !important;
}
body .play-overall-table {
margin: 0 !important;
}
/* main page first && second row top space */
#index .firstrow {
top: 5px !important;
}
/* main page secondrow content align column && width */
#index .secondrow {
margin-top: 8px !important;
display: flex !important;
flex-direction: column !important;
}
#index .secondrow .col2,
#index .secondrow .col3 {
width: 100% !important;
}
/* content top space */
div#content {
margin-top: 95px !important;
}
/* profile */
.profile-header,
.container,
.col-xs-9,
.profile-root .profile-content {
width: 100% !important;
}
.col-xs-3,
.profile-root .sidebar {
display: none !important;
}
.profile-root .profile-header .title {
top: 25px !important;
left: 265px !important;
font-size: 15px !important;
}
.profile-root .profile-header .username {
top: 0 !important;
left: 210px !important;
padding-right: 0px !important;
}
.profile-root .profile-header {
margin: 30px 0 30px 0 !important;
}
.profile-root .profile-header .title {
top: -20px !important;
left: 210px !important;
}
.profile-root .profile-header.fixed {
top: 90px !important;
}
#profile-index .trophy {
display: flex !important;
justify-content: center !important;
}
/* statistics table align center */
.profile-stats .chart-table {
display: flex !important;
justify-content: center !important;
}
/* bio content justify */
#profile-index .bio .content {
display: flex !important;
justify-content: center !important;
}
/* recent games position */
#head #recent-games-container {
bottom: -1175px !important;
}
}
/* min width 700px */
@media only screen and (max-width: 840px) {
.chat .messages .time[style*='background-color: yellow'] {
width: 50% !important;
margin-left: 25% !important;
margin-right: 25% !important;
}
.chat .messages p,
.chat .messages .time,
.chat .messages .username,
.chat .messages .room.private {
width: 100% !important;
text-align: center !important;
display: block !important;
}
.chat .messages .time {
margin-top: 10px !important;
}
}
/* min width 700px */
@media only screen and (max-width: 700px) {
.userpanel {
height: 100px !important;
}
/* stats block */
.userpanel #stats-block {
padding: 0 !important;
height: 100px !important;
}
.userpanel #stats-block table {
height: 100px !important;
align-items: center !important;
display: flex !important;
justify-content: center !important;
}
.userpanel #stats-block tbody {
display: block !important;
column-count: 2 !important;
}
.userpanel #stats-block tr {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
}
.userpanel #stats-block td.title,
.userpanel #stats-block td.value {
display: block !important;
padding: 0 !important;
}
.userpanel #stats-block td.divider {
display: none !important;
}
.userpanel #stats-block .gametype #gametype-mdash {
display: none !important;
}
/* user block */
.userpanel .user-block {
height: 70px !important;
top: 100px !important;
}
.userpanel .user-block>table {
height: 70px !important;
}
/* user panel bottom gradient */
.userpanel::after {
top: 170px !important;
}
/* logo */
#head #logo {
top: 0px !important;
}
#head #logo,
#head #logo a,
#head #logo a::after {
background-size: 80px !important;
width: 100px !important;
}
/* game type select */
#gametype-select {
top: 100px !important;
left: 0 !important;
height: 300px !important;
}
.userpanel .user-block td {
padding: 0 !important;
}
/* daily task btn */
.userpanel .user-block .daily-task {
height: 70px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.userpanel .user-block .daily-task .icon {
top: 0 !important;
left: 0 !important;
}
/* level icon */
.userpanel #userpanel-level-container {
top: -5px !important;
height: 80px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* username btn */
.userpanel .user-block .user-dropdown .name {
height: 70px !important;
padding: 0 10px !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
.userpanel .user-block .name .caret {
display: none !important;
}
/* scores block */
.userpanel .user-block .scores-table {
display: flex !important;
align-items: center !important;
height: 70px !important;
margin-right: 10px !important;
}
.userpanel .user-block .scores-table tr {
display: flex !important;
}
.userpanel .user-block .scores-table tr:nth-child(1) {
flex-direction: column !important;
align-items: center !important;
}
.userpanel #userpanel-bonuses {
margin-right: 5px !important;
margin-top: -3px !important;
margin-left: 5px !important;
}
/* drop down menu position */
.userpanel .user-block .user-dropdown .dropmenu {
top: 70px !important;
}
#head .right .menu {
display: flex !important;
top: 170px !important;
width: 100% !important;
}
/* navigation menu position */
#index .firstrow {
height: 135px !important;
flex-direction: column !important;
top: 10px !important;
}
#index .secondrow {
margin-top: 15px !important;
}
/* discussion forum lines */
#index #live #discussing_forum li {
text-align: center !important;
height: 50px !important;
}
#index #live #discussing_forum li .title {
max-width: unset !important;
top: 0 !important;
display: block !important;
}
#head #recent-games-conteiner {
bottom: -1390px !important;
}
.secondrow .col2 {
height: 840px !important;
}
/* klavotools fast race creation btn's */
#head #recent-games-container {
bottom: -1730px !important;
}
.pages {
top: 350px !important;
}
div#content {
margin-top: 170px !important;
}
}
/* min width 600px */
@media only screen and (max-width: 600px) {
body .voclist table tbody {
column-count: 1 !important;
}
#head .right .menu {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
width: 100% !important;
}
#head .right .menu a,
#head .right .menu a.active {
width: 100% !important;
}
div#content {
margin-top: 260px !important;
}
}
}