.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 5px;
    border-radius: 5px;
    border-color: #000 !important;
    background-color: gray !important;
    height: 25px;
    cursor: pointer;
    margin-top: -5px;
    margin-left: -5px;
    outline: 0;
    -ms-touch-action: none;
    touch-action: none
}

selector {
    cursor: none
}

#bubbleSlider:hover {
    background: linear-gradient(to right, #000 24%, #474747 25%, #0f0f0f 26%, #0f0f0f 49%, #474747 50%, #0f0f0f 51%, #0f0f0f 74%, #474747 75%, #000 76%)
}

#bubbleSlider {
    display: none;
    left: 10px;
    border-width: 2px;
    margin-top: 8px;
    margin-left: -12px;
    width: 85px;
    height: 15px;
    background-color: #0a0a0a;
    color: #fff;
    box-shadow: rgba(0, 0, 0, .75) 0 0 5px 0;
    text-shadow: rgba(42, 42, 42, .8) 1px 2px 0;
    border-radius: 3px;
    border-style: solid;
    border-color: #1d1d1d
}

#graphOptions {
    float: right;
    color: #868686;
    width: 102px;
    height: 0;
    font-size: 17px;
    position: relative;
    line-height: 26px;
    top: -90px
}

.input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset
}

body {
    background: url(https://i.imgur.com/AL3DOGZ.jpg) center fixed no-repeat #161616;
    height: 100%;
    height: -moz-available;
    height: fill-available;
    width: -webkit-fill-available;
    background-size: cover !important
}

#main {
    margin-top: 20px !important
}

#replayLinks {
    width: 70%;
    height: 0
}

div#replayLinks span {
    display: inline-flex;
    height: 10px
}

#searchButton {
    left: -78px
}

#leaderButton {
    left: -260px
}

div#profile h3 {
    font-size: .7rem
}

.button:hover {
    color: #cce7ff !important
}

.button {
    font-family: FontAwesome;
    background-color: #1d1d1d;
    color: #fff !important;
    font-weight: 400;
    height: 34px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-shadow: #000 1px 1px;
    width: 34px;
    font-size: 16px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding-top: 2px;
    position: relative
}

.button:focus {
    outline: 0
}

#loadedClass {
    text-shadow: 1px 1px #000;
    text-indent: 5px;
    min-width: 895px;
    width: 88.25%;
    border-collapse: collapse;
    display: none;
    text-align: center
}

#loadedPlayedWith,
#loadedStats {
    margin-top: 0
}

#loadedPlayedWith img,
#loadedStats img {
    height: 20px
}

#loadedPlayedWith a:link,
#loadedPlayedWith a:visited,
#loadedStats a:link,
#loadedStats a:visited {
    color: #fff !important;
    text-decoration: none !important
}

#main a:link {
    text-decoration: none !important
}

.input {
    text-transform: capitalize;
    font-weight: 600;
    margin-left: 73px;
    width: 252px;
    height: 32px;
    font-size: 16px;
    text-align: center;
    font-family: sans-serif;
    background-color: #0a0a0a;
    color: #fff;
    box-shadow: rgba(0, 0, 0, .74902) 0 0 5px 0;
    text-shadow: rgba(42, 42, 42, .8) 1px 2px 0;
    border-radius: 5px;
    border-style: solid;
    border-color: #1d1d1d;
    border-width: 3px
}

#loadedPlayedWith th,
#loadedStats th {
    cursor: default
}

.input:focus {
    background: #000;
    outline: 0
}

#matchBackdrop {
    padding: 10px !important
}

.header {
    margin-left: 0
}

div#profile {
    min-width: 900px;
    width: 90%;
    margin: 5px
}

h3 {
    text-align: left !important;
    line-height: 29px
}

h2,
h3 {
    font-size: 1.1em;
    font-family: sans-serif;
    color: #fff;
    position: relative;
    font-weight: 400
}

#loadedPlayedWith .sp,
#loadedStats .sp {
    zoom: .6;
    -moz-transform: scale(.6);
    margin: -7px
}

#profile .sp {
    margin-left: 5px;
    margin-right: 5px
}

#profile a,
#profile i {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 6px #000
}

#profile img {
    height: 100%;
    float: right;
    padding-left: 5px;
    padding-right: 5px
}

#footer {
    z-index: 1
}

#footer img {
    z-index: 1
}

#winloss {
    height: 0;
    min-width: 110px;
    margin: 0 auto;
    position: relative;
    bottom: 20px;
    z-index: 1 !important;
    overflow: visible !important
}

#container {
    overflow: visible !important;
    position: relative;
    width: 90%;
    height: calc(100% - 699px);
    min-height: 320px;
    top: 0;
    margin: 0 auto;
    margin-bottom: .65rem
}

#bStat {
    z-index: 6;
    pointer-events: none;
    width: 500px;
    top: 200px;
    margin-top: -125px;
    left: 160px;
    position: absolute;
    user-select: none
}

#topimg {
    cursor: pointer !important;
    height: 20px !important;
    font-size: .62rem
}

#xButton {
    cursor: pointer;
    font-family: arial;
    font-style: normal;
    font-size: 13px;
    position: absolute;
    margin: -4px;
    margin-left: 6px;
    color: #888
}

#xButton:hover {
    color: #fff
}

#hButton {
    float: left;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    background: 0 0;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 0;
    outline: 0
}

#hButton:hover {
    color: #b7ddff
}

#mHistory {
    width: 384px;
    text-align: center !important;
    padding: 14px;
    margin-left: -4px;
    background: -webkit-repeating-linear-gradient(left, rgba(19, 19, 19, 0) 0, rgba(0, 0, 0, .941176) 50%, rgba(19, 19, 19, 0) 100%)
}

.black {
    background: -webkit-repeating-linear-gradient(top, #151515 0, #000 100%)
}

.gray {
    background: -webkit-repeating-linear-gradient(top, #1d1d1d 0, #0e0e0e 100%)
}

.green {
    background: -webkit-repeating-linear-gradient(top, #10382c 0, #0b100f 100%)
}

.greenvic {
    background: -webkit-repeating-linear-gradient(top, rgb(26 31 28 / 98%) 0, rgb(12 22 19) 64%, rgb(14 18 14) 75%, #080a06 100%)
}

tr.blueMain td,
tr.redMain td {
    background: #060606;
    border-color: #222;
    padding-left: 10px;
    padding-right: 10px;
}

tr.blue td,
tr.red td {
    padding-left: 10px;
    padding-right: 10px;
}

tr.blue,
tr.blueMain .rankTip {
    font-weight: 600;
    background: -webkit-repeating-linear-gradient(top, #11191f 0, #08090c 100%) !important;
    padding-left: 10px;
    padding-right: 10px;
}

tr.red,
tr.redMain .rankTip {
    background: -webkit-repeating-linear-gradient(top, #271414 0, #130707 100%) !important;
    padding-left: 10px;
    padding-right: 10px;
}

.aDate {
    text-decoration: underline
}

.black,
.blue,
.blueMain,
.gray,
.green,
.greenvic,
.red,
.redMain {
    font-size: 12px;
    font-size: .62rem;
    text-shadow: 1px 1px #000 !important;
    height: 23px !important
}

.tooltipster-content th {
    font-size: 11px;
    font-weight: 400
}

.tooltipster-content {
    font-family: sans-serif;
    text-decoration: none !important
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-box {
    border: none;
    background: #000;
    background: rgba(10, 10, 10, 1)
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-box {
    margin-top: 8px
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-box {
    margin-right: 8px
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-box {
    margin-left: 8px
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-box {
    margin-bottom: 8px
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow {
    height: 8px;
    margin-left: -8px;
    width: 16px
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow,
.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow {
    height: 16px;
    margin-left: 0;
    margin-top: -8px;
    width: 8px
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-background {
    display: none
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-border {
    border: 8px solid transparent
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: #1b1b1b;
    border-bottom-color: rgba(10, 10, 10, 1)
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow-border {
    border-left-color: #1b1b1b;
    border-left-color: rgba(10, 10, 10, 1)
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-border {
    border-right-color: #1b1b1b;
    border-right-color: rgba(10, 10, 10, 1)
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {
    border-top-color: #1b1b1b;
    border-top-color: rgba(10, 10, 10, 1)
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-uncropped {
    top: -8px
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-uncropped {
    left: -8px
}

.groupSizeRange::-webkit-slider-thumb:hover {
    background: #fff
}

.groupSizeRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    cursor: pointer;
    width: 14px;
    background: #9a9a9a;
    border-radius: 50%;
    box-shadow: #000 0 0 0 2px
}

.groupSizeRange {
    -webkit-appearance: none;
    width: 80px;
    height: 8px;
    border-radius: 5px;
    background: #2f2f2f;
    outline: 0
}

.groupSliderInfo {
    user-select: none;
    font-family: arial;
    width: 38px;
    position: relative;
    color: #fff;
    line-height: 15px;
    text-align: center;
    border-radius: 3px;
    background: #000;
    padding: 5px 8px;
    margin-left: -5px;
    margin-top: -2px;
    float: right
}

.historyTitle {
    text-shadow: 1px 1px 5px #000;
    font-size: 18px;
    width: 88.3%;
    height: 30px;
    bottom: 0;
    background: -webkit-linear-gradient(left, rgba(23, 23, 23, .92) 50%, rgba(255, 255, 255, 0) 100%);
    padding-left: 6px
}

#hBarFilter {
    top: 2px;
    height: 22px;
    left: 2px;
    position: relative;
    cursor: pointer;
    margin-bottom: -2px
}

#hBarFilter:hover {
    filter: grayscale(1)
}

.header {
    font-weight: 400;
    padding-right: 20px
}

.headerSortDown::after,
.headerSortUp::after {
    font-family: FontAwesome;
    font-weight: 400;
    width: 0;
    text-overflow: ellipsis;
    content: " \f077";
    float: right;
    padding-right: 0;
    color: beige
}

.headerSortDown::after {
    content: " \f078"
}

.headerSortUp {
    background-repeat: no-repeat !important;
    height: 40px !important;
    background-position: 90% 50% !important
}

.headerSortDown {
    background-repeat: no-repeat !important;
    height: 40px !important;
    background-position: 90% 50% !important
}

th {
    background: 0 0 !important
}

.bubbleSwitch input {
    display: none !important
}

.bubbleSwitch {
    display: none;
    content: ''
}

.bubbleSwitch>div {
    width: 30px;
    height: 15px;
    top: 9px;
    left: 11px;
    z-index: 12;
    cursor: pointer;
    position: relative;
    border-radius: 50px;
    line-height: 15px;
    padding: 0 10px;
    transition: all 150ms;
    background-color: #250000;
    box-shadow: inset rgba(0, 0, 0, .74902) 0 0 4px 1px, rgba(0, 0, 0, .74902) 0 0 5px 0;
    border-radius: 5px;
    border-style: solid;
    border-color: #1d1d1d
}

.bubbleSwitch>input:checked+div {
    background: #02191b
}

.bubbleSwitch>div:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: -1px;
    height: 15px;
    width: 15px;
    background: #797979;
    border: 1px #000 solid;
    border-radius: 25%;
    transition: all 150ms
}

.bubbleSwitch>div:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 6px;
    border-radius: 15%;
    background: linear-gradient(#dcdcdc, #e3e3e3);
    transition: all .2s
}

.bubbleSwitch>input:checked+div:after {
    left: 85px
}

.bubbleSwitch>input:checked+div:before {
    content: '';
    position: absolute;
    left: 33px
}

#bStatVal {
    font-size: .57rem;
    z-index: 12;
    text-shadow: 1px 1px #000
}

#bStatDesc {
    font-size: .57rem;
    color: #a9a9a9;
    z-index: 12
}

#glass {
    min-height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .29) 0, rgb(77 78 84 / 0) 30%, rgba(0, 0, 0, .47) 100%);
    border: 1px #1b1b1b solid;
    box-shadow: 0 0 7px #000;
    border-bottom: none;
    border-top: none;
    z-index: -10;
    overflow: hidden;
    bottom: 0;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    min-width: 980px;
    width: 50%;
    margin: auto
}

#historySeek {
    width: 50%;
    min-width: 980px;
    position: fixed;
    height: 0
}

#allyEnemy:hover {
    color: #fff !important
}

#allyEnemy {
    color: #63b9b2;
    filter: drop-shadow(1px 1px 2px #000);
    font-size: 26px;
    margin-left: 54px;
    z-index: 15 !important;
    position: relative;
    line-height: 40px;
    display: none
}

#bubbleSearch {
    display: none;
    position: relative;
    border-width: 2px;
    margin-top: 4px;
    left: -128px;
    text-align: right;
    font-size: 14px;
    z-index: 1;
    width: 120px;
    height: 26px;
    font-family: fontawesome, sans-serif;
    padding-right: 5px;
    padding-left: 5px
}

#graphOptions>.awesomplete>ul {
    margin-left: -60px;
    line-height: 15px;
    font-size: 15px;
    z-index: 25
}

#historyFilter {
    cursor: pointer;
    float: right;
    margin-top: 5px
}

#filterHistory a {
    user-select: none;
    position: relative;
    top: -5px;
    padding-right: 3px;
    padding-left: 3px
}

#filterHistory::-webkit-scrollbar-thumb {
    background: #464646;
    overflow-x: hidden !important
}

#filterHistory::-webkit-scrollbar {
    width: 6px !important;
    height: 0;
    display: block
}

#filterHistory {
    cursor: pointer;
    text-transform: capitalize;
    font-size: 14px;
    font-family: sans-serif;
    position: relative;
    max-height: 420px;
    overflow: scroll;
    text-shadow: 1px 1px #000
}

#filterHistory i {
    position: relative;
    font-size: 16px;
    font-style: normal;
    filter: grayscale(1) drop-shadow(2px 2px #000)
}

#filterCheck {
    cursor: pointer;
    padding: 5px
}

#graphOptions i:hover {
    cursor: pointer;
    color: #fff;
    text-shadow: 0 0 5px #fff
}

#container .sps {
    filter: grayscale(1) drop-shadow(3px 3px 2px #000);
    z-index: 0 !important
}

.sprite {
    background-image: url(https://i.imgur.com/wWzaETc.png);
    background-repeat: no-repeat;
    display: inline-block
}

.sprite-animist,
.sprite-armsman,
.sprite-bainshee,
.sprite-bard,
.sprite-berserker,
.sprite-blademaster,
.sprite-bonedancer,
.sprite-cabalist,
.sprite-champion,
.sprite-cleric,
.sprite-druid,
.sprite-eldritch,
.sprite-enchanter,
.sprite-friar,
.sprite-healer,
.sprite-heretic,
.sprite-hero,
.sprite-mauler,
.sprite-mentalist,
.sprite-minstrel,
.sprite-necromancer,
.sprite-paladin,
.sprite-reaver,
.sprite-runemaster,
.sprite-savage,
.sprite-shaman,
.sprite-skald,
.sprite-sorcerer,
.sprite-spiritmaster,
.sprite-thane,
.sprite-theurgist,
.sprite-valewalker,
.sprite-valkyrie,
.sprite-vampiir,
.sprite-warden,
.sprite-warlock,
.sprite-warrior,
.sprite-wizard {
    width: 44px;
    height: 44px
}

.sprite-animist {
    background-position: 0 0
}

.sprite-armsman {
    background-position: -44px 0
}

.sprite-bainshee {
    background-position: -88px 0
}

.sprite-bard {
    background-position: -132px 0
}

.sprite-berserker {
    background-position: -176px 0
}

.sprite-blademaster {
    background-position: -220px 0
}

.sprite-bonedancer {
    background-position: 0 -44px
}

.sprite-cabalist {
    background-position: -44px -44px
}

.sprite-champion {
    background-position: -88px -44px
}

.sprite-cleric {
    background-position: -132px -44px
}

.sprite-druid {
    background-position: -176px -44px
}

.sprite-eldritch {
    background-position: -220px -44px
}

.sprite-enchanter {
    background-position: 0 -88px
}

.sprite-friar {
    background-position: -44px -88px
}

.sprite-healer {
    background-position: -88px -88px
}

.sprite-heretic {
    background-position: -132px -88px
}

.sprite-hero {
    background-position: -176px -88px
}

.sprite-mauler {
    background-position: -220px -88px
}

.sprite-mentalist {
    background-position: 0 -132px
}

.sprite-mercenary {
    width: 44px;
    height: 44px;
    background-position: -44px -132px
}

.sprite-minstrel {
    background-position: -88px -132px
}

.sprite-necromancer {
    background-position: -132px -132px
}

.sprite-paladin {
    background-position: -176px -132px
}

.sprite-reaver {
    background-position: -220px -132px
}

.sprite-runemaster {
    background-position: 0 -176px
}

.sprite-savage {
    background-position: -44px -176px
}

.sprite-shaman {
    background-position: -88px -176px
}

.sprite-skald {
    background-position: -132px -176px
}

.sprite-sorcerer {
    background-position: -176px -176px
}

.sprite-spiritmaster {
    background-position: -220px -176px
}

.sprite-thane {
    background-position: 0 -220px
}

.sprite-theurgist {
    background-position: -44px -220px
}

.sprite-valewalker {
    background-position: -88px -220px
}

.sprite-valkyrie {
    background-position: -132px -220px
}

.sprite-vampiir {
    background-position: -176px -220px
}

.sprite-warden {
    background-position: -220px -220px
}

.sprite-warlock {
    background-position: -264px 0
}

.sprite-warrior {
    background-position: -264px -44px
}

.sprite-wizard {
    background-position: -264px -88px
}

.mR {
    background-image: url(https://i.imgur.com/e4Ajiax.png);
    background-repeat: no-repeat;
    display: inline-block
}

.mR-Bronze_I {
    width: 80px;
    height: 80px;
    background-position: 0 0
}

.mR-Bronze_II {
    width: 80px;
    height: 80px;
    background-position: -80px 0
}

.mR-Bronze_III {
    width: 80px;
    height: 80px;
    background-position: -160px 0
}

.mR-Bronze_IV {
    width: 80px;
    height: 80px;
    background-position: -240px 0
}

.mR-Bronze_V {
    width: 80px;
    height: 80px;
    background-position: -320px 0
}

.mR-Gold_I {
    width: 80px;
    height: 80px;
    background-position: 0 -80px
}

.mR-Gold_II {
    width: 80px;
    height: 80px;
    background-position: -80px -80px
}

.mR-Gold_III {
    width: 80px;
    height: 80px;
    background-position: -160px -80px
}

.mR-Gold_IV {
    width: 80px;
    height: 80px;
    background-position: -240px -80px
}

.mR-Gold_V {
    width: 80px;
    height: 80px;
    background-position: -320px -80px
}

.mR-Golden_Master_Elite {
    width: 80px;
    height: 80px;
    background-position: 0 -160px
}

.mR-Master_Elite {
    width: 80px;
    height: 80px;
    background-position: -80px -160px
}

.mR-Master_I {
    width: 80px;
    height: 80px;
    background-position: -160px -160px
}

.mR-Master_II {
    width: 80px;
    height: 80px;
    background-position: -240px -160px
}

.mR-Master_III {
    width: 80px;
    height: 80px;
    background-position: -320px -160px
}

.mR-Master_IV {
    width: 80px;
    height: 80px;
    background-position: 0 -240px
}

.mR-Master_V {
    width: 80px;
    height: 80px;
    background-position: -80px -240px
}

.mR-Novice_I {
    width: 80px;
    height: 80px;
    background-position: -160px -240px
}

.mR-Novice_II {
    width: 80px;
    height: 80px;
    background-position: -240px -240px
}

.mR-Novice_III {
    width: 80px;
    height: 80px;
    background-position: -320px -240px
}

.mR-Novice_IV {
    width: 80px;
    height: 80px;
    background-position: 0 -320px
}

.mR-Novice_V {
    width: 80px;
    height: 80px;
    background-position: -80px -320px
}

.mR-Platinum_I {
    width: 80px;
    height: 80px;
    background-position: -160px -320px
}

.mR-Platinum_II {
    width: 80px;
    height: 80px;
    background-position: -240px -320px
}

.mR-Platinum_III {
    width: 80px;
    height: 80px;
    background-position: -320px -320px
}

.mR-Platinum_IV {
    width: 80px;
    height: 80px;
    background-position: -400px 0
}

.mR-Platinum_V {
    width: 80px;
    height: 80px;
    background-position: -400px -80px
}

.mR-Silver_I {
    width: 80px;
    height: 80px;
    background-position: -400px -160px
}

.mR-Silver_II {
    width: 80px;
    height: 80px;
    background-position: -400px -240px
}

.mR-Silver_III {
    width: 80px;
    height: 80px;
    background-position: -400px -320px
}

.mR-Silver_IV {
    width: 80px;
    height: 80px;
    background-position: 0 -400px
}

.mR-Silver_V {
    width: 80px;
    height: 80px;
    background-position: -80px -400px
}

.mR-Sovereign_Elite {
    width: 80px;
    height: 80px;
    background-position: -160px -400px
}

.mR-Supreme_Master_Elite {
    width: 80px;
    height: 80px;
    background-position: -240px -400px
}

.mR-Unrivaled_Sovereign_Elite {
    width: 80px;
    height: 80px;
    background-position: -320px -400px
}

.sps {
    background-image: url(https://i.imgur.com/qRgU9Eg.png);
    background-repeat: no-repeat;
    display: inline-block
}

.sps-animist {
    width: 22px;
    height: 22px;
    background-position: 0 0
}

.sps-armsman {
    width: 22px;
    height: 22px;
    background-position: -22px 0
}

.sps-bainshee {
    width: 22px;
    height: 22px;
    background-position: -44px 0
}

.sps-bard {
    width: 22px;
    height: 22px;
    background-position: -66px 0
}

.sps-berserker {
    width: 22px;
    height: 22px;
    background-position: -88px 0
}

.sps-blademaster {
    width: 22px;
    height: 22px;
    background-position: -110px 0
}

.sps-bonedancer {
    width: 22px;
    height: 22px;
    background-position: 0 -22px
}

.sps-cabalist {
    width: 22px;
    height: 22px;
    background-position: -22px -22px
}

.sps-champion {
    width: 22px;
    height: 22px;
    background-position: -44px -22px
}

.sps-cleric {
    width: 22px;
    height: 22px;
    background-position: -66px -22px
}

.sps-druid {
    width: 22px;
    height: 22px;
    background-position: -88px -22px
}

.sps-eldritch {
    width: 22px;
    height: 22px;
    background-position: -110px -22px
}

.sps-enchanter {
    width: 22px;
    height: 22px;
    background-position: 0 -44px
}

.sps-friar {
    width: 22px;
    height: 22px;
    background-position: -22px -44px
}

.sps-healer {
    width: 22px;
    height: 22px;
    background-position: -44px -44px
}

.sps-heretic {
    width: 22px;
    height: 22px;
    background-position: -66px -44px
}

.sps-hero {
    width: 22px;
    height: 22px;
    background-position: -88px -44px
}

.sps-mauler {
    width: 22px;
    height: 22px;
    background-position: -110px -44px
}

.sps-mentalist {
    width: 22px;
    height: 22px;
    background-position: 0 -66px
}

.sps-mercenary {
    width: 22px;
    height: 22px;
    background-position: -22px -66px
}

.sps-minstrel {
    width: 22px;
    height: 22px;
    background-position: -44px -66px
}

.sps-necromancer {
    width: 22px;
    height: 22px;
    background-position: -66px -66px
}

.sps-paladin {
    width: 22px;
    height: 22px;
    background-position: -88px -66px
}

.sps-reaver {
    width: 22px;
    height: 22px;
    background-position: -110px -66px
}

.sps-runemaster {
    width: 22px;
    height: 22px;
    background-position: 0 -88px
}

.sps-savage {
    width: 22px;
    height: 22px;
    background-position: -22px -88px
}

.sps-shaman {
    width: 22px;
    height: 22px;
    background-position: -44px -88px
}

.sps-skald {
    width: 22px;
    height: 22px;
    background-position: -66px -88px
}

.sps-sorcerer {
    width: 22px;
    height: 22px;
    background-position: -88px -88px
}

.sps-spiritmaster {
    width: 22px;
    height: 22px;
    background-position: -110px -88px
}

.sps-thane {
    width: 22px;
    height: 22px;
    background-position: 0 -110px
}

.sps-theurgist {
    width: 22px;
    height: 22px;
    background-position: -22px -110px
}

.sps-valewalker {
    width: 22px;
    height: 22px;
    background-position: -44px -110px
}

.sps-valkyrie {
    width: 22px;
    height: 22px;
    background-position: -66px -110px
}

.sps-vampiir {
    width: 22px;
    height: 22px;
    background-position: -88px -110px
}

.sps-warden {
    width: 22px;
    height: 22px;
    background-position: -110px -110px
}

.sps-warlock {
    width: 22px;
    height: 22px;
    background-position: -132px 0
}

.sps-warrior {
    width: 22px;
    height: 22px;
    background-position: -132px -22px
}

.sps-wizard {
    width: 22px;
    height: 22px;
    background-position: -132px -44px
}

@keyframes bubbleSelect {
    0% {
        fill: transparent;
        stroke: #fff;
        border-color: rgba(191, 227, 255, 0)
    }

    50% {
        border-color: rgba(191, 227, 255, 1)
    }

    100% {
        fill: background-color;
        stroke: border-color;
        border-color: border-color
    }
}

.highcharts-data-label text {
    font-size: .55rem !important;
    text-shadow: 1px 1px #000
}

.highcharts-point-select {
    animation: bubbleSelect 1.5s
}

#bRingWrapper {
    pointer-events: none;
    position: relative;
    top: -45px;
    user-select: none;
    width: 90%;
    height: 0
}

#ringTooltip {
    width: 10rem !important;
    height: 2.5rem !important;
    font-size: .85rem;
    margin-left: 4rem;
    text-align: center;
    text-shadow: 1px 1px #000 !important;
    z-index: 6;
    text-align: center !important;
    background: #0d0d0dcc;
    border-radius: 12px;
    border: .15rem solid #242424;
    box-shadow: 0 0 14px 0 #000;
    padding: .4rem;
    padding-bottom: 1rem
}

html {
    overflow: -moz-scrollbars-none
}

@media screen and (min-width:820px),
screen and (min-height:600px) {

    .black,
    .blue,
    .blueMain,
    .gray,
    .green,
    .greenvic,
    .red,
    .redMain {
        font-size: 12px
    }

    .highcharts-data-label text {
        font-size: .7rem !important
    }

    #ringTooltip {
        width: 12rem !important;
        height: 3.5rem !important;
        font-size: 1rem;
        margin-left: 0;
        border: .15rem solid #242424;
        padding: .4rem;
        padding-bottom: .5rem
    }

    div#profile h3 {
        font-size: .8rem
    }

    #container {
        margin-bottom: .65rem
    }

    #topimg {
        font-size: .85rem
    }

    #bStatVal {
        font-size: .7rem
    }

    #bStatDesc {
        font-size: .7rem
    }

    td {
        height: 1rem
    }

    #group {
        width: 790px;
        height: 300px
    }
}

@media screen and (min-width:2000px),
screen and (min-height:1080px) {

    .black,
    .blue,
    .blueMain,
    .gray,
    .green,
    .greenvic,
    .red,
    .redMain {
        font-size: 14px
    }

    .matchdropdown-dark {
        margin-right: 63px !important
    }

    #group {
        min-width: 970px;
        width: 81%;
        height: 300px
    }

    .historyTitle {
        font-size: 20px
    }

    #glass,
    #historySeek {
        min-width: 1200px
    }

    td {
        height: 1.6rem
    }

    .highcharts-data-label text {
        font-size: .85rem !important
    }

    #ringTooltip {
        width: 16.5rem !important;
        height: 3.5rem !important;
        font-size: 1.35rem;
        margin-left: 0;
        border: .2rem solid #242424;
        padding: .5rem;
        padding-bottom: 2rem
    }

    div#profile h3 {
        font-size: 1.1rem
    }

    #container {
        margin-bottom: .65rem
    }

    #topimg {
        font-size: .85rem
    }

    #bStatVal {
        font-size: .97rem
    }

    #bStatDesc {
        font-size: .97rem
    }
}

.dropdowncontainer {
    font-family: sans-serif
}

.dropdowncontainer>.matchdropdown {
    vertical-align: top
}

.matchdropdown {
    display: flex;
    margin-left: auto;
    height: 28px;
    width: 150px;
    background: #f2f2f2;
    border: 1px solid;
    border-color: #fff #f7f7f7 #f5f5f5;
    border-radius: 3px;
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .06));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .06));
    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, .06));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .06));
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08)
}

.matchdropdown:after,
.matchdropdown:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 10px;
    width: 0;
    height: 0;
    border: 4px dashed;
    border-color: #888 transparent;
    pointer-events: none
}

.matchdropdown:before {
    border-bottom-style: solid;
    border-top: none
}

.matchdropdown:after {
    margin-top: 7px;
    border-top-style: solid;
    border-bottom: none
}

.matchdropdown-select {
    position: relative;
    width: 130%;
    margin: 0;
    padding: 6px 8px 6px 10px;
    height: 28px;
    line-height: 14px;
    font-size: 12px;
    color: #62717a;
    text-shadow: 0 1px #fff;
    background: #f2f2f2;
    background: rgba(0, 0, 0, 0) !important;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none
}

.matchdropdown-select:focus {
    z-index: 3;
    width: 100%;
    color: #394349;
    outline: 0 solid #49aff2;
    outline: 0 solid -webkit-focus-ring-color;
    outline-offset: -2px
}

.matchdropdown-select>option {
    margin: 3px;
    padding: 6px 8px;
    text-shadow: none;
    background: #f2f2f2;
    border-radius: 3px;
    cursor: pointer
}

.lt-ie9 .matchdropdown {
    z-index: 1
}

.lt-ie9 .matchdropdown-select {
    z-index: -1
}

.lt-ie9 .matchdropdown-select:focus {
    z-index: 3
}

@-moz-document url-prefix() {
    .matchdropdown-select {
        padding-left: 6px
    }
}

.matchdropdown-dark {
    margin-right: 39px;
    background: #444;
    border-color: #111 #0a0a0a #000;
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .4));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .4));
    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, .4));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4));
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 1px 1px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 1px 1px rgba(0, 0, 0, .2)
}

.matchdropdown-dark:before {
    border-bottom-color: #aaa
}

.matchdropdown-dark:after {
    border-top-color: #aaa
}

.matchdropdown-dark .matchdropdown-select {
    color: #aaa;
    text-shadow: 0 1px #000;
    background: #444
}

.matchdropdown-dark .matchdropdown-select:focus {
    color: #ccc
}

.matchdropdown-dark .matchdropdown-select>option {
    background: #444;
    text-shadow: 0 1px rgba(0, 0, 0, .4)
}