@-moz-document domain(klavogonki.ru)
{
  :root
  {
        /* container width */
    --container: 1300px;
        /* global colors */
    --black: #000000;
    --deepgray: #1a1818;
    --darkgray: #282B2F;
    --white: #E0E0E0;
    --blue: #8EC5FF;
    --lightblue: #c1dfff;
    --red: #ff8e9d;
    --middlegray: #656565;
    --orange: #d60;
        /* speed img */
    --speed: url('https://i.imgur.com/Qg4ztHC.png') no-repeat;
        /* close btn */
    --close: url('https://i.imgur.com/JazoG88.png') no-repeat;
        /* logo img */
    --logo: url('https://i.imgur.com/OmRgbex.png') no-repeat;
    --lgwidth: 151px;
    --lgheight: 34px;
        /* score img links */
    --score0: url('https://i.imgur.com/xXopkqT.png') no-repeat;
    --score1: url('https://i.imgur.com/RiISqUz.png') no-repeat;
    --score2: url('https://i.imgur.com/R5hUMPX.png') no-repeat;
    --score3: url('https://i.imgur.com/tf4rWz2.png') no-repeat;
    --score4: url('https://i.imgur.com/nKkt4ct.png') no-repeat;
    --score5: url('https://i.imgur.com/pOGEPQm.png') no-repeat;
    --score6: url('https://i.imgur.com/XILXeGQ.png') no-repeat;
    --score7: url('https://i.imgur.com/9ylefMt.png') no-repeat;
    --score8: url('https://i.imgur.com/YqwjrFN.png') no-repeat;
    --score9: url('https://i.imgur.com/jbqTFYL.png') no-repeat;
    --score10: url('https://i.imgur.com/VsM5rrq.png') no-repeat;
    --score11: url('https://i.imgur.com/G878fWy.png') no-repeat;
        /* race img icons */
    --achievement: url('https://i.imgur.com/ZGXU0fk.png') no-repeat;
    --race: url('https://i.imgur.com/4p6ysQK.png') no-repeat;
    --abra: url('https://i.imgur.com/H6p9eu4.png') no-repeat;
    --crash: url('https://i.imgur.com/0klGPz9.png') no-repeat;
    --dictionary: url('https://i.imgur.com/zZamhJC.png') no-repeat;
    --digits: url('https://i.imgur.com/cSOrWcA.png') no-repeat;
    --infinity: url('https://i.imgur.com/GdW3Ycl.png') no-repeat;
    --letters: url('https://i.imgur.com/sYHsSQp.png') no-repeat;
    --marathone: url('https://i.imgur.com/cEAX6g2.png') no-repeat;
    --usual: url('https://i.imgur.com/bwxfxll.png') no-repeat;
    --yandex: url('https://i.imgur.com/Jwn7xF2.png') no-repeat;
        /* textarea forum and comments vocs bbcode buttons */
    --background: url('https://i.imgur.com/yIqrR5a.png') no-repeat;
    --bold: url('https://i.imgur.com/4nNmrdt.png') no-repeat;
    --center: url('https://i.imgur.com/VrHUhlg.png') no-repeat;
    --code: url('https://i.imgur.com/JlVFDrb.png') no-repeat;
    --color: url('https://i.imgur.com/Ngnlxsr.png') no-repeat;
    --hide: url('https://i.imgur.com/9zm4isk.png') no-repeat;
    --html: url('https://i.imgur.com/7CAsvl9.png') no-repeat;
    --image: url('https://i.imgur.com/X4hdjQE.png') no-repeat;
    --italic: url('https://i.imgur.com/jMpxRXU.png') no-repeat;
    --left: url('https://i.imgur.com/29o9VHu.png') no-repeat;
    --link: url('https://i.imgur.com/2LrbJTq.png') no-repeat;
    --list: url('https://i.imgur.com/JVoVljx.png') no-repeat;
    --listnum: url('https://i.imgur.com/vjnVyom.png') no-repeat;
    --quote: url('https://i.imgur.com/qj3Mt5n.png') no-repeat;
    --quotesel: url('https://i.imgur.com/LBT4I9R.png') no-repeat;
    --right: url('https://i.imgur.com/3YNuR2n.png') no-repeat;
    --size: url('https://i.imgur.com/TIgsdtz.png') no-repeat;
    --strike: url('https://i.imgur.com/bTxoXlB.png') no-repeat;
    --sub: url('https://i.imgur.com/ZzQ3kXl.png') no-repeat;
    --sup: url('https://i.imgur.com/AR6x81A.png') no-repeat;
    --tab: url('https://i.imgur.com/lJH9b1N.png') no-repeat;
    --underlined: url('https://i.imgur.com/8TfbRM7.png') no-repeat;
        /* daily done or not img */
    --yes: url('https://i.imgur.com/oYWHa9s.png') no-repeat;
    --no: url('https://i.imgur.com/BJjTD1l.png') 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/xg9boxi.png') no-repeat;
    --filterBlue: url('https://i.imgur.com/ZtHN75S.png') no-repeat;
    --smiliesNotActive: url('http://klavogonki.ru/img/smilies/mellow.gif') no-repeat;
        /* pressed */
    --ignoreOrange: url('https://i.imgur.com/75X6Fkk.png') no-repeat;
    --filterOrange: url('https://i.imgur.com/eao44Ee.png') no-repeat;
    --smiliesActive: url('http://klavogonki.ru/img/smilies/shok.gif') no-repeat;
        /* warning qualification */
    --qualification: url('https://i.imgur.com/qykDJ1G.png') no-repeat;
  }
    /* GLOBAL STYLES START */
    /* set text color and bg everything where style missed */
  body
  {
    background: var(--darkgray) !important;
    color: var(--white) !important;
  }

  a,
    div[class*='modal'] a
  {
    color: var(--blue);
  }

  a:hover,
    div[class*='modal'] a:hover
  {
    color: var(--lightblue);
  }

  a:visited,
    div[class*='modal'] a:visited
  {
    color: var(--red);
  }
    /* hr */
  hr
  {
    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;
  }
    /* 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 */
  .btn
  {
    font-weight: lighter !important;
    background: var(--middlegray) !important;
    color: var(--white) !important;
    border: none !important;
  }

  .btn:hover
  {
    font-weight: lighter !important;
    background: var(--blue) !important;
    color: var(--deepgray) !important;
    border: none !important;
  }
    /* close buttons on modal popup window */
  .close
  {
    background: none !important;
    color: var(--middlegray) !important;
    opacity: 1 !important;
  }

  .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);
  }
    /* 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);
  }
    /* global input type button, submit styles */
  input[type='submit']:not(.create_game):not(.styled),
    input[type='button']:not(.save_game)
  {
    font-weight: lighter !important;
    color: var(--white) !important;
    background: var(--darkgray) !important;
    border: 1px solid var(--white) !important;
  }

  input[type='submit']:hover:not(.create_game):not(.styled),
    input[type='button']:hover:not(.save_game)
  {
    cursor: pointer !important;
    font-weight: lighter !important;
    color: var(--darkgray) !important;
    background: var(--blue) !important;
    border: 1px solid var(--blue) !important;
  }
    /* 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(--blue) !important;
    background-color: var(--darkgray) !important;
  }

  ::-webkit-scrollbar
  {
    width: 10px !important;
    background: var(--blue) !important;
  }

  ::-webkit-scrollbar-thumb
  {
    background-color: var(--blue) !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;
  }
    /* strong && b tags be lighter */
  .regular-competition,
    strong,
    b
  {
    color: var(--white) !important;
    font-weight: lighter !important;
  }
    /* textarea global bg color && text coolor */
  textarea
  {
    background-color: var(--darkgray) !important;
    color: var(--white) !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: #a03eec !important;
    border-color: #a03eec !important;
  }

  .rang8,
    a.rang8,
    a.rang8:visited
  {
    color: #575bff !important;
    border-color: #575bff !important;
  }

  .rang9,
    a.rang9,
    a.rang9:visited
  {
    color: #2b59ec !important;
    border-color: #2b59ec !important;
  }
    /* old mini achievements icons invert */
  .award,
    img[src*="Award"],
    img[src*="uoEcwIZ"],
    img[src*="Kniga3"],
    img[src*="PWNjvtt"],
    img[src*="Kniga2"],
    img[src*="Kniga1"],
    img[src*="PRaBrOP"]
  {
    filter: invert(83%) saturate(0.3) !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: -3px;
  }
    /* mini popups */
  .tipsy
  {
    position: absolute !important;
    opacity: .9 !important;
    font: 12px Tahoma !important;
  }

  .tipsy-inner
  {
    max-width: 400px !important;
    text-align: center !important;
    background-color: var(--blue);
    color: var(--deepgray) !important;
    text-align: center !important;
    margin-left: 5px !important;
    margin-top: 2px !important;
  }

  .tipsy-arrow
  {
    display: none !important;
  }
    /* border gradient */
  .userpanel.logged::after,
    .userpanel.pinned::after
  {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: relative;
    top: 45px;
    background: linear-gradient(45deg, #ff00ff 0%, #ff0000 20%, #ffff00 40%, #00ff00 60%, #00ffff 80%, #0000ff 100%);
    background-size: 600% 3px;
    animation: border 9s linear 0s infinite alternate;
  }
    /* border gradient attach */
    /* .player .divider::after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        position: relative;
        background: linear-gradient(45deg, #ff00ff 0%, #ff0000 20%, #ffff00 40%, #00ff00 60%, #00ffff 80%, #0000ff 100%);
        background-size: 600% 3px;
        animation: border 9s linear 0s infinite alternate;
    } */
    /* animate gradient */
    @  keyframes border
  {
    0% {
            background-position: 0 0;
  }

  100%
  {
    background-position: 100% 0;
  }
}
    /* 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 */
.rte-buttonbar img[src*=background]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--background) !important;
}

.rte-buttonbar img[src*=bold]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--bold) !important;
}

.rte-buttonbar img[src*=center]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--center) !important;
}

.rte-buttonbar img[src*=code]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--code) !important;
}

.rte-buttonbar img[src*=color]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--color) !important;
}

.rte-buttonbar img[src*=hide]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--hide) !important;
}

.rte-buttonbar img[src*=html]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--html) !important;
}

.rte-buttonbar img[src*=image]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--image) !important;
}

.rte-buttonbar img[src*=italic]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--italic) !important;
}

.rte-buttonbar img[src*=left]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--left) !important;
}

.rte-buttonbar img[src*=link]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--link) !important;
}

.rte-buttonbar img[src*=list]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--list) !important;
}

.rte-buttonbar img[src*=listnum]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--listnum) !important;
}

.rte-buttonbar img[src*=quote]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--quote) !important;
}

.rte-buttonbar img[src*=quotesel]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--quotesel) !important;
}

.rte-buttonbar img[src*=right]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--right) !important;
}

.rte-buttonbar img[src*=size]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--size) !important;
}

.rte-buttonbar img[src*=strike]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--strike) !important;
}

.rte-buttonbar img[src*=sub]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--sub) !important;
}

.rte-buttonbar img[src*=sup]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--sup) !important;
}

.rte-buttonbar img[src*=tab]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--tab) !important;
}

.rte-buttonbar img[src*=underlined]
{
  box-sizing: border-box;
  padding-left: 27px;
  width: 27px;
  height: 27px;
  background: var(--underlined) !important;
}
    /* forum and comments vocs bbcode buttons on hover */
.rte-buttonbar img[src*=background]:hover,
    .rte-buttonbar img[src*=bold]:hover,
    .rte-buttonbar img[src*=center]:hover,
    .rte-buttonbar img[src*=code]:hover,
    .rte-buttonbar img[src*=color]:hover,
    .rte-buttonbar img[src*=hide]:hover,
    .rte-buttonbar img[src*=html]:hover,
    .rte-buttonbar img[src*=image]:hover,
    .rte-buttonbar img[src*=italic]:hover,
    .rte-buttonbar img[src*=left]:hover,
    .rte-buttonbar img[src*=link]:hover,
    .rte-buttonbar img[src*=list]:hover,
    .rte-buttonbar img[src*=listnum]:hover,
    .rte-buttonbar img[src*=quote]:hover,
    .rte-buttonbar img[src*=quotesel]:hover,
    .rte-buttonbar img[src*=right]:hover,
    .rte-buttonbar img[src*=size]:hover,
    .rte-buttonbar img[src*=strike]:hover,
    .rte-buttonbar img[src*=sub]:hover,
    .rte-buttonbar img[src*=sup]:hover,
    .rte-buttonbar img[src*=tab]:hover,
    .rte-buttonbar img[src*=underlined]:hover
{
  filter: saturate(2);
  filter: brightness(2);
}
    /* hide old userpanel score img bg */
.userpanel #userpanel-level-container
{
  background: none !important;
  height: 40px !important;
  width: 48px !important;
}
    /* set color userpanel score number and z-index up */
.userpanel #userpanel-level-value
{
  color: var(--deepgray) !important;
  z-index: 2 !important;
}
    /* hide userpanel score number shadow */
.userpanel #userpanel-level-value-shadow
{
  display: none !important;
}
    /* position and sizing userpanel score number */
.userpanel #userpanel-level-value
{
  margin-top: 12px !important;
  margin-left: -1px !important;
  font-size: 20px !important;
  font-family: Consolas !important;
}
    /* score image replacement */
#userpanel-level-progress[style*="0.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score0) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="1.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score1) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="2.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score2) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="3.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score3) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="4.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score4) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="5.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score5) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="6.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score6) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="7.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score7) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="8.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score8) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="9.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score9) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="10.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score10) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}

#userpanel-level-progress[style*="11.png"]
{
  display: block !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 40px !important;
  background: var(--score11) !important;
  padding-left: 46px !important;
  position: relative !important;
  right: -3px !important;
}
    /* userpanel hide bottom border and set background color */
.userpanel
{
  border: none;
  background: var(--deepgray) !important;
  color: var(-middlegray) !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,
    .userpanel #userpanel-scores,
    .userpanel #userpanel-bonuses
{
  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 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(--white) !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(--deepgray) !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: var(--pin) !important;
  padding-left: 16px !important;
}
    /* userpanel pin img attached */
.userpanel #pin.active
{
  display: block !important;
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--pin) !important;
  padding-left: 16px !important;
  border: 1px solid var(--white) !important;
}
    /* login block */
.login-block
{
  position: fixed !important;
  display: flex !important;
  background: var(--deepgray) !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  height: 45px !important;
  width: 250px !important;
  padding: 0 !important;
  color: var(--white) !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
}

#head .right
{
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
}
    /* logo */
#logo
{
  z-index: 1 !important;
  width: var(--lgwidth) !important;
  height: var(--lgheight) !important;
  padding: 0 !important;
  float: none !important;
  position: absolute !important;
}

#logo a
{
  display: block !important;
  width: var(--lgwidth) !important;
  height: var(--lgheight) !important;
  background: linear-gradient(45deg, #ff00ff 0%, #ff0000 20%, #ffff00 40%, #00ff00 60%, #00ffff 80%, #0000ff 100%);
  background-size: 600% var(--lgheight);
  animation: border 20s linear 0s infinite alternate;
  transition: all 0.5s;
}

#logo a::after
{
  content: '';
  background: var(--logo) !important;
  position: relative !important;
  height: var(--lgheight) !important;
  width: var(--lgwidth) !important;
  display: block !important;
  left: 3px !important;
  transition: all 0.5s;
}
    /* rm logo default img */
#logo img
{
  display: none !important;
}
    /* disable header img */
#head.green-back
{
  background: transparent !important;
}

.right
{
  padding: 0 !important;
}
    /* main menu */
.right .menu
{
  position: relative !important;
  top: 0px !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  padding: 0 !important;
  margin: 0 !important;
}

.right .menu a
{
  width: 100px !important;
  font-size: 12px !important;
  font-family: Arial !important;
  text-transform: uppercase !important;
  color: var(--blue) !important;
  background: var(--deepgray) !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.2s !important;
}

.right .menu a:hover
{
  text-decoration: none !important;
  background: var(--black) !important;
  color: var(--blue) !important;
  border-bottom: 1px solid var(--blue) !important;
  transition: all 0.2s !important;
  animation-name: jiggle;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: .2s;
  padding: 0 !important;
}

@keyframes jiggle
{
  0%
  {
    padding: 10px 0;
  }

  50%
  {
    padding: -10px 0;
  }

  100%
  {
    padding: 0 0;
  }
}

.right .menu a.active
{
  background: var(--black) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  border-bottom: 1px solid var(--blue) !important;
}

.right .menu a,
    .right .menu a.active
{
  line-height: 30px !important;
  text-decoration: none !important;
  display: block !important;
  height: 45px !important;
  line-height: 45px !important;
}
    /* hide header and main container separator */
.bar
{
  background: none !important;
  border: none !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 */
.alert-warning
{
  font-weight: lighter !important;
  background-color: var(--deepgray) !important;
  color: var(--white) !important;
  border-radius: 0px !important;
  border: none !important;
  border-bottom: 1px solid var(--blue) !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(--darkgray) !important;
  border: 1px solid var(--middlegray) !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 */
.profile-root .profile-content .nav-top li a
{
  color: var(--blue) !important;
}

.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: 1px solid var(--blue) !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
{
  border-top: 6px solid var(--orange) !important;
  border-right: 6px solid transparent !important;
  border-left: 6px solid transparent !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
{
  border: 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)/* do not style or animation will be broken */;
  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;
}
    /* 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 ul li.badged
{
  background-color: var(--darkgray) !important;
}

.profile-root .profile-header .mini-nav ul li.badged:hover
{
  background-color: var(--deepgray) !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;
}
    /* klavotols profile user nav menu */
.profile-root .sidebar .profile-nav li a
{
  color: var(--white) !important;
  background: var(--darkgray) !important;
}

.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 root mini navigation icon message unread */
.profile-root .profile-header .mini-nav ul li.badged
{
  background-color: var(--darkgray) !important;
}

.profile-root .profile-header .mini-nav ul li.badged:hover
{
  background-color: var(--deepgray) !important;
}

.profile-root .profile-header .mini-nav ul li
{
  border: 1px solid transparent !important;
}
    /* profile root mini navigation icon links */
.profile-root .profile-header .mini-nav ul li:hover
{
  background: var(--deepgray) !important;
  border: 1px solid var(--blue) !important;
}
    /* profile root mini navigation active */
.profile-root .profile-header .mini-nav ul li.active
{
  background: var(--blue) !important;
}
    /* profile root mini navigation icon active color */
.profile-root .profile-header .mini-nav ul li.active .icon-icomoon
{
  color: var(--deepgray) !important;
}
    /* profile root mini navigation icon not selected color */
.profile-root .profile-header .mini-nav ul li .icon-icomoon
{
  color: 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 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;
}
    /* 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;
}
    /* 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 popularity */
.voclist td.popularity div
{
  filter: hue-rotate(175deg) !important;
}
    /* create voc */
.create_voc,
    .save_game
{
  filter: invert(95%) !important;
}

.create_voc:hover,
    .save_game:hover
{
  filter: invert(100%) !important;
}
    /* play button */
#profile-block.vocview-block .user-title .btn_play,
    #create .buttons input.create_game
{
  filter: hue-rotate(90deg) !important;
}
    /* MAIN PAGE */
    /* klavotools recent txt color */
#recent-games-options
{
  color: var(--white) !important;
}
    /* klavotools recent games buttons on main page position bottom left */
#head #recent-games-container
{
  width: 100% !important;
  position: absolute !important;
  bottom: -705px !important;
  left: 0 !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;
}
    /* fast start */
.firstrow .col2,
    /* choose game */
    .firstrow .col3,
    /* create game myself */
    .firstrow .col4
{
  display: inline-block !important;
  left: 0 !important;
  text-align: center !important;
}
    /* create game links color */
.firstrow .col2 a,
    .firstrow .col3 a,
    .firstrow .col4 a
{
  color: var(--blue) !important;
  text-decoration: none !important;
}
    /* create game links on hover */
.firstrow .col2 a:hover,
    .firstrow .col3 a:hover,
    .firstrow .col4 a:hover
{
  color: var(--blue) !important;
  text-decoration: underline !important;
}
    /* main page live */
.secondrow .col2,
    /* main page top */
    .secondrow .col3
{
  left: 0 !important;
  width: 50% !important;
}
    /* main page create race links do space between */
#index .firstrow
{
  display: flex !important;
  justify-content: space-between !important;
}
    /* main page live && top space top */
#index .secondrow
{
  margin-top: 20px !important;
}
    /* main page top bg && border */
#top
{
  background: var(--darkgray) !important;
  border: 1px solid var(--middlegray) !important;
}

#top .note
{
  color: var(--white) !important;
}
    /* main page top race count color text */
#top td.date
{
  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;
}
    /* 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;
}
    /* 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,
    /* live forum branch name */
    #index #live li .title2,
    /* live forum time posted */
    #index #live li .time
{
  color: var(--white) !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
{
  top: 46px;
  right: 0 !important;
  position: fixed !important;
  z-index: 150 !important;
}
    /* login and password description text color */
#login-form table label
{
  font-weight: lighter !important;
}
    /* footer */
#footer
{
  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
{
  background: none !important;
}
    /* invite rating && friend */
    /* friend styling only */
.notification-bar,
    #top-popup
{
  background: var(--deepgray) !important;
  border-top: 1px solid var(--blue) !important;
  border-bottom: 1px solid var(--blue) !important;
  width: 100% !important;
}
    /* rating show */
#top-popup[style*='top: 0px']
{
  top: 45px !important;
  transition: top 2s !important;
}
    /* rating hide */
#top-popup[style*='top: -']
{
  top: -36px !important;
  transition: top 2s !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 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;
}
    /* fast create race buttons */
#recent-games-container
{
  background: var(--darkgray) !important;
}

.recent-game:hover
{
  background: var(--deepgray) !important;
}

.recent-game-description,
    .recent-game-levels
{
  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 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(--achievement) !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;
  background: var(--deepgray) var(--achievement) !important;
  padding-left: 63px !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;
  padding-left: 63px !important;
}

#gamelist td.enter a:hover
{
  display: block !important;
  box-sizing: border-box !important;
  width: 63px !important;
  height: 63px !important;
  background: var(--deepgray) var(--race) !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;
}
    /* 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 user script users count */
.chat .userlist .userListCnt
{
  display: flex !important;
  height: 16px !important;
  width: 16px !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 */
.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
{
  opacity: 0 !important;
}
    /* chat blocked user nickname add offline icon */
.chat .userlist ins a.info::after
{
  display: inline-block !important;
  content: '' !important;
  height: 8px !important;
  width: 8px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, #baf2ba 0%, #2ef459 49%, #26ef80 52%, #1e894b 100%) !important;
  transform: rotate(45deg) !important;
  position: relative !important;
  left: -10px !important;
  opacity: .8 !important;
}
    /* chat blocked user nickname add offline icon */
.chat .userlist ins.revoked a.info::after
{
  display: inline-block !important;
  content: '' !important;
  height: 8px !important;
  width: 8px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, #f2baba 0%, #f42e2e 49%, #ef2626 52%, #891e1e 100%) !important;
  transform: rotate(45deg) !important;
  position: relative !important;
  left: -10px !important;
  opacity: .8 !important;
}
    /* me && blocked messages */
.system-message
{
  color: var(--red) !important;
  font-size: 14px !important;
  background: var(--deepgray) !important;
  border: 1px solid rgba(225, 20, 0, .5) !important;
  padding: 0 10px !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(180deg) !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 colored do a little bit bright */
.chat .messages .username
{
  filter: invert(100%) !important;
}
    /* chat hide button */
#chat-title table .pin,
    #chat-title table .height-btn,
    #chat-title table .height-btn.height-btn-max
{
  background: var(--orange) !important;
  filter: brightness(0.5) !important;
}

#chat-title table .pin:hover,
    #chat-title table .height-btn:hover,
    #chat-title table .height-btn.height-btn-max:hover
{
  background: var(--orange) !important;
  filter: brightness(0.8) !important;
}
    /* chat close button */
#chat-title table .mostright
{
  background: var(--red) !important;
  filter: brightness(0.5) !important;
}

#chat-title table .mostright:hover
{
  background: var(--red) !important;
  filter: brightness(0.7) !important;
}

#chat-title table .active.c
{
  background: var(--blue) !important;
  filter: brightness(0.8) !important;
}
    /* filter mat && smiles button */
.chat .messages table td .chat-opt-btn
{
  background: none !important;
  border: none !important;
}

.chat .messages table td .chat-opt-btn.active
{
  background: none !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;
}

.chat .messages table input.text
{
  font: 14px Tahoma !important;
  color: var(--white);
  line-height: 25px !important;
  border-top: 1px solid var(--middlegray) !important;
}
    /* chat messages font size */
.chat .messages
{
  font-size: 14px !important;
}
    /* chat messages simple message time */
.chat .messages span.clickable
{
  color: var(--blue) !important;
}

.chat .messages span.clickable:hover
{
  color: var(--lightblue) !important;
}
    /* chat messages private && system messages */
.chat .messages .time
{
  color: var(--red) !important;
  cursor: not-allowed !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(--filterBlue) !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: 20px !important;
  height: 20px !important;
  width: 20px !important;
  background: var(--ignoreBlue) !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(--filterOrange) !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
{
  opacity: 0.6 !important;
}

.car .imgcont
{
  box-shadow: 0 0 2px 2px white !important;
}

.car .name
{
  color: var(--white) !important;
}
    /* RACE */
    /* race remove margin to do more space around */
.gameblock
{
  margin: 0 !important;
}
    /* race default game loading hide vosvoiasi */
#gameloading
{
  width: 100% !important;
  background: var(--deepdark) !important;
  border: none !important;
}
    /* race status block under typeblock bg color */
#status
{
  background: var(--darkgray) !important;
}
    /* race advertisement remove */
#playads
{
  display: none !important;
}
    /* race settings links styles */
#params a
{
  text-decoration: underline !important;
  border-bottom: none !important;
}
    /* race settings panel sliders styles */
    /* slider handle */
.slider .handle
{
  background: none !important;
  background: linear-gradient(to right, #ffffff 0%, #dddddd 2%, #c9c9c9 3%, #f9f9f9 26%, #eaeaea 34%, #fcfcfc 36%, #fcfcfc 40%, #fcfcfc 55%, #a5a5a5 60%, #bcbcbc 65%, #e5e5e5 80%, #efefef 91%, #f7f7f7 98%, #9b9b9b 100%) !important;
}
    /* slider road */
.slider
{
  background: none !important;
  background-color: var(--middlegray) !important;
}
    /* slider disabled */
#params .slider.off
{
  background: none !important;
  background-color: var(--deepgray) !important;
  border-radius: 7px !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;
}
    /* 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
{
  background-color: var(--darkgray) !important;
}
    /* race road divider */
.player .divider
{
  height: 0 !important;
  background: var(--middlegray) !important;
  border-bottom: 1px solid var(--middlegray) !important;
}

.player .rating .stats
{
  color: var(--middlegray) !important;
}

.player .rating .rating_gained
{
  background: none !important;
  background: var(--orange) !important;
  color: var(--darkgray) !important;
}
    /* race lable point % count */
#players-count-lbl b
{
  color: var(--darkgray) !important;
  background: var(--blue) !important;
}

#rating_loading
{
  background: none !important;
  bottom: 53px !important;
  left: -50px !important;
  font-size: 12px !important;
  color: var(--blue) !important;
}

#speedpanel #speed-label,
    #speedpanel #errors-label
{
  color: var(--lightblue) !important;
}

#speedpanel #speed-label
{
  top: 60px !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;
}
    /* race how to race && report to text links rules */
#report a
{
  border-bottom: 1px solid var(--blue) !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: 1px solid var(--middlegray) !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: 1px solid var(--middlegray) !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: contrast(3) invert(90%) grayscale(1) brightness(.9) !important;
    }
    /* race typeblock input text default color */
    #typeblock #inputtext {
        color: var(--white);
        background: var(--darkgray) !important;
        border: none !important;
        border-bottom: 1px solid var(--middlegray) !important;
    }
    /* race typeblock input text when error text color && bg color */
    #typeblock #inputtext[class="error"] {
        background: var(--red) !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: var(--blue) !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;
    }
    /* game handles */
    .gameblock .rc .handle,
    .gameblock .handle {
        margin-left: -20px !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;
    }
    /* 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(--white) !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;
    }
    .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;
    }
    .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;
    }
    .gametypes tr.active {
        background: var(--deepgray) !important;
    }
    .gametypes tr:hover {
        background: var(--middlegray) !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 * {
        padding: 2px !important;
    }
    #create .buttons input.create_game {
        height: 46px !important;
    }
    #create .buttons input.save_game {
        height: 32px !important;
    }
    #create dd .params {
        width: 510px !important;
        background-color: transparent !important;
        border: 1px solid var(--middlegray) !important;
    }
    select {
        background: var(--deepgray) !important;
        color: var(--white) !important;
        border: none !important;
    }
    /* FORUM */
    /* forum all post img opacity none on hover */
    #posts-list .post-container .text img:hover {
        transition: all 0.2s !important;
        opacity: 1 !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 .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;
    }
    /* forum pages note */
    .paginator b {
        display: none !important;
    }
    #posts-list .pages {
        opacity: 0.3 !important;
        color: var(--deepgray) !important;
        background: var(--deepgray) !important;
        padding: 10px !important;
        border-bottom: 1px solid var(--blue) !important;
        position: fixed !important;
        top: 165px !important;
        right: 20px !important;
        transition: opacity 0.2s !important;
    }
    #posts-list .pages:hover {
        opacity: 1 !important;
        transition: opacity 0.2s !important;
        animation: jump 0.2s 1 linear !important;
    }
    @keyframes jump {
        0% {
            opacity: 1;
        }
        20% {
            opacity: 0.1
        }
        40% {
            opacity: 1;
        }
        60% {
            opacity: 0.1
        }
        80% {
            opacity: 0.5
        }
        100% {
            opacity: 1;
        }
    }
    /* ctrls display none global */
    .ctrls i {
        display: none !important;
    }
    .quotemain {
        background: var(--deepgray) !important;
        color: var(--orange) !important;
        border: none !important;
    }
    #forums-list .item td {
        border-bottom: 1px solid var(--middlegray) !important;
    }
    #forums-list .item a.short-description {
        color: var(--blue) !important;
    }
    #forums-list .item a.short-description:hover {
        color: var(--lightblue) !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 .rang {
        color: var(--white) !important;
    }
    #posts-list .post .text {
        color: var(--white)
    }
    #posts-list .posth,
    #posts-list .post {
        border: none !important;
    }
    #posts-list .posth {
        background: var(--deepgray) !important;
    }
    #posts-list .posth.admin {
        background: var(--deepgray) !important;
        border-bottom: 1px solid green !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 {
        border-color: var(--blue) !important;
        background: var(--deepgray) !important;
    }
    .hidemain .hidetop {
        font-size: 0 !important;
        padding-left: 0 !important;
        background: none !important;
        background-color: var(--blue) !important;
        height: 15px !important;
        margin: 10px !important;
        border-radius: 3px !important;
    }
    .hidetop.expanded {
        font-size: 0 !important;
        padding-left: 0 !important;
        background: none !important;
        background-color: var(--red) !important;
        height: 15px !important;
        margin: 10px !important;
        border-radius: 3px !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:#b32004"] {
        color: #ff4e2d !important;
    }
    span[style="color:#6116bd"] {
        color: #bf8bff !important;
    }
    span[style="color:#007800"] {
        color: #0dec0d !important;
    }
    #posts-list .write textarea {
        border: 1px solid var(--middlegray) !important;
        background: var(--darkgray) !important;
        color: var(--white) !important;
        font-size: 14px !important;
        width: 1154px !important;
        max-width: 1154px !important;
        min-width: 1154px !important;
    }
    #write-block input[type] {
        background: var(--darkgray) !important;
        color: var(--white) !important;
    }
    #write-block input[type]:hover {
        background: var(--blue) !important;
        color: var(--deepgray) !important;
    }
    #fast-reply-controls td {
        opacity: 0.8 !important;
    }
    /* forum default avatar none uploaded */
    .avatar_big img[src*="dummy"] {
        filter: invert(83%) !important;
    }
    /* forum level icon */
    .avatar_big .level_icon {
        background: var(--orange) !important;
        border-radius: 50% !important;
    }
    .avatar_big .level_icon i {
        top: 3px !important;
        color: var(--deepgray) !important;
    }
    #posts-list .post .post-opts a,
    #posts-list .posth a {
        color: var(--blue) !important;
        text-decoration: underline !important;
    }
    #posts-list .post .post-opts a:hover,
    #posts-list .posth a:hover {
        color: var(--lightblue) !important;
        text-decoration: underline !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;
    }
    /* 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 {
        border-top: 1px solid var(--middlegray) !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;
    }
    /* 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 {
        background: var(--darkgray) !important;
    }
    .fuel-root .month span.ng-scope:nth-child(1) {
        color: var(--white) !important;
    }
    /* ABOUT GAME */
    /* about menu active */
    ul.trimenu li.active {
        color: var(--darkgray) !important;
        background: var(--blue) none !important;
        border-radius: 3px !important;
        text-decoration: none !important;
        height: 30px !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[name=text],
    .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;
}

.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;
}
    /* 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
{
  width: 100% !important;
  background: none !important;
  padding: 5px !important;
  border: none !important;
  border-bottom: 1px solid var(--middlegray) !important;
}

.search input
{
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: var(--white) !important;
}
    /* vocs rating main vertical long container */
.voclist td.popularity
{
  background: none !important;
}
    /* vocs every voc item border bottom */
.voclist table td
{
  border-bottom: 1px solid var(--middlegray) !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;
}
    /* vocs page active button */
.pages .selected
{
  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
{
  color: var(--darkgray) !important;
}
    /* vocs type of NAME color && do lighter */
.voclist table .symbols strong
{
  color: var(--white) !important;
  font-weight: lighter !important;
}
    /* top for the day && week active item remove bg img shit and set bg color */
#toplist ul.mode li.active,
    #toplist ul.mode li.active span
{
  background: var(--blue) !important;
}

#toplist ul.mode li.active span
{
  color: var(--deepgray) !important;
}
    /* top list items bg color*/
#toplist table .highlight,
    #toplist table td,
    /* nickname container bg color */
    #toplist .name
{
  border-bottom: 1px solid var(--middlegray) !important;
        /* add to nickname block and speed result border bottom */
  background: var(--darkgray) !important;
}
    /* remove from all items border bottom to clean for simplicity */
#toplist table td
{
  border: none !important;
}
    /* rating page info panel */
.columns .info
{
  background: var(--deepgray) !important;
  border-bottom: 1px solid var(--blue) !important;
}
    /* race */
    /* race rating number color */
.car .car_rating,
    .player .rating div
{
  color: var(--white) !important;
}
    /* klavotols race statistics */
#spectrumCanvas
{
  background: var(--deepgray) !important;
  filter: contrast(2) !important;
}

#statistics
{
  width: 270px !important;
  margin-top: 0 !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 */
#play-right.with-ads
{
  position: absolute !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;
}
    /* 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;
}
    /* remove text and gif loading img from race loading view block */
.gameloading-content
{
  background: var(--darkgray) !important;
  color: var(--darkgray) !important;
  position: relative !important;
}
    /* create another loading race progress animation */
.gameloading-content::after
{
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !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: 20px !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 img invert */
#back_keyboard
{
  filter: invert(83%) !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;
}
    /* race delete result button */
.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;
}
    /* 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;
}
    /* links not colored do them suffer of mine color */
#content a
{
  color: var(--blue);
}

#content a:hover
{
  color: var(--lightblue);
}
    /* 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;
}
    /* 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: 24px !important;
  width: 24px !important;
  padding-left: 24px !important;
  background: var(--qualification) !important;
}
    /* @media (min-width: 1850px) {
        .userpanel .user-block .user-dropdown .dropmenu {
            display: block !important;
            top: 70px !important;
            right: 0 !important;
            position: fixed !important;
            opacity: 0.5 !important;
            transition: opacity 0.2s !important;
        }
        .userpanel .user-block .user-dropdown .dropmenu:hover {
            opacity: 1 !important;
            transition: opacity 0.2s !important;
        }
    } */
    /* play with tablet */
@media only screen and (max-width: 1075px)
{
        /* menu */
        /* .right {
            padding: 0 !important;
            width: 100% !important;
            float: none !important;
        } */
  .right .menu
  {
    top: 45px !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 700px !important;
  }
        /* logo position */
  #logo
  {
    top: 0px !important;
    z-index: 110 !important;
  }

  #play-right
  {
    display: none !important;
  }
        /* main containers width */
  .minwidth,
        .minwidth_holyhack,
        .minwidth_container
  {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !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: 90px !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 */
  .play-wrapper
  {
    margin: 25px 0 0 0 !important;
  }
        /* main page first && second row top space */
  #index .firstrow
  {
    top: 30px !important;
  }

  #index .secondrow
  {
    margin-top: 40px !important;
  }
        /* main page secondrow content align column && width */
  #index .secondrow
  {
    display: flex !important;
    flex-direction: column !important;
  }

  #index .secondrow .col2,
        #index .secondrow .col3
  {
    width: 100% !important;
  }
        /* recent games container top space */
  #head #recent-games-container
  {
    bottom: -1240px !important;
  }
        /* content top space */
  div#content
  {
    padding: 40px 0 !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 .mini-nav
  {
    display: block !important;
  }

  .profile-root .profile-header.fixed
  {
    top: 90px !important;
  }

  #profile-index .trophy
  {
    display: flex !important;
    justify-content: space-around !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;
  }
}
    /* chat min width 700 px */
@media only screen and (max-width: 840px)
{
  .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;
  }

  #logo
  {
    display: none !important;
  }
}
}