html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@font-face {
    font-family: 'FontAwesome';
    src: url(/assets/fontawesome-webfont-82ff0fe46a6f60e0ab3c4a9891a0ae0a1f7b7e84c625f55358379177a2dcb202.eot);
    src: url(/assets/fontawesome-webfont-82ff0fe46a6f60e0ab3c4a9891a0ae0a1f7b7e84c625f55358379177a2dcb202.eot?#iefix) format("embedded-opentype"),url(/assets/fontawesome-webfont-fa79d127baca4558a0b973f5f514b90fc5ef43314c41095f5cb285ffaa0a4029.woff2) format("woff2"),url(/assets/fontawesome-webfont-c9a0a23a23a3f6f7165cba218b40483a0b1750d92b49c40842f1d8f566f5f421.woff) format("woff"),url(/assets/fontawesome-webfont-2794b002e3568f5abce8991e2431ca79e0ce84a08ea1268884b4e097b62762a6.ttf) format("truetype"),url(/assets/fontawesome-webfont-67c6c8e9ffb0fcd7c7c64eaff12a298abf5b54a54b54f0e6c4c49161dba62d6d.svg#fontawesomeregular) format("svg");
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-fw {
    width: 1.28571429em;
    text-align: center
}

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none
}

    .fa-ul > li {
        position: relative
    }

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 0.14285714em;
    text-align: center
}

    .fa-li.fa-lg {
        left: -1.85714286em
    }

.fa-border {
    padding: .2em .25em .15em;
    border: solid 0.08em #eeeeee;
    border-radius: .1em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right {
    margin-left: .3em
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.fa.pull-left {
    margin-right: .3em
}

.fa.pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1)
}

:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {
    filter: none
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle
}

.fa-stack-1x, .fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #ffffff
}

.fa-glass:before {
    content: "\f000"
}

.fa-music:before {
    content: "\f001"
}

.fa-search:before {
    content: "\f002"
}

.fa-envelope-o:before {
    content: "\f003"
}

.fa-heart:before {
    content: "\f004"
}

.fa-star:before {
    content: "\f005"
}

.fa-star-o:before {
    content: "\f006"
}

.fa-user:before {
    content: "\f007"
}

.fa-film:before {
    content: "\f008"
}

.fa-th-large:before {
    content: "\f009"
}

.fa-th:before {
    content: "\f00a"
}

.fa-th-list:before {
    content: "\f00b"
}

.fa-check:before {
    content: "\f00c"
}

.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d"
}

.fa-search-plus:before {
    content: "\f00e"
}

.fa-search-minus:before {
    content: "\f010"
}

.fa-power-off:before {
    content: "\f011"
}

.fa-signal:before {
    content: "\f012"
}

.fa-gear:before, .fa-cog:before {
    content: "\f013"
}

.fa-trash-o:before {
    content: "\f014"
}

.fa-home:before {
    content: "\f015"
}

.fa-file-o:before {
    content: "\f016"
}

.fa-clock-o:before {
    content: "\f017"
}

.fa-road:before {
    content: "\f018"
}

.fa-download:before {
    content: "\f019"
}

.fa-arrow-circle-o-down:before {
    content: "\f01a"
}

.fa-arrow-circle-o-up:before {
    content: "\f01b"
}

.fa-inbox:before {
    content: "\f01c"
}

.fa-play-circle-o:before {
    content: "\f01d"
}

.fa-rotate-right:before, .fa-repeat:before {
    content: "\f01e"
}

.fa-refresh:before {
    content: "\f021"
}

.fa-list-alt:before {
    content: "\f022"
}

.fa-lock:before {
    content: "\f023"
}

.fa-flag:before {
    content: "\f024"
}

.fa-headphones:before {
    content: "\f025"
}

.fa-volume-off:before {
    content: "\f026"
}

.fa-volume-down:before {
    content: "\f027"
}

.fa-volume-up:before {
    content: "\f028"
}

.fa-qrcode:before {
    content: "\f029"
}

.fa-barcode:before {
    content: "\f02a"
}

.fa-tag:before {
    content: "\f02b"
}

.fa-tags:before {
    content: "\f02c"
}

.fa-book:before {
    content: "\f02d"
}

.fa-bookmark:before {
    content: "\f02e"
}

.fa-print:before {
    content: "\f02f"
}

.fa-camera:before {
    content: "\f030"
}

.fa-font:before {
    content: "\f031"
}

.fa-bold:before {
    content: "\f032"
}

.fa-italic:before {
    content: "\f033"
}

.fa-text-height:before {
    content: "\f034"
}

.fa-text-width:before {
    content: "\f035"
}

.fa-align-left:before {
    content: "\f036"
}

.fa-align-center:before {
    content: "\f037"
}

.fa-align-right:before {
    content: "\f038"
}

.fa-align-justify:before {
    content: "\f039"
}

.fa-list:before {
    content: "\f03a"
}

.fa-dedent:before, .fa-outdent:before {
    content: "\f03b"
}

.fa-indent:before {
    content: "\f03c"
}

.fa-video-camera:before {
    content: "\f03d"
}

.fa-photo:before, .fa-image:before, .fa-picture-o:before {
    content: "\f03e"
}

.fa-pencil:before {
    content: "\f040"
}

.fa-map-marker:before {
    content: "\f041"
}

.fa-adjust:before {
    content: "\f042"
}

.fa-tint:before {
    content: "\f043"
}

.fa-edit:before, .fa-pencil-square-o:before {
    content: "\f044"
}

.fa-share-square-o:before {
    content: "\f045"
}

.fa-check-square-o:before {
    content: "\f046"
}

.fa-arrows:before {
    content: "\f047"
}

.fa-step-backward:before {
    content: "\f048"
}

.fa-fast-backward:before {
    content: "\f049"
}

.fa-backward:before {
    content: "\f04a"
}

.fa-play:before {
    content: "\f04b"
}

.fa-pause:before {
    content: "\f04c"
}

.fa-stop:before {
    content: "\f04d"
}

.fa-forward:before {
    content: "\f04e"
}

.fa-fast-forward:before {
    content: "\f050"
}

.fa-step-forward:before {
    content: "\f051"
}

.fa-eject:before {
    content: "\f052"
}

.fa-chevron-left:before {
    content: "\f053"
}

.fa-chevron-right:before {
    content: "\f054"
}

.fa-plus-circle:before {
    content: "\f055"
}

.fa-minus-circle:before {
    content: "\f056"
}

.fa-times-circle:before {
    content: "\f057"
}

.fa-check-circle:before {
    content: "\f058"
}

.fa-question-circle:before {
    content: "\f059"
}

.fa-info-circle:before {
    content: "\f05a"
}

.fa-crosshairs:before {
    content: "\f05b"
}

.fa-times-circle-o:before {
    content: "\f05c"
}

.fa-check-circle-o:before {
    content: "\f05d"
}

.fa-ban:before {
    content: "\f05e"
}

.fa-arrow-left:before {
    content: "\f060"
}

.fa-arrow-right:before {
    content: "\f061"
}

.fa-arrow-up:before {
    content: "\f062"
}

.fa-arrow-down:before {
    content: "\f063"
}

.fa-mail-forward:before, .fa-share:before {
    content: "\f064"
}

.fa-expand:before {
    content: "\f065"
}

.fa-compress:before {
    content: "\f066"
}

.fa-plus:before {
    content: "\f067"
}

.fa-minus:before {
    content: "\f068"
}

.fa-asterisk:before {
    content: "\f069"
}

.fa-exclamation-circle:before {
    content: "\f06a"
}

.fa-gift:before {
    content: "\f06b"
}

.fa-leaf:before {
    content: "\f06c"
}

.fa-fire:before {
    content: "\f06d"
}

.fa-eye:before {
    content: "\f06e"
}

.fa-eye-slash:before {
    content: "\f070"
}

.fa-warning:before, .fa-exclamation-triangle:before {
    content: "\f071"
}

.fa-plane:before {
    content: "\f072"
}

.fa-calendar:before {
    content: "\f073"
}

.fa-random:before {
    content: "\f074"
}

.fa-comment:before {
    content: "\f075"
}

.fa-magnet:before {
    content: "\f076"
}

.fa-chevron-up:before {
    content: "\f077"
}

.fa-chevron-down:before {
    content: "\f078"
}

.fa-retweet:before {
    content: "\f079"
}

.fa-shopping-cart:before {
    content: "\f07a"
}

.fa-folder:before {
    content: "\f07b"
}

.fa-folder-open:before {
    content: "\f07c"
}

.fa-arrows-v:before {
    content: "\f07d"
}

.fa-arrows-h:before {
    content: "\f07e"
}

.fa-bar-chart-o:before, .fa-bar-chart:before {
    content: "\f080"
}

.fa-twitter-square:before {
    content: "\f081"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-camera-retro:before {
    content: "\f083"
}

.fa-key:before {
    content: "\f084"
}

.fa-gears:before, .fa-cogs:before {
    content: "\f085"
}

.fa-comments:before {
    content: "\f086"
}

.fa-thumbs-o-up:before {
    content: "\f087"
}

.fa-thumbs-o-down:before {
    content: "\f088"
}

.fa-star-half:before {
    content: "\f089"
}

.fa-heart-o:before {
    content: "\f08a"
}

.fa-sign-out:before {
    content: "\f08b"
}

.fa-linkedin-square:before {
    content: "\f08c"
}

.fa-thumb-tack:before {
    content: "\f08d"
}

.fa-external-link:before {
    content: "\f08e"
}

.fa-sign-in:before {
    content: "\f090"
}

.fa-trophy:before {
    content: "\f091"
}

.fa-github-square:before {
    content: "\f092"
}

.fa-upload:before {
    content: "\f093"
}

.fa-lemon-o:before {
    content: "\f094"
}

.fa-phone:before {
    content: "\f095"
}

.fa-square-o:before {
    content: "\f096"
}

.fa-bookmark-o:before {
    content: "\f097"
}

.fa-phone-square:before {
    content: "\f098"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-facebook-f:before, .fa-facebook:before {
    content: "\f09a"
}

.fa-github:before {
    content: "\f09b"
}

.fa-unlock:before {
    content: "\f09c"
}

.fa-credit-card:before {
    content: "\f09d"
}

.fa-feed:before, .fa-rss:before {
    content: "\f09e"
}

.fa-hdd-o:before {
    content: "\f0a0"
}

.fa-bullhorn:before {
    content: "\f0a1"
}

.fa-bell:before {
    content: "\f0f3"
}

.fa-certificate:before {
    content: "\f0a3"
}

.fa-hand-o-right:before {
    content: "\f0a4"
}

.fa-hand-o-left:before {
    content: "\f0a5"
}

.fa-hand-o-up:before {
    content: "\f0a6"
}

.fa-hand-o-down:before {
    content: "\f0a7"
}

.fa-arrow-circle-left:before {
    content: "\f0a8"
}

.fa-arrow-circle-right:before {
    content: "\f0a9"
}

.fa-arrow-circle-up:before {
    content: "\f0aa"
}

.fa-arrow-circle-down:before {
    content: "\f0ab"
}

.fa-globe:before {
    content: "\f0ac"
}

.fa-wrench:before {
    content: "\f0ad"
}

.fa-tasks:before {
    content: "\f0ae"
}

.fa-filter:before {
    content: "\f0b0"
}

.fa-briefcase:before {
    content: "\f0b1"
}

.fa-arrows-alt:before {
    content: "\f0b2"
}

.fa-group:before, .fa-users:before {
    content: "\f0c0"
}

.fa-chain:before, .fa-link:before {
    content: "\f0c1"
}

.fa-cloud:before {
    content: "\f0c2"
}

.fa-flask:before {
    content: "\f0c3"
}

.fa-cut:before, .fa-scissors:before {
    content: "\f0c4"
}

.fa-copy:before, .fa-files-o:before {
    content: "\f0c5"
}

.fa-paperclip:before {
    content: "\f0c6"
}

.fa-save:before, .fa-floppy-o:before {
    content: "\f0c7"
}

.fa-square:before {
    content: "\f0c8"
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9"
}

.fa-list-ul:before {
    content: "\f0ca"
}

.fa-list-ol:before {
    content: "\f0cb"
}

.fa-strikethrough:before {
    content: "\f0cc"
}

.fa-underline:before {
    content: "\f0cd"
}

.fa-table:before {
    content: "\f0ce"
}

.fa-magic:before {
    content: "\f0d0"
}

.fa-truck:before {
    content: "\f0d1"
}

.fa-pinterest:before {
    content: "\f0d2"
}

.fa-pinterest-square:before {
    content: "\f0d3"
}

.fa-google-plus-square:before {
    content: "\f0d4"
}

.fa-google-plus:before {
    content: "\f0d5"
}

.fa-money:before {
    content: "\f0d6"
}

.fa-caret-down:before {
    content: "\f0d7"
}

.fa-caret-up:before {
    content: "\f0d8"
}

.fa-caret-left:before {
    content: "\f0d9"
}

.fa-caret-right:before {
    content: "\f0da"
}

.fa-columns:before {
    content: "\f0db"
}

.fa-unsorted:before, .fa-sort:before {
    content: "\f0dc"
}

.fa-sort-down:before, .fa-sort-desc:before {
    content: "\f0dd"
}

.fa-sort-up:before, .fa-sort-asc:before {
    content: "\f0de"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-linkedin:before {
    content: "\f0e1"
}

.fa-rotate-left:before, .fa-undo:before {
    content: "\f0e2"
}

.fa-legal:before, .fa-gavel:before {
    content: "\f0e3"
}

.fa-dashboard:before, .fa-tachometer:before {
    content: "\f0e4"
}

.fa-comment-o:before {
    content: "\f0e5"
}

.fa-comments-o:before {
    content: "\f0e6"
}

.fa-flash:before, .fa-bolt:before {
    content: "\f0e7"
}

.fa-sitemap:before {
    content: "\f0e8"
}

.fa-umbrella:before {
    content: "\f0e9"
}

.fa-paste:before, .fa-clipboard:before {
    content: "\f0ea"
}

.fa-lightbulb-o:before {
    content: "\f0eb"
}

.fa-exchange:before {
    content: "\f0ec"
}

.fa-cloud-download:before {
    content: "\f0ed"
}

.fa-cloud-upload:before {
    content: "\f0ee"
}

.fa-user-md:before {
    content: "\f0f0"
}

.fa-stethoscope:before {
    content: "\f0f1"
}

.fa-suitcase:before {
    content: "\f0f2"
}

.fa-bell-o:before {
    content: "\f0a2"
}

.fa-coffee:before {
    content: "\f0f4"
}

.fa-cutlery:before {
    content: "\f0f5"
}

.fa-file-text-o:before {
    content: "\f0f6"
}

.fa-building-o:before {
    content: "\f0f7"
}

.fa-hospital-o:before {
    content: "\f0f8"
}

.fa-ambulance:before {
    content: "\f0f9"
}

.fa-medkit:before {
    content: "\f0fa"
}

.fa-fighter-jet:before {
    content: "\f0fb"
}

.fa-beer:before {
    content: "\f0fc"
}

.fa-h-square:before {
    content: "\f0fd"
}

.fa-plus-square:before {
    content: "\f0fe"
}

.fa-angle-double-left:before {
    content: "\f100"
}

.fa-angle-double-right:before {
    content: "\f101"
}

.fa-angle-double-up:before {
    content: "\f102"
}

.fa-angle-double-down:before {
    content: "\f103"
}

.fa-angle-left:before {
    content: "\f104"
}

.fa-angle-right:before {
    content: "\f105"
}

.fa-angle-up:before {
    content: "\f106"
}

.fa-angle-down:before {
    content: "\f107"
}

.fa-desktop:before {
    content: "\f108"
}

.fa-laptop:before {
    content: "\f109"
}

.fa-tablet:before {
    content: "\f10a"
}

.fa-mobile-phone:before, .fa-mobile:before {
    content: "\f10b"
}

.fa-circle-o:before {
    content: "\f10c"
}

.fa-quote-left:before {
    content: "\f10d"
}

.fa-quote-right:before {
    content: "\f10e"
}

.fa-spinner:before {
    content: "\f110"
}

.fa-circle:before {
    content: "\f111"
}

.fa-mail-reply:before, .fa-reply:before {
    content: "\f112"
}

.fa-github-alt:before {
    content: "\f113"
}

.fa-folder-o:before {
    content: "\f114"
}

.fa-folder-open-o:before {
    content: "\f115"
}

.fa-smile-o:before {
    content: "\f118"
}

.fa-frown-o:before {
    content: "\f119"
}

.fa-meh-o:before {
    content: "\f11a"
}

.fa-gamepad:before {
    content: "\f11b"
}

.fa-keyboard-o:before {
    content: "\f11c"
}

.fa-flag-o:before {
    content: "\f11d"
}

.fa-flag-checkered:before {
    content: "\f11e"
}

.fa-terminal:before {
    content: "\f120"
}

.fa-code:before {
    content: "\f121"
}

.fa-mail-reply-all:before, .fa-reply-all:before {
    content: "\f122"
}

.fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {
    content: "\f123"
}

.fa-location-arrow:before {
    content: "\f124"
}

.fa-crop:before {
    content: "\f125"
}

.fa-code-fork:before {
    content: "\f126"
}

.fa-unlink:before, .fa-chain-broken:before {
    content: "\f127"
}

.fa-question:before {
    content: "\f128"
}

.fa-info:before {
    content: "\f129"
}

.fa-exclamation:before {
    content: "\f12a"
}

.fa-superscript:before {
    content: "\f12b"
}

.fa-subscript:before {
    content: "\f12c"
}

.fa-eraser:before {
    content: "\f12d"
}

.fa-puzzle-piece:before {
    content: "\f12e"
}

.fa-microphone:before {
    content: "\f130"
}

.fa-microphone-slash:before {
    content: "\f131"
}

.fa-shield:before {
    content: "\f132"
}

.fa-calendar-o:before {
    content: "\f133"
}

.fa-fire-extinguisher:before {
    content: "\f134"
}

.fa-rocket:before {
    content: "\f135"
}

.fa-maxcdn:before {
    content: "\f136"
}

.fa-chevron-circle-left:before {
    content: "\f137"
}

.fa-chevron-circle-right:before {
    content: "\f138"
}

.fa-chevron-circle-up:before {
    content: "\f139"
}

.fa-chevron-circle-down:before {
    content: "\f13a"
}

.fa-html5:before {
    content: "\f13b"
}

.fa-css3:before {
    content: "\f13c"
}

.fa-anchor:before {
    content: "\f13d"
}

.fa-unlock-alt:before {
    content: "\f13e"
}

.fa-bullseye:before {
    content: "\f140"
}

.fa-ellipsis-h:before {
    content: "\f141"
}

.fa-ellipsis-v:before {
    content: "\f142"
}

.fa-rss-square:before {
    content: "\f143"
}

.fa-play-circle:before {
    content: "\f144"
}

.fa-ticket:before {
    content: "\f145"
}

.fa-minus-square:before {
    content: "\f146"
}

.fa-minus-square-o:before {
    content: "\f147"
}

.fa-level-up:before {
    content: "\f148"
}

.fa-level-down:before {
    content: "\f149"
}

.fa-check-square:before {
    content: "\f14a"
}

.fa-pencil-square:before {
    content: "\f14b"
}

.fa-external-link-square:before {
    content: "\f14c"
}

.fa-share-square:before {
    content: "\f14d"
}

.fa-compass:before {
    content: "\f14e"
}

.fa-toggle-down:before, .fa-caret-square-o-down:before {
    content: "\f150"
}

.fa-toggle-up:before, .fa-caret-square-o-up:before {
    content: "\f151"
}

.fa-toggle-right:before, .fa-caret-square-o-right:before {
    content: "\f152"
}

.fa-euro:before, .fa-eur:before {
    content: "\f153"
}

.fa-gbp:before {
    content: "\f154"
}

.fa-dollar:before, .fa-usd:before {
    content: "\f155"
}

.fa-rupee:before, .fa-inr:before {
    content: "\f156"
}

.fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {
    content: "\f157"
}

.fa-ruble:before, .fa-rouble:before, .fa-rub:before {
    content: "\f158"
}

.fa-won:before, .fa-krw:before {
    content: "\f159"
}

.fa-bitcoin:before, .fa-btc:before {
    content: "\f15a"
}

.fa-file:before {
    content: "\f15b"
}

.fa-file-text:before {
    content: "\f15c"
}

.fa-sort-alpha-asc:before {
    content: "\f15d"
}

.fa-sort-alpha-desc:before {
    content: "\f15e"
}

.fa-sort-amount-asc:before {
    content: "\f160"
}

.fa-sort-amount-desc:before {
    content: "\f161"
}

.fa-sort-numeric-asc:before {
    content: "\f162"
}

.fa-sort-numeric-desc:before {
    content: "\f163"
}

.fa-thumbs-up:before {
    content: "\f164"
}

.fa-thumbs-down:before {
    content: "\f165"
}

.fa-youtube-square:before {
    content: "\f166"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-xing:before {
    content: "\f168"
}

.fa-xing-square:before {
    content: "\f169"
}

.fa-youtube-play:before {
    content: "\f16a"
}

.fa-dropbox:before {
    content: "\f16b"
}

.fa-stack-overflow:before {
    content: "\f16c"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-flickr:before {
    content: "\f16e"
}

.fa-adn:before {
    content: "\f170"
}

.fa-bitbucket:before {
    content: "\f171"
}

.fa-bitbucket-square:before {
    content: "\f172"
}

.fa-tumblr:before {
    content: "\f173"
}

.fa-tumblr-square:before {
    content: "\f174"
}

.fa-long-arrow-down:before {
    content: "\f175"
}

.fa-long-arrow-up:before {
    content: "\f176"
}

.fa-long-arrow-left:before {
    content: "\f177"
}

.fa-long-arrow-right:before {
    content: "\f178"
}

.fa-apple:before {
    content: "\f179"
}

.fa-windows:before {
    content: "\f17a"
}

.fa-android:before {
    content: "\f17b"
}

.fa-linux:before {
    content: "\f17c"
}

.fa-dribbble:before {
    content: "\f17d"
}

.fa-skype:before {
    content: "\f17e"
}

.fa-foursquare:before {
    content: "\f180"
}

.fa-trello:before {
    content: "\f181"
}

.fa-female:before {
    content: "\f182"
}

.fa-male:before {
    content: "\f183"
}

.fa-gittip:before, .fa-gratipay:before {
    content: "\f184"
}

.fa-sun-o:before {
    content: "\f185"
}

.fa-moon-o:before {
    content: "\f186"
}

.fa-archive:before {
    content: "\f187"
}

.fa-bug:before {
    content: "\f188"
}

.fa-vk:before {
    content: "\f189"
}

.fa-weibo:before {
    content: "\f18a"
}

.fa-renren:before {
    content: "\f18b"
}

.fa-pagelines:before {
    content: "\f18c"
}

.fa-stack-exchange:before {
    content: "\f18d"
}

.fa-arrow-circle-o-right:before {
    content: "\f18e"
}

.fa-arrow-circle-o-left:before {
    content: "\f190"
}

.fa-toggle-left:before, .fa-caret-square-o-left:before {
    content: "\f191"
}

.fa-dot-circle-o:before {
    content: "\f192"
}

.fa-wheelchair:before {
    content: "\f193"
}

.fa-vimeo-square:before {
    content: "\f194"
}

.fa-turkish-lira:before, .fa-try:before {
    content: "\f195"
}

.fa-plus-square-o:before {
    content: "\f196"
}

.fa-space-shuttle:before {
    content: "\f197"
}

.fa-slack:before {
    content: "\f198"
}

.fa-envelope-square:before {
    content: "\f199"
}

.fa-wordpress:before {
    content: "\f19a"
}

.fa-openid:before {
    content: "\f19b"
}

.fa-institution:before, .fa-bank:before, .fa-university:before {
    content: "\f19c"
}

.fa-mortar-board:before, .fa-graduation-cap:before {
    content: "\f19d"
}

.fa-yahoo:before {
    content: "\f19e"
}

.fa-google:before {
    content: "\f1a0"
}

.fa-reddit:before {
    content: "\f1a1"
}

.fa-reddit-square:before {
    content: "\f1a2"
}

.fa-stumbleupon-circle:before {
    content: "\f1a3"
}

.fa-stumbleupon:before {
    content: "\f1a4"
}

.fa-delicious:before {
    content: "\f1a5"
}

.fa-digg:before {
    content: "\f1a6"
}

.fa-pied-piper-pp:before {
    content: "\f1a7"
}

.fa-pied-piper-alt:before {
    content: "\f1a8"
}

.fa-drupal:before {
    content: "\f1a9"
}

.fa-joomla:before {
    content: "\f1aa"
}

.fa-language:before {
    content: "\f1ab"
}

.fa-fax:before {
    content: "\f1ac"
}

.fa-building:before {
    content: "\f1ad"
}

.fa-child:before {
    content: "\f1ae"
}

.fa-paw:before {
    content: "\f1b0"
}

.fa-spoon:before {
    content: "\f1b1"
}

.fa-cube:before {
    content: "\f1b2"
}

.fa-cubes:before {
    content: "\f1b3"
}

.fa-behance:before {
    content: "\f1b4"
}

.fa-behance-square:before {
    content: "\f1b5"
}

.fa-steam:before {
    content: "\f1b6"
}

.fa-steam-square:before {
    content: "\f1b7"
}

.fa-recycle:before {
    content: "\f1b8"
}

.fa-automobile:before, .fa-car:before {
    content: "\f1b9"
}

.fa-cab:before, .fa-taxi:before {
    content: "\f1ba"
}

.fa-tree:before {
    content: "\f1bb"
}

.fa-spotify:before {
    content: "\f1bc"
}

.fa-deviantart:before {
    content: "\f1bd"
}

.fa-soundcloud:before {
    content: "\f1be"
}

.fa-database:before {
    content: "\f1c0"
}

.fa-file-pdf-o:before {
    content: "\f1c1"
}

.fa-file-word-o:before {
    content: "\f1c2"
}

.fa-file-excel-o:before {
    content: "\f1c3"
}

.fa-file-powerpoint-o:before {
    content: "\f1c4"
}

.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {
    content: "\f1c5"
}

.fa-file-zip-o:before, .fa-file-archive-o:before {
    content: "\f1c6"
}

.fa-file-sound-o:before, .fa-file-audio-o:before {
    content: "\f1c7"
}

.fa-file-movie-o:before, .fa-file-video-o:before {
    content: "\f1c8"
}

.fa-file-code-o:before {
    content: "\f1c9"
}

.fa-vine:before {
    content: "\f1ca"
}

.fa-codepen:before {
    content: "\f1cb"
}

.fa-jsfiddle:before {
    content: "\f1cc"
}

.fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {
    content: "\f1cd"
}

.fa-circle-o-notch:before {
    content: "\f1ce"
}

.fa-ra:before, .fa-resistance:before, .fa-rebel:before {
    content: "\f1d0"
}

.fa-ge:before, .fa-empire:before {
    content: "\f1d1"
}

.fa-git-square:before {
    content: "\f1d2"
}

.fa-git:before {
    content: "\f1d3"
}

.fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before {
    content: "\f1d4"
}

.fa-tencent-weibo:before {
    content: "\f1d5"
}

.fa-qq:before {
    content: "\f1d6"
}

.fa-wechat:before, .fa-weixin:before {
    content: "\f1d7"
}

.fa-send:before, .fa-paper-plane:before {
    content: "\f1d8"
}

.fa-send-o:before, .fa-paper-plane-o:before {
    content: "\f1d9"
}

.fa-history:before {
    content: "\f1da"
}

.fa-circle-thin:before {
    content: "\f1db"
}

.fa-header:before {
    content: "\f1dc"
}

.fa-paragraph:before {
    content: "\f1dd"
}

.fa-sliders:before {
    content: "\f1de"
}

.fa-share-alt:before {
    content: "\f1e0"
}

.fa-share-alt-square:before {
    content: "\f1e1"
}

.fa-bomb:before {
    content: "\f1e2"
}

.fa-soccer-ball-o:before, .fa-futbol-o:before {
    content: "\f1e3"
}

.fa-tty:before {
    content: "\f1e4"
}

.fa-binoculars:before {
    content: "\f1e5"
}

.fa-plug:before {
    content: "\f1e6"
}

.fa-slideshare:before {
    content: "\f1e7"
}

.fa-twitch:before {
    content: "\f1e8"
}

.fa-yelp:before {
    content: "\f1e9"
}

.fa-newspaper-o:before {
    content: "\f1ea"
}

.fa-wifi:before {
    content: "\f1eb"
}

.fa-calculator:before {
    content: "\f1ec"
}

.fa-paypal:before {
    content: "\f1ed"
}

.fa-google-wallet:before {
    content: "\f1ee"
}

.fa-cc-visa:before {
    content: "\f1f0"
}

.fa-cc-mastercard:before {
    content: "\f1f1"
}

.fa-cc-discover:before {
    content: "\f1f2"
}

.fa-cc-amex:before {
    content: "\f1f3"
}

.fa-cc-paypal:before {
    content: "\f1f4"
}

.fa-cc-stripe:before {
    content: "\f1f5"
}

.fa-bell-slash:before {
    content: "\f1f6"
}

.fa-bell-slash-o:before {
    content: "\f1f7"
}

.fa-trash:before {
    content: "\f1f8"
}

.fa-copyright:before {
    content: "\f1f9"
}

.fa-at:before {
    content: "\f1fa"
}

.fa-eyedropper:before {
    content: "\f1fb"
}

.fa-paint-brush:before {
    content: "\f1fc"
}

.fa-birthday-cake:before {
    content: "\f1fd"
}

.fa-area-chart:before {
    content: "\f1fe"
}

.fa-pie-chart:before {
    content: "\f200"
}

.fa-line-chart:before {
    content: "\f201"
}

.fa-lastfm:before {
    content: "\f202"
}

.fa-lastfm-square:before {
    content: "\f203"
}

.fa-toggle-off:before {
    content: "\f204"
}

.fa-toggle-on:before {
    content: "\f205"
}

.fa-bicycle:before {
    content: "\f206"
}

.fa-bus:before {
    content: "\f207"
}

.fa-ioxhost:before {
    content: "\f208"
}

.fa-angellist:before {
    content: "\f209"
}

.fa-cc:before {
    content: "\f20a"
}

.fa-shekel:before, .fa-sheqel:before, .fa-ils:before {
    content: "\f20b"
}

.fa-meanpath:before {
    content: "\f20c"
}

.fa-buysellads:before {
    content: "\f20d"
}

.fa-connectdevelop:before {
    content: "\f20e"
}

.fa-dashcube:before {
    content: "\f210"
}

.fa-forumbee:before {
    content: "\f211"
}

.fa-leanpub:before {
    content: "\f212"
}

.fa-sellsy:before {
    content: "\f213"
}

.fa-shirtsinbulk:before {
    content: "\f214"
}

.fa-simplybuilt:before {
    content: "\f215"
}

.fa-skyatlas:before {
    content: "\f216"
}

.fa-cart-plus:before {
    content: "\f217"
}

.fa-cart-arrow-down:before {
    content: "\f218"
}

.fa-diamond:before {
    content: "\f219"
}

.fa-ship:before {
    content: "\f21a"
}

.fa-user-secret:before {
    content: "\f21b"
}

.fa-motorcycle:before {
    content: "\f21c"
}

.fa-street-view:before {
    content: "\f21d"
}

.fa-heartbeat:before {
    content: "\f21e"
}

.fa-venus:before {
    content: "\f221"
}

.fa-mars:before {
    content: "\f222"
}

.fa-mercury:before {
    content: "\f223"
}

.fa-intersex:before, .fa-transgender:before {
    content: "\f224"
}

.fa-transgender-alt:before {
    content: "\f225"
}

.fa-venus-double:before {
    content: "\f226"
}

.fa-mars-double:before {
    content: "\f227"
}

.fa-venus-mars:before {
    content: "\f228"
}

.fa-mars-stroke:before {
    content: "\f229"
}

.fa-mars-stroke-v:before {
    content: "\f22a"
}

.fa-mars-stroke-h:before {
    content: "\f22b"
}

.fa-neuter:before {
    content: "\f22c"
}

.fa-genderless:before {
    content: "\f22d"
}

.fa-facebook-official:before {
    content: "\f230"
}

.fa-pinterest-p:before {
    content: "\f231"
}

.fa-whatsapp:before {
    content: "\f232"
}

.fa-server:before {
    content: "\f233"
}

.fa-user-plus:before {
    content: "\f234"
}

.fa-user-times:before {
    content: "\f235"
}

.fa-hotel:before, .fa-bed:before {
    content: "\f236"
}

.fa-viacoin:before {
    content: "\f237"
}

.fa-train:before {
    content: "\f238"
}

.fa-subway:before {
    content: "\f239"
}

.fa-medium:before {
    content: "\f23a"
}

.fa-yc:before, .fa-y-combinator:before {
    content: "\f23b"
}

.fa-optin-monster:before {
    content: "\f23c"
}

.fa-opencart:before {
    content: "\f23d"
}

.fa-expeditedssl:before {
    content: "\f23e"
}

.fa-battery-4:before, .fa-battery:before, .fa-battery-full:before {
    content: "\f240"
}

.fa-battery-3:before, .fa-battery-three-quarters:before {
    content: "\f241"
}

.fa-battery-2:before, .fa-battery-half:before {
    content: "\f242"
}

.fa-battery-1:before, .fa-battery-quarter:before {
    content: "\f243"
}

.fa-battery-0:before, .fa-battery-empty:before {
    content: "\f244"
}

.fa-mouse-pointer:before {
    content: "\f245"
}

.fa-i-cursor:before {
    content: "\f246"
}

.fa-object-group:before {
    content: "\f247"
}

.fa-object-ungroup:before {
    content: "\f248"
}

.fa-sticky-note:before {
    content: "\f249"
}

.fa-sticky-note-o:before {
    content: "\f24a"
}

.fa-cc-jcb:before {
    content: "\f24b"
}

.fa-cc-diners-club:before {
    content: "\f24c"
}

.fa-clone:before {
    content: "\f24d"
}

.fa-balance-scale:before {
    content: "\f24e"
}

.fa-hourglass-o:before {
    content: "\f250"
}

.fa-hourglass-1:before, .fa-hourglass-start:before {
    content: "\f251"
}

.fa-hourglass-2:before, .fa-hourglass-half:before {
    content: "\f252"
}

.fa-hourglass-3:before, .fa-hourglass-end:before {
    content: "\f253"
}

.fa-hourglass:before {
    content: "\f254"
}

.fa-hand-grab-o:before, .fa-hand-rock-o:before {
    content: "\f255"
}

.fa-hand-stop-o:before, .fa-hand-paper-o:before {
    content: "\f256"
}

.fa-hand-scissors-o:before {
    content: "\f257"
}

.fa-hand-lizard-o:before {
    content: "\f258"
}

.fa-hand-spock-o:before {
    content: "\f259"
}

.fa-hand-pointer-o:before {
    content: "\f25a"
}

.fa-hand-peace-o:before {
    content: "\f25b"
}

.fa-trademark:before {
    content: "\f25c"
}

.fa-registered:before {
    content: "\f25d"
}

.fa-creative-commons:before {
    content: "\f25e"
}

.fa-gg:before {
    content: "\f260"
}

.fa-gg-circle:before {
    content: "\f261"
}

.fa-tripadvisor:before {
    content: "\f262"
}

.fa-odnoklassniki:before {
    content: "\f263"
}

.fa-odnoklassniki-square:before {
    content: "\f264"
}

.fa-get-pocket:before {
    content: "\f265"
}

.fa-wikipedia-w:before {
    content: "\f266"
}

.fa-safari:before {
    content: "\f267"
}

.fa-chrome:before {
    content: "\f268"
}

.fa-firefox:before {
    content: "\f269"
}

.fa-opera:before {
    content: "\f26a"
}

.fa-internet-explorer:before {
    content: "\f26b"
}

.fa-tv:before, .fa-television:before {
    content: "\f26c"
}

.fa-contao:before {
    content: "\f26d"
}

.fa-500px:before {
    content: "\f26e"
}

.fa-amazon:before {
    content: "\f270"
}

.fa-calendar-plus-o:before {
    content: "\f271"
}

.fa-calendar-minus-o:before {
    content: "\f272"
}

.fa-calendar-times-o:before {
    content: "\f273"
}

.fa-calendar-check-o:before {
    content: "\f274"
}

.fa-industry:before {
    content: "\f275"
}

.fa-map-pin:before {
    content: "\f276"
}

.fa-map-signs:before {
    content: "\f277"
}

.fa-map-o:before {
    content: "\f278"
}

.fa-map:before {
    content: "\f279"
}

.fa-commenting:before {
    content: "\f27a"
}

.fa-commenting-o:before {
    content: "\f27b"
}

.fa-houzz:before {
    content: "\f27c"
}

.fa-vimeo:before {
    content: "\f27d"
}

.fa-black-tie:before {
    content: "\f27e"
}

.fa-fonticons:before {
    content: "\f280"
}

.fa-reddit-alien:before {
    content: "\f281"
}

.fa-edge:before {
    content: "\f282"
}

.fa-credit-card-alt:before {
    content: "\f283"
}

.fa-codiepie:before {
    content: "\f284"
}

.fa-modx:before {
    content: "\f285"
}

.fa-fort-awesome:before {
    content: "\f286"
}

.fa-usb:before {
    content: "\f287"
}

.fa-product-hunt:before {
    content: "\f288"
}

.fa-mixcloud:before {
    content: "\f289"
}

.fa-scribd:before {
    content: "\f28a"
}

.fa-pause-circle:before {
    content: "\f28b"
}

.fa-pause-circle-o:before {
    content: "\f28c"
}

.fa-stop-circle:before {
    content: "\f28d"
}

.fa-stop-circle-o:before {
    content: "\f28e"
}

.fa-shopping-bag:before {
    content: "\f290"
}

.fa-shopping-basket:before {
    content: "\f291"
}

.fa-hashtag:before {
    content: "\f292"
}

.fa-bluetooth:before {
    content: "\f293"
}

.fa-bluetooth-b:before {
    content: "\f294"
}

.fa-percent:before {
    content: "\f295"
}

.fa-gitlab:before {
    content: "\f296"
}

.fa-wpbeginner:before {
    content: "\f297"
}

.fa-wpforms:before {
    content: "\f298"
}

.fa-envira:before {
    content: "\f299"
}

.fa-universal-access:before {
    content: "\f29a"
}

.fa-wheelchair-alt:before {
    content: "\f29b"
}

.fa-question-circle-o:before {
    content: "\f29c"
}

.fa-blind:before {
    content: "\f29d"
}

.fa-audio-description:before {
    content: "\f29e"
}

.fa-volume-control-phone:before {
    content: "\f2a0"
}

.fa-braille:before {
    content: "\f2a1"
}

.fa-assistive-listening-systems:before {
    content: "\f2a2"
}

.fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before {
    content: "\f2a3"
}

.fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before {
    content: "\f2a4"
}

.fa-glide:before {
    content: "\f2a5"
}

.fa-glide-g:before {
    content: "\f2a6"
}

.fa-signing:before, .fa-sign-language:before {
    content: "\f2a7"
}

.fa-low-vision:before {
    content: "\f2a8"
}

.fa-viadeo:before {
    content: "\f2a9"
}

.fa-viadeo-square:before {
    content: "\f2aa"
}

.fa-snapchat:before {
    content: "\f2ab"
}

.fa-snapchat-ghost:before {
    content: "\f2ac"
}

.fa-snapchat-square:before {
    content: "\f2ad"
}

.fa-pied-piper:before {
    content: "\f2ae"
}

.fa-first-order:before {
    content: "\f2b0"
}

.fa-yoast:before {
    content: "\f2b1"
}

.fa-themeisle:before {
    content: "\f2b2"
}

.fa-google-plus-circle:before, .fa-google-plus-official:before {
    content: "\f2b3"
}

.fa-fa:before, .fa-font-awesome:before {
    content: "\f2b4"
}

.fa-handshake-o:before {
    content: "\f2b5"
}

.fa-envelope-open:before {
    content: "\f2b6"
}

.fa-envelope-open-o:before {
    content: "\f2b7"
}

.fa-linode:before {
    content: "\f2b8"
}

.fa-address-book:before {
    content: "\f2b9"
}

.fa-address-book-o:before {
    content: "\f2ba"
}

.fa-vcard:before, .fa-address-card:before {
    content: "\f2bb"
}

.fa-vcard-o:before, .fa-address-card-o:before {
    content: "\f2bc"
}

.fa-user-circle:before {
    content: "\f2bd"
}

.fa-user-circle-o:before {
    content: "\f2be"
}

.fa-user-o:before {
    content: "\f2c0"
}

.fa-id-badge:before {
    content: "\f2c1"
}

.fa-drivers-license:before, .fa-id-card:before {
    content: "\f2c2"
}

.fa-drivers-license-o:before, .fa-id-card-o:before {
    content: "\f2c3"
}

.fa-quora:before {
    content: "\f2c4"
}

.fa-free-code-camp:before {
    content: "\f2c5"
}

.fa-telegram:before {
    content: "\f2c6"
}

.fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before {
    content: "\f2c7"
}

.fa-thermometer-3:before, .fa-thermometer-three-quarters:before {
    content: "\f2c8"
}

.fa-thermometer-2:before, .fa-thermometer-half:before {
    content: "\f2c9"
}

.fa-thermometer-1:before, .fa-thermometer-quarter:before {
    content: "\f2ca"
}

.fa-thermometer-0:before, .fa-thermometer-empty:before {
    content: "\f2cb"
}

.fa-shower:before {
    content: "\f2cc"
}

.fa-bathtub:before, .fa-s15:before, .fa-bath:before {
    content: "\f2cd"
}

.fa-podcast:before {
    content: "\f2ce"
}

.fa-window-maximize:before {
    content: "\f2d0"
}

.fa-window-minimize:before {
    content: "\f2d1"
}

.fa-window-restore:before {
    content: "\f2d2"
}

.fa-times-rectangle:before, .fa-window-close:before {
    content: "\f2d3"
}

.fa-times-rectangle-o:before, .fa-window-close-o:before {
    content: "\f2d4"
}

.fa-bandcamp:before {
    content: "\f2d5"
}

.fa-grav:before {
    content: "\f2d6"
}

.fa-etsy:before {
    content: "\f2d7"
}

.fa-imdb:before {
    content: "\f2d8"
}

.fa-ravelry:before {
    content: "\f2d9"
}

.fa-eercast:before {
    content: "\f2da"
}

.fa-microchip:before {
    content: "\f2db"
}

.fa-snowflake-o:before {
    content: "\f2dc"
}

.fa-superpowers:before {
    content: "\f2dd"
}

.fa-wpexplorer:before {
    content: "\f2de"
}

.fa-meetup:before {
    content: "\f2e0"
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

@font-face {
    font-family: 'Truesight';
    src: url(/assets/truesight-9b4d5a4b9a98f04366f1c49e33fbf7c2a06f1de0050a2901059732bf55e1100f.eot);
    src: url(/assets/truesight-9b4d5a4b9a98f04366f1c49e33fbf7c2a06f1de0050a2901059732bf55e1100f.eot?#iefix) format("embedded-opentype"),url(/assets/truesight-89d884b0a0b247d2db9122ee8273f0dadf7b7f381e0dbe41abfd9e5d33d7d97a.woff) format("woff"),url(/assets/truesight-904112126dcd8c7747b45b8fa32e7c0dda98761cbb5f52c9e86bd35e261034e7.ttf) format("truetype"),url(/assets/truesight-983de02a479c68d0fd0709c12a7bbbc50d376b76cc8d9703aae9564e4c45dd24.svg#fontawesomeregular) format("svg");
    font-weight: normal;
    font-style: normal
}

.fa-truesight:before {
    content: "\e600";
    font-family: Truesight !important;
    color: #FFFFFF !important
}

@font-face {
    font-family: 'lanerole';
    src: url(/assets/lanerole-a48a2da9db8349297fdbd394abb5346430a1004d360c29fed7ad02136ffc41b3.eot);
    src: url(/assets/lanerole-a48a2da9db8349297fdbd394abb5346430a1004d360c29fed7ad02136ffc41b3.eot?#iefix) format("embedded-opentype"),url(/assets/lanerole-8bb4428b26288f8edf7b54a3c83388c76df07ddd2766424c3b35319f4c091a92.woff) format("woff"),url(/assets/lanerole-38123817ae24fa27bdf4af516dde52fb85df020d92afb1e682334bdc51274b71.ttf) format("truetype"),url(/assets/lanerole-0a387ecf6a957a74b953503ba2ef9a7f1b83aec916f7b01a60b6b410b2b3d40f.svg#fontawesomeregular) format("svg");
    font-weight: normal;
    font-style: normal
}

.fa-lane-jungle:before {
    content: "\e900";
    font-family: lanerole !important
}

.fa-lane-midlane:before {
    content: "\e901";
    font-family: lanerole !important
}

.fa-lane-offlane:before {
    content: "\e902";
    font-family: lanerole !important
}

.fa-lane-roaming:before {
    content: "\e903";
    font-family: lanerole !important
}

.fa-lane-safelane:before {
    content: "\e904";
    font-family: lanerole !important
}

.fa-role-support:before {
    content: "\e905";
    font-family: lanerole !important
}

.fa-role-core:before {
    content: "\e906";
    font-family: lanerole !important
}

.fa-role-support:before {
    content: "\e905";
    font-family: lanerole !important
}

@font-face {
    font-family: 'icomoon';
    src: url(/assets/icomoon-86cc49628e5729e92f1048b86b96b60609bf59b76066c5f20c1ed5aba944f22b.eot?mqtm8s);
    src: url(/assets/icomoon-86cc49628e5729e92f1048b86b96b60609bf59b76066c5f20c1ed5aba944f22b.eot?mqtm8s#iefix) format("embedded-opentype"),url(/assets/icomoon-a54f3f5a779c6fa7a27968cf8f9d60af7ec21d88562adcc2248aca0bed2cb05c.woff?mqtm8s) format("woff"),url(/assets/icomoon-71b0a87520fd4fa7317d49cadcc3b26348c3fa9c0fb18a7ed8e5ce303a4548a8.ttf?mqtm8s) format("truetype"),url(/assets/icomoon-502de4ee99e3c6a9a871644d99097069211c8c5ce9d2049861742843decd3ca1.svg?mqtm8s#icomoon) format("svg");
    font-weight: normal;
    font-style: normal
}

.fa-discord:before {
    content: "\e900";
    font-family: icomoon !important;
    position: relative;
    top: 1px
}

.slider {
    display: inline-block;
    vertical-align: middle;
    position: relative
}

    .slider.slider-horizontal {
        width: 210px;
        height: 20px
    }

        .slider.slider-horizontal .slider-track {
            height: 10px;
            width: 100%;
            margin-top: -5px;
            top: 50%;
            left: 0
        }

        .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high {
            height: 100%;
            top: 0;
            bottom: 0
        }

        .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
            margin-left: -10px;
            margin-top: -5px
        }

            .slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle {
                border-width: 0 10px 10px 10px;
                width: 0;
                height: 0;
                border-bottom-color: #0480be;
                margin-top: 0
            }

        .slider.slider-horizontal .slider-tick-label-container {
            white-space: nowrap;
            margin-top: 20px
        }

            .slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
                padding-top: 4px;
                display: inline-block;
                text-align: center
            }

    .slider.slider-vertical {
        height: 210px;
        width: 20px
    }

        .slider.slider-vertical .slider-track {
            width: 10px;
            height: 100%;
            margin-left: -5px;
            left: 50%;
            top: 0
        }

        .slider.slider-vertical .slider-selection {
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0
        }

        .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high {
            width: 100%;
            left: 0;
            right: 0
        }

        .slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-handle {
            margin-left: -5px;
            margin-top: -10px
        }

            .slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle {
                border-width: 10px 0 10px 10px;
                width: 1px;
                height: 1px;
                border-left-color: #0480be;
                margin-left: 0
            }

    .slider.slider-disabled .slider-handle {
        background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
        background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
        background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0)
    }

    .slider.slider-disabled .slider-track {
        background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
        background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
        background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
        cursor: not-allowed
    }

    .slider input {
        display: none
    }

    .slider .tooltip.top {
        margin-top: -36px
    }

    .slider .tooltip-inner {
        white-space: nowrap
    }

    .slider .hide {
        display: none
    }

.slider-track {
    position: absolute;
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
    background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    border-radius: 4px
}

.slider-selection {
    position: absolute;
    background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
    background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px
}

    .slider-selection.tick-slider-selection {
        background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
        background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
        background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0)
    }

.slider-track-low, .slider-track-high {
    position: absolute;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px
}

.slider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #337ab7;
    background-image: -webkit-linear-gradient(top, #149bdf 0%, #0480be 100%);
    background-image: -o-linear-gradient(top, #149bdf 0%, #0480be 100%);
    background-image: linear-gradient(to bottom, #149bdf 0%, #0480be 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
    filter: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    border: 0px solid transparent
}

    .slider-handle.round {
        border-radius: 50%
    }

    .slider-handle.triangle {
        background: transparent none
    }

    .slider-handle.custom {
        background: transparent none
    }

        .slider-handle.custom::before {
            line-height: 20px;
            font-size: 20px;
            content: '\2605';
            color: #726204
        }

.slider-tick {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
    background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    filter: none;
    opacity: 0.8;
    border: 0px solid transparent
}

    .slider-tick.round {
        border-radius: 50%
    }

    .slider-tick.triangle {
        background: transparent none
    }

    .slider-tick.custom {
        background: transparent none
    }

        .slider-tick.custom::before {
            line-height: 20px;
            font-size: 20px;
            content: '\2605';
            color: #726204
        }

    .slider-tick.in-selection {
        background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
        background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
        background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
        opacity: 1
    }

.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
    visibility: visible !important;
    background: #f2f2f2 !important;
    background: rgba(0,0,0,0.06) !important;
    border: 0 none !important;
    -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
    box-shadow: inset 0 0 12px 4px #ffffff
}

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
    content: '!';
    visibility: hidden
}

.selectize-control.plugin-drag_drop .ui-sortable-helper {
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2)
}

.selectize-dropdown-header {
    position: relative;
    padding: 5px 8px;
    border-bottom: 1px solid #d0d0d0;
    background: #f8f8f8;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0
}

.selectize-dropdown-header-close {
    position: absolute;
    right: 8px;
    top: 50%;
    color: #303030;
    opacity: 0.4;
    margin-top: -12px;
    line-height: 20px;
    font-size: 20px !important
}

    .selectize-dropdown-header-close:hover {
        color: #000000
    }

.selectize-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top: 0 none;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

    .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
        border-right: 0 none
    }

    .selectize-dropdown.plugin-optgroup_columns .optgroup:before {
        display: none
    }

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
    border-top: 0 none
}

.selectize-control.plugin-remove_button [data-value] {
    position: relative;
    padding-right: 24px !important
}

    .selectize-control.plugin-remove_button [data-value] .remove {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 17px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: inherit;
        text-decoration: none;
        vertical-align: middle;
        display: inline-block;
        padding: 2px 0 0 0;
        border-left: 1px solid #0073bb;
        -webkit-border-radius: 0 2px 2px 0;
        -moz-border-radius: 0 2px 2px 0;
        border-radius: 0 2px 2px 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

        .selectize-control.plugin-remove_button [data-value] .remove:hover {
            background: rgba(0,0,0,0.05)
        }

.selectize-control.plugin-remove_button .active[data-value] .remove {
    border-left-color: #00578d
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
    background: none
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove {
    border-left-color: #aaaaaa
}

.selectize-control {
    position: relative
}

.selectize-dropdown, .selectize-input, .selectize-input input {
    color: #303030;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    -webkit-font-smoothing: inherit
}

.selectize-input, .selectize-control.single .selectize-input.input-active {
    background: #ffffff;
    cursor: text;
    display: inline-block
}

.selectize-input {
    border: 1px solid #d0d0d0;
    padding: 8px 8px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.selectize-control.multi .selectize-input.has-items {
    padding: 5px 8px 2px
}

.selectize-input.full {
    background-color: #ffffff
}

.selectize-input.disabled, .selectize-input.disabled * {
    cursor: default !important
}

.selectize-input.focus {
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15)
}

.selectize-input.dropdown-active {
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0
}

.selectize-input > * {
    vertical-align: baseline;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline
}

.selectize-control.multi .selectize-input > div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: #1da7ee;
    color: #ffffff;
    border: 1px solid #0073bb
}

    .selectize-control.multi .selectize-input > div.active {
        background: #92c836;
        color: #ffffff;
        border: 1px solid #00578d
    }

.selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active {
    color: #ffffff;
    background: #d2d2d2;
    border: 1px solid #aaaaaa
}

.selectize-input > input {
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: 0 1px !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

    .selectize-input > input::-ms-clear {
        display: none
    }

    .selectize-input > input:focus {
        outline: none !important
    }

.selectize-input::after {
    content: ' ';
    display: block;
    clear: left
}

.selectize-input.dropdown-active::before {
    content: ' ';
    display: block;
    position: absolute;
    background: #f0f0f0;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0
}

.selectize-dropdown {
    position: absolute;
    z-index: 10;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    margin: -1px 0 0 0;
    border-top: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
}

    .selectize-dropdown [data-selectable] {
        cursor: pointer;
        overflow: hidden
    }

        .selectize-dropdown [data-selectable] .highlight {
            background: rgba(125,168,208,0.2);
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            border-radius: 1px
        }

    .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
        padding: 5px 8px
    }

    .selectize-dropdown .optgroup:first-child .optgroup-header {
        border-top: 0 none
    }

    .selectize-dropdown .optgroup-header {
        color: #303030;
        background: #ffffff;
        cursor: default
    }

    .selectize-dropdown .active {
        background-color: #f5fafd;
        color: #495c68
    }

        .selectize-dropdown .active.create {
            color: #495c68
        }

    .selectize-dropdown .create {
        color: rgba(48,48,48,0.5)
    }

.selectize-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px
}

.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    cursor: pointer
}

    .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input {
        cursor: text
    }

    .selectize-control.single .selectize-input:after {
        content: ' ';
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -3px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 0 5px;
        border-color: #808080 transparent transparent transparent
    }

    .selectize-control.single .selectize-input.dropdown-active:after {
        margin-top: -4px;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent #808080 transparent
    }

.selectize-control.rtl.single .selectize-input:after {
    left: 15px;
    right: auto
}

.selectize-control.rtl .selectize-input > input {
    margin: 0 4px 0 -2px !important
}

.selectize-control .selectize-input.disabled {
    opacity: 0.5;
    background-color: #fafafa
}

.selectize-control.multi .selectize-input.has-items {
    padding-left: 5px;
    padding-right: 5px
}

.selectize-control.multi .selectize-input.disabled [data-value] {
    color: #999;
    text-shadow: none;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

    .selectize-control.multi .selectize-input.disabled [data-value], .selectize-control.multi .selectize-input.disabled [data-value] .remove {
        border-color: #e6e6e6
    }

        .selectize-control.multi .selectize-input.disabled [data-value] .remove {
            background: none
        }

.selectize-control.multi .selectize-input [data-value] {
    text-shadow: 0 1px 0 rgba(0,51,83,0.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #1b9dec;
    background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
    background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
    background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
    background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03)
}

.selectize-control.multi .selectize-input .active[data-value] {
    background-color: #0085d4;
    background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
    background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
    background-image: -o-linear-gradient(top, #008fd8, #0075cf);
    background-image: linear-gradient(to bottom, #008fd8, #0075cf);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0)
}

.selectize-control.single .selectize-input {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.8);
    background-color: #f9f9f9;
    background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
    background-image: -o-linear-gradient(top, #fefefe, #f2f2f2);
    background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0)
}

.selectize-control.single .selectize-input, .selectize-dropdown.single {
    border-color: #b8b8b8
}

.selectize-dropdown .optgroup-header {
    padding-top: 7px;
    font-weight: bold;
    font-size: 0.85em
}

.selectize-dropdown .optgroup {
    border-top: 1px solid #f0f0f0
}

    .selectize-dropdown .optgroup:first-child {
        border-top: 0 none
    }

.rateit {
    display: -moz-inline-box;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

    .rateit .rateit-range {
        position: relative;
        display: -moz-inline-box;
        display: inline-block;
        background: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png);
        height: 16px;
        outline: none
    }

        .rateit .rateit-range * {
            display: block
        }

    * html .rateit, * html .rateit .rateit-range {
        display: inline
    }

        * + html .rateit, * + html .rateit .rateit-range {
            display: inline
        }

            .rateit .rateit-hover, .rateit .rateit-selected {
                position: absolute;
                left: 0px
            }

            .rateit .rateit-hover-rtl, .rateit .rateit-selected-rtl {
                left: auto;
                right: 0px
            }

            .rateit button.rateit-reset {
                background: url(/assets/rateit/delete-7b9200c5042020d33a4855ac491eac2a1ea943e71c29d241ad8bc00e4203789a.gif) 0 0;
                width: 16px;
                height: 16px;
                display: -moz-inline-box;
                display: inline-block;
                float: left;
                outline: none;
                border: none;
                padding: 0
            }

                .rateit button.rateit-reset:hover, .rateit button.rateit-reset:focus {
                    background-position: 0 -16px
                }
/*!
 * jQuery Slot Machine v3.0.1
 * https:// github.com/josex2r/jQuery-SlotMachine
 *
 * Copyright 2014 Jose Luis Represa
 * Released under the MIT license
 */

.slotMachineNoTransition {
    transition: none !important
}

.slotMachineBlurFast {
    filter: blur(5px)
}

.slotMachineBlurMedium {
    filter: blur(3px)
}

.slotMachineBlurSlow {
    filter: blur(2px)
}

.slotMachineBlurTurtle {
    filter: blur(1px)
}

.slotMachineGradient {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, black), color-stop(75%, black), color-stop(100%, rgba(0,0,0,0)));
    mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask')
}

.xdsoft_datetimepicker {
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.506);
    background: #fff;
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 8px;
    padding-left: 0;
    padding-top: 2px;
    position: absolute;
    z-index: 9999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none
}

    .xdsoft_datetimepicker.xdsoft_rtl {
        padding: 8px 0 8px 8px
    }

    .xdsoft_datetimepicker iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 75px;
        height: 210px;
        background: transparent;
        border: 0
    }

    .xdsoft_datetimepicker button {
        border: none !important
    }

.xdsoft_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

    .xdsoft_noselect::selection {
        background: transparent
    }

    .xdsoft_noselect::-moz-selection {
        background: transparent
    }

.xdsoft_datetimepicker.xdsoft_inline {
    display: inline-block;
    position: static;
    box-shadow: none
}

.xdsoft_datetimepicker * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
    display: none
}

    .xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
        display: block
    }

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 224px;
    float: left;
    margin-left: 8px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
    width: 256px
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 58px;
    float: left;
    text-align: center;
    margin-left: 8px;
    margin-top: 0
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker {
    margin-top: 8px;
    margin-bottom: 3px
}

.xdsoft_datetimepicker .xdsoft_monthpicker {
    position: relative;
    text-align: center
}

.xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC)
}

.xdsoft_datetimepicker .xdsoft_label i {
    opacity: .5;
    background-position: -92px -19px;
    display: inline-block;
    width: 9px;
    height: 20px;
    vertical-align: middle
}

.xdsoft_datetimepicker .xdsoft_prev {
    float: left;
    background-position: -20px 0
}

.xdsoft_datetimepicker .xdsoft_today_button {
    float: left;
    background-position: -70px 0;
    margin-left: 5px
}

.xdsoft_datetimepicker .xdsoft_next {
    float: right;
    background-position: 0 0
}

.xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    width: 20px;
    min-width: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    float: none;
    background-position: -40px -15px;
    height: 15px;
    width: 30px;
    display: block;
    margin-left: 14px;
    margin-top: 7px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
    float: none;
    margin-left: 0;
    margin-right: 14px
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    background-position: -40px 0;
    margin-bottom: 7px;
    margin-top: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 151px;
    overflow: hidden;
    border-bottom: 1px solid #ddd
}

    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
        background: #f5f5f5;
        border-top: 1px solid #ddd;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-collapse: collapse;
        cursor: pointer;
        border-bottom-width: 0;
        height: 25px;
        line-height: 25px
    }

        .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child {
            border-top-width: 0
        }

.xdsoft_datetimepicker .xdsoft_today_button:hover, .xdsoft_datetimepicker .xdsoft_next:hover, .xdsoft_datetimepicker .xdsoft_prev:hover {
    opacity: 1;
    -ms-filter: "alpha(opacity=100)"
}

.xdsoft_datetimepicker .xdsoft_label {
    display: inline;
    position: relative;
    z-index: 9999;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
    float: left;
    width: 182px;
    text-align: center;
    cursor: pointer
}

    .xdsoft_datetimepicker .xdsoft_label:hover > span {
        text-decoration: underline
    }

    .xdsoft_datetimepicker .xdsoft_label:hover i {
        opacity: 1.0
    }

    .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
        border: 1px solid #ccc;
        position: absolute;
        right: 0;
        top: 30px;
        z-index: 101;
        display: none;
        background: #fff;
        max-height: 160px;
        overflow-y: hidden
    }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect {
            right: -7px
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect {
            right: 2px
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
            color: #fff;
            background: #ff8000
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
            padding: 2px 10px 2px 5px;
            text-decoration: none !important
        }

            .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                background: #3af;
                box-shadow: #178fe5 0 1px 3px 0 inset;
                color: #fff;
                font-weight: 700
            }

.xdsoft_datetimepicker .xdsoft_month {
    width: 100px;
    text-align: right
}

.xdsoft_datetimepicker .xdsoft_calendar {
    clear: both
}

.xdsoft_datetimepicker .xdsoft_year {
    width: 48px;
    margin-left: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar table {
    border-collapse: collapse;
    width: 100%
}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding-right: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 25px
}

.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
    width: 14.2857142%;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: right;
    vertical-align: middle;
    padding: 0;
    border-collapse: collapse;
    cursor: pointer;
    height: 25px
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
    width: 12.5%
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    background: #f1f1f1
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #3af
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: #ffb871 0 1px 4px 0 inset;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: #00dd1c 0 1px 4px 0 inset;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: #3af;
    box-shadow: #178fe5 0 1px 3px 0 inset;
    color: #fff;
    font-weight: 700
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled {
    opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    cursor: default
}

    .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
        opacity: .2;
        -ms-filter: "alpha(opacity=20)"
    }

.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    color: #fff !important;
    background: #ff8000 !important;
    box-shadow: none !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover {
    background: #3af !important;
    box-shadow: #178fe5 0 1px 3px 0 inset !important;
    color: #fff !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled:hover {
    color: inherit !important;
    background: inherit !important;
    box-shadow: inherit !important
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    font-weight: 700;
    text-align: center;
    color: #999;
    cursor: default
}

.xdsoft_datetimepicker .xdsoft_copyright {
    color: #ccc !important;
    font-size: 10px;
    clear: both;
    float: none;
    margin-left: 8px
}

    .xdsoft_datetimepicker .xdsoft_copyright a {
        color: #eee !important
    }

        .xdsoft_datetimepicker .xdsoft_copyright a:hover {
            color: #aaa !important
        }

.xdsoft_time_box {
    position: relative;
    border: 1px solid #ccc
}

.xdsoft_scrollbar > .xdsoft_scroller {
    background: #ccc !important;
    height: 20px;
    border-radius: 3px
}

.xdsoft_scrollbar {
    position: absolute;
    width: 7px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
    left: 0;
    right: auto
}

.xdsoft_scroller_box {
    position: relative
}

.xdsoft_datetimepicker.xdsoft_dark {
    box-shadow: 0 5px 15px -5px rgba(255,255,255,0.506);
    background: #000;
    border-bottom: 1px solid #444;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    color: #ccc
}

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
        border-bottom: 1px solid #222
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div {
            background: #0a0a0a;
            border-top: 1px solid #222;
            color: #999
        }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
        background-color: #000
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
            border: 1px solid #333;
            background: #000
        }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
                color: #000;
                background: #007fff
            }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                background: #c50;
                box-shadow: #b03e00 0 1px 3px 0 inset;
                color: #000
            }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_next, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==)
        }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        background: #0a0a0a;
        border: 1px solid #222;
        color: #999
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        background: #0e0e0e
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
        color: #c50
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
        background: #ffe9d2;
        box-shadow: #ffb871 0 1px 4px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
        background: #c1ffc9;
        box-shadow: #00dd1c 0 1px 4px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
        background: #c50;
        box-shadow: #b03e00 0 1px 3px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
        color: #000 !important;
        background: #007fff !important
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        color: #666
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright {
        color: #333 !important
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a {
            color: #111 !important
        }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover {
                color: #555 !important
            }

.xdsoft_dark .xdsoft_time_box {
    border: 1px solid #333
}

.xdsoft_dark .xdsoft_scrollbar > .xdsoft_scroller {
    background: #333 !important
}

.xdsoft_datetimepicker .xdsoft_save_selected {
    display: block;
    border: 1px solid #ddd !important;
    margin-top: 5px;
    width: 100%;
    color: #454551;
    font-size: 13px
}

.xdsoft_datetimepicker .blue-gradient-button {
    font-family: "museo-sans","Book Antiqua",sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #82878c;
    height: 28px;
    position: relative;
    padding: 4px 17px 4px 33px;
    border: 1px solid #d7d8da;
    background: -moz-linear-gradient(top, #fff 0, #f4f8fa 73%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(73%, #f4f8fa));
    background: -webkit-linear-gradient(top, #fff 0, #f4f8fa 73%);
    background: -o-linear-gradient(top, #fff 0, #f4f8fa 73%);
    background: -ms-linear-gradient(top, #fff 0, #f4f8fa 73%);
    background: linear-gradient(to bottom, #fff 0, #f4f8fa 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f4f8fa',GradientType=0)
}

    .xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
        color: #454551;
        background: -moz-linear-gradient(top, #f4f8fa 0, #fff 73%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f8fa), color-stop(73%, #fff));
        background: -webkit-linear-gradient(top, #f4f8fa 0, #fff 73%);
        background: -o-linear-gradient(top, #f4f8fa 0, #fff 73%);
        background: -ms-linear-gradient(top, #f4f8fa 0, #fff 73%);
        background: linear-gradient(to bottom, #f4f8fa 0, #fff 73%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f8fa',endColorstr='#FFF',GradientType=0)
    }

html {
    background: #1C242D;
    color: white;
    font-size: 14px;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-y: scroll
}

time {
    cursor: default
}

p {
    line-height: 1.5em
}

    p strong {
        font-weight: bold
    }

    p em {
        color: white
    }

a {
    text-decoration: none
}

hr {
    background: rgba(20,26,32,0.5);
    border: 0;
    height: 1px;
    margin: 1.5em 0 1em 0
}

@media (max-width: 480px) {
    .hidden-sm {
        display: none
    }
}

@media (max-width: 768px) {
    .hidden-md {
        display: none
    }
}

body.no-scroll {
    overflow: hidden
}

.color-dota {
    color: #ED3B1C !important
}

.color-esports {
    color: #39CCCC !important
}

.color-pro-circuit {
    color: #39CCCC !important
}

.color-verified {
    color: #68d1f6 !important
}

.color-premium {
    color: #FBB829 !important
}

.color-admin {
    color: #A97DC1 !important
}

.color-beta {
    color: #F26522 !important
}

.color-truesight {
    color: #A89CEE !important
}

.color-division-bronze {
    color: #C7783A !important
}

.color-division-silver {
    color: #A9BBAF !important
}

.color-division-gold {
    color: #EEC357 !important
}

.color-division-platinum {
    color: #9EC1EB !important
}

.color-division-diamond {
    color: #CAD8F4 !important
}

.color-division-professional {
    color: #39CCCC !important
}

.color-state-ok {
    color: #c9e194 !important
}

.color-state-pending {
    color: #fcc247 !important
}

.color-state-warning {
    color: #fd6068 !important
}

.color-state-disabled {
    color: rgba(217,217,217,0.5) !important
}

.color-white {
    color: white !important
}

.color-stat-usage {
    color: #FBB829 !important
}

.color-stat-win, .color-stat-wins {
    color: #A9CF54 !important
}

.color-stat-loss {
    color: #C23C2A !important
}

.color-stat-match {
    color: #EA030E !important
}

.color-stat-kill {
    color: #EA030E !important
}

.color-stat-death {
    color: #979797 !important
}

.color-stat-assist {
    color: #A9CF54 !important
}

.color-stat-kda {
    color: #F26522 !important
}

.color-stat-gold {
    color: #FBB829 !important
}

.color-stat-team-gold {
    color: #bb8003
}

.color-stat-activity {
    color: #D56D9F !important
}

.color-stat-rune {
    color: #FF5200 !important
}

.color-stat-last-hit {
    color: #f5df67 !important
}

.color-stat-deny {
    color: #949694 !important
}

.color-stat-experience {
    color: #76B8A6 !important
}

.color-stat-team-experience {
    color: #448472
}

.color-faction-radiant {
    color: #92A525 !important
}

.color-faction-dire {
    color: #C23C2A !important
}

.color-item-observer-ward {
    color: #F2CC67 !important
}

.color-item-sentry-ward {
    color: #30BFD2 !important
}

.color-stat-score {
    color: #A89CEE !important
}

.color-stat-only-picked {
    color: #A9CF54 !important
}

.color-stat-picked-and-banned {
    color: #39CCCC !important
}

.color-stat-only-banned {
    color: #C23C2A !important
}

.color-stat-ties {
    color: #39CCCC !important
}

.color-stat-opposing {
    color: #EA030E
}

.color-stat-damage {
    color: #d63d3b
}

.color-stat-healing {
    color: #9fd63b
}

.color-damage-generic {
    color: #ee4c53 !important
}

.color-damage-physical {
    color: #EA030E !important
}

.color-damage-magical {
    color: #199DDB !important
}

.color-damage-mixed {
    color: #8d7cf5 !important
}

.color-damage-pure {
    color: #CAD8F4 !important
}

.color-healing-generic {
    color: #ccee81 !important
}

.color-healing-teammates {
    color: #b8f52e !important
}

.color-healing-myself {
    color: #eff6df !important
}

.color-effect-full {
    color: #974EE9 !important
}

.color-effect-partial {
    color: #b283e7 !important
}

.color-effect-slow {
    color: #cdb2eb !important
}

.color-effect-none {
    color: #CAD8F4 !important
}

.color-stat-support {
    color: #ffda6e
}

.color-stat-core {
    color: #ff6666
}

.color-stat-safelane {
    color: #66b5ab
}

.color-stat-offlane {
    color: #fda55a
}

.color-stat-midlane {
    color: #b970ca
}

.color-stat-jungle {
    color: #75946b
}

.color-stat-roaming {
    color: #b1b1b1
}

.color-stat-title, .legend-title {
    font-weight: bold;
    color: white
}

.color-brand-twitter {
    color: #6CDFEA !important
}

.color-brand-twitch {
    color: #7c55c4 !important
}

.color-brand-facebook {
    color: #3c62b0 !important
}

.color-brand-youtube {
    color: #d00f15 !important
}

.color-brand-discord {
    color: #8298e3 !important
}

.color-brand-overbuff {
    color: #FF8D07 !important
}

.color-faction-radiant-bg {
    background: rgba(146,165,37,0.12)
}

.color-faction-dire-bg {
    background: rgba(194,60,42,0.12)
}

.color-faction-radiant-border-top {
    border-top: 1px solid rgba(146,165,37,0.7)
}

    .color-faction-radiant-border-top.active {
        border-top: 2px solid #92A525
    }

.color-faction-dire-border-top {
    border-top: 1px solid rgba(194,60,42,0.7)
}

    .color-faction-dire-border-top.active {
        border-top: 2px solid #C23C2A
    }

.designation-new {
    text-transform: uppercase;
    line-height: 100%;
    font-size: 10px;
    color: #A9CF54;
    vertical-align: super;
    padding-left: 2px
}

.link-type-player {
    display: inline
}

.link-type-player-larger {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle
}

.inline-verification {
    display: inline-block
}

    .inline-verification .link-type-player, .inline-verification .link-type-player-larger {
        display: inline;
        margin-right: 5px
    }

@media (max-width: 768px) {
    div.container-outer {
        padding-top: 32px
    }
}

div.content-inner {
    margin: 6px 0 0 0;
    min-height: 400px
}

    div.content-inner a {
        color: #A9CF54
    }

div.container-inner-content {
    background-color: #1C242D;
    padding: 6px 0
}

div.container-inner {
    margin: auto;
    position: relative;
    max-width: 1200px;
    flex: 1 1 100%
}

@media (min-width: 992px) {
    div.container-inner {
        margin: 0 8px
    }
}

div.skin-container {
    position: relative
}

@media (min-width: 992px) {
    div.skin-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: center
    }
}

div.header-nav-primary {
    background: #242F39;
    position: relative;
    vertical-align: top;
    font-size: 14px
}

    div.header-nav-primary div.container-inner {
        margin: auto
    }

@media print {
    div.header-nav-primary {
        display: none
    }
}

@media (max-width: 768px) {
    div.header-nav-primary {
        box-shadow: 0 0 3px rgba(10,10,10,0.8);
        font-size: 16px;
        position: fixed;
        width: 100%;
        height: 32px;
        z-index: 1000;
        top: 0
    }
}

div.header-nav-primary a.header-menu-toggle {
    height: 20px;
    text-align: center;
    vertical-align: top;
    position: relative;
    background: #ED3B1C;
    color: white;
    display: none;
    font-family: Arial, sans-serif;
    font-size: 18px;
    padding: 6px;
    z-index: 20000
}

    div.header-nav-primary a.header-menu-toggle i {
        font-size: 21px;
        margin: 0 2px 0 4px;
        position: relative;
        top: -1px;
        vertical-align: text-bottom
    }

    div.header-nav-primary a.header-menu-toggle.toggled .fa-bars:before {
        content: "\f00d"
    }

    div.header-nav-primary a.header-menu-toggle span {
        margin-left: 8px;
        font-size: 20px
    }

@media (max-width: 768px) {
    div.header-nav-primary a.header-menu-toggle {
        display: inline-block
    }
}

div.header-nav-primary a.header-nav-logo {
    background: #ED3B1C;
    color: white;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    padding: 6px 8px;
    text-transform: uppercase;
    vertical-align: top
}

@media (max-width: 768px) {
    div.header-nav-primary a.header-nav-logo {
        display: none
    }
}

div.header-nav-primary nav.header-nav-links {
    display: inline-block
}

    div.header-nav-primary nav.header-nav-links ul li {
        display: inline-block
    }

        div.header-nav-primary nav.header-nav-links ul li > a, div.header-nav-primary nav.header-nav-links ul li div {
            display: block
        }

        div.header-nav-primary nav.header-nav-links ul li a {
            color: white;
            height: 20px;
            padding: 8px 6px 4px 6px
        }

        div.header-nav-primary nav.header-nav-links ul li.active a {
            background: #2E3740;
            color: #ED3B1C
        }

@media (max-width: 768px) {
    div.header-nav-primary nav.header-nav-links {
        background: #242F39;
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 10000;
        font-size: 18px;
        overflow: hidden;
        padding-top: 32px;
        height: 100%
    }

        div.header-nav-primary nav.header-nav-links ul li {
            display: block
        }

            div.header-nav-primary nav.header-nav-links ul li > a, div.header-nav-primary nav.header-nav-links ul li div {
                display: block
            }

            div.header-nav-primary nav.header-nav-links ul li a {
                padding: 12px
            }

        div.header-nav-primary nav.header-nav-links.toggled {
            display: block
        }

            div.header-nav-primary nav.header-nav-links.toggled .js-has-children:after {
                content: "\f0da";
                font-family: "FontAwesome";
                margin-left: 8px;
                position: absolute;
                left: 97px
            }
}

div.header-nav-primary div.header-nav-right {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    vertical-align: top;
    z-index: 30000
}

    div.header-nav-primary div.header-nav-right div.header-nav-search-input {
        display: none;
        position: fixed;
        top: 32px;
        left: 0px;
        right: 0px;
        z-index: 10004;
        background: #2E3740;
        box-shadow: 0 2px 2px rgba(10,10,10,0.4);
        padding: 32px 20px;
        text-align: center;
        vertical-align: middle
    }

@media (max-width: 480px) {
    div.header-nav-primary div.header-nav-right div.header-nav-search-input input#q {
        width: 100%;
        margin-bottom: 15px
    }
}

div.header-nav-primary div.header-nav-right div.header-nav-search-input p {
    font-size: 12px;
    color: #C4C4C4;
    margin-top: 12px
}

    div.header-nav-primary div.header-nav-right div.header-nav-search-input p a {
        color: #A9CF54
    }

div.header-nav-primary div.header-nav-right div.header-nav-search-input.toggled {
    display: block
}

div.header-nav-primary div.header-nav-right a.header-nav-search-toggle {
    color: white;
    display: inline-block;
    height: 20px;
    padding: 8px 12px 4px 12px;
    vertical-align: top
}

    div.header-nav-primary div.header-nav-right a.header-nav-search-toggle:hover {
        background: #2E3740
    }

    div.header-nav-primary div.header-nav-right a.header-nav-search-toggle.toggled {
        background: #2E3740
    }

        div.header-nav-primary div.header-nav-right a.header-nav-search-toggle.toggled .fa-search:before {
            content: "\f00d"
        }

div.header-nav-primary div.header-nav-right nav.header-nav-session {
    display: inline-block;
    vertical-align: top
}

    div.header-nav-primary div.header-nav-right nav.header-nav-session ul li {
        display: inline-block
    }

        div.header-nav-primary div.header-nav-right nav.header-nav-session ul li > a, div.header-nav-primary div.header-nav-right nav.header-nav-session ul li div {
            display: block
        }

        div.header-nav-primary div.header-nav-right nav.header-nav-session ul li a {
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: white;
            height: 20px;
            padding: 8px 8px 4px 8px
        }

@media (max-width: 480px) {
    div.header-nav-primary div.header-nav-right nav.header-nav-session ul li a {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

div.header-nav-primary div.header-nav-right nav.header-nav-session ul li a:hover {
    background-color: #2E3740
}

div.header-nav-primary div.header-nav-right nav.header-nav-session ul li a i {
    margin-right: 4px
}

div.header-nav-secondary-collection {
    background: #2E3740;
    display: none;
    position: relative;
    font-size: 14px
}

    div.header-nav-secondary-collection div.container-inner {
        margin: auto
    }

@media print {
    div.header-nav-secondary-collection {
        display: none
    }
}

@media (max-width: 768px) {
    div.header-nav-secondary-collection {
        font-size: 16px
    }
}

div.header-nav-secondary-collection.active {
    display: block
}

div.header-nav-secondary-collection nav.header-nav-links {
    display: inline-block
}

    div.header-nav-secondary-collection nav.header-nav-links ul li {
        display: inline-block
    }

        div.header-nav-secondary-collection nav.header-nav-links ul li > a, div.header-nav-secondary-collection nav.header-nav-links ul li div {
            display: block
        }

        div.header-nav-secondary-collection nav.header-nav-links ul li a {
            border-bottom: 2px solid #2E3740;
            color: #C4C4C4;
            padding: 8px 8px
        }

            div.header-nav-secondary-collection nav.header-nav-links ul li a:hover {
                color: white
            }

        div.header-nav-secondary-collection nav.header-nav-links ul li.active a {
            border-bottom: 2px solid #ED3B1C;
            color: #ED3B1C
        }

@media (max-width: 768px) {
    div.header-nav-secondary-collection nav.header-nav-links {
        background: #2E3740;
        display: none;
        position: fixed;
        left: 120px;
        bottom: 0px;
        right: 0px;
        z-index: 10002;
        font-size: 18px;
        margin-top: 32px;
        height: 100%;
        top: 0
    }

        div.header-nav-secondary-collection nav.header-nav-links ul li {
            display: block
        }

            div.header-nav-secondary-collection nav.header-nav-links ul li > a, div.header-nav-secondary-collection nav.header-nav-links ul li div {
                display: block
            }

        div.header-nav-secondary-collection nav.header-nav-links.toggled {
            display: block
        }

        div.header-nav-secondary-collection nav.header-nav-links ul li {
            border-bottom: none
        }

            div.header-nav-secondary-collection nav.header-nav-links ul li a {
                padding: 12px
            }

            div.header-nav-secondary-collection nav.header-nav-links ul li.active a {
                background: #ED3B1C;
                border-bottom: none;
                color: white
            }
}

div.header-nav-secondary-collection div.header-nav-right {
    display: none;
    position: absolute;
    top: 8px;
    right: 0px
}

div#header-nav-secondary-collection-esports nav.header-nav-links ul li.active a {
    border-bottom: 2px solid #39CCCC;
    color: #39CCCC
}

@media (max-width: 768px) {
    div#header-nav-secondary-collection-esports nav.header-nav-links ul li.active a {
        border-bottom: none;
        color: white;
        background-color: #39CCCC
    }
}

div.header-content-container {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    border-radius: 1px;
    margin: 13px 0 0 0
}

.header-content-avatar .image-container.image-container-avatar img {
    height: 49px
}

    .header-content-avatar .image-container.image-container-avatar img.image-player {
        width: 49px
    }

div.header-content {
    background: #2E3740;
    position: relative;
    padding: 8px
}

    div.header-content div.header-content-primary div.header-content-avatar {
        display: inline-block;
        margin-right: 8px;
        vertical-align: top
    }

    div.header-content div.header-content-primary div.header-content-title {
        display: inline-block;
        vertical-align: top
    }

@media (max-width: 480px) {
    div.header-content div.header-content-primary div.header-content-title {
        width: calc(100% - 80px)
    }
}

div.header-content div.header-content-primary div.header-content-title h1 {
    color: white;
    font-size: 24px
}

    div.header-content div.header-content-primary div.header-content-title h1 span.header-content-title-flair {
        display: inline-block;
        font-size: 16px;
        margin-top: 3px
    }

    div.header-content div.header-content-primary div.header-content-title h1 small {
        display: block;
        color: #C4C4C4;
        margin-top: 3px;
        font-size: 14px
    }

div.header-content div.header-content-secondary {
    margin-top: 4px;
    font-size: 13px
}

@media (min-width: 992px) {
    div.header-content div.header-content-secondary {
        position: absolute;
        top: 8px;
        right: 8px;
        margin-top: 0
    }
}

div.header-content div.header-content-secondary dl {
    display: inline-block;
    margin: 5px 12px 14px 0;
    vertical-align: top
}

    div.header-content div.header-content-secondary dl:last-of-type {
        margin-right: 0
    }

    div.header-content div.header-content-secondary dl dt {
        color: rgba(255,255,255,0.6);
        font-size: 12px;
        margin-top: 4px;
        text-transform: uppercase
    }

    div.header-content div.header-content-secondary dl dd {
        color: white;
        font-size: 14px
    }

div.header-content div.header-content-interactive {
    text-align: right
}

@media (max-width: 991px) {
    div.header-content div.header-content-interactive {
        text-align: left
    }
}

div.header-content div.header-content-interactive .button {
    margin-right: 4px
}

    div.header-content div.header-content-interactive .button:last-of-type {
        margin-right: 0
    }

div.header-content-nav {
    background: #2E3740;
    position: relative;
    font-size: 14px
}

    div.header-content-nav nav.header-nav-links {
        background: #2a323a;
        display: block
    }

        div.header-content-nav nav.header-nav-links ul li {
            display: inline-block
        }

            div.header-content-nav nav.header-nav-links ul li > a, div.header-content-nav nav.header-nav-links ul li div {
                display: block
            }

        div.header-content-nav nav.header-nav-links.header-nav-links-condensed {
            font-size: 13px
        }

        div.header-content-nav nav.header-nav-links ul li i {
            margin-right: 3px
        }

        div.header-content-nav nav.header-nav-links ul li a {
            border-bottom: 2px solid transparent;
            color: #C4C4C4;
            padding: 8px 8px
        }

            div.header-content-nav nav.header-nav-links ul li a:hover {
                background: #252d34;
                color: white
            }

        div.header-content-nav nav.header-nav-links ul li.more {
            display: none
        }

        div.header-content-nav nav.header-nav-links ul li.active a {
            background: #252d34;
            color: white;
            border-bottom: 2px solid #ED3B1C
        }

        div.header-content-nav nav.header-nav-links ul li.bumped {
            display: none
        }

        div.header-content-nav nav.header-nav-links ul li.dropdown a.dropdown-trigger {
            display: none
        }

@media (max-width: 991px) {
    div.header-content-nav nav.header-nav-links ul li.bumped {
        display: inline-block
    }

    div.header-content-nav nav.header-nav-links ul li.dropdown {
        position: relative
    }

        div.header-content-nav nav.header-nav-links ul li.dropdown ul li {
            display: block
        }

            div.header-content-nav nav.header-nav-links ul li.dropdown ul li > a, div.header-content-nav nav.header-nav-links ul li.dropdown ul li div {
                display: block
            }

        div.header-content-nav nav.header-nav-links ul li.dropdown a.dropdown-trigger {
            display: block
        }

            div.header-content-nav nav.header-nav-links ul li.dropdown a.dropdown-trigger:after {
                content: "▾";
                display: inline;
                margin-left: 4px
            }

        div.header-content-nav nav.header-nav-links ul li.dropdown ul.dropdown-menu {
            box-shadow: 0px 3px 3px rgba(10,10,10,0.4);
            background: #252d34;
            display: none;
            position: absolute;
            top: 32px;
            right: 0px;
            z-index: 2000
        }

            div.header-content-nav nav.header-nav-links ul li.dropdown ul.dropdown-menu li a {
                background: #252d34;
                border-bottom: none;
                border-top: 1px solid #242F39;
                white-space: nowrap
            }

                div.header-content-nav nav.header-nav-links ul li.dropdown ul.dropdown-menu li a:hover {
                    background: #1d2328
                }

        div.header-content-nav nav.header-nav-links ul li.dropdown.toggled a.dropdown-trigger {
            background: #252d34;
            border-bottom: 2px solid #252d34;
            color: white
        }

        div.header-content-nav nav.header-nav-links ul li.dropdown.toggled ul.dropdown-menu {
            display: block
        }
}

div.header-content-nav div.header-nav-right {
    display: none;
    position: absolute;
    top: 8px;
    right: 0px
}

.fixed-secondary-menu {
    box-shadow: 0 0 3px rgba(10,10,10,0.8);
    position: fixed !important;
    top: 0;
    width: 971px;
    z-index: 900
}

@media (max-width: 991px) {
    .fixed-secondary-menu {
        width: 100%
    }
}

@media (max-width: 768px) {
    .fixed-secondary-menu {
        top: 32px
    }
}

div.footer-nav-primary {
    clear: both;
    margin: 13px 0 0 0;
    position: relative
}

@media (max-width: 991px) {
    div.footer-nav-primary {
        padding: 4px
    }
}

div.footer-nav-primary nav.footer-nav-primary-locales {
    margin-top: 5px;
    display: inline-block
}

@media (max-width: 991px) {
    div.footer-nav-primary nav.footer-nav-primary-locales {
        margin-bottom: 10px
    }
}

div.footer-nav-primary nav.footer-nav-primary-locales .pt {
    font-size: 0.9em
}

div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger {
    width: 260px
}

    div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger a {
        padding: 6px;
        background: #2E3740;
        color: white
    }

    div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger.dropit-open ul.dropit-submenu {
        display: block
    }

    div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger a.current-locale {
        box-shadow: 0 0 3px rgba(10,10,10,0.4);
        display: block
    }

        div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger a.current-locale .arrow-selector {
            float: right;
            display: inline-block;
            font-size: 22px;
            margin-top: -5px
        }

    div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger ul.dropit-submenu {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 0;
        z-index: 1000;
        width: 100%
    }

        div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger ul.dropit-submenu li a {
            color: #C4C4C4;
            display: block;
            padding: 6px;
            border-bottom: 1px solid #242F39
        }

            div.footer-nav-primary nav.footer-nav-primary-locales ul.dropit li.dropit-trigger ul.dropit-submenu li a:hover {
                color: white
            }

div.footer-nav-primary div.footer-nav-right {
    margin-top: 5px;
    float: right;
    font-size: 13px
}

@media (max-width: 991px) {
    div.footer-nav-primary div.footer-nav-right {
        position: relative;
        top: none;
        right: none
    }
}

div.footer-nav-primary div.footer-nav-right nav ul li {
    display: inline-block
}

    div.footer-nav-primary div.footer-nav-right nav ul li > a, div.footer-nav-primary div.footer-nav-right nav ul li div {
        display: block
    }

    div.footer-nav-primary div.footer-nav-right nav ul li a {
        color: white;
        padding: 6px 0 6px 12px
    }

        div.footer-nav-primary div.footer-nav-right nav ul li a:hover {
            text-decoration: underline
        }

@media (max-width: 991px) {
    div.footer-nav-primary div.footer-nav-right nav ul li a {
        padding: 6px 12px 6px 0px
    }
}

div.footer-nav-secondary {
    color: rgba(255,255,255,0.6);
    clear: both;
    position: relative;
    margin: 6px 0 0 0;
    padding: 4px 0;
    font-size: 12px
}

    div.footer-nav-secondary a {
        color: white
    }

        div.footer-nav-secondary a:hover {
            text-decoration: underline
        }

@media (max-width: 991px) {
    div.footer-nav-secondary {
        padding: 4px
    }
}

div.footer-nav-secondary div.footer-nav-right {
    position: absolute;
    top: 4px;
    right: 0px
}

@media (max-width: 991px) {
    div.footer-nav-secondary div.footer-nav-right {
        position: relative;
        top: none;
        right: none;
        margin-top: 6px
    }
}

div.footer-nav-secondary div.footer-nav-right.footer-nav-right-crave {
    opacity: 0.3
}

@media (max-width: 991px) {
    div.footer-nav-secondary div.footer-nav-right.footer-nav-right-crave {
        display: none
    }
}

.header-nav-breadcrumbs .breadcrumb, .header-nav-breadcrumbs .crumb-separator {
    display: inline-block
}

    .header-nav-breadcrumbs .breadcrumb a, .header-nav-breadcrumbs .crumb-separator {
        color: #C4C4C4;
        padding: 8px 8px 6px;
        border-bottom: 2px solid transparent
    }

    .header-nav-breadcrumbs .breadcrumb a {
        display: block
    }

        .header-nav-breadcrumbs .breadcrumb a:hover {
            background: #2E3740;
            color: white
        }

    .header-nav-breadcrumbs .breadcrumb.active a {
        border-bottom: 2px solid #ED3B1C;
        color: white;
        background: #242F39
    }

div.row-12 {
    display: block
}

@media (min-width: 992px) {
    div.row-12 {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 12px
    }

        div.row-12.with-sidebar {
            grid-template-columns: repeat(8, minmax(70px, 0.95fr)) repeat(4, 1.1fr)
        }

        div.row-12.with-sidebar-left {
            grid-template-columns: repeat(4, 1.1fr) repeat(8, minmax(70px, 0.95fr))
        }
}

div.col-12 {
    display: block
}

@media (min-width: 992px) {
    div.col-12 {
        grid-column: span 12
    }
}

div.col-11 {
    display: block
}

@media (min-width: 992px) {
    div.col-11 {
        grid-column: span 11
    }
}

div.col-10 {
    display: block
}

@media (min-width: 992px) {
    div.col-10 {
        grid-column: span 10
    }
}

div.col-9 {
    display: block
}

@media (min-width: 992px) {
    div.col-9 {
        grid-column: span 9
    }
}

div.col-8 {
    display: block
}

@media (min-width: 992px) {
    div.col-8 {
        grid-column: span 8
    }
}

div.col-7 {
    display: block
}

@media (min-width: 992px) {
    div.col-7 {
        grid-column: span 7
    }
}

div.col-6 {
    display: block
}

@media (min-width: 992px) {
    div.col-6 {
        grid-column: span 6
    }
}

div.col-5 {
    display: block
}

@media (min-width: 992px) {
    div.col-5 {
        grid-column: span 5
    }
}

div.col-4 {
    display: block
}

@media (min-width: 992px) {
    div.col-4 {
        grid-column: span 4
    }
}

div.col-3 {
    display: block
}

@media (min-width: 992px) {
    div.col-3 {
        grid-column: span 3
    }
}

div.col-2 {
    display: block
}

@media (min-width: 992px) {
    div.col-2 {
        grid-column: span 2
    }
}

div.col-1 {
    display: block
}

@media (min-width: 992px) {
    div.col-1 {
        grid-column: span 1
    }
}

.admin-edit-tabs li {
    display: inline-block;
    margin-left: 2px
}

    .admin-edit-tabs li > a {
        color: white;
        display: block;
        padding: 4px
    }

        .admin-edit-tabs li > a.active {
            background: #A97DC1
        }

.admin-show code {
    font-family: monospace
}

.admin-show dt {
    font-weight: bold;
    margin-bottom: 2px;
    float: left;
    margin-right: 4px
}

    .admin-show dt:after {
        content: ":"
    }

.admin-show dd {
    margin-bottom: 6px
}

table.table .no-data {
    padding: 10px;
    text-align: center
}

article.r-desktop-tabs {
    margin-top: 40px
}

    article.r-desktop-tabs .r-tab-enabled {
        position: relative
    }

        article.r-desktop-tabs .r-tab-enabled td.r-tab {
            font-size: 1em
        }

        article.r-desktop-tabs .r-tab-enabled .r-tab-icon {
            width: 45px
        }

            article.r-desktop-tabs .r-tab-enabled .r-tab-icon img {
                max-height: inherit !important
            }

        article.r-desktop-tabs .r-tab-enabled .r-tab-player-name {
            width: 130px;
            height: 32px
        }

        article.r-desktop-tabs .r-tab-enabled th.r-tab-player-name {
            height: 15px
        }

    article.r-desktop-tabs .r-tab-buttons {
        position: absolute;
        top: -35px;
        display: inline-block !important;
        width: 100%;
        overflow: hidden;
        left: -5px;
        background-color: transparent
    }

        article.r-desktop-tabs .r-tab-buttons > * {
            height: 30px;
            box-sizing: border-box;
            cursor: pointer;
            background-color: #202a33;
            color: #aaa;
            padding: 10px !important;
            margin-right: 10px;
            font-weight: normal;
            display: inline-block
        }

            article.r-desktop-tabs .r-tab-buttons > *:hover {
                color: #fff
            }

            article.r-desktop-tabs .r-tab-buttons > *.active {
                box-shadow: 0 0 3px rgba(10,10,10,0.4);
                color: #fff;
                background-color: #242F39
            }

        article.r-desktop-tabs .r-tab-buttons.r-tab-condensed {
            top: -28px
        }

            article.r-desktop-tabs .r-tab-buttons.r-tab-condensed > * {
                padding: 3px !important;
                margin-right: 2px;
                height: 24px
            }

    article.r-desktop-tabs .r-tab {
        display: none;
        position: absolute;
        left: -9999px
    }

        article.r-desktop-tabs .r-tab.shown {
            position: relative;
            left: 0
        }

            article.r-desktop-tabs .r-tab.shown.cell-divider {
                border-left: none
            }

    article.r-desktop-tabs .r-tab-enabled.r-image-tabs .r-tab-buttons {
        top: -46px !important
    }

    article.r-desktop-tabs .r-tab-enabled.r-image-tabs .r-tab-button {
        padding: 6px !important;
        height: 40px !important;
        margin-right: 10px !important
    }

        article.r-desktop-tabs .r-tab-enabled.r-image-tabs .r-tab-button.active {
            height: 41px !important
        }

@media (max-width: 480px) {
    article.r-desktop-tabs .r-tab-enabled.r-image-tabs .r-tab-buttons.r-tab-condensed .r-tab-button {
        padding: 3px !important;
        margin-right: 3px !important
    }
}

article.r-desktop-tabs td.r-tab.shown, article.r-desktop-tabs th.r-tab.shown {
    display: table-cell
}

article.r-desktop-tabs div.r-tab.shown {
    display: block
}

article.r-desktop-tabs .r-tab-buttons {
    top: -35px
}

@media (max-width: 480px) {
    article.r-desktop-tabs .r-tab-buttons {
        font-size: 0.8em
    }
}

.subtitle {
    color: rgba(255,255,255,0.6)
}

small.subtitle {
    font-size: 0.8em
}

.color-reach-pinnacle {
    color: #eb2c79 !important
}

.color-reach-contender {
    color: #1ceddc !important
}

.reach-invite {
    background: #1f232a;
    border: 2px solid #eb2c79;
    border-radius: 3px;
    color: #edf4ff;
    padding: 10px;
    position: relative;
    padding-left: 65px;
    margin-bottom: 10px
}

    .reach-invite img {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 50px;
        height: auto
    }

    .reach-invite p.reach-cta {
        margin: 10px 0
    }

    .reach-invite a.reach-button {
        color: #1c2026 !important;
        background: #eb2c79;
        padding: 5px 10px;
        text-transform: uppercase;
        border-radius: 3px;
        box-shadow: 0 0 12px 0 rgba(235,44,121,0.43)
    }

.gift-button {
    color: white;
    fill: white;
    display: inline-block;
    height: 32px;
    padding: 0 8px;
    overflow: visible !important
}

    .gift-button:hover {
        background: #2E3740
    }

    .gift-button .gift-button-popup {
        background: #2E3740
    }

.multishot {
    overflow: hidden
}

@media (max-width: 991px) {
    .multishot.molto-grande {
        display: none
    }
}

@media (min-width: 992px) {
    .multishot.molto-piccolo {
        display: none
    }
}

.multishot.marksmanship {
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.javascript-required {
    padding: 10px;
    border: 1px solid red;
    text-align: center;
    margin: 5px 0
}

.flex-grid {
    display: flex;
    flex-wrap: wrap
}

    .flex-grid > a {
        flex: 1;
        position: relative;
        background-size: cover;
        background-position: 50% 50%;
        opacity: 1.0
    }

        .flex-grid > a .name {
            position: absolute;
            bottom: 6px;
            left: 6px;
            right: 6px;
            color: white;
            text-shadow: 0px 0px 2px #0a0a0a !important;
            z-index: 100;
            font-size: 13px
        }

        .flex-grid > a:hover .mask {
            opacity: 1.0
        }

        .flex-grid > a:hover .name {
            display: block
        }

        .flex-grid > a .mask {
            background: -moz-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.8)));
            background: -webkit-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
            background: -o-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
            background: -ms-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            opacity: 0.8;
            z-index: 1
        }

        .flex-grid > a .notes {
            position: absolute;
            top: 2px;
            right: 0px;
            z-index: 100
        }

.player-active-items {
    display: flex;
    flex-flow: row wrap
}

    .player-active-items .player-inventory-items {
        flex: 1 1 auto
    }

    .player-active-items .player-neutral-item {
        flex: 0 1 auto
    }

.ayads-passback {
    display: none
}

.achievements-group {
    clear: both
}

    .achievements-group header {
        margin-top: 1em
    }

.achievements-wrapper .meta {
    margin: 4px 4px -6px
}

    .achievements-wrapper .meta dl {
        float: left;
        width: 50%;
        margin-bottom: 10px
    }

        .achievements-wrapper .meta dl dd {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 4px
        }

        .achievements-wrapper .meta dl dt {
            font-size: 12px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6)
        }

    .achievements-wrapper .meta .subtitle {
        color: rgba(255,255,255,0.6);
        font-size: 16px;
        margin-left: 4px;
        font-weight: normal
    }

    .achievements-wrapper .meta .kv-larger {
        text-transform: none !important
    }

    .achievements-wrapper .meta .largest {
        font-size: 26px !important
    }

.achievements-wrapper .progress {
    position: relative;
    clear: both;
    padding-top: 3px
}

    .achievements-wrapper .progress .text {
        position: absolute;
        top: 8px;
        color: white;
        width: 100%;
        text-align: center;
        font-size: 0.9em
    }

    .achievements-wrapper .progress .bar {
        width: 100%;
        height: 20px;
        background-color: rgba(0,0,0,0.3)
    }

        .achievements-wrapper .progress .bar .segment {
            height: 20px;
            margin-bottom: 0;
            opacity: 0.4
        }

.achievements-wrapper header {
    clear: both
}

.achievement-wrapper {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
    z-index: 1
}

    .achievement-wrapper .achievement a {
        position: relative;
        z-index: 3
    }

    .achievement-wrapper .achievement .click-target {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2
    }

    .achievement-wrapper .achievement acronym {
        position: relative;
        z-index: 3
    }

    .achievement-wrapper.fully-completed .achievement .rarity {
        color: white
    }

    .achievement-wrapper.fully-completed .title .tiers, .achievement-wrapper.fully-completed .points .subtitle, .achievement-wrapper.partially-completed .title .tiers, .achievement-wrapper.partially-completed .points .subtitle {
        color: white
    }

.achievement {
    color: rgba(255,255,255,0.6);
    padding: 5px;
    margin-bottom: 5px;
    line-height: 1.3em;
    position: relative;
    box-sizing: border-box;
    cursor: pointer
}

    .achievement.completed {
        color: white;
        border: 1px solid #43515e;
        background-color: #2E3740
    }

        .achievement.completed .progress .bar .segment {
            background-color: rgba(0,0,0,0.3)
        }

    .achievement .middle {
        width: calc(100% - 140px);
        float: left
    }

    .achievement .title {
        width: 100%;
        margin: 2px 0 1px;
        font-size: 1.3em;
        min-height: 20px
    }

        .achievement .title .tiers {
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            margin-left: 5px;
            font-size: 0.7em
        }

            .achievement .title .tiers span {
                border-bottom: 1px dotted #666
            }

    .achievement .info-bar {
        font-size: 0.9em;
        margin-left: -2px;
        margin-top: 2px
    }

        .achievement .info-bar .section {
            display: inline-block
        }

            .achievement .info-bar .section i {
                margin: 0 6px 0 2px
            }

            .achievement .info-bar .section a:hover {
                color: white
            }

            .achievement .info-bar .section > * {
                display: inline-block;
                padding: 1px 6px 0;
                margin-right: 5px;
                margin-top: 5px;
                background: rgba(0,0,0,0.3);
                text-transform: uppercase;
                font-size: 0.9em
            }

    .achievement .button {
        clear: both;
        float: right
    }

    .achievement .requirement {
        max-width: 650px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 3px 0 -5px
    }

    .achievement .description {
        font-style: italic;
        margin-top: 5px;
        padding-top: 3px;
        border-top: 1px solid rgba(255,255,255,0.55);
        clear: both
    }

    .achievement .check {
        color: white;
        margin-left: 4px;
        font-size: 0.8em
    }

        .achievement .check i {
            vertical-align: text-top
        }

    .achievement .match-link {
        display: inline
    }

        .achievement .match-link time {
            cursor: pointer !important
        }

    .achievement .rarity {
        color: rgba(255,255,255,0.6)
    }

    .achievement .icon {
        position: relative
    }

        .achievement .icon img {
            float: left;
            width: 64px;
            margin-right: 6px
        }

    .achievement .group {
        position: absolute;
        right: 69px
    }

    .achievement .points {
        float: right;
        font-size: 1.2em;
        width: 64px;
        height: 64px;
        margin-left: 5px;
        text-align: center;
        background-color: rgba(0,0,0,0.3);
        box-sizing: border-box
    }

        .achievement .points .subtitle {
            font-size: 0.7em;
            color: rgba(255,255,255,0.6);
            margin-top: 7px
        }

        .achievement .points .some {
            color: white;
            font-weight: bold
        }

        .achievement .points .current {
            font-size: 1.5em;
            margin-top: 14px
        }

    .achievement .human p {
        color: rgba(255,255,255,0.6);
        display: inline
    }

    .achievement .human img {
        width: auto;
        height: 15px;
        position: relative;
        top: 3px;
        margin-left: 2px
    }

    .achievement .completed .human p {
        color: white
    }

.advanced-only {
    display: none
}

.advanced .advanced-only {
    display: inherit
}

@media (min-width: 768px) {
    .advanced .tier-wrapper {
        width: 50%
    }
}

.show-all .achievements-group {
    display: block !important
}

    .show-all .achievements-group.summary, .show-all .achievements-group.recent {
        display: none !important
    }

    .show-all .achievements-group header {
        display: none
    }

.hide-completed .achievement-wrapper.partially-completed, .hide-completed .achievement-wrapper.fully-completed, .hide-completed .achievements-group header {
    display: none !important
}

.achievement-navigation {
    position: relative;
    z-index: 0;
    clear: both
}

    .achievement-navigation li {
        margin-bottom: 5px
    }

        .achievement-navigation li a:before {
            content: '\f0da';
            font-family: FontAwesome;
            margin-right: 10px
        }

        .achievement-navigation li a {
            color: rgba(255,255,255,0.6);
            height: 28px;
            display: block;
            width: 100%;
            position: relative;
            padding: 7px 10px;
            box-sizing: border-box
        }

            .achievement-navigation li a.active {
                color: white;
                font-weight: bold
            }

            .achievement-navigation li a:hover {
                color: white
            }

        .achievement-navigation li .bar {
            margin-top: 0
        }

        .achievement-navigation li.progress .right {
            float: right
        }

        .achievement-navigation li.progress .bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10
        }

            .achievement-navigation li.progress .bar .segment {
                height: 100%
            }

.achievement-summary .icon img {
    height: 100px;
    width: auto;
    float: left;
    margin-right: 10px
}

.achievement-summary .rank-title {
    font-size: 2em
}

.achievement-summary div {
    margin-bottom: 5px
}

.achievement-summary .bar .segment {
    background-color: #A97DC1
}

.expanded-section {
    display: none;
    clear: both
}

.achievement ul {
    clear: both
}

    .achievement ul li {
        line-height: 1.7em
    }

        .achievement ul li.completed {
            color: white
        }

.tier-wrapper {
    padding: 5px 2px 0;
    margin: 20px 0
}

.tier-list li {
    clear: both
}

.tier-list .tier {
    float: left
}

    .tier-list .tier time {
        cursor: pointer
    }

.tier-list .tier-points {
    float: right
}

.tier-list .total {
    position: relative;
    top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(255,255,255,0.55)
}

.tier-list .incomplete {
    color: rgba(255,255,255,0.6)
}

.selector-full {
    padding: 3px 2px 0
}

    .selector-full i {
        width: 20px;
        display: inline-block;
        vertical-align: baseline
    }

    .selector-full .selector-tooltip {
        display: block;
        float: right;
        margin-right: -4px
    }

    .selector-full .repeat {
        background-color: #666;
        padding: 3px;
        border-radius: 4px;
        font-size: 0.8em
    }

    .selector-full p {
        margin: 0;
        padding: 0
    }

.achievement-wrapper:hover .achievement {
    border: 1px solid rgba(255,255,255,0.6)
}

.achievement-wrapper.open {
    height: auto
}

    .achievement-wrapper.open .achievement {
        box-shadow: 0 0 12px #000;
        transform: scale(1.01, 1.01)
    }

        .achievement-wrapper.open .achievement .expanded-section {
            display: block
        }

        .achievement-wrapper.open .achievement .progress {
            padding-bottom: 4px;
            overflow: visible;
            white-space: normal;
            max-width: none
        }

.achievement-wrapper.active .achievement {
    box-shadow: 0 0 20px #fff
}

.selector-legend {
    display: none
}

    .selector-legend strong {
        font-weight: bold
    }

.achievement-filter .customCheckbox, .achievement-filter .customSelect {
    float: left
}

.achievement-filter input[type=text] {
    min-height: 32px
}

.compact-achievements {
    font-size: 12px
}

    .compact-achievements .requirement, .compact-achievements .permalink, .compact-achievements .check, .compact-achievements .tiers {
        display: none !important
    }

    .compact-achievements .icon img {
        width: 37px;
        height: 37px
    }

    .compact-achievements .progress {
        padding-top: 1px
    }

        .compact-achievements .progress .bar, .compact-achievements .progress .segment {
            height: 4px !important
        }

        .compact-achievements .progress .text {
            display: none
        }

    .compact-achievements .match-link {
        color: rgba(255,255,255,0.6)
    }

    .compact-achievements .middle {
        width: calc(100% - 90px)
    }

    .compact-achievements .jump-to {
        display: none !important
    }

    .compact-achievements .points {
        color: rgba(255,255,255,0.6);
        border: 1px solid #666666;
        width: 37px;
        height: 37px;
        background-color: transparent
    }

        .compact-achievements .points .current {
            font-size: 1em;
            margin-top: 10px
        }

        .compact-achievements .points .subtitle {
            display: none
        }

    .compact-achievements .achievement-wrapper {
        height: auto
    }

        .compact-achievements .achievement-wrapper:nth-child(2n+1) .achievement {
            background-color: rgba(255,255,255,0.04)
        }

        .compact-achievements .achievement-wrapper .achievement {
            border: none !important;
            box-shadow: none !important;
            cursor: default;
            margin: 0;
            border-top: 1px solid;
            background-color: rgba(255,255,255,0.02)
        }

    .compact-achievements .title {
        font-size: 1em;
        margin-bottom: -8px
    }

.player-achievements article.main-achievements {
    display: flex;
    flex-wrap: wrap;
    padding: 0
}

    .player-achievements article.main-achievements .achievement-main {
        flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 150px;
        display: flex;
        background-color: rgba(255,255,255,0.04);
        margin: 3px;
        padding: 3px 3px 0
    }

        .player-achievements article.main-achievements .achievement-main .icon {
            flex-grow: 0;
            flex-shrink: 0;
            margin-right: 4px
        }

        .player-achievements article.main-achievements .achievement-main .link {
            flex-grow: 1;
            flex-shrink: 1;
            padding: 3px
        }

            .player-achievements article.main-achievements .achievement-main .link a {
                font-size: 12px;
                display: block
            }

@media (min-width: 992px) {
    .player-achievements article.main-achievements .achievement-main .link a {
        max-width: 127px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.player-achievements article.main-achievements .achievement-main .ap {
    flex-grow: 0;
    flex-shrink: 0;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.2);
    line-height: 33px;
    font-size: 18px;
    text-align: center
}

.match-achievements.compact-achievements {
    margin-bottom: 1em;
    clear: both
}

    .match-achievements.compact-achievements .achievement-wrapper {
        width: 50%;
        float: left;
        padding-right: 5px;
        padding-bottom: 5px
    }

        .match-achievements.compact-achievements .achievement-wrapper:nth-child(2n+1) {
            padding-right: 0
        }

@media (max-width: 480px) {
    .match-achievements.compact-achievements .achievement-wrapper {
        width: 100%;
        padding-right: 0
    }
}

.match-achievements.compact-achievements .achievement-wrapper .achievement {
    background-color: #242F39 !important;
    box-shadow: 0 0 3px rgba(10,10,10,0.4) !important
}

.full-achievement .achievement {
    cursor: inherit;
    padding: 0;
    margin-bottom: 0
}

.full-achievement .kv {
    font-size: 18px !important;
    width: 25%;
    margin: 5px 0 !important
}

@media (max-width: 480px) {
    .full-achievement .kv {
        width: 50%
    }
}

.full-achievement .kv a time {
    cursor: pointer
}

.full-achievement .middle {
    width: calc(100% - 250px)
}

@media (max-width: 480px) {
    .full-achievement .middle {
        width: calc(100% - 80px)
    }
}

.full-achievement .progress {
    margin-top: -5px
}

.full-achievement .button {
    float: none;
    margin-top: 4px
}

.full-achievement .full-rarity {
    float: right;
    padding: 12px 6px 0
}

@media (max-width: 480px) {
    .full-achievement .full-rarity {
        float: none;
        clear: both
    }
}

.full-achievement .full-rarity .subtitle {
    font-size: 12px;
    text-transform: uppercase
}

.full-achievement .full-rarity .percentage {
    font-size: 1.8em;
    text-align: right
}

@media (max-width: 480px) {
    .full-achievement .full-rarity .percentage {
        font-size: 1.5em;
        text-align: left
    }
}

.full-achievement .full-rarity .percentage.complete {
    color: white
}

.full-achievement .full-rarity .percentage i {
    margin-left: 5px
}

.full-achievement .list-header {
    padding: 4px 6px;
    color: white;
    font-weight: bold
}

.full-achievement .requirement {
    margin: 0
}

.full-achievement .icon img {
    height: 70px;
    width: 70px
}

.full-achievement ul {
    margin-bottom: 2px
}

    .full-achievement ul li {
        padding: 4px 6px;
        background-color: rgba(255,255,255,0.08)
    }

        .full-achievement ul li:nth-child(2n+1) {
            background-color: rgba(255,255,255,0.04)
        }

div#announcement-modal {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 21000;
    box-shadow: 0 0 4px rgba(10,10,10,0.6);
    border: 1px solid #39CCCC;
    border-radius: 2px;
    background: #2E3740;
    padding: 4px;
    max-width: 400px;
    display: none
}

    div#announcement-modal.announcement-modal-preview {
        border: 1px solid #fd6068;
        display: block
    }

    div#announcement-modal .close {
        position: absolute;
        top: 8px;
        right: 8px
    }

        div#announcement-modal .close a {
            color: #d9d9d9
        }

    div#announcement-modal .title {
        font-size: 1.1em;
        padding: 4px 20px 4px 4px
    }

        div#announcement-modal .title a {
            color: #39CCCC
        }

    div#announcement-modal .summary {
        font-size: 0.8em;
        color: #d9d9d9;
        line-height: 150%;
        padding: 4px
    }

        div#announcement-modal .summary h1, div#announcement-modal .summary h2 {
            color: white;
            font-weight: bold
        }

        div#announcement-modal .summary p {
            margin: 1em 0;
            padding: 0
        }

        div#announcement-modal .summary ol {
            list-style: decimal inside
        }

        div#announcement-modal .summary ul {
            list-style: circle inside;
            margin-left: 1.2em
        }

            div#announcement-modal .summary ul li {
                list-style: disc
            }

        div#announcement-modal .summary ul, div#announcement-modal .summary ol {
            color: #d9d9d9;
            margin-bottom: 1em
        }

            div#announcement-modal .summary ul li, div#announcement-modal .summary ol li {
                line-height: 150%
            }

    div#announcement-modal .links {
        font-size: 0.9em;
        padding: 4px
    }

        div#announcement-modal .links a {
            display: inline-block;
            margin-right: 8px
        }

@media (max-width: 480px) {
    div#announcement-modal {
        position: fixed;
        bottom: 6px;
        left: 6px;
        right: 6px
    }

        div#announcement-modal .summary, div#announcement-modal .links {
            display: none
        }
}

.viz.split-bottom {
    margin-top: -3px;
    position: relative
}

    .viz.split-bottom svg {
        position: absolute
    }

.viz.fade svg polygon {
    fill: #596a7b
}

.viz.fade svg polyline {
    stroke: transparent
}

.viz.radiant svg polygon {
    fill: #92A525
}

.viz.radiant svg polyline {
    stroke: transparent
}

.viz.dire svg polygon {
    fill: #C23C2A
}

.viz.dire svg polyline {
    stroke: transparent
}

.bar {
    height: 4px;
    margin-top: 3px;
    width: 98%
}

    .bar.bar-dark {
        background: rgba(10,10,10,0.2);
        border: 1px solid rgba(10,10,10,0.4)
    }

    .bar .segment {
        background: white;
        content: ".";
        display: inline-block;
        height: 4px;
        text-indent: -2000px;
        vertical-align: top
    }

    .bar .segment-division-bronze {
        background: #C7783A
    }

    .bar .segment-division-silver {
        background: #A9BBAF
    }

    .bar .segment-division-gold {
        background: #EEC357
    }

    .bar .segment-division-platinum {
        background: #9EC1EB
    }

    .bar .segment-division-diamond, .bar .segment-pure {
        background: #CAD8F4
    }

    .bar .segment-division-professional {
        background: #39CCCC
    }

    .bar .segment-match, .bar .segment-pick, .bar .segment-buy, .bar .segment-use, .bar .segment-loss {
        background: #EA030E
    }

    .bar .segment-damage-generic {
        background: #ee4c53
    }

    .bar .segment-damage-physical {
        background: #EA030E
    }

    .bar .segment-damage-magical {
        background: #199DDB
    }

    .bar .segment-damage-mixed {
        background: #8d7cf5
    }

    .bar .segment-damage-pure {
        background: #CAD8F4
    }

    .bar .segment-healing-generic {
        background: #ccee81
    }

    .bar .segment-healing-teammates {
        background: #b8f52e
    }

    .bar .segment-healing-myself {
        background: #eff6df
    }

    .bar .segment-effect-full {
        background: #974EE9
    }

    .bar .segment-effect-partial {
        background: #b283e7
    }

    .bar .segment-effect-slow {
        background: #cdb2eb
    }

    .bar .segment-effect-none {
        background: #CAD8F4
    }

    .bar .segment-kill, .bar .segment-damage, .bar .segment-physical {
        background: #EA030E
    }

    .bar .segment-magical {
        background: #199DDB
    }

    .bar .segment-win, .bar .segment-assist, .bar .segment-healing, .bar .segment-lh {
        background: #A9CF54
    }

    .bar .segment-death, .bar .segment-dn {
        background: #979797
    }

    .bar .segment-kda {
        background: #F26522
    }

    .bar .segment-duration, .bar .segment-advantage, .bar .segment-rank {
        background: white
    }

    .bar .segment-skill {
        background: #68d1f6
    }

    .bar .segment-score {
        background: #A89CEE
    }

    .bar .segment-gold, .bar .segment-success {
        background: #FBB829
    }

    .bar .segment-experience {
        background: #76B8A6
    }

    .bar .segment-activity {
        background: #D56D9F
    }

    .bar .segment-popularity {
        background: #39CCCC
    }

    .bar .segment-observer {
        background: #F2CC67
    }

    .bar .segment-sentry {
        background: #30BFD2
    }

    .bar .segment-betting {
        background: #57a315
    }

    .bar .segment-only-picked {
        background: #A9CF54
    }

    .bar .segment-picked-and-banned {
        background: #39CCCC
    }

    .bar .segment-only-banned {
        background: #C23C2A
    }

    .bar .segment-ties {
        background: #39CCCC
    }

    .bar .segment-radiant {
        background: #92A525
    }

    .bar .segment-dire {
        background: #C23C2A
    }

    .bar .segment-support {
        background: #ffda6e
    }

    .bar .segment-core {
        background: #ff6666
    }

    .bar .segment-safelane {
        background: #66b5ab
    }

    .bar .segment-offlane {
        background: #fda55a
    }

    .bar .segment-midlane {
        background: #b970ca
    }

    .bar .segment-jungle {
        background: #75946b
    }

    .bar .segment-roaming {
        background: #b1b1b1
    }

    .bar .segment-rank-immortal {
        background: #fcef31
    }

    .bar .segment-rank-divine {
        background: #b0dbf5
    }

    .bar .segment-rank-ancient {
        background: #dfae6a
    }

    .bar .segment-rank-legend {
        background: #cb6baa
    }

    .bar .segment-rank-archon {
        background: #9eba7e
    }

    .bar .segment-rank-crusader {
        background: #39CCCC
    }

    .bar .segment-rank-guardian {
        background: #919093
    }

    .bar .segment-rank-herald {
        background: #b49272
    }

    .bar .segment.opposing {
        background: #979797
    }

        .bar .segment.opposing.larger {
            background: #EA030E
        }

    .bar .segment-team-gold {
        background: #bb8003
    }

    .bar .segment-team-experience {
        background: #448472
    }

.bbcode {
    font-weight: normal;
    line-height: 1.5em;
    margin: 4px 0
}

    .bbcode strong {
        font-weight: bold
    }

    .bbcode em {
        font-style: italic
    }

    .bbcode code, .bbcode pre {
        font-family: "Consolas", "Courier", monospace;
        background-color: #242F39;
        padding: 6px;
        tab-size: 2;
        white-space: pre-wrap
    }

        .bbcode code p, .bbcode pre p {
            padding: 0;
            margin: 0
        }

            .bbcode code p br, .bbcode pre p br {
                display: none
            }

div.spoiler .spoiler-content {
    display: none;
    overflow: hidden;
    background-color: #242F39;
    padding: 5px;
    box-sizing: border-box
}

div.spoiler .show-spoiler {
    background-color: #2E3740;
    padding: 5px 0;
    cursor: default;
    text-align: center
}

div.spoiler:hover .spoiler-content {
    display: block
}

.blog-admin .blog-admin-post {
    position: relative;
    margin-bottom: 12px
}

    .blog-admin .blog-admin-post > div {
        padding: 4px 0
    }

    .blog-admin .blog-admin-post .title a {
        color: #A97DC1
    }

    .blog-admin .blog-admin-post .warnings {
        position: absolute;
        top: 46px;
        right: 2px
    }

        .blog-admin .blog-admin-post .warnings .warning {
            display: inline-block;
            padding: 2px;
            font-size: 12px;
            text-transform: uppercase;
            margin-right: 5px;
            background: #fd6068;
            color: white;
            cursor: help
        }

    .blog-admin .blog-admin-post .image {
        width: 100%;
        height: 120px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        text-align: center;
        vertical-align: bottom
    }

    .blog-admin .blog-admin-post .footnote {
        color: #C4C4C4;
        font-size: 12px
    }

    .blog-admin .blog-admin-post .categories .category {
        background: #0a0a0a;
        color: white;
        display: inline-block;
        font-size: 12px;
        padding: 2px;
        margin-right: 4px;
        text-transform: uppercase
    }

        .blog-admin .blog-admin-post .categories .category.error {
            background: none;
            color: #fd6068
        }

.blog .index h1.title {
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: normal;
    line-height: 30px;
    text-transform: uppercase;
    margin: 24px 0 36px 0;
    padding: 0
}

    .blog .index h1.title small {
        display: block;
        font-size: 12px
    }

    .blog .index h1.title span.category {
        padding: 3px 6px;
        background: #ED3B1C;
        color: white;
        margin: 0 4px 0 0
    }

.blog .index .categories {
    text-align: center;
    margin-bottom: 36px
}

    .blog .index .categories .category {
        display: inline-block;
        font-size: 12px;
        padding: 3px;
        background: #2E3740;
        color: white;
        text-transform: uppercase;
        margin: 0 4px 4px 0
    }

.blog .post {
    font-size: 16px;
    padding: 4px;
    margin: 0 0 12px 0
}

    .blog .post .origin {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 12px;
        text-transform: uppercase
    }

    .blog .post .title {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 36px;
        font-weight: normal;
        color: white;
        margin: 36px 0 24px 0
    }

        .blog .post .title a {
            color: white
        }

@media (max-width: 480px) {
    .blog .post .title {
        font-size: 24px
    }
}

.blog .post .categories {
    margin-bottom: 8px
}

    .blog .post .categories .category {
        display: inline-block;
        font-size: 12px;
        padding: 3px;
        background: #ED3B1C;
        color: white;
        text-transform: uppercase;
        margin: 0 4px 4px 0
    }

    .blog .post .categories.categories-top {
        text-align: center
    }

    .blog .post .categories.categories-bottom {
        text-align: left
    }

        .blog .post .categories.categories-bottom .category {
            font-size: 14px;
            padding: 6px
        }

.blog .post .byline {
    text-align: center;
    color: #C4C4C4;
    font-style: italic;
    margin-bottom: 48px
}

    .blog .post .byline span.author a {
        font-weight: bold;
        font-style: normal
    }

    .blog .post .byline span.timestamp {
        color: white;
        font-style: normal;
        font-weight: normal
    }

.blog .post .social {
    margin-bottom: 16px
}

    .blog .post .social a.button {
        padding: 5px 7px
    }

.blog .post .meta {
    float: right
}

    .blog .post .meta ul li {
        display: inline-block
    }

        .blog .post .meta ul li > a, .blog .post .meta ul li div {
            display: block
        }

    .blog .post .meta a {
        font-size: 0.9em;
        color: #8c8c8c !important
    }

        .blog .post .meta a:hover {
            color: #A9CF54 !important
        }

.blog .post .body {
    color: #C4C4C4;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 27px;
    display: block;
    margin-bottom: 36px;
    position: relative
}

    .blog .post .body h1, .blog .post .body h2, .blog .post .body h3 {
        color: white;
        font-weight: normal;
        text-transform: uppercase;
        padding: 0
    }

    .blog .post .body h1 {
        font-size: 22px;
        line-height: 32px;
        margin: 24px 0 8px 0
    }

    .blog .post .body h2, .blog .post .body h3 {
        font-size: 18px;
        line-height: 24px;
        margin: 8px 0 8px 0
    }

    .blog .post .body p {
        margin: 16px 0;
        padding: 0;
        font-size: 17px;
        line-height: 27px
    }

    .blog .post .body img {
        max-width: 100%;
        height: auto
    }

@media (min-width: 992px) {
    .blog .post .body p > img, .blog .post .body p > a:not(.object) > img {
        margin: 0 -8px;
        max-width: 1192px;
        border: 4px solid #242F39;
        text-align: center
    }

    .blog .post .body p:first-child > img {
        width: 100%
    }
}

.blog .post .body ol {
    list-style: decimal outside
}

.blog .post .body ul {
    list-style: circle outside
}

    .blog .post .body ul li {
        list-style: disc
    }

.blog .post .body ul, .blog .post .body ol {
    color: #d9d9d9;
    margin-left: 2em;
    margin-bottom: 1em
}

    .blog .post .body ul li, .blog .post .body ol li {
        line-height: 150%
    }

.blog .post .body a.object {
    white-space: nowrap
}

.blog .post .body span.missing {
    color: #EA030E
}

.blog .post .body img.inline-icon, .blog .post .body img.img-tinyicon {
    height: 17px;
    width: auto;
    vertical-align: text-top;
    margin: 1px 2px 0 4px
}

.blog .post .body p.quote {
    background: rgba(10,10,10,0.3);
    color: white;
    font-size: 24px;
    font-style: italic;
    padding: 6px;
    display: block
}

    .blog .post .body p.quote span.quote-author {
        color: #C4C4C4;
        display: block;
        text-align: right;
        font-size: 18px;
        font-style: normal;
        font-weight: bold
    }

        .blog .post .body p.quote span.quote-author:before {
            content: "– "
        }

.blog .post .body p.pullquote {
    font-size: 24px;
    color: #9EC1EB;
    font-style: italic;
    padding: 10px
}

.blog .post .body strong {
    color: white;
    font-weight: bold
}

@media (max-width: 480px) {
    .blog .post .body iframe {
        max-width: 100% !important;
        height: auto !important
    }
}

.blog .post .body em {
    font-style: italic
}

.blog .post .body code {
    background: rgba(10,10,10,0.2);
    color: white;
    font-family: "Consolas", "Courier", monospace;
    font-size: 16px;
    padding: 2px 2px 0 2px;
    vertical-align: middle
}

.blog .post .body .blog-ad {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin: 10px 0
}

    .blog .post .body .blog-ad > .multishot {
        flex: 1 1 auto;
        max-width: 640px;
        max-height: 420px
    }

@media (max-width: 480px) {
    .blog .post .body .blog-ad > .multishot {
        max-width: 320px
    }
}

.blog .post .body .plus-preview {
    position: relative
}

    .blog .post .body .plus-preview .filter {
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: 0px;
        height: 300px;
        background: linear-gradient(transparent 0%, #1C242D 95%);
        pointer-events: none
    }

.blog .post .body .plus-pitch {
    color: #af9c75
}

    .blog .post .body .plus-pitch ul, .blog .post .body .plus-pitch ol {
        margin-top: 12px;
        color: #af9c75
    }

    .blog .post .body .plus-pitch a {
        color: #FBB829
    }

.blog .post.post-category-dotabuff-plus h1.title {
    color: #FBB829;
    text-shadow: 1px 1px 1px #0a0a0a
}

    .blog .post.post-category-dotabuff-plus h1.title small {
        display: none
    }

.blog .post.post-category-weekly-courier {
    max-width: 680px;
    margin: 0 auto 40px auto
}

    .blog .post.post-category-weekly-courier h1.title {
        font-size: 26px
    }

        .blog .post.post-category-weekly-courier h1.title small {
            display: block;
            color: #EEEEEE;
            font-size: 24px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            padding: 0 0 1em 0;
            text-transform: uppercase
        }

    .blog .post.post-category-weekly-courier .body p {
        color: #EEEEEE
    }

        .blog .post.post-category-weekly-courier .body p.note {
            font-style: italic
        }

    .blog .post.post-category-weekly-courier .body .story-big {
        margin-bottom: 2em
    }

        .blog .post.post-category-weekly-courier .body .story-big figure img, .blog .post.post-category-weekly-courier .body .story-big > img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover
        }

        .blog .post.post-category-weekly-courier .body .story-big figure figcaption {
            font-size: 10px;
            line-height: 10px;
            text-transform: uppercase;
            color: #BBBBBB
        }

    .blog .post.post-category-weekly-courier .body .story-small {
        margin-bottom: 2em
    }

        .blog .post.post-category-weekly-courier .body .story-small > img {
            float: right;
            max-height: 120px;
            padding: 0.5em 0 0.5em 1em;
            width: auto
        }

@media (max-width: 480px) {
    .blog .post.post-category-weekly-courier .body .story-small > img {
        float: none;
        width: 100%;
        max-height: 60px;
        object-fit: cover;
        padding: 0 !important
    }
}

.blog .related-posts .related-post {
    position: relative;
    height: 120px;
    background-color: rgba(36,47,57,0.8);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 12px
}

    .blog .related-posts .related-post .categories {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 102
    }

        .blog .related-posts .related-post .categories .category {
            display: inline-block;
            font-size: 12px;
            padding: 3px;
            background: #ED3B1C;
            color: white;
            text-transform: uppercase;
            margin: 6px 0 6px 6px;
            padding: 4px
        }

    .blog .related-posts .related-post .headline {
        color: white;
        background: #242F39;
        display: block;
        line-height: 18px;
        margin: 6px;
        padding: 6px;
        text-transform: uppercase;
        font-size: 14px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 102
    }

    .blog .related-posts .related-post .comments {
        background: rgba(28,36,45,0.4);
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 3px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        z-index: 102
    }

    .blog .related-posts .related-post .mask {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        background-image: linear-gradient(rgba(0,134,201,0.1), rgba(0,134,201,0.3) 70%);
        background-size: cover;
        z-index: 101
    }

@media (min-width: 992px) {
    .blog .related-posts .related-post.related-post-3x1 {
        height: 120px
    }

        .blog .related-posts .related-post.related-post-3x1 .headline {
            max-width: 210px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
}

@media (min-width: 992px) {
    .blog .related-posts .related-post.related-post-4x1 {
        height: 120px
    }

        .blog .related-posts .related-post.related-post-4x1 .headline {
            max-width: 290px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
}

.blog .related-posts .related-post.related-post-6x2 .mask {
    background-image: linear-gradient(rgba(242,204,103,0.1), rgba(242,204,103,0.3) 70%)
}

@media (min-width: 992px) {
    .blog .related-posts .related-post.related-post-6x2 {
        height: 240px
    }

        .blog .related-posts .related-post.related-post-6x2 .headline {
            max-width: 450px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;
            line-height: 20px
        }
}

.blog .related-posts .related-post.related-post-8x2 .mask {
    background-image: linear-gradient(rgba(237,59,28,0.1), rgba(237,59,28,0.3) 70%)
}

@media (min-width: 992px) {
    .blog .related-posts .related-post.related-post-8x2 {
        height: 252px
    }

        .blog .related-posts .related-post.related-post-8x2 .headline {
            max-width: 620px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 24px;
            line-height: 30px
        }
}

.admin-preview.blog .blog-ad {
    width: 300px;
    height: 250px;
    background-color: rgba(255,255,255,0.3);
    margin: 10px 0 10px 10px
}

    .admin-preview.blog .blog-ad.left {
        margin: 10px 10px 10px 0
    }

    .admin-preview.blog .blog-ad:after {
        content: "Ad Shown Here";
        text-align: center;
        width: 100%;
        margin-top: 10px;
        display: block
    }

html.blog-skin .notification {
    display: none
}

.comments .comment:nth-child(n+2) {
    margin-top: 8px
}

.comment {
    position: relative;
    margin: 20px 0 10px
}

@media (max-width: 480px) {
    .comment {
        margin-bottom: 15px
    }
}

.comment.topic {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 20px
}

.comment:first-child {
    margin-top: 10px
}

.comment .player-avatar {
    float: left;
    margin-left: 8px
}

@media (max-width: 480px) {
    .comment .image-container.image-container-avatar img.image-player {
        width: 28px;
        height: 28px
    }
}

.comment.private-comment .comment-body {
    background-color: #313C36;
    color: #a6a6a6 !important
}

    .comment.private-comment .comment-body:after {
        border-right-color: #313C36
    }

.comment .comment-player {
    display: inline-block;
    margin-left: 15px;
    padding: 2px 0px
}

@media (max-width: 480px) {
    .comment .comment-player {
        margin-left: 10px;
        margin-top: 4px
    }
}

.comment .comment-timestamp {
    color: rgba(255,255,255,0.6);
    display: inline-block;
    font-size: 12px;
    padding: 2px 4px
}

.comment .comment-admin {
    position: absolute;
    top: -4px;
    right: 0px;
    font-size: 16px;
    margin: 6px 10px
}

    .comment .comment-admin ul li {
        display: inline-block
    }

        .comment .comment-admin ul li > a, .comment .comment-admin ul li div {
            display: block
        }

@media (max-width: 480px) {
    .comment .comment-admin {
        margin: 10px
    }
}

.comment .comment-admin a {
    color: #C4C4C4;
    text-align: center;
    margin-left: 10px
}

    .comment .comment-admin a i {
        font-size: 16px;
        min-width: 16px
    }

    .comment .comment-admin a:hover {
        color: #A9CF54 !important
    }

    .comment .comment-admin a.gift-link:hover {
        color: #FBB829 !important
    }

.comment .comment-form {
    display: block;
    margin: 0 8px 0 62px
}

    .comment .comment-form input[type=text], .comment .comment-form textarea {
        box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
        background: #1C242D;
        border: 0;
        border-radius: 1px;
        font-size: 14px;
        color: white;
        outline: none;
        padding: 12px;
        width: 100%
    }

        .comment .comment-form input[type=text]:active, .comment .comment-form input[type=text]:focus, .comment .comment-form textarea:active, .comment .comment-form textarea:focus {
            background-color: #202933
        }

    .comment .comment-form input[type=submit] {
        margin: 7px 0 0 0
    }

    .comment .comment-form .preview {
        padding: 5px
    }

    .comment .comment-form.comment-reply {
        margin: 8px 8px 0 64px
    }

@media (max-width: 480px) {
    .comment .comment-form.comment-reply {
        margin: 8px 8px 0 42px
    }
}

.comment.post {
    margin-top: 10px !important
}

.comment .comment-updated, .comment .comment-deleted, .comment .comment-moderated {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-style: italic;
    margin: 4px 4px 0 68px;
    padding: 4px 6px 6px 4px;
    text-align: right
}

.comment .comment-body {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    clear: right;
    background: #2E3740;
    border-radius: 1px;
    color: #C4C4C4;
    display: block;
    text-decoration: none !important;
    padding: 6px 6px 6px 12px;
    margin: 4px 8px 0 64px;
    word-wrap: break-word;
    position: relative
}

    .comment .comment-body .error-text {
        color: #fd6068
    }

    .comment .comment-body.comment-preview {
        padding: 4px;
        margin-right: 0;
        margin-left: 0
    }

@media (max-width: 480px) {
    .comment .comment-body {
        margin: 8px 8px 0 8px
    }
}

.comment .comment-body.admin-deleted {
    background-color: #3b333f;
    color: #a6a6a6 !important
}

    .comment .comment-body.admin-deleted:after {
        border-right-color: #3b333f
    }

.comment .comment-body img {
    max-width: 95% !important
}

.comment .comment-body blockquote {
    background: rgba(10,10,10,0.3);
    font-style: italic;
    padding: 6px;
    display: block
}

@media (max-width: 480px) {
    .comment .comment-body iframe {
        max-width: 95%;
        height: auto
    }
}

@media (min-width: 768px) {
    .comment .comment-body.comment-body-arrow:after, .comment .comment-body.comment-body-arrow:before {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none
    }

    .comment .comment-body.comment-body-arrow:after {
        border-right-color: #2E3740;
        border-width: 6px;
        margin-top: -6px;
        top: 11px
    }

    .comment .comment-body.comment-body-arrow:before {
        border-right-color: rgba(10,10,10,0.15);
        border-width: 7px;
        margin-top: -7px;
        top: 11px
    }
}

.comment-form .input .error {
    display: block;
    margin: 7px 0 20px 10px;
    text-align: left;
    color: #fd6068
}

span.overlay-button {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 14px
}

.comment-editor {
    position: relative
}

.comment-body {
    position: relative
}

.comment-tab-bar {
    line-height: 20px;
    margin-bottom: -4px;
    z-index: 100;
    position: relative
}

@media (max-width: 480px) {
    .comment-tab-bar {
        margin-bottom: -8px
    }
}

.comment-tab-bar a {
    box-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    display: inline-block;
    padding: 6px 12px;
    background: #242F39;
    margin-right: 8px;
    color: #a6a6a6 !important;
    cursor: pointer
}

    .comment-tab-bar a.selected {
        background: #2E3740;
        color: white !important;
        cursor: default
    }

.moderator-icon {
    color: white
}

[data-link-to] {
    cursor: pointer
}

    [data-link-to] time {
        cursor: pointer
    }

i[data-hasqtip] {
    cursor: default
}

.esports-skin .content-inner a[href^="/esports"], .esports-skin .header-content-title a[href^="/esports"], .esports-skin .tooltip-content a[href^="/esports"] {
    color: #39CCCC
}

.esports-skin .content-inner a:hover, .esports-skin .header-content-title a:hover, .esports-skin .tooltip-content a:hover {
    text-decoration: underline
}

.esports-skin .more a {
    color: white !important
}

a.esports-link, .esports-link, div.content-inner .esports-link {
    color: #39CCCC
}

img.image-bigicon {
    height: 36px
}

img.img-avatar {
    height: 42px
}

img.img-tinyicon {
    height: 17px;
    width: auto
}

img.img-player {
    height: 30px;
    width: auto
}

table.table {
    background: transparent;
    border: none;
    margin-bottom: 0
}

    table.table td {
        line-height: 1.2em
    }

    table.table > tbody > tr.faction-radiant:nth-child(odd) {
        margin-right: 10px;
        background: rgba(146,165,37,0.03);
        color: white
    }

    table.table > tbody > tr.faction-dire:nth-child(odd) {
        background: rgba(194,60,42,0.03);
        color: white
    }

    table.table > tbody > tr.faction-radiant:nth-child(even) {
        background: rgba(146,165,37,0.06);
        color: white
    }

    table.table > tbody > tr.faction-dire:nth-child(even) {
        background: rgba(194,60,42,0.06);
        color: white
    }

    table.table .cell-icon {
        width: 36px
    }

    table.table .cell-half-icons {
        width: 115px
    }

    table.table .cell-icons {
        min-width: 240px
    }

        table.table .cell-icons img {
            margin-right: 1px
        }

    table.table .cell-small {
        width: 36px
    }

    table.table .cell-side-stat {
        width: 96px
    }

@media (min-width: 480px) {
    table.table .cell-side-stat {
        width: auto !important
    }
}

@media (min-width: 768px) {
    table.table .cell-side-stat {
        width: 72px
    }
}

@media (min-width: 480px) {
    table.table .cell-border-left {
        border-left: 2px solid #242F39 !important
    }
}

table.table small {
    color: rgba(255,255,255,0.6);
    font-size: 0.9em;
    font-weight: normal
}

    table.table small.block {
        display: block
    }

    table.table small.inline {
        padding-left: 3px
    }

table.table tr.inactive {
    color: black
}

    table.table tr.inactive a {
        color: black !important
    }

    table.table tr.inactive .bar, table.table tr.inactive img {
        opacity: 0.7
    }

table.table td {
    vertical-align: middle !important
}

@media (max-width: 768px) {
    table.table td {
        padding: 4px !important
    }

    table.table .img-team, table.table .img-player {
        max-height: 24px
    }
}

.es-upcoming-matches .es-upcoming-match {
    position: relative
}

    .es-upcoming-matches .es-upcoming-match .spectators {
        display: inline-block
    }

.money {
    color: #FBB829
}

h1.vertical-center {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: -4px
}

div.select {
    color: black
}

.customSelect {
    border-radius: 0;
    background: #269393;
    color: white;
    text-shadow: 1px 1px 0 black;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    padding: 0.4em 0.5em;
    white-space: nowrap !important
}

    .customSelect:after {
        content: "▾";
        display: inline;
        margin-left: 4px
    }

.premium .customSelect {
    color: #FBB829 !important
}

.unavailable .customSelect.customSelectDisabled {
    color: #0a0a0a !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2)
}

table.table-score {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    background-color: #242F39;
    border-radius: 2px;
    color: #bfbfbf;
    font-size: 13px;
    font-weight: 100 !important;
    line-height: 1em;
    margin-bottom: 6px;
    height: 125px;
    width: 320px;
    float: left;
    margin-right: 4px;
    border: 1px solid black
}

    table.table-score thead tr th, table.table-score thead tr td, table.table-score tbody tr th, table.table-score tbody tr td, table.table-score tfoot tr th, table.table-score tfoot tr td {
        padding: 4px
    }

    table.table-score th.cell-arrow, table.table-score td.cell-arrow {
        font-size: 0.8em;
        text-align: right;
        width: 15px
    }

    table.table-score tr.team td a {
        color: #bfbfbf
    }

    table.table-score tr.team-winner {
        background: #1c1c1c;
        color: white;
        font-weight: bold
    }

        table.table-score tr.team-winner td a {
            color: white
        }

        table.table-score tr.team-winner td.cell-arrow {
            color: white
        }

    table.table-score div.team-logo-container {
        display: inline-block
    }

        table.table-score div.team-logo-container img {
            height: 15px;
            vertical-align: middle;
            margin: 0 3px 2px 0;
            width: auto
        }

    table.table-score div.notes div.note {
        display: inline-block;
        padding-right: 6px
    }

    table.table-score.table-score-quality-2 {
        border: 1px solid #39CCCC;
        box-shadow: 0 0 3px rgba(57,204,204,0.8)
    }

    table.table-score.table-score-quality-3 {
        border: 1px solid #386767
    }

.row.popular .thumbnail {
    box-sizing: border-box;
    float: left;
    margin-right: 1%;
    padding: 4px;
    text-align: center;
    width: 15.8%
}

@media (max-width: 480px) {
    .row.popular .thumbnail {
        width: 32.3%;
        margin-bottom: 5px
    }
}

.row.popular .thumbnail > div {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 0;
    margin: 0 auto
}

.row.popular .thumbnail:nth-of-type(6) {
    margin-right: 0
}

.lobby-show .lobby-result {
    text-align: center;
    font-size: 2em;
    color: white
}

.thumbnail {
    background-color: #2E3740
}

.thumbnail-league {
    line-height: 1.2em
}

    .thumbnail-league:nth-child(2n) {
        background-color: rgba(255,255,255,0.02)
    }

    .thumbnail-league > a {
        float: left
    }

    .thumbnail-league img {
        height: 50px;
        width: 126px;
        margin-right: 6px
    }

    .thumbnail-league .league-name {
        padding-top: 6px;
        font-size: 1.2em
    }

        .thumbnail-league .league-name i:before {
            vertical-align: text-top;
            font-size: 0.9em
        }

    .thumbnail-league small {
        color: rgba(255,255,255,0.6);
        display: block;
        text-transform: lowercase;
        padding: 4px 0 0 4px
    }

.empty-page {
    padding: 72px 0;
    text-align: center
}

    .empty-page .icon {
        color: #39CCCC;
        font-size: 124px;
        font-weight: normal;
        text-shadow: 1px 1px 0 #0a0a0a
    }

    .empty-page .title {
        color: white;
        font-size: 2em;
        font-weight: bold;
        padding: 18px 0px;
        text-transform: uppercase;
        text-shadow: 1px 1px 0 #0a0a0a
    }

    .empty-page .explanation {
        color: #d9d9d9;
        font-size: 18px;
        padding: 12px 120px;
        text-shadow: 1px 1px 0 #0a0a0a
    }

.recent-esports-matches .radiant {
    color: #92A525
}

.recent-esports-matches .dire {
    color: #C23C2A
}

.recent-esports-matches .img-icon {
    margin-right: 0
}

.recent-esports-matches .cell-tiny {
    text-align: center;
    font-size: 25px
}

.recent-esports-matches .img-tinyicon {
    margin-right: 4px
}

@media (max-width: 480px) {
    .recent-esports-matches .cell-icons {
        min-width: 0 !important
    }
}

.recent-esports-matches time {
    color: rgba(255,255,255,0.6);
    margin-top: -3px
}

.recent-esports-matches span {
    display: inline-block
}

    .recent-esports-matches .winner span, .recent-esports-matches span.winner {
        font-weight: bold
    }

        .recent-esports-matches .winner span:before, .recent-esports-matches span.winner:before {
            vertical-align: top;
            font-family: "FontAwesome";
            font-weight: 100;
            margin-right: 5px
        }

.recent-esports-matches .img-team {
    height: 19px;
    vertical-align: bottom;
    margin-right: 5px;
    width: 32px
}

.recent-esports-matches .r-only-mobile div {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.recent-leagues .name a {
    padding-left: 4px;
    height: 44px;
    display: table-cell;
    vertical-align: middle
}

.match-score {
    box-shadow: 0 0 3px rgba(10,10,10,0.8);
    background-color: #242F39;
    display: block;
    width: 32.5%;
    box-sizing: border-box;
    float: left;
    padding: 2px 5px 5px 5px;
    position: relative;
    margin: 5px 10px 5px 0;
    color: white !important
}

    .match-score:hover {
        background-color: #2e3c49
    }

    .match-score:nth-of-type(3n) {
        margin-right: 0
    }

    .match-score > div {
        padding: 5px 0;
        clear: both
    }

@media (min-width: 992px) {
    .match-score:nth-of-type(3n-2) {
        clear: left
    }
}

@media (max-width: 991px) {
    .match-score {
        width: 49%
    }

        .match-score:nth-of-type(3n) {
            margin: 5px 10px 5px 0
        }

        .match-score:nth-of-type(2n) {
            margin-right: 0
        }
}

@media (max-width: 768px) {
    .match-score {
        width: 100%;
        margin: 5px 0
    }
}

.match-score .match-score-teams div.radiant, .match-score .match-score-heroes div.radiant {
    float: left
}

.match-score .match-score-teams div.dire, .match-score .match-score-heroes div.dire {
    float: right
}

.match-score .name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    height: 15px
}

.match-score .radiant {
    color: #92A525
}

    .match-score .radiant .name {
        margin-left: 4px
    }

.match-score .dire {
    color: #C23C2A
}

    .match-score .dire .name {
        margin-right: 4px
    }

.match-score .img-tinyicon {
    height: 16px
}

.match-score .centered {
    position: absolute;
    width: 96.5%;
    text-align: center
}

    .match-score .centered.marker {
        height: 1px;
        top: 68px;
        opacity: 0.4
    }

.match-score .team-winner {
    font-weight: bold
}

    .match-score .team-winner .name {
        text-decoration: underline
    }

.match-score .match-score-teams .name a {
    color: rgba(255,255,255,0.6)
}

.match-score .match-score-teams .team-winner .name a {
    color: white
}

.match-score .bar {
    width: 101%;
    margin-top: -2px
}

.match-score .match-score-advantage-info {
    height: 16px;
    margin-top: -3px;
    font-size: 22px;
    font-weight: bold
}

    .match-score .match-score-advantage-info .centered {
        text-transform: lowercase;
        font-variant: small-caps;
        font-weight: normal;
        font-size: 13px;
        width: auto;
        left: 49%
    }

        .match-score .match-score-advantage-info .centered span {
            margin-left: -40px
        }

.match-score .match-score-info {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    margin-top: -4px;
    height: 14px
}

    .match-score .match-score-info div {
        position: relative;
        z-index: 10;
        margin-top: 5px
    }

    .match-score .match-score-info time {
        cursor: pointer
    }

    .match-score .match-score-info .centered {
        color: white;
        text-transform: uppercase;
        font-size: 20px;
        z-index: 9;
        position: absolute;
        margin-top: 0
    }

.match-score .tooltip span {
    border-bottom: 1px dotted #666666
}

#leagues-all {
    clear: both
}

.highest-prize-money .img-icon {
    width: 75px
}

.player-name-small a {
    display: block;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.prize-money {
    font-size: 1.3em !important;
    color: #FBB829 !important
}

.leagues-search button {
    border-color: #39CCCC;
    color: #39CCCC !important
}

.esports-skin .header-content-avatar img.img-avatar {
    height: 50px
}

.esports-skin .header-content {
    min-height: 70px
}

    .esports-skin .header-content .player-header-interactive {
        margin-top: -8px;
        text-align: right
    }

.active-leagues a.league, .live-matches-condensed a.league {
    position: relative;
    width: 32.33%;
    margin: 0.5%;
    display: block;
    float: left;
    height: 83px;
    background-size: cover
}

@media (max-width: 480px) {
    .active-leagues a.league, .live-matches-condensed a.league {
        height: 66px;
        width: 49%
    }
}

.active-leagues a.league .name, .live-matches-condensed a.league .name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    position: absolute;
    color: white;
    height: 20px;
    left: 6px;
    bottom: 0
}

.active-leagues a.league .mask, .live-matches-condensed a.league .mask {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.8)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
    height: 100%
}

    .active-leagues a.league .mask:hover, .live-matches-condensed a.league .mask:hover {
        opacity: 0.1
    }

.medium-league-icon .img-league {
    height: 26px;
    margin-right: 8px;
    vertical-align: bottom
}

.live-matches-condensed a.league {
    height: 40px;
    width: 105px
}

    .live-matches-condensed a.league .name {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        left: 0;
        top: 0;
        padding-top: 23px;
        box-sizing: border-box;
        padding-left: 4px
    }

        .live-matches-condensed a.league .name:hover {
            background-color: transparent
        }

        .live-matches-condensed a.league .name i {
            vertical-align: bottom
        }

.live-matches-condensed .team-names {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

    .live-matches-condensed .team-names img {
        margin-right: 4px;
        vertical-align: bottom
    }

.live-matches-condensed td {
    padding-bottom: 2px
}

.series-show .team .name {
    font-size: 1.3em;
    margin: 12px 0 0 5px;
    float: left
}

.series-show .team .team-image img {
    float: right;
    max-width: 60px;
    max-height: 36px
}

.series-show .team .adv {
    clear: both;
    padding: 5px 3px;
    font-weight: bold
}

.series-show .team .icon {
    margin-right: 6px;
    display: inline-block
}

.series-show .team table {
    margin: 6px 0
}

.series-show .team .contested .image-container {
    display: inline;
    margin-right: 5px
}

    .series-show .team .contested .image-container:last-child {
        margin-right: 0
    }

.series-show .team .contested .title {
    font-size: 12px;
    font-weight: bold;
    color: #C4C4C4;
    margin: 4px;
    border-bottom: 1px dotted rgba(217,217,217,0.3);
    display: inline-block;
    cursor: default
}

.series-show .team .contested img {
    width: 57px;
    height: auto
}

.series-show .team .contested img, .series-show .team .contested a {
    display: inline-block
}

.series-stats .img-icon {
    width: 60px;
    margin-right: 0
}

.series-matches td.not-played {
    text-align: center;
    padding: 10px 0
}

.series-matches td span {
    display: inline
}

.series-matches .subtitle {
    color: rgba(255,255,255,0.6)
}

.series-matches .picks-inline {
    margin-top: 5px !important
}

    .series-matches .picks-inline .label {
        display: none
    }

    .series-matches .picks-inline .pick, .series-matches .picks-inline .ban {
        margin: 0 4px 0 0 !important
    }

        .series-matches .picks-inline .pick img {
            height: 24px !important
        }

        .series-matches .picks-inline .ban img {
            height: 18px !important
        }

    .series-matches .picks-inline .seq {
        display: none
    }

.series-matches time {
    font-size: 0.9em
}

.series-matches .match-link {
    margin-bottom: 5px
}

.series-matches .duration {
    float: right;
    clear: none;
    font-size: 0.9em
}

.series-matches .duration-bar {
    width: 70%;
    float: left;
    margin-top: 7px
}

.series-matches tr:hover .seq {
    display: block
}

.series-matches .match-score {
    box-shadow: none;
    background-color: transparent;
    display: table-cell;
    width: auto;
    float: none
}

    .series-matches .match-score .centered {
        text-transform: none;
        font-size: 0.9rem
    }

        .series-matches .match-score .centered.marker {
            top: 28px
        }

    .series-matches .match-score .match-score-advantage-info .centered span {
        margin-left: -20px;
        font-size: 0.9rem
    }

.score-line {
    display: block;
    margin-right: 0;
    max-width: none
}

    .score-line span:nth-child(1) {
        float: left
    }

    .score-line span:nth-child(2) {
        display: none
    }

    .score-line span:nth-child(3) {
        float: right;
        margin-right: 0
    }

    .score-line .winner, .mini-score .winner {
        font-weight: bold;
        color: white
    }

.series-search .form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
}

    .series-search .form input {
        display: flex;
        width: 50px;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 100px;
        margin: 5px
    }

    .series-search .form .sep, .series-search .form button {
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        width: auto
    }

.series-search .sep {
    margin: 15px 6px 0
}

.series-search button {
    margin: 5px
}

    .series-search button i {
        float: left
    }

.series-details strong {
    font-weight: bold;
    color: white
}

.series-details i {
    margin-right: 2px
}

.series-live article {
    text-align: center;
    background-color: #660000
}

.series-live p {
    color: #FFF;
    font-weight: bold
}

.series-matches th.winner, .series-matches td.winner, .series-table th.winner, .series-table td.winner {
    text-align: center
}

    .series-matches th.winner img, .series-matches td.winner img, .series-table th.winner img, .series-table td.winner img {
        margin: 0 0 10px;
        height: 36px;
        width: auto;
        max-width: 60px
    }

.series-matches span, .series-table span {
    margin: 0
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
}

    .flex-container .flex-item {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 200px;
        display: flex;
        margin-right: 12px
    }

        .flex-container .flex-item.flex-small {
            flex-basis: 100px
        }

        .flex-container .flex-item:last-child {
            margin-right: 0
        }

        .flex-container .flex-item > div {
            width: 100%
        }

@media (max-width: 480px) {
    .flex-container .flex-item {
        margin-right: 0
    }

        .flex-container .flex-item .player-name {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
}

.series-table td.winner img {
    height: 22px;
    margin-bottom: 5px
}

@media (min-width: 992px) {
    .series-table td.winner-logo {
        width: 53px;
        height: 32px;
        text-align: center
    }

        .series-table td.winner-logo img {
            margin-bottom: 0;
            height: 32px;
            width: auto;
            vertical-align: bottom;
            display: inline-block
        }
}

.series-table ul.match-list {
    color: rgba(255,255,255,0.6)
}

    .series-table ul.match-list .live a {
        color: #39CCCC
    }

    .series-table ul.match-list .live i {
        font-size: 0.7em;
        margin-bottom: 0px;
        position: relative;
        display: inline-block;
        bottom: 1px
    }

.series-table.narrow .team-1 a, .series-table.narrow .team-2 a {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.series-table .team-2 {
    margin-top: 5px
}

.series-table .team.winner {
    font-weight: bold;
    color: white
}

.series-table .team img {
    background-color: #39444f
}

.series-table .series-odds .team {
    line-height: 22px
}

.series-table .series-teams span, .series-table .series-teams a {
    display: inline-block;
    margin-right: 0
}

.series-table .series-teams .winner i {
    position: relative;
    top: -2px
}

.series-table .bo i {
    margin-right: 2px;
    opacity: 0.8
}

.series-table .score-large {
    font-size: 1.2em;
    margin-bottom: 5px
}

.series-table .series-game-icons .icons {
    font-size: 2.2em
}

.series-table .series-game-icons .icon {
    position: relative;
    margin-right: 3px;
    vertical-align: sub
}

.series-table .series-game-icons .live {
    color: #39CCCC;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite
}

.series-table .series-game-icons .game-no {
    display: block;
    position: absolute;
    top: 25%;
    color: #2E3740;
    font-size: 0.6em;
    font-weight: bold;
    width: 100%;
    text-align: center
}

.series-table .series-game-icons i {
    padding: 1px
}

.series-table .series-game-icons a:hover {
    color: white
}

.series-table.narrow tr:not(.r-only-mobile) .series-game-icons .icons {
    max-width: 90px;
    text-align: center
}

@media (max-width: 480px) {
    .series-table .series-teams .r-only-mobile {
        display: inline-block !important
    }
}

.series-table span {
    overflow: visible;
    max-width: none
}

@media (max-width: 480px) {
    .series-table .r-only-mobile .series-game-icons {
        margin-top: 0;
        padding: 0 4px 6px !important
    }

        .series-table .r-only-mobile .series-game-icons .icons {
            float: right;
            display: inline-block
        }

        .series-table .r-only-mobile .series-game-icons .mobile-only {
            display: inline-block;
            float: left
        }

            .series-table .r-only-mobile .series-game-icons .mobile-only small {
                display: block
            }

    .series-table .img-league {
        height: 25px
    }
}

@-webkit-keyframes pulsate {
    0% {
        opacity: 0.6
    }

    50% {
        opacity: 1.0
    }

    100% {
        opacity: 0.6
    }
}

.filter-more {
    float: right
}

.esports-skin .filter .customSelectInner {
    width: auto !important
}

.no-data {
    color: rgba(255,255,255,0.6);
    padding: 5px;
    text-align: center;
    line-height: 1.3em;
    font-size: 13px
}

@media (min-width: 992px) {
    .maximize-on-desktop .cell-submedium {
        width: 100px
    }
}

.series-spacer {
    margin: 10px 0;
    border-bottom: 1px solid;
    opacity: 0.2
}

h2.team-title {
    text-align: right;
    font-size: 24px
}

.esports-player-team-subtitle {
    text-align: right
}

table.series-schedule td {
    color: rgba(255,255,255,0.6);
    line-height: 1.4em
}

table.series-schedule time, table.series-schedule span {
    color: #d9d9d9
}

table.series-schedule .series-teams {
    line-height: 1.2em
}

table.series-table span.team-score-inline {
    color: rgba(255,255,255,0.6);
    vertical-align: top;
    margin-left: 4px;
    margin-top: 2px
}

.js-expandable.expanded .js-rotate-when-expanded {
    -webkit-animation-name: right-angle;
    -moz-animation-name: right-angle;
    -ms-animation-name: right-angle;
    animation-name: right-angle
}

.js-expandable .js-rotate-when-expanded {
    -webkit-animation-name: reverse;
    -webkit-animation-duration: 400ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    -moz-animation-name: reverse;
    -moz-animation-duration: 400ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-fill-mode: both;
    -ms-animation-name: reverse;
    -ms-animation-duration: 400ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;
    -ms-animation-fill-mode: both;
    animation-name: reverse;
    animation-duration: 400ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both
}

@-moz-keyframes right-angle {
    from {
        -moz-transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(90deg)
    }
}

@-webkit-keyframes right-angle {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(90deg)
    }
}

@keyframes right-angle {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(90deg)
    }
}

@-moz-keyframes reverse {
    from {
        -moz-transform: rotate(90deg)
    }

    to {
        -moz-transform: rotate(0deg)
    }
}

@-webkit-keyframes reverse {
    from {
        -webkit-transform: rotate(90deg)
    }

    to {
        -webkit-transform: rotate(0deg)
    }
}

@keyframes reverse {
    from {
        transform: rotate(90deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.filter {
    position: relative
}

    .filter nav {
        margin: 0 0 -12px;
        padding: 0;
        z-index: 100
    }

        .filter nav ul li {
            display: inline-block
        }

            .filter nav ul li > a, .filter nav ul li div {
                display: block
            }

        .filter nav ul li {
            margin: 0 0 -3px -2px;
            padding: 2px 2px 0
        }

            .filter nav ul li.more {
                display: none
            }

            .filter nav ul li.bumped {
                display: none
            }

            .filter nav ul li.dropdown a.dropdown-trigger {
                display: none
            }

            .filter nav ul li a {
                padding: 9px 7px 9px 7px;
                margin-right: 10px;
                text-shadow: none;
                height: 20px
            }

                .filter nav ul li a:hover {
                    color: white
                }

            .filter nav ul li.active a {
                box-shadow: 0px -2px 2px rgba(10,10,10,0.4);
                background: #242F39
            }

            .filter nav ul li.premium a {
                color: #eda304 !important
            }

            .filter nav ul li.premium.active a {
                color: #FBB829 !important
            }

            .filter nav ul li.premium.unavailable a {
                color: #595959 !important;
                text-shadow: 1px 1px 0 rgba(10,10,10,0.2)
            }

            .filter nav ul li.feature a {
                color: #d54d0d !important
            }

            .filter nav ul li.feature.active a {
                color: #F26522 !important
            }

@media (max-width: 991px) {
    .filter nav ul li.bumped {
        display: inline-block
    }

    .filter nav ul li.dropdown {
        position: relative;
        padding: 0
    }

        .filter nav ul li.dropdown ul li {
            display: block
        }

            .filter nav ul li.dropdown ul li > a, .filter nav ul li.dropdown ul li div {
                display: block
            }

        .filter nav ul li.dropdown a.dropdown-trigger {
            display: block
        }

            .filter nav ul li.dropdown a.dropdown-trigger:after {
                content: "▾";
                display: inline;
                margin-left: 4px
            }

        .filter nav ul li.dropdown ul.dropdown-menu {
            box-shadow: 0px 3px 3px rgba(10,10,10,0.4);
            background: #37414c;
            display: none;
            position: absolute;
            top: 32px;
            left: 0px;
            z-index: 2000
        }

            .filter nav ul li.dropdown ul.dropdown-menu li {
                margin: 0;
                padding: 0;
                overflow: visible
            }

                .filter nav ul li.dropdown ul.dropdown-menu li.active {
                    display: none
                }

                .filter nav ul li.dropdown ul.dropdown-menu li a {
                    background: #37414c;
                    border-bottom: none;
                    white-space: nowrap
                }

                    .filter nav ul li.dropdown ul.dropdown-menu li a:hover {
                        background: #3f4b58
                    }

        .filter nav ul li.dropdown.toggled a.dropdown-trigger {
            box-shadow: 0 0 3px rgba(10,10,10,0.4);
            background: #37414c;
            border-bottom: 2px solid #37414c;
            color: white
        }

        .filter nav ul li.dropdown.toggled ul.dropdown-menu {
            display: block
        }
}

.filter .settings .settings-group {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    border: 1px solid #2E3740;
    border-radius: 1px;
    background: #242F39;
    color: white;
    padding: 6px;
    display: inline-block;
    margin: 0 12px 6px 0;
    position: relative
}

    .filter .settings .settings-group .customSelect {
        background-color: white;
        color: #0a0a0a;
        text-shadow: none
    }

        .filter .settings .settings-group .customSelect:after {
            color: rgba(10,10,10,0.4)
        }

        .filter .settings .settings-group .customSelect.customSelectHover {
            background-color: white
        }

        .filter .settings .settings-group .customSelect.customSelectOpen, .filter .settings .settings-group .customSelect.customSelectFocus {
            background-color: white
        }

    .filter .settings .settings-group .settings-group-help {
        position: absolute;
        top: 6px;
        right: 6px
    }

    .filter .settings .settings-group .settings-group-title {
        padding: 0 6px 6px 0;
        text-transform: uppercase
    }

    .filter .settings .settings-group .settings-group-options {
        display: block
    }

    .filter .settings .settings-group .premum .customSelect {
        color: #0a0a0a !important
    }

    .filter .settings .settings-group.settings-group-premium {
        color: #FBB829;
        border: 1px solid rgba(251,184,41,0.3)
    }

.filter .settings dl.setting {
    display: inline-block;
    margin: 0 4px 4px 0
}

    .filter .settings dl.setting dt {
        font-weight: 200;
        font-size: 0.9em;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
        color: #bfbfbf;
        margin: 0 0 6px 6px
    }

    .filter .settings dl.setting dd {
        font-size: 1.1em
    }

        .filter .settings dl.setting dd div {
            display: inline-block
        }

        .filter .settings dl.setting dd small {
            display: inline-block;
            margin-left: 4px;
            font-weight: 200;
            font-size: 0.7em;
            color: #999999
        }

        .filter .settings dl.setting dd input {
            background-color: #242F39;
            box-shadow: inset 0 0 2px black;
            padding-left: 0.5em;
            border: none;
            min-height: 31px;
            color: white
        }

.filter .nav {
    position: relative
}

@media (max-width: 480px) {
    .filter.r-collapse-mobile dl.setting {
        height: 1px;
        visibility: hidden;
        overflow: hidden
    }
}

.filter.r-collapse-mobile.shown dl.setting {
    height: auto;
    visibility: visible
}

.filter .collapsible-filter {
    position: absolute;
    width: 100%
}

.filtered {
    padding: 5px 5px 5px 9px;
    background-color: #224971
}

    .filtered header .clear-filters {
        font-size: 0.8em;
        float: right
    }

        .filtered header .clear-filters i {
            margin-right: 5px
        }

    .filtered footer, .filtered .settings {
        margin-bottom: 0
    }

.filtered-teams {
    margin-bottom: 5px
}

    .filtered-teams > span {
        vertical-align: super
    }

    .filtered-teams .team {
        display: inline-block;
        text-transform: none;
        margin-right: 10px
    }

        .filtered-teams .team .avatar {
            display: inline-block
        }

            .filtered-teams .team .avatar img {
                height: 24px
            }

        .filtered-teams .team .name {
            display: inline-block;
            margin-left: 7px;
            vertical-align: super
        }

#team_search {
    width: 240px;
    font-size: 1rem
}

.inline-filter article {
    margin-bottom: 0.4em
}

.inline-filter .description {
    display: inline-block;
    padding: 0.3em;
    text-transform: uppercase;
    font-size: 13px
}

    .inline-filter .description.plus {
        color: #FBB829
    }

.inline-filter .customSelect {
    box-shadow: none;
    background-color: transparent;
    color: #a2a2a2;
    min-height: 0;
    padding: 0.3em;
    margin: 0
}

    .inline-filter .customSelect:after {
        content: none
    }

    .inline-filter .customSelect.customSelectHover, .inline-filter .customSelect:hover, .inline-filter .customSelect.customSelectFocus, .inline-filter .customSelect:focus {
        color: white !important;
        background-color: transparent
    }

        .inline-filter .customSelect.customSelectHover .customSelectInner, .inline-filter .customSelect:hover .customSelectInner, .inline-filter .customSelect.customSelectFocus .customSelectInner, .inline-filter .customSelect:focus .customSelectInner {
            border-bottom: 1px dotted !important
        }

    .inline-filter .customSelect.customSelectOpen, .inline-filter .customSelect.customSelectFocus, .inline-filter .customSelect.customSelectChanged {
        box-shadow: none;
        background-color: transparent;
        color: white !important
    }

    .inline-filter .customSelect .customSelectInner {
        width: auto !important;
        border-bottom: 1px dotted
    }

        .inline-filter .customSelect .customSelectInner:after {
            content: " ▾"
        }

.inline-filter .hasSelection .customSelect {
    color: white !important
}

    .inline-filter .hasSelection .customSelect .customSelectInner {
        border-bottom: 1px solid rgba(255,255,255,0.8)
    }

    .inline-filter .hasSelection .customSelect.customSelectHover, .inline-filter .hasSelection .customSelect:hover {
        color: white !important
    }

.inline-filter .hasSelection #timezone + .customSelect {
    color: white !important
}

    .inline-filter .hasSelection #timezone + .customSelect .customSelectInner {
        border-bottom: 1px solid rgba(255,255,255,0.6)
    }

.inline-filter .settings dl.setting {
    margin: 2px 2px
}

.role-filters {
    display: flex;
    flex-wrap: wrap
}

    .role-filters .designation-new {
        vertical-align: baseline
    }

.filter-group {
    flex-grow: 1;
    flex: 2
}

.filter-status {
    flex: 1;
    min-width: 200px
}

    .filter-status .filter-stat {
        color: rgba(255,255,255,0.6)
    }

        .filter-status .filter-stat .description {
            text-transform: none
        }

    .filter-status .filtered-description {
        color: white
    }

    .filter-status .explain {
        display: inline-block;
        margin-left: 0.5em
    }

        .filter-status .explain:hover {
            opacity: 0.6
        }

        .filter-status .explain.bad {
            color: #C23C2A
        }

        .filter-status .explain.warning {
            color: #F26522
        }

        .filter-status .explain.good {
            color: #A9CF54
        }

.filter-role {
    display: flex;
    flex-wrap: wrap
}

    .filter-role .settings {
        display: flex;
        flex: 1
    }

        .filter-role .settings .setting {
            flex: 1
        }

    .filter-role .customSelect {
        padding: 0 0.3em
    }

    .filter-role .description {
        color: rgba(255,255,255,0.6);
        width: 140px;
        flex-basis: 160px;
        flex-grow: 0;
        text-transform: none
    }

@media (max-width: 480px) {
    .filter-role .description {
        padding-bottom: 0;
        margin-top: 0.3em
    }
}

.filter-role.filter-teammate .description, .filter-role.filter-teammate .customSelect {
    color: #92A525
}

.filter-role.filter-opponent .description, .filter-role.filter-opponent .customSelect {
    color: #C23C2A
}

.set-filters {
    background: #224971
}

    .set-filters p {
        float: left
    }

select.truesight, .customSelect.truesight {
    color: #A89CEE !important
}

    select.truesight option, .customSelect.truesight option {
        color: black
    }

.flag {
    width: 16px;
    height: 11px;
    background: url(/assets/flags-7f94eaf43df4667e9ca97165f32b16549e65ddc0efb9ed634e77b2e68ccea05d.png) no-repeat;
    display: inline-block;
    padding: 0 !important;
    margin: 0 5px 0;
    position: relative;
    top: 1px
}

    .flag.flag-ru {
        background-position: -224px -121px
    }

    .flag.flag-jp {
        background-position: -16px -77px
    }

    .flag.flag-ko {
        background-position: -144px -77px
    }

    .flag.flag-de {
        background-position: -80px -33px
    }

    .flag.flag-cs {
        background-position: -64px -33px
    }

    .flag.flag-pt {
        background-position: -192px -11px
    }

    .flag.flag-en {
        background-position: -144px -154px
    }

    .flag.flag-es {
        background-position: -16px -44px
    }

    .flag.flag-it {
        background-position: -208px -66px
    }

    .flag.flag-zh {
        background-position: -208px -22px
    }

    .flag.flag-uk {
        background-position: -96px -154px
    }

    .flag.flag-ka {
        background-position: -208px -44px
    }

    .flag.flag-fr {
        background-position: -144px -44px
    }

    .flag.flag-bg {
        background-position: -80px -11px
    }

    .flag.flag-pl {
        background-position: -32px -121px
    }

    .flag.flag-sr {
        background-position: -208px -121px
    }

    .flag.flag-tr {
        background-position: -16px -154px
    }

    .flag.flag-ad {
        background-position: -16px 0
    }

    .flag.flag-ae {
        background-position: -32px 0
    }

    .flag.flag-af {
        background-position: -48px 0
    }

    .flag.flag-ag {
        background-position: -64px 0
    }

    .flag.flag-ai {
        background-position: -80px 0
    }

    .flag.flag-al {
        background-position: -96px 0
    }

    .flag.flag-am {
        background-position: -112px 0
    }

    .flag.flag-an {
        background-position: -128px 0
    }

    .flag.flag-ao {
        background-position: -144px 0
    }

    .flag.flag-ar {
        background-position: -160px 0
    }

    .flag.flag-as {
        background-position: -176px 0
    }

    .flag.flag-at {
        background-position: -192px 0
    }

    .flag.flag-au {
        background-position: -208px 0
    }

    .flag.flag-aw {
        background-position: -224px 0
    }

    .flag.flag-az {
        background-position: -240px 0
    }

    .flag.flag-ba {
        background-position: 0 -11px
    }

    .flag.flag-bb {
        background-position: -16px -11px
    }

    .flag.flag-bd {
        background-position: -32px -11px
    }

    .flag.flag-be {
        background-position: -48px -11px
    }

    .flag.flag-bf {
        background-position: -64px -11px
    }

    .flag.flag-bh {
        background-position: -96px -11px
    }

    .flag.flag-bi {
        background-position: -112px -11px
    }

    .flag.flag-bj {
        background-position: -128px -11px
    }

    .flag.flag-bm {
        background-position: -144px -11px
    }

    .flag.flag-bn {
        background-position: -160px -11px
    }

    .flag.flag-bo {
        background-position: -176px -11px
    }

    .flag.flag-br {
        background-position: -192px -11px
    }

    .flag.flag-bs {
        background-position: -208px -11px
    }

    .flag.flag-bt {
        background-position: -224px -11px
    }

    .flag.flag-bv {
        background-position: -240px -11px
    }

    .flag.flag-bw {
        background-position: 0 -22px
    }

    .flag.flag-by {
        background-position: -16px -22px
    }

    .flag.flag-bz {
        background-position: -32px -22px
    }

    .flag.flag-ca {
        background-position: -48px -22px
    }

    .flag.flag-catalonia {
        background-position: -64px -22px
    }

    .flag.flag-cd {
        background-position: -80px -22px
    }

    .flag.flag-cf {
        background-position: -96px -22px
    }

    .flag.flag-cg {
        background-position: -112px -22px
    }

    .flag.flag-ch {
        background-position: -128px -22px
    }

    .flag.flag-ci {
        background-position: -144px -22px
    }

    .flag.flag-ck {
        background-position: -160px -22px
    }

    .flag.flag-cl {
        background-position: -176px -22px
    }

    .flag.flag-cm {
        background-position: -192px -22px
    }

    .flag.flag-cn {
        background-position: -208px -22px
    }

    .flag.flag-co {
        background-position: -224px -22px
    }

    .flag.flag-cr {
        background-position: -240px -22px
    }

    .flag.flag-cu {
        background-position: 0 -33px
    }

    .flag.flag-cv {
        background-position: -16px -33px
    }

    .flag.flag-cw {
        background-position: -32px -33px
    }

    .flag.flag-cy {
        background-position: -48px -33px
    }

    .flag.flag-cz {
        background-position: -64px -33px
    }

    .flag.flag-dj {
        background-position: -96px -33px
    }

    .flag.flag-dk {
        background-position: -112px -33px
    }

    .flag.flag-dm {
        background-position: -128px -33px
    }

    .flag.flag-do {
        background-position: -144px -33px
    }

    .flag.flag-dz {
        background-position: -160px -33px
    }

    .flag.flag-ec {
        background-position: -176px -33px
    }

    .flag.flag-ee {
        background-position: -192px -33px
    }

    .flag.flag-eg {
        background-position: -208px -33px
    }

    .flag.flag-eh {
        background-position: -224px -33px
    }

    .flag.flag-england {
        background-position: -240px -33px
    }

    .flag.flag-er {
        background-position: 0 -44px
    }

    .flag.flag-et {
        background-position: -32px -44px
    }

    .flag.flag-eu {
        background-position: -48px -44px
    }

    .flag.flag-fi {
        background-position: -64px -44px
    }

    .flag.flag-fj {
        background-position: -80px -44px
    }

    .flag.flag-fk {
        background-position: -96px -44px
    }

    .flag.flag-fm {
        background-position: -112px -44px
    }

    .flag.flag-fo {
        background-position: -128px -44px
    }

    .flag.flag-ga {
        background-position: -160px -44px
    }

    .flag.flag-gb {
        background-position: -176px -44px
    }

    .flag.flag-gd {
        background-position: -192px -44px
    }

    .flag.flag-ge {
        background-position: -208px -44px
    }

    .flag.flag-gf {
        background-position: -224px -44px
    }

    .flag.flag-gg {
        background-position: -240px -44px
    }

    .flag.flag-gh {
        background-position: 0 -55px
    }

    .flag.flag-gi {
        background-position: -16px -55px
    }

    .flag.flag-gl {
        background-position: -32px -55px
    }

    .flag.flag-gm {
        background-position: -48px -55px
    }

    .flag.flag-gn {
        background-position: -64px -55px
    }

    .flag.flag-gp {
        background-position: -80px -55px
    }

    .flag.flag-gq {
        background-position: -96px -55px
    }

    .flag.flag-gr {
        background-position: -112px -55px
    }

    .flag.flag-gs {
        background-position: -128px -55px
    }

    .flag.flag-gt {
        background-position: -144px -55px
    }

    .flag.flag-gu {
        background-position: -160px -55px
    }

    .flag.flag-gw {
        background-position: -176px -55px
    }

    .flag.flag-gy {
        background-position: -192px -55px
    }

    .flag.flag-hk {
        background-position: -208px -55px
    }

    .flag.flag-hm {
        background-position: -224px -55px
    }

    .flag.flag-hn {
        background-position: -240px -55px
    }

    .flag.flag-hr {
        background-position: 0 -66px
    }

    .flag.flag-ht {
        background-position: -16px -66px
    }

    .flag.flag-hu {
        background-position: -32px -66px
    }

    .flag.flag-ic {
        background-position: -48px -66px
    }

    .flag.flag-id {
        background-position: -64px -66px
    }

    .flag.flag-ie {
        background-position: -80px -66px
    }

    .flag.flag-il {
        background-position: -96px -66px
    }

    .flag.flag-im {
        background-position: -112px -66px
    }

    .flag.flag-in {
        background-position: -128px -66px
    }

    .flag.flag-io {
        background-position: -144px -66px
    }

    .flag.flag-iq {
        background-position: -160px -66px
    }

    .flag.flag-ir {
        background-position: -176px -66px
    }

    .flag.flag-is {
        background-position: -192px -66px
    }

    .flag.flag-je {
        background-position: -224px -66px
    }

    .flag.flag-jm {
        background-position: -240px -66px
    }

    .flag.flag-jo {
        background-position: 0 -77px
    }

    .flag.flag-ke {
        background-position: -32px -77px
    }

    .flag.flag-kg {
        background-position: -48px -77px
    }

    .flag.flag-kh {
        background-position: -64px -77px
    }

    .flag.flag-ki {
        background-position: -80px -77px
    }

    .flag.flag-km {
        background-position: -96px -77px
    }

    .flag.flag-kn {
        background-position: -112px -77px
    }

    .flag.flag-kp {
        background-position: -128px -77px
    }

    .flag.flag-kr {
        background-position: -144px -77px
    }

    .flag.flag-kurdistan {
        background-position: -160px -77px
    }

    .flag.flag-kw {
        background-position: -176px -77px
    }

    .flag.flag-ky {
        background-position: -192px -77px
    }

    .flag.flag-kz {
        background-position: -208px -77px
    }

    .flag.flag-la {
        background-position: -224px -77px
    }

    .flag.flag-lb {
        background-position: -240px -77px
    }

    .flag.flag-lc {
        background-position: 0 -88px
    }

    .flag.flag-li {
        background-position: -16px -88px
    }

    .flag.flag-lk {
        background-position: -32px -88px
    }

    .flag.flag-lr {
        background-position: -48px -88px
    }

    .flag.flag-ls {
        background-position: -64px -88px
    }

    .flag.flag-lt {
        background-position: -80px -88px
    }

    .flag.flag-lu {
        background-position: -96px -88px
    }

    .flag.flag-lv {
        background-position: -112px -88px
    }

    .flag.flag-ly {
        background-position: -128px -88px
    }

    .flag.flag-ma {
        background-position: -144px -88px
    }

    .flag.flag-mc {
        background-position: -160px -88px
    }

    .flag.flag-md {
        background-position: -176px -88px
    }

    .flag.flag-me {
        background-position: -192px -88px
    }

    .flag.flag-mg {
        background-position: -208px -88px
    }

    .flag.flag-mh {
        background-position: -224px -88px
    }

    .flag.flag-mk {
        background-position: -240px -88px
    }

    .flag.flag-ml {
        background-position: 0 -99px
    }

    .flag.flag-mm {
        background-position: -16px -99px
    }

    .flag.flag-mn {
        background-position: -32px -99px
    }

    .flag.flag-mo {
        background-position: -48px -99px
    }

    .flag.flag-mp {
        background-position: -64px -99px
    }

    .flag.flag-mq {
        background-position: -80px -99px
    }

    .flag.flag-mr {
        background-position: -96px -99px
    }

    .flag.flag-ms {
        background-position: -112px -99px
    }

    .flag.flag-mt {
        background-position: -128px -99px
    }

    .flag.flag-mu {
        background-position: -144px -99px
    }

    .flag.flag-mv {
        background-position: -160px -99px
    }

    .flag.flag-mw {
        background-position: -176px -99px
    }

    .flag.flag-mx {
        background-position: -192px -99px
    }

    .flag.flag-my {
        background-position: -208px -99px
    }

    .flag.flag-mz {
        background-position: -224px -99px
    }

    .flag.flag-na {
        background-position: -240px -99px
    }

    .flag.flag-nc {
        background-position: 0 -110px
    }

    .flag.flag-ne {
        background-position: -16px -110px
    }

    .flag.flag-nf {
        background-position: -32px -110px
    }

    .flag.flag-ng {
        background-position: -48px -110px
    }

    .flag.flag-ni {
        background-position: -64px -110px
    }

    .flag.flag-nl {
        background-position: -80px -110px
    }

    .flag.flag-no {
        background-position: -96px -110px
    }

    .flag.flag-np {
        background-position: -112px -110px
    }

    .flag.flag-nr {
        background-position: -128px -110px
    }

    .flag.flag-nu {
        background-position: -144px -110px
    }

    .flag.flag-nz {
        background-position: -160px -110px
    }

    .flag.flag-om {
        background-position: -176px -110px
    }

    .flag.flag-pa {
        background-position: -192px -110px
    }

    .flag.flag-pe {
        background-position: -208px -110px
    }

    .flag.flag-pf {
        background-position: -224px -110px
    }

    .flag.flag-pg {
        background-position: -240px -110px
    }

    .flag.flag-ph {
        background-position: 0 -121px
    }

    .flag.flag-pk {
        background-position: -16px -121px
    }

    .flag.flag-pm {
        background-position: -48px -121px
    }

    .flag.flag-pn {
        background-position: -64px -121px
    }

    .flag.flag-pr {
        background-position: -80px -121px
    }

    .flag.flag-ps {
        background-position: -96px -121px
    }

    .flag.flag-pw {
        background-position: -128px -121px
    }

    .flag.flag-py {
        background-position: -144px -121px
    }

    .flag.flag-qa {
        background-position: -160px -121px
    }

    .flag.flag-re {
        background-position: -176px -121px
    }

    .flag.flag-ro {
        background-position: -192px -121px
    }

    .flag.flag-rs {
        background-position: -208px -121px
    }

    .flag.flag-rw {
        background-position: -240px -121px
    }

    .flag.flag-sa {
        background-position: 0 -132px
    }

    .flag.flag-sb {
        background-position: -16px -132px
    }

    .flag.flag-sc {
        background-position: -32px -132px
    }

    .flag.flag-scotland {
        background-position: -48px -132px
    }

    .flag.flag-sd {
        background-position: -64px -132px
    }

    .flag.flag-se {
        background-position: -80px -132px
    }

    .flag.flag-sg {
        background-position: -96px -132px
    }

    .flag.flag-sh {
        background-position: -112px -132px
    }

    .flag.flag-si {
        background-position: -128px -132px
    }

    .flag.flag-sk {
        background-position: -144px -132px
    }

    .flag.flag-sl {
        background-position: -160px -132px
    }

    .flag.flag-sm {
        background-position: -176px -132px
    }

    .flag.flag-sn {
        background-position: -192px -132px
    }

    .flag.flag-so {
        background-position: -208px -132px
    }

    .flag.flag-somaliland {
        background-position: -224px -132px
    }

    .flag.flag-ss {
        background-position: 0 -143px
    }

    .flag.flag-st {
        background-position: -16px -143px
    }

    .flag.flag-sv {
        background-position: -32px -143px
    }

    .flag.flag-sx {
        background-position: -48px -143px
    }

    .flag.flag-sy {
        background-position: -64px -143px
    }

    .flag.flag-sz {
        background-position: -80px -143px
    }

    .flag.flag-tc {
        background-position: -96px -143px
    }

    .flag.flag-td {
        background-position: -112px -143px
    }

    .flag.flag-tf {
        background-position: -128px -143px
    }

    .flag.flag-tg {
        background-position: -144px -143px
    }

    .flag.flag-th {
        background-position: -160px -143px
    }

    .flag.flag-tj {
        background-position: -176px -143px
    }

    .flag.flag-tk {
        background-position: -192px -143px
    }

    .flag.flag-tl {
        background-position: -208px -143px
    }

    .flag.flag-tm {
        background-position: -224px -143px
    }

    .flag.flag-tn {
        background-position: -240px -143px
    }

    .flag.flag-to {
        background-position: 0 -154px
    }

    .flag.flag-tt {
        background-position: -32px -154px
    }

    .flag.flag-tv {
        background-position: -48px -154px
    }

    .flag.flag-tw {
        background-position: -64px -154px
    }

    .flag.flag-tz {
        background-position: -80px -154px
    }

    .flag.flag-ua {
        background-position: -96px -154px
    }

    .flag.flag-ug {
        background-position: -112px -154px
    }

    .flag.flag-um {
        background-position: -128px -154px
    }

    .flag.flag-us {
        background-position: -144px -154px
    }

    .flag.flag-uy {
        background-position: -160px -154px
    }

    .flag.flag-uz {
        background-position: -176px -154px
    }

    .flag.flag-va {
        background-position: -192px -154px
    }

    .flag.flag-vc {
        background-position: -208px -154px
    }

    .flag.flag-ve {
        background-position: -224px -154px
    }

    .flag.flag-vg {
        background-position: -240px -154px
    }

    .flag.flag-vi {
        background-position: 0 -165px
    }

    .flag.flag-vn {
        background-position: -16px -165px
    }

    .flag.flag-vu {
        background-position: -32px -165px
    }

    .flag.flag-wales {
        background-position: -48px -165px
    }

    .flag.flag-wf {
        background-position: -64px -165px
    }

    .flag.flag-ws {
        background-position: -80px -165px
    }

    .flag.flag-ye {
        background-position: -96px -165px
    }

    .flag.flag-yt {
        background-position: -112px -165px
    }

    .flag.flag-za {
        background-position: -128px -165px
    }

    .flag.flag-zanzibar {
        background-position: -144px -165px
    }

    .flag.flag-zm {
        background-position: -160px -165px
    }

    .flag.flag-zw {
        background-position: -176px -165px
    }

.flex-table, .flex-table div {
    box-sizing: border-box
}

    .flex-table, .flex-table time {
        font-size: 12px
    }

        .flex-table small, .flex-table time {
            color: rgba(255,255,255,0.6)
        }

.flex-table {
    line-height: 1.1em
}

.ft-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1
}

.ft-wrap-never, .ft-wrap-tablet, .ft-wrap-phone {
    flex-wrap: nowrap
}

.ft-col {
    flex-grow: 1;
    flex-shrink: 0;
    align-self: center;
    vertical-align: middle;
    padding: 4px
}

.ft-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 5px 0;
    background: rgba(255,255,255,0.04)
}

    .ft-row.faction-radiant {
        background: rgba(146,165,37,0.12);
        color: white
    }

    .ft-row.faction-dire {
        background: rgba(194,60,42,0.12);
        color: white
    }

    .ft-row:nth-child(2n) {
        background: rgba(255,255,255,0.02)
    }

    .ft-row.faction-radiant:nth-child(2n) {
        background: rgba(146,165,37,0.06);
        color: white
    }

    .ft-row.faction-dire:nth-child(2n) {
        background: rgba(194,60,42,0.06);
        color: white
    }

.ft-header {
    font-weight: bold;
    background: transparent
}

.ft-width.ft-10 {
    width: 10%
}

.ft-width.ft-20 {
    width: 20%
}

.ft-width.ft-30 {
    width: 30%
}

.ft-width.ft-40 {
    width: 40%
}

.ft-width.ft-50 {
    width: 50%
}

.ft-width.ft-min-50 {
    min-width: 50px
}

.ft-width.ft-min-100 {
    min-width: 100px
}

.ft-width.ft-min-150 {
    min-width: 150px
}

.ft-width.ft-min-200 {
    min-width: 200px
}

.ft-width.ft-min-250 {
    min-width: 250px
}

.ft-width.ft-min-300 {
    min-width: 300px
}

.ft-width.ft-min-350 {
    min-width: 350px
}

.ft-width.ft-min-400 {
    min-width: 400px
}

.ft-width.ft-min-450 {
    min-width: 450px
}

.ft-width.ft-min-500 {
    min-width: 500px
}

@media (max-width: 991px) {
    .ft-row {
        padding: 10px 0
    }

    .ft-header {
        padding: 0
    }

    .ft-wrap-tablet {
        flex-wrap: wrap
    }

    .ft-width {
        width: auto !important
    }
}

@media (max-width: 480px) {
    .ft-wrap-phone {
        flex-wrap: wrap
    }
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input {
        font-size: 16px !important
    }

        input#q[type=text] {
            width: 240px
        }
}

input#q[type=text]:focus {
    outline: none
}

@media (max-width: 768px) {
    input[type=text]::-webkit-input-placeholder {
        color: transparent
    }
}

input[type=text], input[type=email], textarea, .customSelect {
    box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
    background: #1C242D;
    border: none;
    border-radius: 0;
    color: white;
    display: inline-block;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 16px;
    margin-right: 2px;
    padding: 8px 8px;
    box-sizing: border-box;
    -webkit-appearance: none
}

    input[type=text]:active, input[type=text]:focus, input[type=email]:active, input[type=email]:focus, textarea:active, textarea:focus, .customSelect:active, .customSelect:focus {
        background-color: #202933
    }

input[type=text], input[type=email] {
    min-height: 36px
}

.customSelect {
    min-height: 31px
}

input.form-input-quick-filter[type=text] {
    background: #2E3740;
    box-shadow: none;
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    min-height: 0;
    padding: 4px 6px
}

    input.form-input-quick-filter[type=text]:focus {
        outline: none
    }

textarea {
    display: block
}

.button {
    color: white;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 13px;
    padding: 9px 13px;
    text-transform: uppercase;
    -webkit-appearance: none;
    border-width: 1px;
    border-style: solid;
    border-color: #92bb35;
    background: rgba(10,10,10,0.15);
    border-image: 1px solid linear-gradient(#6d8c27, #85ab30);
    color: #92bb35 !important;
    text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
}

    .button:hover {
        background-image: linear-gradient(rgba(146,187,53,0.06), rgba(146,187,53,0.03))
    }

    .button.button-premium {
        border-width: 1px;
        border-style: solid;
        border-color: #faae0b;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#c58704, #eda304);
        color: #faae0b !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-premium:hover {
            background-image: linear-gradient(rgba(250,174,11,0.06), rgba(250,174,11,0.03))
        }

    .button.button-esports {
        border-width: 1px;
        border-style: solid;
        border-color: #2fb7b7;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#238787, #2ba7a7);
        color: #2fb7b7 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-esports:hover {
            background-image: linear-gradient(rgba(47,183,183,0.06), rgba(47,183,183,0.03))
        }

    .button.button-admin {
        border-width: 1px;
        border-style: solid;
        border-color: #A97DC1;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#8e54ad, #a06fba);
        color: #A97DC1 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-admin:hover {
            background-image: linear-gradient(rgba(169,125,193,0.06), rgba(169,125,193,0.03))
        }

    .button.button-twitter {
        border-width: 1px;
        border-style: solid;
        border-color: #1dbac9;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#158894, #1aaab7);
        color: #1dbac9 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-twitter:hover {
            background-image: linear-gradient(rgba(29,186,201,0.06), rgba(29,186,201,0.03))
        }

    .button.button-facebook {
        border-width: 1px;
        border-style: solid;
        border-color: #6c8bcd;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#4068bc, #5d7fc8);
        color: #6c8bcd !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-facebook:hover {
            background-image: linear-gradient(rgba(108,139,205,0.06), rgba(108,139,205,0.03))
        }

    .button.button-gplus {
        border-width: 1px;
        border-style: solid;
        border-color: #E34429;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#b72f18, #db381d);
        color: #E34429 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-gplus:hover {
            background-image: linear-gradient(rgba(227,68,41,0.06), rgba(227,68,41,0.03))
        }

    .button.button-vk {
        border-width: 1px;
        border-style: solid;
        border-color: #4772a5;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#35547a, #416897);
        color: #4772a5 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-vk:hover {
            background-image: linear-gradient(rgba(71,114,165,0.06), rgba(71,114,165,0.03))
        }

    .button.button-paypal {
        border-width: 1px;
        border-style: solid;
        border-color: #21abec;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#1088c0, #13a3e6);
        color: #21abec !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-paypal:hover {
            background-image: linear-gradient(rgba(33,171,236,0.06), rgba(33,171,236,0.03))
        }

    .button.button-warning {
        border-width: 1px;
        border-style: solid;
        border-color: #fd565e;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#fc1a25, #fd424b);
        color: #fd565e !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-warning:hover {
            background-image: linear-gradient(rgba(253,86,94,0.06), rgba(253,86,94,0.03))
        }

    .button.button-reborn {
        border-width: 1px;
        border-style: solid;
        border-color: #f44c2e;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#da2a0b, #f33b1b);
        color: #f44c2e !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-reborn:hover {
            background-image: linear-gradient(rgba(244,76,46,0.06), rgba(244,76,46,0.03))
        }

    .button.button-muted, .button:disabled {
        border-width: 1px;
        border-style: solid;
        border-color: #B0B0B0;
        background: rgba(10,10,10,0.15);
        border-image: 1px solid linear-gradient(#919191, #a6a6a6);
        color: #B0B0B0 !important;
        text-shadow: 1px 1px 0 rgba(10,10,10,0.4)
    }

        .button.button-muted:hover, .button:disabled:hover {
            background-image: linear-gradient(rgba(176,176,176,0.06), rgba(176,176,176,0.03))
        }

    .button.button-small {
        font-size: 12px;
        line-height: 12px;
        padding: 4px 7px
    }

    .button.button-large {
        font-size: 16px;
        line-height: 20px;
        padding: 10px 15px
    }

a.esports {
    color: #39CCCC
}

    a.esports:hover {
        color: white
    }

form.structured-form input[type=text], form.structured-form input[type=email], form.structured-form textarea, form.structured-form .customSelect {
    color: black;
    background: #e6e6e6
}

    form.structured-form input[type=text]:active, form.structured-form input[type=text]:focus, form.structured-form input[type=email]:active, form.structured-form input[type=email]:focus, form.structured-form textarea:active, form.structured-form textarea:focus, form.structured-form .customSelect:active, form.structured-form .customSelect:focus {
        background: white
    }

    form.structured-form input[type=text]:disabled, form.structured-form input[type=text][readonly=readonly], form.structured-form input[type=email]:disabled, form.structured-form input[type=email][readonly=readonly], form.structured-form textarea:disabled, form.structured-form textarea[readonly=readonly], form.structured-form .customSelect:disabled, form.structured-form .customSelect[readonly=readonly] {
        background: #999
    }

    form.structured-form .customSelect:after {
        color: black
    }

form.structured-form .hint {
    font-size: 12px;
    color: #C4C4C4;
    padding-left: 4px
}

form.structured-form p {
    margin-top: 10px
}

form.structured-form div.input {
    display: inline-block;
    padding: 8px 24px 8px 0;
    vertical-align: top
}

    form.structured-form div.input > input {
        display: block
    }

    form.structured-form div.input > label {
        display: block;
        font-size: 13px;
        padding: 4px 0 4px 2px
    }

    form.structured-form div.input.hidden {
        display: none
    }

    form.structured-form div.input.text {
        display: block
    }

    form.structured-form div.input .hint {
        padding-top: 3px
    }

    form.structured-form div.input.input-inline > input, form.structured-form div.input.input-inline > label {
        display: inline
    }

form.structured-form div.field_with_errors > input {
    border: 1px solid #fd6068
}

form.structured-form div.field_with_errors > span.error {
    color: #fd6068;
    display: block;
    font-size: 13px;
    padding: 6px 2px
}

form.structured-form span.radio {
    display: block;
    padding: 4px 0;
    vertical-align: middle
}

    form.structured-form span.radio input {
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle
    }

    form.structured-form span.radio label {
        display: inline-block;
        vertical-align: middle
    }

form.structured-form select.nostyle:not([multiple="multiple"]) {
    height: 36px
}

form.structured-form fieldset {
    border: 1px solid #455563;
    margin: 13px 0;
    padding: 0px 10px
}

select {
    cursor: pointer
}

.customSelect, .customCheckbox label {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    white-space: nowrap !important;
    cursor: pointer;
    background-color: #242F39
}

    .customSelect.customSelectHover, .customSelect:hover, .customCheckbox label.customSelectHover, .customCheckbox label:hover {
        background-color: #28343f
    }

    .customSelect.customSelectOpen, .customSelect.customSelectFocus, .customCheckbox label.customSelectOpen, .customCheckbox label.customSelectFocus {
        box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
        background-color: #1e2730
    }

    .customSelect:after {
        content: "▾";
        font-size: 22px;
        float: right;
        margin-top: -2px;
        color: rgba(255,255,255,0.4);
        margin-left: 20px
    }

.customCheckbox {
    position: relative;
    margin-right: 2px
}

    .customCheckbox label {
        display: block;
        padding: 10px 10px 8px 34px
    }

    .customCheckbox input {
        position: absolute;
        left: 8px;
        top: 7px
    }

.premium .customSelect {
    color: #FBB829 !important
}

.settings-group-premium .premium .customSelect {
    color: #0a0a0a !important
}

.unavailable .customSelect.customSelectDisabled {
    color: #595959 !important;
    text-shadow: 1px 1px 0 rgba(10,10,10,0.2)
}

form .input {
    margin-bottom: 10px
}

fieldset div.input.hidden {
    display: none
}

.autocomplete-suggestions {
    background-color: #242F39;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgba(10,10,10,0.4)
}

    .autocomplete-suggestions .autocomplete-suggestion {
        padding: 10px 8px;
        border-bottom: 1px solid #2E3740;
        cursor: pointer
    }

        .autocomplete-suggestions .autocomplete-suggestion:last-child {
            border-bottom: none
        }

        .autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected {
            background: #1C242D
        }

            .autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected .hint {
                color: white
            }

        .autocomplete-suggestions .autocomplete-suggestion .hint {
            float: right
        }

        .autocomplete-suggestions .autocomplete-suggestion img {
            height: 27px;
            margin-right: 6px;
            margin-top: -20px;
            margin-left: -1px;
            position: relative;
            top: 9px
        }

    .autocomplete-suggestions .autocomplete-no-suggestion {
        color: rgba(255,255,255,0.6);
        padding: 10px 8px
    }

.autocomplete-wrapper {
    position: relative
}

    .autocomplete-wrapper input.autocomplete + div.spinner {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        color: #aaa;
        padding: 5px;
        font-size: 10px
    }

    .autocomplete-wrapper input.autocomplete.searching + div.spinner {
        display: block
    }

.active-friends .friend {
    display: block;
    margin-bottom: 4px;
    border-radius: 1px
}

    .active-friends .friend .sep {
        color: rgba(255,255,255,0.6)
    }

    .active-friends .friend .profile {
        display: block;
        background: #2E3740
    }

@media (min-width: 992px) {
    .active-friends .friend .profile {
        grid-column: span 4
    }
}

@media (min-width: 992px) {
    .active-friends .friend .profile {
        height: 92px;
        overflow: hidden
    }
}

.active-friends .friend .profile .avatar {
    display: inline-block;
    margin: 4px
}

.active-friends .friend .profile .player-info {
    display: inline-block;
    vertical-align: top
}

.active-friends .friend .profile .last-match-time {
    color: rgba(255,255,255,0.6)
}

.active-friends .friend .items {
    margin-left: 2px
}

@media (max-width: 992px) {
    .active-friends .friend .items {
        display: none
    }
}

.active-friends .friend .summary {
    display: block;
    background: #2E3740
}

@media (min-width: 992px) {
    .active-friends .friend .summary {
        grid-column: span 4
    }
}

@media (max-width: 992px) {
    .active-friends .friend .summary {
        border-top: 2px solid #242F39
    }
}

@media (min-width: 992px) {
    .active-friends .friend .summary {
        height: 92px;
        overflow: hidden
    }
}

.active-friends .friend .summary .wins {
    color: #A9CF54
}

.active-friends .friend .summary .losses {
    color: #C23C2A
}

.active-friends .friend .summary .upper-gray {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    margin-top: 4px;
    text-transform: uppercase
}

.active-friends .friend .summary .weekly-records {
    margin: 4px 4px 0 4px
}

    .active-friends .friend .summary .weekly-records .mr-right {
        display: inline-block;
        float: right
    }

    .active-friends .friend .summary .weekly-records .this-week {
        line-height: 30px
    }

    .active-friends .friend .summary .weekly-records .win-loss {
        display: inline-block;
        margin-right: 12px
    }

    .active-friends .friend .summary .weekly-records .win-ratio {
        display: inline-block
    }

.active-friends .friend .summary .heroes {
    margin-left: 4px
}

@media (max-width: 992px) {
    .active-friends .friend .summary .heroes {
        display: none
    }
}

.active-friends .friend .summary .heroes .hero {
    position: relative;
    display: inline-block;
    margin-right: 2px
}

    .active-friends .friend .summary .heroes .hero img {
        height: 24px
    }

    .active-friends .friend .summary .heroes .hero .score {
        width: 100%;
        text-align: center
    }

.active-friends .friend .last-match {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: rgba(255,255,255,0.6);
    background: #2E3740;
    height: 100%;
    padding: 4px
}

@media (min-width: 992px) {
    .active-friends .friend .last-match {
        grid-column: span 4
    }
}

@media (min-width: 992px) {
    .active-friends .friend .last-match {
        height: 92px
    }
}

@media (max-width: 992px) {
    .active-friends .friend .last-match {
        border-top: 2px solid #242F39;
        min-height: 52px
    }
}

.active-friends .friend .last-match .image-container-hero {
    float: right
}

.active-friends .friend .last-match .match-smallinfo {
    display: inline-block;
    margin: 0 2px 2px 2px;
    padding: 0 2px 0 2px;
    background: rgba(10,10,10,0.2)
}

.inactive-friends .friend-row {
    display: block
}

.inactive-friends .friend {
    display: block;
    background: #2E3740;
    margin-bottom: 4px
}

@media (min-width: 992px) {
    .inactive-friends .friend {
        grid-column: span 4
    }
}

.inactive-friends .friend .avatar {
    display: inline-block;
    margin-right: 4px
}

.inactive-friends .friend .player-info {
    display: inline-block;
    vertical-align: top
}

.inactive-friends .friend .last-match-time {
    color: rgba(255,255,255,0.6)
}

.game-record, .kda-record, .lhd-record {
    color: rgba(217,217,217,0.8)
}

    .game-record > span, .kda-record > span, .lhd-record > span {
        color: white
    }

    .game-record .last-hits, .kda-record .last-hits, .lhd-record .last-hits {
        color: white
    }

    .game-record .wins, .game-record .assists, .kda-record .wins, .kda-record .assists, .lhd-record .wins, .lhd-record .assists {
        color: #A9CF54
    }

    .game-record .losses, .game-record .kills, .kda-record .losses, .kda-record .kills, .lhd-record .losses, .lhd-record .kills {
        color: #C23C2A
    }

    .game-record .abandons, .game-record .deaths, .game-record .denies, .kda-record .abandons, .kda-record .deaths, .kda-record .denies, .lhd-record .abandons, .lhd-record .deaths, .lhd-record .denies {
        color: #979797
    }

    .game-record .sep, .kda-record .sep, .lhd-record .sep {
        padding: 0 2px
    }

.rating-expired {
    color: rgba(217,217,217,0.8) !important
}

    .rating-expired i {
        font-size: 0.8em
    }

.numbers-or-hyphens {
    color: rgba(217,217,217,0.5)
}

    .numbers-or-hyphens > span {
        padding: 0 2px
    }

        .numbers-or-hyphens > span.num {
            color: white
        }

.hyphen {
    color: rgba(217,217,217,0.5)
}

img.rune-icon {
    height: 17px;
    width: auto;
    vertical-align: middle
}

.rune-haste {
    color: #FC725A
}

.rune-regeneration {
    color: #3BC022
}

.rune-invisibility {
    color: #9B55CA
}

.rune-double-damage {
    color: #1CA2FA
}

.rune-illusion {
    color: #FDCB5A
}

.rune-bounty {
    color: #ff5200
}

.rune-arcane {
    color: #ed7dfb
}

.rune-water {
    color: #00ffff
}

.rune-wisdom {
    color: #F6C4CC
}

.rune-shield {
    color: #A1A1A1
}

.dust-of-appearance, .smoke-of-deceit {
    color: #AA8ADB !important
}

.observer-ward {
    color: #F2CC67 !important
}

.sentry-ward {
    color: #30BFD2 !important
}

.aegis-of-the-immortal {
    color: #F88A32 !important
}

.cheese {
    color: #D3E032 !important
}

.courier {
    color: #CA8445 !important
}

.glyph {
    color: #D5C064 !important
}

.roshan {
    color: #b49982 !important
}

.the-radiant, .player-radiant {
    color: #92A525 !important
}

    .the-radiant img.inline-icon, .player-radiant img.inline-icon {
        box-shadow: 0 0 3px rgba(146,165,37,0.4)
    }

.the-dire, .player-dire {
    color: #C23C2A !important
}

    .the-dire img.inline-icon, .player-dire img.inline-icon {
        box-shadow: 0 0 3px rgba(194,60,42,0.4)
    }

.stat-gold {
    color: #FBB829 !important
}

.image-icon.image-country {
    width: 24px
}

.img-icon {
    width: 36px;
    height: auto;
    margin-bottom: 3px;
    margin-right: 5px;
    vertical-align: middle
}

.empty-item-slot {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    overflow: hidden;
    background: #242527;
    background: linear-gradient(135deg, #242527 0%, #0f0f10 100%)
}

    .empty-item-slot:last-of-type {
        margin-right: 0
    }

    .empty-item-slot.empty-item-slot-roundicon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-left: 4px;
        opacity: 0.6
    }

    .empty-item-slot.empty-item-slot-bigroundicon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-left: 8px
    }

.image-container {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    overflow: hidden
}

    .image-container:last-of-type {
        margin-right: 0
    }

    .image-container a {
        display: block;
        position: relative
    }

    .image-container img {
        display: block
    }

    .image-container .ability-level {
        position: absolute;
        top: 0px;
        right: 0px;
        background: rgba(10,10,10,0.4);
        border-bottom-left-radius: 4px;
        font-size: 10px;
        width: 16px;
        padding: 2px 0;
        text-align: center;
        color: #d9d9d9
    }

    .image-container.image-container-bigavatar img {
        height: 65px
    }

        .image-container.image-container-bigavatar img.image-player {
            width: 65px
        }

    .image-container.image-container-avatar img {
        height: 42px
    }

        .image-container.image-container-avatar img.image-player {
            width: 42px
        }

    .image-container.image-container-bigicon img {
        height: 36px
    }

        .image-container.image-container-bigicon img.image-player {
            width: 36px
        }

    .image-container.image-container-medicon img {
        height: 32px
    }

        .image-container.image-container-medicon img.image-player {
            width: 32px
        }

    .image-container.image-container-plusicon img {
        height: 28px
    }

        .image-container.image-container-plusicon img.image-player {
            width: 28px
        }

        .image-container.image-container-plusicon img.image-item {
            width: 38px
        }

@media (max-width: 480px) {
    .image-container.image-container-plusicon img {
        height: 24px
    }

        .image-container.image-container-plusicon img.image-item {
            width: 33px
        }

        .image-container.image-container-plusicon img.image-player {
            width: 24px
        }
}

.image-container.image-container-roundicon {
    width: 28px;
    height: 28px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-left: 4px
}

    .image-container.image-container-roundicon img {
        display: inline;
        margin: 0 auto;
        margin-left: -25%;
        height: 28px
    }

.image-container.image-container-bigroundicon {
    width: 36px;
    height: 36px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-left: 8px
}

    .image-container.image-container-bigroundicon img {
        display: inline;
        margin: 0 auto;
        margin-left: -25%;
        height: 36px
    }

.image-container.image-container-icon img {
    height: 24px
}

    .image-container.image-container-icon img.image-player {
        width: 24px
    }

.image-container.image-container-smallicon img {
    height: 24px
}

    .image-container.image-container-smallicon img.image-player {
        width: 24px
    }

.image-container.image-container-tinyicon img {
    height: 16px
}

.image-container.image-container-inlineicon {
    display: inline-block;
    vertical-align: middle
}

    .image-container.image-container-inlineicon img {
        border-radius: 35px;
        box-shadow: 0 0 3px #0a0a0a;
        height: 17px;
        width: auto
    }

.image-container.image-inline-force {
    display: inline !important
}

.image-container.image-container-icon_vertical {
    display: inline-block;
    width: 40px;
    height: 60px
}

    .image-container.image-container-icon_vertical a {
        display: inline-block;
        height: 100%;
        width: 100%
    }

        .image-container.image-container-icon_vertical a img {
            position: relative;
            left: -20%;
            display: inline-block;
            height: 100%
        }

.image-container.image-container-overlay a {
    position: relative
}

.image-container.image-container-overlay .overlay-text {
    pointer-events: none;
    position: absolute;
    padding: 1px 1px 1px 1px;
    color: white;
    text-shadow: 1px 1px 1px #000 !important;
    background-color: rgba(0,0,0,0.4);
    font-size: 0.85em;
    z-index: 500
}

    .image-container.image-container-overlay .overlay-text.force-font-size {
        font-size: 11px;
        font-weight: normal
    }

    .image-container.image-container-overlay .overlay-text.top {
        top: 0;
        padding-bottom: 2px
    }

    .image-container.image-container-overlay .overlay-text.right {
        right: 0;
        padding-left: 2px
    }

    .image-container.image-container-overlay .overlay-text.bottom {
        bottom: 0;
        padding-top: 2px
    }

    .image-container.image-container-overlay .overlay-text.left {
        left: 0;
        padding-right: 2px
    }

.image-inline-force .image-container {
    display: inline !important
}

.image-container-importance-boots {
    border: 1px solid #76B8A6;
    box-shadow: 0 0 4px #76B8A6
}

.image-container-importance-high {
    border: 1px solid rgba(251,184,41,0.4);
    box-shadow: 0 0 4px rgba(251,184,41,0.4)
}

.image-container-importance-very-high {
    border: 1px solid #FBB829;
    box-shadow: 0 0 4px #FBB829
}

#simplemodal-overlay {
    background-color: #0a0a0a;
    opacity: 0.6
}

#simplemodal-container {
    background-color: #2E3740;
    box-shadow: 0 0 3px #0a0a0a;
    padding: 12px 12px 0 12px
}

    #simplemodal-container a.modalCloseImg {
        z-index: 3200;
        position: absolute;
        top: 8px;
        right: 9px;
        cursor: pointer
    }

        #simplemodal-container a.modalCloseImg:hover i {
            color: #A9CF54
        }

.simplemodal-wrap, .simplemodal-data {
    outline: none !important
}

.notifications .notification {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    color: white;
    margin-bottom: 6px;
    padding: 8px;
    text-shadow: 1px 1px 0 #0a0a0a;
    line-height: 1.4em
}

    .notifications .notification .dismiss {
        float: right
    }

    .notifications .notification em {
        color: white !important;
        font-weight: bold !important
    }

    .notifications .notification.success {
        background: rgba(169,207,84,0.7)
    }

    .notifications .notification.error {
        background: rgba(234,3,14,0.7)
    }

    .notifications .notification.premium, .notifications .notification.pending {
        color: white !important;
        background: rgba(251,184,41,0.7)
    }

        .notifications .notification.premium a, .notifications .notification.pending a {
            color: #FBB829 !important
        }

    .notifications .notification.poll {
        color: #c4c4c4;
        background: rgba(104,209,246,0.05)
    }

        .notifications .notification.poll a {
            color: #68d1f6 !important
        }

    .notifications .notification.announce {
        color: white;
        background: rgba(104,209,246,0.1)
    }

@media (max-width: 480px) {
    .notifications .notification.announce {
        display: none
    }
}

.notifications .notification.announce a {
    color: #68d1f6 !important
}

.notifications .notification.steam {
    color: white;
    background: rgba(234,3,14,0.45)
}

.notifications .notification.maintenance {
    color: #c4c4c4;
    background: rgba(217,217,217,0.3)
}

.notifications .notification.tip {
    color: white;
    background: #224971
}

.notifications .notification.warning {
    color: white;
    background: #9c6500
}

.toggle-cb-on.symbol, .toggle-cb-off.symbol {
    float: right;
    text-decoration: none;
    display: block;
    color: white
}

    .toggle-cb-on.symbol:hover, .toggle-cb-off.symbol:hover {
        opacity: 0.6
    }

    .toggle-cb-on.symbol i, .toggle-cb-off.symbol i {
        display: inline-block !important;
        margin-top: -1px;
        margin-right: 5px
    }

.page-show {
    padding-bottom: 48px
}

    .page-show hr {
        background: #343f49;
        margin: 2em 0
    }

    .page-show .intro {
        text-align: center;
        margin: 36px auto 48px
    }

        .page-show .intro h1 {
            font-size: 48px;
            text-transform: uppercase
        }

@media (max-width: 480px) {
    .page-show .intro h1 {
        font-size: 24px
    }
}

.page-show .intro h1 small {
    display: inline-block;
    font-size: 24px;
    margin-left: 6px
}

@media (max-width: 480px) {
    .page-show .intro h1 small {
        font-size: 16px
    }
}

.page-show .intro p {
    font-size: 20px;
    padding: 8px 0
}

@media (max-width: 480px) {
    .page-show .intro p {
        font-size: 16px
    }
}

.page-show .intro.intro-smaller {
    max-width: 800px
}

    .page-show .intro.intro-smaller h1 {
        font-size: 28px
    }

    .page-show .intro.intro-smaller p {
        display: block;
        font-size: 16px
    }

        .page-show .intro.intro-smaller p.shortcuts {
            font-size: 14px;
            text-transform: uppercase;
            padding: 0
        }

.page-show .intro.intro-smaller-margin {
    margin: 24px auto
}

.page-show .intro.intro-larger-margin {
    margin: 56px auto
}

.page-show .intro.intro-story h1 {
    font-size: 36px;
    line-height: 48px
}

    .page-show .intro.intro-story h1 span.facet {
        background: #ED3B1C;
        color: white;
        padding: 0 6px
    }

@media (max-width: 480px) {
    .page-show .intro.intro-story h1 {
        font-size: 20px;
        line-height: 28px
    }
}

.page-show .intro.intro-thanks {
    color: #A9CF54
}

    .page-show .intro.intro-thanks h1.check i {
        display: inline-block;
        padding: 24px;
        border-radius: 50%;
        border: 2px solid #A9CF54;
        margin: 12px 0
    }

    .page-show .intro.intro-thanks p.shortcuts {
        margin: 0;
        padding: 0;
        display: block;
        color: #C4C4C4;
        font-size: 12px;
        margin-top: 12px;
        text-transform: uppercase
    }

.page-show .cta {
    padding: 56px 0 48px;
    text-align: center
}

    .page-show .cta h2 {
        color: white;
        font-size: 20px;
        padding: 6px 0
    }

@media (max-width: 480px) {
    .page-show .cta h2 {
        font-size: 16px
    }
}

.page-show .cta p {
    font-size: 16px;
    padding: 6px 0
}

@media (max-width: 480px) {
    .page-show .cta p {
        font-size: 14px
    }
}

@media (max-width: 991px) {
    .page-show .faq {
        padding: 0 6px
    }
}

.page-show .faq .head {
    padding: 12px 0;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase
}

    .page-show .faq .head.dota-box {
        background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0) 40%)
    }

    .page-show .faq .head.head-left {
        text-align: left
    }

    .page-show .faq .head span.small {
        color: #C4C4C4;
        font-style: italic;
        text-transform: lowercase;
        font-size: 12px;
        margin-right: 8px;
        vertical-align: baseline
    }

    .page-show .faq .head small {
        display: block;
        color: #C4C4C4;
        font-size: 12px;
        margin-top: 12px
    }

.page-show .faq .subheader {
    padding: 12px 0;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase
}

.page-show .faq .item {
    margin: 12px 0 24px 0
}

    .page-show .faq .item img {
        max-width: 100%
    }

    .page-show .faq .item h3 {
        color: white;
        font-size: 18px;
        line-height: 22px;
        padding: 6px 0
    }

        .page-show .faq .item h3 small {
            color: #C4C4C4;
            margin-left: 4px;
            font-size: 14px
        }

    .page-show .faq .item p {
        color: #C4C4C4;
        font-size: 16px;
        padding: 6px 0
    }

        .page-show .faq .item p.centered {
            text-align: center
        }

        .page-show .faq .item p.smaller {
            font-size: 14px
        }

    .page-show .faq .item ol, .page-show .faq .item ul {
        color: #C4C4C4;
        font-size: 16px;
        margin-left: 20px
    }

        .page-show .faq .item ol li, .page-show .faq .item ul li {
            line-height: 22px;
            padding: 6px 0
        }

            .page-show .faq .item ol li strong, .page-show .faq .item ul li strong {
                color: white;
                font-weight: bold;
                padding-right: 8px
            }

            .page-show .faq .item ol li em, .page-show .faq .item ul li em {
                color: white;
                text-decoration: underline;
                padding-right: 8px
            }

    .page-show .faq .item ol {
        list-style: decimal outside none
    }

    .page-show .faq .item ul {
        list-style: disc outside none
    }

    .page-show .faq .item.thanks-box {
        border-top: 2px solid #FBB829;
        background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0) 40%);
        padding: 6px 6px 18px 6px;
        min-height: 150px;
        position: relative
    }

        .page-show .faq .item.thanks-box h3 a {
            color: white !important
        }

        .page-show .faq .item.thanks-box.thanks-box-ok {
            border-top: 2px solid #c9e194
        }

        .page-show .faq .item.thanks-box.thanks-box-truesight {
            border-top: 2px solid #A89CEE
        }

        .page-show .faq .item.thanks-box .thanks-cta {
            position: absolute;
            font-size: 18px;
            top: 12px;
            right: 12px
        }

            .page-show .faq .item.thanks-box .thanks-cta a {
                color: #FBB829
            }

.page-show .faq .buttons-group {
    display: flex;
    gap: 16px;
    justify-content: center
}

    .page-show .faq .buttons-group a {
        padding: 16px
    }

.page-show .faq .new-feature {
    display: block
}

    .page-show .faq .new-feature.small {
        max-width: 900px;
        margin: auto
    }

    .page-show .faq .new-feature .new {
        text-align: center;
        color: #A9CF54;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase
    }

    .page-show .faq .new-feature img {
        width: 100%;
        height: auto;
        margin: 16px 0 12px
    }

html.rankings-skin {
    background-image: linear-gradient(#0a0a0a, #112e51 30%, #112e51 85%, #1C242D 100%);
    background-color: #1C242D
}

    html.rankings-skin div.container-inner-content {
        background-color: transparent !important
    }

html.truesight-skin {
    background-image: linear-gradient(#0a0a0a, #2d2269 85%, #1C242D 100%)
}

    html.truesight-skin div.container-inner-content {
        background-color: transparent !important
    }

html.learn-lol-skin {
    background-color: #1C242D;
    background-image: url(/assets/welcome-top-af6097d9c85be5efabf1cc99ea669a6564501abee39853b6807fba545a85223f.jpg),url(/assets/welcome-bottom-931821c4b44900549e5300045ed897b6d6337f25eabd27e84a85797f4d350ea9.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 100%, 100%
}

    html.learn-lol-skin div.container-inner-content {
        background-color: transparent !important
    }

    html.learn-lol-skin .header-nav-primary {
        background: transparent !important;
        box-shadow: none !important
    }

@media (min-width: 992px) {
    html.learn-lol-skin .header-nav-links, html.learn-lol-skin .header-nav-secondary-collection {
        display: none !important
    }
}

html.learn-lol-skin .notification {
    display: none
}

html.premium-skin {
    background-color: #1C242D;
    background-size: contain;
    background-image: url(/assets/reborn-plus-bg-4-768958f91553f3312966f56dfde9365a2e40feff95fae1df8172468cc64f5f07.jpg),linear-gradient(#03080c, #03080c 85%, #1C242D 100%);
    background-position: top center;
    background-repeat: no-repeat
}

    html.premium-skin div.container-inner-content {
        background-color: transparent !important
    }

    html.premium-skin .header-nav-primary {
        background: transparent !important;
        box-shadow: none !important
    }

    html.premium-skin .notification.steam, html.premium-skin .notification.announce {
        display: none
    }

    html.premium-skin .header-nav-search-toggle {
        display: none !important
    }

@media (min-width: 992px) {
    html.premium-skin .header-nav-links, html.premium-skin .header-nav-secondary-collection {
        display: none !important
    }
}

div.page-custom-hero-rankings-gauges {
    margin: 48px 0
}

div.page-custom-truesight-features {
    margin: 72px 0
}

@media (max-width: 991px) {
    div.page-custom-truesight-features {
        display: none
    }
}

div.page-custom-truesight-features .feature {
    position: relative;
    border: 1px solid #E899E8;
    box-shadow: 0 0 150px rgba(238,147,238,0.25);
    display: inline-block;
    width: 470px;
    height: 300px;
    margin-bottom: 12px;
    vertical-align: top
}

    div.page-custom-truesight-features .feature:not(:nth-child(2n)) {
        margin: -50px 24px 0px 0px
    }

    div.page-custom-truesight-features .feature:nth-child(2n) {
        margin: 50px 0px 0px 0px
    }

    div.page-custom-truesight-features .feature .detail {
        position: absolute;
        top: 200px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        padding: 8px 18px;
        background: rgba(10,10,10,0.85)
    }

        div.page-custom-truesight-features .feature .detail h2 {
            color: #A89CEE !important
        }

        div.page-custom-truesight-features .feature .detail p {
            color: white !important;
            font-size: 14px
        }

ul.page-custom-hero-rankings-calculation-explanation {
    text-align: center
}

    ul.page-custom-hero-rankings-calculation-explanation li {
        list-style: none;
        display: inline-block;
        text-transform: uppercase;
        font-family: Arial;
        font-size: 14px;
        font-weight: 100;
        margin-bottom: 8px
    }

    ul.page-custom-hero-rankings-calculation-explanation .operator {
        margin: 0 8px
    }

    ul.page-custom-hero-rankings-calculation-explanation .factor {
        color: white;
        text-shadow: 0 1px 1px rgba(10,10,10,0.4);
        border-radius: 4px;
        padding: 8px
    }

        ul.page-custom-hero-rankings-calculation-explanation .factor small {
            color: #cccccc;
            display: block;
            padding-top: 2px;
            font-size: 10px
        }

    ul.page-custom-hero-rankings-calculation-explanation .score {
        border: 1px solid #A89CEE
    }

    ul.page-custom-hero-rankings-calculation-explanation .division-bonus {
        border: 1px solid #9EC1EB
    }

    ul.page-custom-hero-rankings-calculation-explanation .win-rate {
        border: 1px solid #A9CF54
    }

    ul.page-custom-hero-rankings-calculation-explanation .matches-played {
        border: 1px solid #EA030E
    }

    ul.page-custom-hero-rankings-calculation-explanation .kda-ratio {
        border: 1px solid #F26522
    }

ul.page-custom-hero-rankings-progression {
    text-align: center
}

    ul.page-custom-hero-rankings-progression li {
        list-style: none;
        display: inline-block;
        text-transform: uppercase;
        font-family: Arial;
        font-size: 12px;
        font-weight: 100;
        margin-bottom: 8px
    }

    ul.page-custom-hero-rankings-progression .arrow {
        margin: 0 8px
    }

    ul.page-custom-hero-rankings-progression .division {
        color: white;
        text-shadow: 0 1px 1px rgba(10,10,10,0.4);
        border-radius: 4px;
        padding: 8px
    }

    ul.page-custom-hero-rankings-progression .bronze {
        border: 1px solid #C7783A
    }

    ul.page-custom-hero-rankings-progression .silver {
        border: 1px solid #A9BBAF
    }

    ul.page-custom-hero-rankings-progression .gold {
        border: 1px solid #EEC357
    }

    ul.page-custom-hero-rankings-progression .platinum {
        border: 1px solid #9EC1EB
    }

    ul.page-custom-hero-rankings-progression .diamond {
        border: 1px solid #b5c8f0
    }

    ul.page-custom-hero-rankings-progression .professional {
        border: 1px solid #39CCCC
    }

.page-suggested-heroes .suggested-hero {
    background: #0a0a0a;
    border-radius: 8px;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    vertical-align: top;
    height: 372px;
    overflow: hidden
}

    .page-suggested-heroes .suggested-hero .nameplate {
        position: absolute;
        opacity: 0.5;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 272px;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 100
    }

    .page-suggested-heroes .suggested-hero .details {
        position: absolute;
        top: 172px;
        left: 0px;
        right: 0px;
        z-index: 101;
        text-shadow: 0 0 5px #0a0a0a
    }

        .page-suggested-heroes .suggested-hero .details .name a {
            color: white;
            font-size: 18px;
            font-weight: normal;
            margin-bottom: 6px;
            text-transform: uppercase;
            text-align: center;
            vertical-align: baseline
        }

        .page-suggested-heroes .suggested-hero .details .stats {
            margin-bottom: 6px;
            text-align: center
        }

            .page-suggested-heroes .suggested-hero .details .stats .stat {
                display: inline-block;
                padding: 4px
            }

                .page-suggested-heroes .suggested-hero .details .stats .stat .value {
                    color: white;
                    padding-bottom: 2px
                }

                .page-suggested-heroes .suggested-hero .details .stats .stat .caption {
                    color: rgba(255,255,255,0.6);
                    font-size: 10px;
                    text-transform: uppercase
                }

    .page-suggested-heroes .suggested-hero .attribute {
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 101
    }

        .page-suggested-heroes .suggested-hero .attribute > img {
            width: 22px;
            height: 22px
        }

    .page-suggested-heroes .suggested-hero .difficulty {
        position: absolute;
        top: 152px;
        left: 0px;
        right: 0px;
        z-index: 101;
        font-size: 12px;
        text-align: center;
        text-transform: uppercase
    }

    .page-suggested-heroes .suggested-hero .champions {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 101
    }

        .page-suggested-heroes .suggested-hero .champions .champion {
            display: inline-block;
            box-sizing: border-box;
            opacity: 1;
            margin-left: 6px;
            width: 22px;
            height: 22px;
            border: 1px solid rgba(255,255,255,0.2);
            background-position: center center;
            background-size: 130%;
            border-radius: 50%;
            text-indent: -2000px
        }

    .page-suggested-heroes .suggested-hero .abilities {
        position: absolute;
        top: 232px;
        left: 0px;
        right: 0px;
        z-index: 101
    }

        .page-suggested-heroes .suggested-hero .abilities .image-container {
            border: 1px solid rgba(10,10,10,0.5);
            box-shadow: 0 0 10px rgba(10,10,10,0.5)
        }

    .page-suggested-heroes .suggested-hero .roles {
        position: absolute;
        top: 274px;
        left: 0px;
        right: 0px;
        z-index: 101
    }

        .page-suggested-heroes .suggested-hero .roles .role {
            text-align: center;
            padding: 4px;
            width: 33%
        }

            .page-suggested-heroes .suggested-hero .roles .role .label {
                color: rgba(255,255,255,0.6);
                font-size: 10px;
                text-transform: uppercase
            }

.page-lol-champions .champions-pool {
    text-align: center
}

.page-lol-champions .champion {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.7;
    margin: 4px;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255,255,255,0.1);
    background-position: center center;
    background-size: 130%;
    border-radius: 50%;
    text-indent: -2000px
}

    .page-lol-champions .champion:hover {
        opacity: 0.85
    }

    .page-lol-champions .champion.active {
        opacity: 1.0;
        border: 2px solid white
    }

.page-lol-champions .heroes-suggested {
    vertical-align: top
}

    .page-lol-champions .heroes-suggested .hero {
        position: relative;
        padding-left: 84px;
        margin-bottom: 12px;
        min-height: 100px
    }

        .page-lol-champions .heroes-suggested .hero .image {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 72px
        }

            .page-lol-champions .heroes-suggested .hero .image img {
                width: 100%;
                height: auto
            }

        .page-lol-champions .heroes-suggested .hero .name {
            font-size: 16px;
            color: white;
            text-transform: uppercase
        }

        .page-lol-champions .heroes-suggested .hero .roles {
            color: #C4C4C4
        }

.hiring-tabs li a {
    display: block;
    color: #C4C4C4;
    padding: 6px
}

    .hiring-tabs li a.active {
        color: white;
        background: #54c1a3
    }

.hiring-pane {
    color: #C4C4C4;
    font-size: 16px
}

    .hiring-pane h1, .hiring-pane h2, .hiring-pane h3 {
        font-size: 22px;
        color: white;
        line-height: 150%
    }

    .hiring-pane p {
        line-height: 150%;
        padding: 8px 0
    }

    .hiring-pane ol, .hiring-pane ul {
        margin-left: 20px
    }

        .hiring-pane ol li, .hiring-pane ul li {
            line-height: 150%;
            padding: 6px 0
        }

    .hiring-pane ol {
        list-style: decimal outside none
    }

    .hiring-pane ul {
        list-style: disc outside none
    }

.more-plus-benefits .faq-divider {
    position: absolute;
    top: 10px;
    right: 20px;
    bottom: 10px;
    width: 1px;
    background: #252E37
}

.more-plus-benefits .item > div {
    display: block;
    padding: 6px 0;
    font-size: 16px;
    vertical-align: middle
}

    .more-plus-benefits .item > div.plus {
        display: inline-block;
        width: 50%;
        color: white
    }

        .more-plus-benefits .item > div.plus i {
            color: #FBB829
        }

.more-plus-benefits .item i {
    color: white;
    font-size: 24px;
    vertical-align: middle;
    margin-right: 10px
}

nav.pagination {
    margin: 12px 0
}

    nav.pagination ul li {
        display: inline-block
    }

        nav.pagination ul li > a, nav.pagination ul li div {
            display: block
        }

    nav.pagination span {
        color: #C4C4C4;
        display: inline-block;
        text-align: center;
        margin: 5px 0 0 0
    }

        nav.pagination span a {
            display: block;
            height: 100%;
            padding: 8px 10px
        }

            nav.pagination span a:hover {
                background: #2E3740
            }

    nav.pagination .page.gap {
        background: transparent;
        color: #d9d9d9
    }

    nav.pagination .current {
        color: white;
        background: #2E3740;
        padding: 8px 10px
    }

.viewport {
    float: right;
    margin: 15px 4px 0 0;
    color: #d9d9d9
}

@media (max-width: 768px) {
    .viewport {
        float: none
    }
}

.pc-header-banner {
    display: block
}

    .pc-header-banner:hover {
        text-decoration: none !important;
        opacity: 0.8
    }

    .pc-header-banner article {
        background-image: url(/assets/pro-circuit-header-cd912a2b1546159cf46c29513514decab2475213a03c3a194b6d3e0c1d94dbc2.jpg);
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 100px;
        border: 1px solid #39CCCC
    }

    .pc-header-banner p {
        text-align: center;
        color: white;
        text-shadow: 1px 1px 1px #000 !important
    }

    .pc-header-banner .header {
        font-size: 2em;
        text-transform: uppercase;
        margin-top: 10px;
        margin-bottom: -4px
    }

    .pc-header-banner .subtitle {
        text-align: center
    }

.pc-skin {
    background-image: url(/assets/pc-bg-d6b9f9b80eddc529d55b22d23d1f6b351600b0b821e88acdf68f22890289bee4.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 1500px
}

    .pc-skin acronym[title] {
        border-bottom: 1px dotted rgba(217,217,217,0.3);
        cursor: inherit
    }

    .pc-skin .content-inner {
        line-height: 1.4em
    }

    .pc-skin .important {
        color: white
    }

    .pc-skin .minor {
        color: #c17e42
    }

    .pc-skin .major {
        color: #cc4040
    }

    .pc-skin .international {
        color: #39cccc
    }

    .pc-skin time {
        cursor: inherit
    }

    .pc-skin .no-data {
        background: rgba(11,19,19,0.8);
        padding: 12px
    }

    .pc-skin h1 {
        font-size: 2.4em;
        color: white;
        line-height: 1em;
        text-transform: capitalize
    }

    .pc-skin a[href^="/esports"] {
        color: white
    }

    .pc-skin a[href^="/procircuit"] {
        color: #39CCCC
    }

    .pc-skin a:hover {
        color: white
    }

    .pc-skin section header {
        color: #39CCCC;
        margin: 0 0 3px;
        padding: 0 3px
    }

        .pc-skin section header .more {
            top: 0
        }

        .pc-skin section header a {
            color: #39CCCC
        }

    .pc-skin article {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0
    }

    .pc-skin table td, .pc-skin table th {
        padding: 6px 3px
    }

        .pc-skin table td:first-child, .pc-skin table th:first-child {
            padding-left: 6px
        }

        .pc-skin table td:last-child, .pc-skin table th:last-child {
            padding-right: 6px
        }

    .pc-skin table thead tr {
        background-color: transparent
    }

    .pc-skin table thead th {
        font-weight: normal;
        padding: 3px
    }

    .pc-skin table .large {
        font-size: 1.2em
    }

    .pc-skin table tr {
        background: rgba(11,19,19,0.6)
    }

        .pc-skin table tr:nth-child(2n) {
            background: rgba(11,19,19,0.8)
        }

    .pc-skin .low-light, .pc-skin a.low-light {
        color: rgba(255,255,255,0.6)
    }

    .pc-skin .main-header {
        padding: 3px;
        margin-bottom: 3px
    }

        .pc-skin .main-header .subtitle {
            margin: 5px 0 10px
        }

    .pc-skin header {
        margin-bottom: 10px
    }

        .pc-skin header .subtitle {
            margin: 15px 0 10px;
            text-transform: none
        }

    .pc-skin .container-inner-content {
        background-color: transparent
    }

    .pc-skin .series-table .team img {
        background-color: transparent
    }

    .pc-skin .team-standings .team-image {
        margin-right: 6px
    }

    .pc-skin .team-standings td {
        position: relative
    }

        .pc-skin .team-standings td .pending-series {
            position: absolute;
            right: -8px;
            top: 14px
        }

    .pc-skin .pending-series {
        color: rgba(255,255,255,0.6);
        font-size: 12px;
        z-index: 100
    }

    .pc-skin .pc-entry {
        background: rgba(11,19,19,0.6)
    }

        .pc-skin .pc-entry:not(.stacked) {
            margin-bottom: 6px
        }

        .pc-skin .pc-entry .datetime {
            color: rgba(255,255,255,0.6)
        }

        .pc-skin .pc-entry:nth-child(2n) {
            background: rgba(11,19,19,0.8)
        }

    .pc-skin a.pc-entry:hover, .pc-skin a.pc-entry:focus {
        background: rgba(11,19,19,0.9);
        box-shadow: 0 0 10px rgba(0,0,0,0.5)
    }

    .pc-skin .pc-blog-posts a {
        padding: 6px;
        display: block;
        color: white
    }

        .pc-skin .pc-blog-posts a small {
            color: rgba(255,255,255,0.6);
            font-size: 0.9em
        }

    .pc-skin .pc-events .pc-event {
        display: block
    }

    .pc-skin .pc-events .image {
        margin-bottom: -5px
    }

        .pc-skin .pc-events .image img {
            width: 100%;
            height: auto;
            max-width: 400px
        }

    .pc-skin .pc-events .description {
        padding: 6px 6px 0 6px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }

        .pc-skin .pc-events .description .datetime {
            flex: 1 0 100%;
            margin-bottom: 6px;
            font-size: 0.9em
        }

        .pc-skin .pc-events .description h2.title {
            margin: 0 0 6px;
            padding: 0 !important
        }

        .pc-skin .pc-events .description .title {
            flex: 1 1 65%
        }

        .pc-skin .pc-events .description .designation {
            flex: 1 1 35%;
            text-align: right;
            text-transform: uppercase
        }

        .pc-skin .pc-events .description .placements {
            flex-basis: 100%;
            flex-grow: 1;
            flex-shrink: 1
        }

            .pc-skin .pc-events .description .placements .team-image {
                position: relative;
                top: 2px;
                margin-right: 2px
            }

    .pc-skin .pc-events.large .pc-event {
        display: flex;
        flex-wrap: wrap
    }

        .pc-skin .pc-events.large .pc-event .image {
            flex: 0 0 255px;
            width: 100%;
            height: auto
        }

@media (max-width: 480px) {
    .pc-skin .pc-events.large .pc-event .image {
        flex-basis: 100%
    }
}

.pc-skin .pc-events.large .pc-event .description {
    flex: 1 1 auto;
    display: flex;
    padding: 6px
}

    .pc-skin .pc-events.large .pc-event .description .datetime {
        font-size: 1em
    }

@media (min-width: 768px) {
    .pc-skin .pc-events.large .pc-event .description {
        flex: 1 1 calc(100% - 350px)
    }
}

.pc-skin .pc-events.large .pc-event .description .line {
    flex: 1 1 100%
}

.pc-skin .pc-events.large .pc-event .description .title {
    padding: 6px 0
}

.pc-skin .pc-events.large .pc-event .description h2 {
    font-size: 2em;
    margin-bottom: 0;
    line-height: 1.2em
}

.pc-skin .pc-events.large .pc-event .invites-placements {
    padding: 6px;
    width: 100%
}

    .pc-skin .pc-events.large .pc-event .invites-placements h3 {
        margin: 0 0 6px
    }

    .pc-skin .pc-events.large .pc-event .invites-placements .placements {
        display: flex;
        flex-wrap: wrap
    }

        .pc-skin .pc-events.large .pc-event .invites-placements .placements .placement {
            flex: 1 1 auto
        }

@media (min-width: 768px) {
    .pc-skin .pc-events.large .pc-event .invites-placements .placements .placement {
        flex: 1 1 50%
    }
}

@media (min-width: 768px) {
    .pc-skin .pc-events.large .pc-event .invites-placements .placements.teams-only .placement {
        flex: 0 1 25%
    }
}

.pc-skin .pc-series article:nth-child(2n) {
    margin-bottom: 25px
}

.pc-skin .pc-series .pc-entry {
    padding: 6px;
    display: flex;
    flex-wrap: wrap
}

    .pc-skin .pc-series .pc-entry .team {
        flex: 1 1 40px;
        display: flex;
        flex-wrap: wrap
    }

        .pc-skin .pc-series .pc-entry .team .team-image img {
            vertical-align: middle;
            width: 45px;
            height: auto
        }

        .pc-skin .pc-series .pc-entry .team .name {
            flex: 1 1 auto;
            font-size: 1em;
            align-self: center
        }

            .pc-skin .pc-series .pc-entry .team .name.tba {
                color: rgba(255,255,255,0.6)
            }

            .pc-skin .pc-series .pc-entry .team .name.lost-series {
                text-decoration: line-through
            }

        .pc-skin .pc-series .pc-entry .team .image {
            align-self: center;
            flex: 0 0 45px
        }

            .pc-skin .pc-series .pc-entry .team .image a {
                display: inline
            }

        .pc-skin .pc-series .pc-entry .team .line {
            flex: 1 1 100%;
            font-size: 0.8em
        }

    .pc-skin .pc-series .pc-entry .left-team {
        text-align: right
    }

        .pc-skin .pc-series .pc-entry .left-team .image {
            margin-left: 6px
        }

    .pc-skin .pc-series .pc-entry .right-team .image {
        margin-right: 6px
    }

    .pc-skin .pc-series .pc-entry .vs {
        align-self: center;
        color: rgba(255,255,255,0.6);
        flex: 0 0 30px;
        font-size: 0.9em;
        text-align: center
    }

    .pc-skin .pc-series .pc-entry .score {
        flex: 0 0 40px;
        align-self: center;
        text-align: center;
        padding: 6px;
        margin: 0 6px;
        background: #173c3a
    }

    .pc-skin .pc-series .pc-entry .odds {
        color: rgba(255,255,255,0.6);
        margin-top: 6px;
        font-size: 0.9em;
        text-align: center;
        flex: 1 1 100%
    }

        .pc-skin .pc-series .pc-entry .odds .left-team {
            color: #EF4343;
            display: inline-block;
            width: 45px;
            text-align: center
        }

        .pc-skin .pc-series .pc-entry .odds .sep {
            display: inline-block;
            width: 30px;
            text-align: center
        }

        .pc-skin .pc-series .pc-entry .odds .right-team {
            color: #EF4343;
            display: inline-block;
            width: 45px;
            text-align: center
        }

    .pc-skin .pc-series .pc-entry .description {
        color: rgba(255,255,255,0.6);
        margin-top: 6px;
        font-size: 0.9em;
        text-align: center;
        flex: 1 1 100%
    }

    .pc-skin .pc-series .pc-entry .bracket-name, .pc-skin .pc-series .pc-entry .datetime {
        color: rgba(255,255,255,0.6);
        flex: 1 1 50%;
        font-size: 0.9em;
        margin-bottom: 6px
    }

    .pc-skin .pc-series .pc-entry .datetime {
        text-align: right
    }

    .pc-skin .pc-series .pc-entry .left-side {
        flex: 1 0 30%
    }

    .pc-skin .pc-series .pc-entry .right-side {
        flex: 1 0 70%;
        display: flex
    }

        .pc-skin .pc-series .pc-entry .right-side .team {
            align-self: center
        }

        .pc-skin .pc-series .pc-entry .right-side .image {
            margin-top: 4px;
            margin-bottom: 4px
        }

    .pc-skin .pc-series .pc-entry .left-side .datetime, .pc-skin .pc-series .pc-entry .left-side .description, .pc-skin .pc-series .pc-entry .left-side .bracket-name, .pc-skin .pc-series .pc-entry .left-side .odds {
        text-align: left;
        margin: 0
    }

.pc-skin .pc-live a.pc-entry {
    background-color: #173c3a
}

    .pc-skin .pc-live a.pc-entry:hover, .pc-skin .pc-live a.pc-entry:focus {
        background-color: #102a28
    }

.pc-skin .pc-series.full article {
    display: flex;
    flex-wrap: wrap
}

    .pc-skin .pc-series.full article .outer {
        flex: 1 1 300px;
        display: flex;
        margin: 3px 3px;
        box-sizing: border-box
    }

@media (min-width: 992px) {
    .pc-skin .pc-series.full article .outer {
        flex: 0 1 32%
    }
}

.pc-skin .pc-series.full article .outer .pc-entry {
    flex: 1 1 auto;
    margin: 0
}

.pc-skin .pc-team-profiles .pc-entry {
    padding: 6px;
    display: flex;
    flex-wrap: wrap
}

    .pc-skin .pc-team-profiles .pc-entry .subtitle {
        margin: 4px 0;
        text-transform: uppercase;
        font-size: 0.9em
    }

    .pc-skin .pc-team-profiles .pc-entry .team-image {
        flex: 1 1 150px;
        margin-right: 6px;
        align-self: center;
        min-width: 100px;
        text-align: center
    }

        .pc-skin .pc-team-profiles .pc-entry .team-image img {
            width: 100%;
            height: auto;
            max-width: 150px
        }

    .pc-skin .pc-team-profiles .pc-entry .right-side {
        padding: 6px;
        flex: 9 1 auto
    }

    .pc-skin .pc-team-profiles .pc-entry .team-line {
        display: flex;
        text-align: right;
        flex-wrap: wrap
    }

        .pc-skin .pc-team-profiles .pc-entry .team-line > div {
            flex: 1 1 auto
        }

    .pc-skin .pc-team-profiles .pc-entry .team-name {
        text-align: left;
        flex-basis: 300px !important;
        flex-shrink: 0 !important
    }

        .pc-skin .pc-team-profiles .pc-entry .team-name .name {
            font-size: 2em
        }

    .pc-skin .pc-team-profiles .pc-entry .player-line {
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap
    }

        .pc-skin .pc-team-profiles .pc-entry .player-line > div {
            flex: 1 1 auto;
            text-align: center
        }

    .pc-skin .pc-team-profiles .pc-entry .team-qp {
        position: relative
    }

    .pc-skin .pc-team-profiles .pc-entry .team-player-entry img {
        height: 100px;
        width: auto
    }

    .pc-skin .pc-team-profiles .pc-entry .event-line {
        line-height: 1.6em;
        flex: 1 1 100%
    }

.pc-skin .pc-hero-meta .equal {
    width: 70px
}

.pc-skin .pc-hero-meta .equal-wide {
    width: 100px
}

.pc-skin .pc-hero-meta .image-hero {
    height: 32px
}

.pc-skin .pc-hero-meta .hero {
    line-height: 1.2em
}

    .pc-skin .pc-hero-meta .hero .image-container-hero {
        margin-bottom: -3px
    }

.pc-skin .pc-hero-meta .cell-divider {
    border-left: 1px solid rgba(255,255,255,0.1) !important
}

.pc-skin .pc-hero-meta .nav {
    clear: both;
    padding-top: 6px;
    margin-bottom: 3px
}

@media (max-width: 480px) {
    .pc-skin .pc-hero-meta .nav {
        margin-left: 3px
    }
}

.pc-skin .pc-hero-meta .nav p {
    color: rgba(255,255,255,0.6);
    display: inline;
    padding: 3px;
    margin-right: 6px
}

.pc-skin .pc-hero-meta .nav nav {
    display: inline
}

    .pc-skin .pc-hero-meta .nav nav ul {
        display: inline
    }

        .pc-skin .pc-hero-meta .nav nav ul li.active a, .pc-skin .pc-hero-meta .nav nav ul li a:hover {
            box-shadow: none;
            color: white;
            background-color: rgba(11,19,19,0.8)
        }

        .pc-skin .pc-hero-meta .nav nav ul li a {
            padding: 6px
        }

@media (max-width: 480px) {
    .pc-skin .pc-hero-meta .nav nav ul li a {
        font-size: 0.9em;
        padding: 3px
    }
}

.pc-skin .pc-hero-meta .settings {
    padding-left: 3px
}

    .pc-skin .pc-hero-meta .settings .group {
        display: inline-block;
        margin-right: 12px
    }

        .pc-skin .pc-hero-meta .settings .group .label {
            color: rgba(255,255,255,0.6);
            display: inline;
            font-size: 0.9em
        }

        .pc-skin .pc-hero-meta .settings .group .setting {
            display: inline-block;
            margin: 0
        }

.pc-skin .pc-hero-meta table.main-heroes thead tr {
    background-color: rgba(11,19,19,0.8)
}

    .pc-skin .pc-hero-meta table.main-heroes thead tr th {
        padding-left: 6px
    }

.pc-skin .segment-win-rate {
    background-color: #217e7e
}

.pc-skin .placeholder {
    padding: 6px;
    text-align: center;
    line-height: 2em
}

.pc-skin .not-in-cm {
    opacity: 0.4;
    text-decoration: line-through
}

.pc-skin .ClipGrid .title a {
    padding: 0 6px;
    color: white;
    font-size: 0.9em
}

@media (max-width: 480px) {
    .pc-skin .ClipGrid .ClipGridEntry:nth-child(2n), .pc-skin .ClipGrid .ClipGridEntry:nth-child(3n) {
        display: none !important
    }
}

.pc-skin .live-indicator {
    display: inline-block;
    height: 14px;
    width: 14px;
    position: relative;
    top: 1px;
    margin-left: 6px;
    border-radius: 7px;
    background-color: red;
    animation: match-timeline-live-indicator-pulsate 2s ease-out;
    animation-iteration-count: infinite
}

@-webkit-keyframes match-timeline-live-indicator-pulsate {
    0% {
        background-color: #242F39
    }

    50% {
        background-color: #FF0000
    }

    100% {
        background-color: #242F39
    }
}

.remote-loading {
    margin-bottom: 15px;
    padding: 30px 0;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle
}

input.search-results-filter[type=text] {
    position: absolute;
    top: 0px;
    right: -2px
}

.search-result-groups {
    background: #2E3740
}

    .search-result-groups .group {
        position: relative
    }

        .search-result-groups .group span.count {
            float: right;
            padding: 12px
        }

        .search-result-groups .group a {
            display: block;
            padding: 12px
        }

            .search-result-groups .group a:hover {
                background: #242F39
            }

        .search-result-groups .group.none {
            opacity: 0.4
        }

            .search-result-groups .group.none a {
                color: #C4C4C4;
                cursor: default
            }

                .search-result-groups .group.none a:hover {
                    background: transparent
                }

@media (max-width: 768px) {
    .search-result-groups .group {
        display: inline-block;
        width: 50%
    }
}

.search-results {
    margin: -4px
}

    .search-results .result {
        display: inline-block;
        width: 33.33%;
        vertical-align: text-top
    }

@media (max-width: 480px) {
    .search-results .result {
        display: block;
        width: 100%
    }

        .search-results .result .link-type-player {
            max-width: 90% !important
        }
}

.search-results .result .inner {
    padding: 4px;
    margin: 4px;
    background: #2E3740;
    white-space: nowrap
}

    .search-results .result .inner .avatar {
        display: inline-block;
        margin-right: 8px;
        vertical-align: top
    }

    .search-results .result .inner .identity {
        display: inline-block;
        vertical-align: top
    }

        .search-results .result .inner .identity .head {
            max-width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

            .search-results .result .inner .identity .head a {
                color: white;
                font-size: 16px;
                line-height: 150%
            }

        .search-results .result .inner .identity .body {
            max-width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #C4C4C4;
            font-size: 12px
        }

            .search-results .result .inner .identity .body .body-item {
                padding: 2px 0
            }

@media (min-width: 992px) {
    .search-results .result.result-hero, .search-results .result.result-match, .search-results .result.result-topic {
        width: 100%
    }
}

@media (min-width: 992px) {
    .search-results .result.result-item {
        width: 50%
    }
}

.search-results .result.result-team .avatar img, .search-results .result.result-player .avatar img {
    width: 42px;
    height: auto
}

@media (min-width: 992px) {
    .search-results .result.result-team .identity .head, .search-results .result.result-team .identity .body, .search-results .result.result-player .identity .head, .search-results .result.result-player .identity .body {
        max-width: 170px
    }
}

.search-results .result.result-league .avatar {
    display: block;
    margin-right: 0
}

    .search-results .result.result-league .avatar img {
        width: 100%;
        height: auto;
        margin-bottom: 5px
    }

.search-results .result.result-league .identity {
    display: block
}

@media (min-width: 992px) {
    .search-results .result.result-league .identity .head {
        max-width: 220px
    }
}

@media (max-width: 480px) {
    .home .search-area {
        width: 100% !important
    }

        .home .search-area #search-input {
            width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box
        }
}

[data-search-link] {
    cursor: pointer
}

    [data-search-link] time {
        cursor: pointer
    }

    [data-search-link]:hover {
        background: rgba(255,255,255,0.05) !important
    }

section {
    margin-bottom: 12px
}

@media (max-width: 991px) {
    section {
        padding: 0 4px
    }
}

section .pager {
    position: relative;
    z-index: 1000;
    float: right;
    margin: -6px 0 0 0
}

    section .pager ~ article {
        clear: right
    }

section header {
    font-size: 16px;
    color: white;
    position: relative;
    padding: 6px 4px;
    text-shadow: 1px 1px 2px black;
    text-transform: uppercase;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

    section header.no-padding {
        padding: 0
    }

    section header small {
        color: rgba(255,255,255,0.6);
        font-size: 12px;
        margin-left: 4px;
        text-shadow: none
    }

    section header .more, section header .spoiler-toggle {
        position: absolute;
        top: 10px;
        right: 4px;
        font-size: 12px
    }

        section header .more i, section header .spoiler-toggle i {
            font-size: 11px
        }

        section header .more a, section header .spoiler-toggle a {
            display: block;
            color: white;
            margin-left: 10px
        }

            section header .more a:hover, section header .spoiler-toggle a:hover {
                color: #A9CF54;
                opacity: 0.8
            }

    section header big {
        float: right
    }

        section header big.social {
            text-transform: none;
            margin: -6px -4px 0 0
        }

            section header big.social > a.button {
                width: 26px;
                padding: 4px 0;
                text-align: center
            }

        section header big.esports {
            margin: -2px -7px 0 0
        }

    section header.filter {
        padding: 8px 8px 12px 8px
    }

        section header.filter big {
            margin-top: -4px;
            margin-right: -16px
        }

            section header.filter big .selectBox-arrow {
                position: absolute;
                top: 0px;
                right: 8px
            }

section footer {
    margin: 0 0 12px 0
}

    section footer p {
        color: #cccccc
    }

        section footer p em {
            color: white;
            font-weight: bold
        }

    section footer dl dt {
        display: none
    }

    section footer.footnote {
        font-size: 0.9em;
        font-weight: 200;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
        color: #d9d9d9;
        padding: 6px 4px 0 0
    }

section article {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    border: 1px solid #242F39;
    border-radius: 1px;
    background: #242F39;
    padding: 4px;
    clear: right
}

    section article p {
        color: #cccccc;
        padding: 4px
    }

        section article p em {
            color: white;
            font-weight: bold
        }

    section article > form {
        padding: 4px
    }

section > p {
    padding: 8px 8px 8px 0
}

    section > p strong {
        color: white
    }

p.footnote {
    color: #C4C4C4;
    font-size: 12px;
    margin: 6px 0
}

@media (max-width: 991px) {
    p.footnote {
        padding: 0 4px
    }
}

.spoiler-toggle {
    cursor: pointer
}

    .spoiler-toggle:hover {
        color: #A9CF54
    }

    .spoiler-toggle .shown {
        display: none
    }

.js-show-spoiler .loser {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    -webkit-filter: grayscale(100%);
    text-decoration: line-through
}

    .js-show-spoiler .loser .dire, .js-show-spoiler .loser .radiant {
        color: #cccccc
    }

.js-show-spoiler .spoiler-toggle .hidden {
    display: none
}

.js-show-spoiler .spoiler-toggle .shown {
    display: block
}

i.fa {
    display: inline-block
}

    i.fa.fa-space {
        margin-left: 6px
    }

    i.fa.fa-space-right {
        margin-right: 4px
    }

.fa-admin {
    display: inline-block;
    font-family: Arial;
    font-weight: normal;
    display: inline !important;
    cursor: default;
    color: white;
    background: #ED3B1C;
    padding: 0px 2px;
    line-height: 16px
}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    .fa-admin {
        padding-bottom: 0px
    }
}

.fa-twitch {
    position: relative;
    top: 1px
}

a > i {
    cursor: pointer !important
}

i[rel=expandable] {
    transform: rotate(0deg);
    transition: 100ms ease all
}

i.expanded[rel=expandable] {
    transform: rotate(90deg)
}

table {
    width: 100%;
    font-size: 12px;
    text-align: left
}

    table.table-condensed th {
        padding: 4px 2px
    }

    table.table-condensed td {
        padding: 2px
    }

    table.table-horizontally-condensed th {
        padding: 4px 2px
    }

    table.table-horizontally-condensed td {
        padding: 4px 2px
    }

    table span.sep {
        color: rgba(255,255,255,0.6);
        font-weight: normal;
        padding: 0 2px
    }

    table tbody {
        color: #d9d9d9
    }

        table tbody tr {
            background: rgba(255,255,255,0.04)
        }

            table tbody tr.faction-radiant {
                background: rgba(146,165,37,0.12);
                color: white
            }

            table tbody tr.faction-dire {
                background: rgba(194,60,42,0.12);
                color: white
            }

            table tbody tr:nth-child(2n) {
                background: rgba(255,255,255,0.02)
            }

            table tbody tr.faction-radiant:nth-child(2n) {
                background: rgba(146,165,37,0.06);
                color: white
            }

            table tbody tr.faction-dire:nth-child(2n) {
                background: rgba(194,60,42,0.06);
                color: white
            }

            table tbody tr.admin-deleted {
                background: #3b333f;
                color: #a6a6a6
            }

                table tbody tr.admin-deleted a {
                    color: #a6a6a6 !important
                }

            table tbody tr.inactive {
                color: #a6a6a6
            }

                table tbody tr.inactive a {
                    color: #a6a6a6 !important
                }

                table tbody tr.inactive .bar, table tbody tr.inactive .image-container {
                    opacity: 0.7
                }

            table tbody tr.divider td {
                font-size: 1.1em;
                font-weight: bold;
                color: white;
                padding: 8px 4px
            }

            table tbody tr.taller td {
                vertical-align: top
            }

            table tbody tr.expandable {
                display: none;
                font-size: 11px;
                background: rgba(10,10,10,0.35)
            }

                table tbody tr.expandable:nth-child(2n) {
                    background: rgba(10,10,10,0.45)
                }

                table tbody tr.expandable.expanded {
                    display: table-row
                }

    table thead {
        font-weight: bold
    }

        table thead acronym {
            border-bottom: 1px dotted rgba(217,217,217,0.3);
            cursor: default
        }

        table thead tr .note {
            color: #bfbfbf;
            font-size: 11px;
            vertical-align: baseline;
            margin: 0 0 2px 2px
        }

        table thead tr.sub {
            font-weight: normal
        }

            table thead tr.sub th {
                vertical-align: bottom
            }

                table thead tr.sub th .subtext {
                    font-size: 10px
                }

    table th, table td {
        padding: 4px;
        vertical-align: middle
    }

        table th acronym, table td acronym {
            border-bottom: 1px dotted rgba(217,217,217,0.3);
            cursor: default
        }

        table th .toptext, table td .toptext {
            font-size: 1.1em;
            margin-bottom: 5px
        }

        table th .viz, table td .viz {
            display: block;
            vertical-align: bottom
        }

            table th .viz.eqbar, table td .viz.eqbar {
                padding-top: 6px
            }

            table th .viz.minor, table td .viz.minor {
                color: #A0A0A0
            }

                table th .viz.minor a, table td .viz.minor a {
                    color: #A0A0A0 !important;
                    cursor: pointer
                }

                    table th .viz.minor a > time, table td .viz.minor a > time {
                        cursor: pointer
                    }

            table th .viz .label, table td .viz .label {
                background: rgba(10,10,10,0.2);
                border-radius: 1px;
                padding: 3px;
                text-shadow: 1px 1px 0px rgba(10,10,10,0.6)
            }

                table th .viz .label.positive, table td .viz .label.positive {
                    background: rgba(159,201,64,0.8);
                    color: white !important
                }

                table th .viz .label.negative, table td .viz .label.negative {
                    background: rgba(173,54,37,0.8);
                    color: white !important
                }

        table th .bar, table td .bar {
            margin-bottom: 6px
        }

        table th .histogram .bar, table td .histogram .bar {
            margin: 0
        }

            table th .histogram .bar:last-child, table td .histogram .bar:last-child {
                margin-bottom: 6px
            }

            table th .histogram .bar:first-child, table td .histogram .bar:first-child {
                margin-top: 6px
            }

    table thead th {
        color: white;
        padding: 6px 4px
    }

    table tfoot td {
        color: white;
        height: 25px
    }

    table tfoot.tiny-legend td {
        color: #999999;
        height: 10px;
        font-size: 10px;
        text-transform: uppercase
    }

        table tfoot.tiny-legend td span.popularity-arrow {
            cursor: default;
            position: relative;
            border-bottom: 1px solid #999999;
            padding-bottom: 1px;
            display: inline-block;
            margin-left: 35px;
            text-align: center;
            width: 120px
        }

            table tfoot.tiny-legend td span.popularity-arrow i {
                font-size: 6px;
                position: absolute;
                bottom: -4px;
                right: -2px
            }

        table tfoot.tiny-legend td span.win-delta {
            cursor: default;
            float: right;
            position: relative;
            padding-bottom: 2px;
            margin-right: 2px;
            display: inline-block
        }

    table .single-lines {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    table .no-wrap {
        white-space: nowrap
    }

    table .cell-strong {
        color: white;
        font-weight: bold
    }

    table .cell-explanation {
        padding: 8px 0;
        color: #999999;
        font-size: 13px;
        line-height: 16px;
        text-align: center;
        vertical-align: middle
    }

        table .cell-explanation.cell-explanation-left {
            text-align: left
        }

        table .cell-explanation.super-wide {
            position: absolute
        }

    table .cell-match-hero-avatar {
        width: 50px
    }

    table .cell-match-player-name {
        max-width: 120px;
        vertical-align: middle;
        overflow: hidden;
        padding: 0 4px;
        line-height: 1.2em
    }

        table .cell-match-player-name i {
            position: relative;
            left: 3px
        }

        table .cell-match-player-name .subtext {
            margin-top: -0.2em
        }

    table .cell-match-player-avatar {
        width: 28px
    }

    table .cell-centered {
        text-align: center
    }

        table .cell-centered .image-container {
            display: inline-block
        }

    table .cell-right {
        text-align: right
    }

        table .cell-right .image-container {
            display: inline-block
        }

    table .cell-hero-icon {
        max-width: 40px;
        width: 60px
    }

    table .cell-player-icon {
        max-width: 32px;
        width: 32px
    }

    table .cell-fa-icon {
        max-width: 20px;
        width: 20px;
        text-align: center;
        padding: 0 2px
    }

    table .cell-min-stat {
        max-width: 30px;
        width: 30px
    }

@media (max-width: 480px) {
    table .cell-min-stat {
        padding: 0 4px
    }
}

table .cell-minor {
    color: rgba(255,255,255,0.6)
}

    table .cell-minor .slash {
        opacity: 0.3
    }

table th.cell-minor {
    font-weight: normal
}

@media (min-width: 768px) {
    table td.cell-divider, table th.cell-divider {
        border-left: 1px solid rgba(10,10,10,0.1);
        padding-left: 8px
    }

    table th {
        box-sizing: border-box
    }

    table .cell-tiny {
        width: 24px
    }

    table .cell-smallicon {
        width: 28px
    }

    table .cell-stat {
        width: 40px
    }

    table .cell-small {
        width: 36px
    }

    table .cell-icon {
        width: 42px
    }

    table .cell-avatar {
        width: 48px
    }

    table .cell-submedium {
        width: 60px
    }

    table .cell-medium {
        width: 80px
    }

    table .cell-extramedium {
        width: 110px
    }

    table .cell-mediumlarge {
        width: 124px
    }

    table .cell-large {
        width: 140px
    }

    table .cell-mmlarge {
        width: 175px
    }

    table .cell-xlarge {
        width: 200px
    }

    table .cell-xxlarge {
        width: 240px
    }

    table .cell-items {
        width: 245px
    }

    table .cell-items-dual {
        width: 95px
    }
}

table tr[data-link-to]:hover {
    background: rgba(255,255,255,0.15)
}

table .img-icon.img-team {
    width: 46px
}

table .img-icon.img-league {
    width: 56px;
    margin-right: 0;
    margin-bottom: 0
}

.esports-skin .no-divider .cell-divider {
    border-left: none !important
}

.table-actions {
    margin: 12px 0 0 0
}

.legend table {
    width: auto
}

td.legendColorBox {
    padding: 0;
    margin: 0
}

    td.legendColorBox div {
        padding: 0;
        margin: 0
    }

table.sortable th.sorted, table.server-sort th.sorted {
    color: white;
    white-space: nowrap
}

table.sortable th.nosort, table.server-sort th.nosort {
    color: #C4C4C4
}

table.sortable th:after, table.server-sort th:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 5px;
    font-size: 12px;
    margin-top: -10px;
    color: red
}

table.sortable th.arrow:after, table.server-sort th.arrow:after {
    content: ''
}

table.sortable span.arrow, table.server-sort span.arrow {
    display: inline-block;
    border-style: solid;
    border-width: 6px;
    font-size: 0;
    border-color: transparent transparent white transparent;
    line-height: 0;
    height: 0;
    width: 0;
    margin-top: -7px;
    margin-left: 6px;
    vertical-align: middle
}

    table.sortable span.arrow.up, table.server-sort span.arrow.up {
        margin-top: 1px;
        border-color: white transparent transparent transparent
    }

table.sortable thead th:not([data-defaultsort=disabled]), table.server-sort thead th:not([data-defaultsort=disabled]) {
    cursor: pointer
}

    table.sortable thead th:not([data-defaultsort=disabled]):hover, table.sortable thead th:not([data-defaultsort=disabled]):active, table.sortable thead th:not([data-defaultsort=disabled]):focus, table.server-sort thead th:not([data-defaultsort=disabled]):hover, table.server-sort thead th:not([data-defaultsort=disabled]):active, table.server-sort thead th:not([data-defaultsort=disabled]):focus {
        color: white
    }

table.sortable thead th div.mozilla, table.server-sort thead th div.mozilla {
    position: relative
}

table.sortable.no-arrows span.arrow, table.server-sort.no-arrows span.arrow {
    display: none
}

table.server-sort thead th, table.server-sort thead th a {
    padding: 0;
    color: #C4C4C4
}

table.server-sort thead .server-sort-link {
    display: block;
    padding: 6px 4px
}

    table.server-sort thead .server-sort-link.active, table.server-sort thead .server-sort-link:hover, table.server-sort thead .server-sort-link:active, table.server-sort thead .server-sort-link:focus {
        color: white
    }

.subtext {
    font-weight: 200;
    font-size: 0.9em;
    color: rgba(255,255,255,0.6);
    padding-top: 2px;
    min-height: 14px;
    vertical-align: top
}

    .subtext.minor a {
        color: rgba(255,255,255,0.6)
    }

        .subtext.minor a time {
            cursor: inherit
        }

    .subtext.icons {
        margin-left: 4px
    }

table.vertically_separated td {
    border-right: 2px solid #242F39
}

table.horizontally_separated tr {
    border-top: 2px solid #242F39
}

@media (max-width: 768px) {
    article.r-tabbed-table {
        margin-top: 40px
    }

    .r-tab-enabled {
        position: relative
    }

        .r-tab-enabled td.r-tab {
            font-size: 1em
        }

        .r-tab-enabled .r-tab-icon {
            width: 45px
        }

            .r-tab-enabled .r-tab-icon img {
                max-height: inherit !important
            }

        .r-tab-enabled .r-tab-player-name {
            width: 130px;
            height: 32px
        }

        .r-tab-enabled th.r-tab-player-name {
            height: 15px
        }

    .r-tab-buttons {
        position: absolute;
        top: -35px;
        display: inline-block !important;
        width: 100%;
        overflow: hidden;
        left: -5px;
        background-color: transparent
    }

        .r-tab-buttons > * {
            height: 30px;
            box-sizing: border-box;
            cursor: pointer;
            background-color: #202a33;
            color: #aaa;
            padding: 10px !important;
            margin-right: 10px;
            font-weight: normal;
            display: inline-block
        }

            .r-tab-buttons > *:hover {
                color: #fff
            }

            .r-tab-buttons > *.active {
                box-shadow: 0 0 3px rgba(10,10,10,0.4);
                color: #fff;
                background-color: #242F39
            }

        .r-tab-buttons.r-tab-condensed {
            top: -28px
        }

            .r-tab-buttons.r-tab-condensed > * {
                padding: 3px !important;
                margin-right: 2px;
                height: 24px
            }

    .r-tab {
        display: none;
        position: absolute;
        left: -9999px
    }

        .r-tab.shown {
            position: relative;
            left: 0
        }

            .r-tab.shown.cell-divider {
                border-left: none
            }

    .r-tab-enabled.r-image-tabs .r-tab-buttons {
        top: -46px !important
    }

    .r-tab-enabled.r-image-tabs .r-tab-button {
        padding: 6px !important;
        height: 40px !important;
        margin-right: 10px !important
    }

        .r-tab-enabled.r-image-tabs .r-tab-button.active {
            height: 41px !important
        }
}

@media (max-width: 768px) and (max-width: 480px) {
    .r-tab-enabled.r-image-tabs .r-tab-buttons.r-tab-condensed .r-tab-button {
        padding: 3px !important;
        margin-right: 3px !important
    }
}

@media (max-width: 768px) {
    td.r-tab.shown, th.r-tab.shown {
        display: table-cell
    }

    div.r-tab.shown {
        display: block
    }
}

.r-stats-grid {
    position: relative
}

    .r-stats-grid .group {
        display: block;
        vertical-align: top
    }

@media (min-width: 992px) {
    .r-stats-grid .group {
        position: relative
    }
}

@media (max-width: 991px) {
    .r-stats-grid .group.group-soft {
        display: inline
    }
}

.r-stats-grid .kv {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin: 0 12px 12px 0;
    vertical-align: top
}

    .r-stats-grid .kv.kv-larger {
        font-size: 24px;
        font-weight: normal;
        text-transform: uppercase
    }

        .r-stats-grid .kv.kv-larger > i.fa {
            font-size: 16px
        }

    .r-stats-grid .kv.kv-smaller {
        font-size: 16px;
        font-weight: normal;
        text-transform: uppercase
    }

    .r-stats-grid .kv.kv-small-margin {
        margin: 0 4px 6px 0
    }

    .r-stats-grid .kv.kv-shallow-margin {
        margin: 0 12px 2px 0
    }

    .r-stats-grid .kv.kv-label {
        color: #C4C4C4;
        font-size: 12px;
        font-weight: normal;
        text-transform: uppercase
    }

    .r-stats-grid .kv small {
        color: rgba(255,255,255,0.6);
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: normal;
        margin-top: 2px
    }

        .r-stats-grid .kv small.smaller {
            font-size: 10px
        }

    .r-stats-grid .kv span.sep {
        color: rgba(255,255,255,0.6);
        font-weight: normal;
        font-size: 16px;
        padding: 0 2px
    }

.r-stats-grid .inline {
    display: inline-block
}

    .r-stats-grid .inline.inline-margin {
        margin: 0 2px 0 0
    }

.r-stats-grid .centered {
    text-align: center
}

.r-stats-grid .right {
    display: block
}

@media (min-width: 992px) {
    .r-stats-grid .right {
        float: right;
        text-align: right
    }
}

.r-stats-grid .top-right {
    display: block
}

@media (min-width: 992px) {
    .r-stats-grid .top-right {
        text-align: right;
        position: absolute;
        margin-right: 0;
        top: 0px;
        right: 0px
    }

        .r-stats-grid .top-right .kv {
            margin-right: 0
        }
}

.r-stats-grid .top-right-always {
    text-align: right;
    position: absolute;
    margin-right: 0;
    top: 0px;
    right: 0px
}

.r-stats-grid.r-stats-grid-padded {
    padding: 6px
}

@media (min-width: 992px) {
    .r-stats-grid.r-stats-grid-padded .top-right {
        top: 6px;
        right: 6px
    }
}

.r-stats-grid.r-stats-grid-padded .top-right-always {
    top: 6px;
    right: 6px
}

.r-table {
    font-size: 0.9em;
    position: relative
}

    .r-table .r-fluid {
        display: inline-block;
        box-sizing: border-box;
        padding: 0 2px
    }

    .r-table .r-stat {
        text-align: center
    }

        .r-table .r-stat .r-body {
            margin-top: 6px
        }

    .r-table .image-container {
        margin-top: 4px
    }

    .r-table .r-label {
        display: none;
        font-weight: bold
    }

    .r-table .r-10 {
        width: 10%
    }

    .r-table .r-125 {
        width: 12.5%
    }

    .r-table .r-175 {
        width: 17.5%
    }

    .r-table .r-15 {
        width: 15%
    }

    .r-table .r-20 {
        width: 20%
    }

    .r-table .r-30 {
        width: 30%
    }

    .r-table .r-35 {
        width: 35%
    }

    .r-table .r-40 {
        width: 40%
    }

    .r-table .r-50 {
        width: 50%
    }

    .r-table .r-icon-text .r-body > a, .r-table .r-icon-text .r-none-mobile > a {
        position: relative;
        top: 2px
    }

    .r-table .r-icon-text .r-body {
        line-height: 14px
    }

    .r-table .r-icon-text .image-container {
        float: left;
        margin-right: 7px
    }

    .r-table .r-body {
        vertical-align: middle
    }

    .r-table .r-line-graph .r-body {
        position: relative;
        top: 5px
    }

.r-row {
    clear: both;
    background-color: rgba(255,255,255,0.08);
    padding: 5px 4px
}

    .r-row.footer {
        margin-left: 205px;
        background-color: transparent !important
    }

    .r-row.faction-radiant {
        background: rgba(146,165,37,0.12);
        color: white
    }

    .r-row.faction-dire {
        background: rgba(194,60,42,0.12);
        color: white
    }

    .r-row:nth-child(2n) {
        background-color: rgba(255,255,255,0.04)
    }

    .r-row.faction-radiant:nth-child(2n) {
        background: rgba(146,165,37,0.06);
        color: white
    }

    .r-row.faction-dire:nth-child(2n) {
        background: rgba(194,60,42,0.06);
        color: white
    }

@media (max-width: 480px) {
    .r-only-mobile-5 > :nth-child(n+6) {
        display: none
    }
}

.r-cell {
    float: left;
    width: 40px;
    margin-left: 2px
}

    .r-cell.r-icon {
        width: 55px
    }

    .r-cell.r-player {
        width: 150px
    }

    .r-cell.items {
        width: 220px
    }

    .r-cell .player-icon {
        float: right
    }

.r-row.footer h3 {
    display: none
}

@media (min-width: 992px) {
    .r-table.match-overview {
        padding-top: 25px
    }

        .r-table.match-overview .r-row:first-child .r-label {
            display: block;
            margin-top: -25px;
            padding-bottom: 13px;
            top: 30px;
            position: absolute
        }

            .r-table.match-overview .r-row:first-child .r-label acronym {
                font-weight: bold;
                border-bottom: 1px dotted rgba(217,217,217,0.3);
                cursor: default
            }

        .r-table.match-overview .r-label {
            position: inherit !important
        }
}

@media (max-width: 991px) {
    .r-table .r-cell {
        width: auto !important;
        position: relative;
        text-align: left;
        height: 45px;
        margin-right: 15px;
        margin-bottom: 5px
    }

    .r-table .r-fluid .r-label {
        top: 20px
    }

    .r-table .r-fluid.r-line-graph .r-body {
        top: 0
    }

    .r-table.match-overview .r-first {
        clear: left
    }

    .r-table.match-overview .r-fluid {
        float: left
    }

    .r-table.match-overview .r-right {
        float: right;
        text-align: right;
        height: 50px
    }

    .r-table.match-overview .r-label {
        color: rgba(255,255,255,0.6);
        font-weight: normal;
        font-size: 14px;
        display: block;
        position: absolute;
        text-transform: lowercase;
        font-variant: small-caps;
        bottom: 0;
        width: 100%
    }

        .r-table.match-overview .r-label.r-always-hidden {
            display: none
        }

    .r-table.match-overview .r-always-hidden .r-label {
        display: none
    }

    .r-table.match-overview .r-stat {
        height: 38px;
        font-size: 16px;
        text-align: left
    }

    .r-table.match-overview .r-icon {
        width: 40px !important
    }

        .r-table.match-overview .r-icon.r-hero {
            width: 65px !important
        }

            .r-table.match-overview .r-icon.r-hero img {
                height: 40px
            }

    .r-table.match-overview .r-player {
        width: 180px !important;
        margin-right: 5px;
        font-size: 16px
    }

        .r-table.match-overview .r-player .r-label {
            display: none
        }

        .r-table.match-overview .r-player .player-icon, .r-table.match-overview .r-player .player-text {
            float: left;
            clear: none
        }

        .r-table.match-overview .r-player .player-icon {
            margin-right: 3px
        }

        .r-table.match-overview .r-player .lanes {
            margin-top: 3px;
            font-size: 12px
        }

        .r-table.match-overview .r-player .player-text {
            margin-top: 5px
        }

    .r-table.match-overview .r-icon-text {
        font-size: 1.3em;
        min-width: 250px;
        height: 42px
    }

        .r-table.match-overview .r-icon-text .r-body {
            line-height: 25px
        }

            .r-table.match-overview .r-icon-text .r-body .subtext {
                margin-top: -10px;
                font-size: 0.7em
            }

                .r-table.match-overview .r-icon-text .r-body .subtext a {
                    display: block;
                    min-width: 100px
                }

    .r-table.match-overview .items {
        width: 290px;
        height: 50px;
        margin-top: 5px
    }

    .r-table.match-overview .r-stat {
        margin-right: 8px
    }

        .r-table.match-overview .r-stat .r-body {
            font-size: 15px
        }

    .r-table.match-overview .level {
        height: 45px !important
    }

        .r-table.match-overview .level .r-body {
            font-size: 30px !important;
            margin-top: 0
        }

    .r-table.match-overview .match {
        color: white
    }

    .r-table.match-overview .win {
        color: #A9CF54
    }

    .r-table.match-overview .kills {
        color: #EA030E
    }

    .r-table.match-overview .deaths {
        color: #979797
    }

    .r-table.match-overview .assists {
        color: #A9CF54
    }

    .r-table.match-overview .gpm {
        color: #FBB829
    }

    .r-table.match-overview .xpm {
        color: #76B8A6
    }

    .r-table.match-overview .kills, .r-table.match-overview .deaths, .r-table.match-overview .lh, .r-table.match-overview .dn, .r-table.match-overview .hd, .r-table.match-overview .hh {
        width: auto;
        margin-right: 0
    }

        .r-table.match-overview .kills .r-body:after, .r-table.match-overview .deaths .r-body:after, .r-table.match-overview .lh .r-body:after, .r-table.match-overview .dn .r-body:after, .r-table.match-overview .hd .r-body:after, .r-table.match-overview .hh .r-body:after {
            color: #666;
            content: "/"
        }

        .r-table.match-overview .deaths .r-label, .r-table.match-overview .assists .r-label, .r-table.match-overview .dn .r-label, .r-table.match-overview .hh .r-label, .r-table.match-overview .td .r-label {
            display: none
        }

        .r-table.match-overview .kills .r-label:after {
            content: "/D/A"
        }

        .r-table.match-overview .lh .r-label:after {
            content: "/DN"
        }

        .r-table.match-overview .hd .r-label:after {
            content: "/HH/TD"
        }

    .r-table.match-overview .items {
        height: auto
    }

    .r-table.match-overview img.image-player {
        width: 40px !important;
        height: 40px !important
    }

    .r-table.match-overview img.image-item {
        width: 44px !important;
        height: 32px !important
    }

    .r-table.match-overview .r-row, .r-table.match-overview .picks-inline, .r-table.match-overview section header {
        padding: 4px 0 2px 2px !important
    }

        .r-table.match-overview .r-row.footer {
            margin-left: 5px
        }

            .r-table.match-overview .r-row.footer .r-stat:nth-of-type(4) {
                clear: none
            }

            .r-table.match-overview .r-row.footer h3 {
                display: block
            }
}

@media (min-width: 481px) {
    .r-table.heroes-overview, .r-table.performances-overview {
        padding-top: 25px
    }

        .r-table.heroes-overview .r-row:first-child .r-label, .r-table.performances-overview .r-row:first-child .r-label {
            display: block;
            margin-top: -25px;
            padding-bottom: 13px;
            top: 30px;
            position: absolute
        }

            .r-table.heroes-overview .r-row:first-child .r-label acronym, .r-table.performances-overview .r-row:first-child .r-label acronym {
                font-weight: bold;
                border-bottom: 1px dotted rgba(217,217,217,0.3);
                cursor: default
            }

    .r-table.r-always-labelled .r-label {
        color: rgba(255,255,255,0.6);
        font-weight: normal;
        font-size: 14px;
        display: block;
        position: absolute;
        text-transform: lowercase;
        font-variant: small-caps;
        bottom: 0;
        width: 100%;
        bottom: initial;
        top: 30px
    }

        .r-table.r-always-labelled .r-label.r-always-hidden {
            display: none
        }

    .r-table.r-always-labelled .r-row {
        position: relative;
        padding: 10px 4px
    }

    .r-table.r-always-labelled .r-body {
        top: -2px
    }
}

@media (max-width: 480px) {
    .r-tab-enabled th {
        font-size: 12px;
        padding: 6px 2px;
        white-space: nowrap
    }

    .r-table.performances-overview .r-label {
        top: 22px
    }

    .r-table.performances-overview .r-first {
        margin-top: 5px
    }

    .r-table.heroes-overview .r-first, .r-table.performances-overview .r-first {
        clear: left
    }

    .r-table.heroes-overview .r-fluid, .r-table.performances-overview .r-fluid {
        float: left
    }

    .r-table.heroes-overview .r-right, .r-table.performances-overview .r-right {
        float: right;
        text-align: right;
        height: 50px
    }

    .r-table.heroes-overview .r-label, .r-table.performances-overview .r-label {
        color: rgba(255,255,255,0.6);
        font-weight: normal;
        font-size: 14px;
        display: block;
        position: absolute;
        text-transform: lowercase;
        font-variant: small-caps;
        bottom: 0;
        width: 100%
    }

        .r-table.heroes-overview .r-label.r-always-hidden, .r-table.performances-overview .r-label.r-always-hidden {
            display: none
        }

    .r-table.heroes-overview .r-always-hidden .r-label, .r-table.performances-overview .r-always-hidden .r-label {
        display: none
    }

    .r-table.heroes-overview .r-stat, .r-table.performances-overview .r-stat {
        height: 38px;
        font-size: 16px;
        text-align: left
    }

    .r-table.heroes-overview .r-icon, .r-table.performances-overview .r-icon {
        width: 40px !important
    }

        .r-table.heroes-overview .r-icon.r-hero, .r-table.performances-overview .r-icon.r-hero {
            width: 65px !important
        }

            .r-table.heroes-overview .r-icon.r-hero img, .r-table.performances-overview .r-icon.r-hero img {
                height: 40px
            }

    .r-table.heroes-overview .r-player, .r-table.performances-overview .r-player {
        width: 180px !important;
        margin-right: 5px;
        font-size: 16px
    }

        .r-table.heroes-overview .r-player .r-label, .r-table.performances-overview .r-player .r-label {
            display: none
        }

        .r-table.heroes-overview .r-player .player-icon, .r-table.heroes-overview .r-player .player-text, .r-table.performances-overview .r-player .player-icon, .r-table.performances-overview .r-player .player-text {
            float: left;
            clear: none
        }

        .r-table.heroes-overview .r-player .player-icon, .r-table.performances-overview .r-player .player-icon {
            margin-right: 3px
        }

        .r-table.heroes-overview .r-player .lanes, .r-table.performances-overview .r-player .lanes {
            margin-top: 3px;
            font-size: 12px
        }

        .r-table.heroes-overview .r-player .player-text, .r-table.performances-overview .r-player .player-text {
            margin-top: 5px
        }

    .r-table.heroes-overview .r-icon-text, .r-table.performances-overview .r-icon-text {
        font-size: 1.3em;
        min-width: 250px;
        height: 42px
    }

        .r-table.heroes-overview .r-icon-text .r-body, .r-table.performances-overview .r-icon-text .r-body {
            line-height: 25px
        }

            .r-table.heroes-overview .r-icon-text .r-body .subtext, .r-table.performances-overview .r-icon-text .r-body .subtext {
                margin-top: -10px;
                font-size: 0.7em
            }

                .r-table.heroes-overview .r-icon-text .r-body .subtext a, .r-table.performances-overview .r-icon-text .r-body .subtext a {
                    display: block;
                    min-width: 100px
                }

    .r-table.heroes-overview .items, .r-table.performances-overview .items {
        width: 290px;
        height: 50px;
        margin-top: 5px
    }

    .r-table.heroes-overview .image-container.image-container-icon img, .r-table.performances-overview .image-container.image-container-icon img {
        height: 35px
    }

    .r-table.heroes-overview .r-row, .r-table.heroes-overview .r-fluid, .r-table.performances-overview .r-row, .r-table.performances-overview .r-fluid {
        position: relative
    }

    .heroes-overview .r-icon-text {
        min-width: 45px !important;
        width: 25% !important
    }

    .heroes-overview .r-line-graph {
        width: 25% !important;
        min-height: 35px;
        margin-top: 5px
    }

        .heroes-overview .r-line-graph.r-role-graph, .heroes-overview .r-line-graph.r-lane-graph {
            width: 50% !important
        }

        .heroes-overview .r-line-graph.r-role-graph {
            clear: left
        }

    .performances-overview .r-fluid.r-175, .performances-overview .r-fluid.r-125 {
        width: 33% !important
    }

    .performances-overview .r-line-graph {
        text-align: right;
        font-size: 1.2em;
        margin-top: -6px
    }

        .performances-overview .r-line-graph .r-label {
            left: -2px
        }

        .performances-overview .r-line-graph .bar {
            width: 100%
        }

    .performances-overview .r-duration {
        font-size: 1.6em;
        padding-right: 10px
    }

        .performances-overview .r-duration .r-label {
            left: -10px
        }

        .performances-overview .r-duration .bar {
            display: none
        }

    .r-match-result {
        position: absolute !important;
        top: 8px;
        right: 5px;
        font-size: 1.3em
    }

        .r-match-result .bar {
            display: none
        }

    .r-table.match-overview .items {
        clear: both
    }
}

.player-list-icons {
    font-size: 14pt
}

.cell-tooltip {
    display: none
}

    .cell-tooltip .subtitle {
        color: rgba(255,255,255,0.6)
    }

table.fixed {
    table-layout: fixed
}

    table.fixed td, table.fixed th {
        padding: 4px 3px 4px 0;
        box-sizing: border-box
    }

        table.fixed td:first-child, table.fixed th:first-child {
            padding-left: 4px
        }

    table.fixed .tf-r {
        text-align: right
    }

    table.fixed .tf-c {
        text-align: center;
        padding: 4px 0
    }

    table.fixed .tf-hero {
        width: 50px
    }

    table.fixed .tf-player {
        width: 24px
    }

    table.fixed .tf-fa {
        width: 20px;
        text-align: center;
        padding: 4px 0
    }

    table.fixed .tf-items {
        width: 245px
    }

@media (max-width: 480px) {
    table.fixed .tf-items {
        width: 110px
    }
}

table.fixed .tf-items-neutral {
    width: 280px
}

@media (max-width: 480px) {
    table.fixed .tf-items-neutral {
        width: 125px
    }
}

table.fixed .tf-pl {
    padding-left: 4px
}

table.fixed .tf-s {
    width: 4px
}

    table.fixed .tf-s:after {
        color: #888888;
        font-weight: 100;
        font-size: 0.8em;
        vertical-align: top;
        content: "/"
    }

    table.fixed .tf-s.col-hover {
        background-color: transparent !important
    }

table.fixed .slash {
    display: inline;
    color: #888888;
    font-weight: 100;
    font-size: 0.8em;
    margin: 0 2px;
    vertical-align: top
}

table.fixed .tf-inline {
    display: inline
}

table.fixed .tf-a {
    width: auto
}

table.fixed .tf-5 {
    width: 5px
}

table.fixed .tf-10 {
    width: 10px
}

table.fixed .tf-15 {
    width: 15px
}

table.fixed .tf-20 {
    width: 20px
}

table.fixed .tf-25 {
    width: 25px
}

table.fixed .tf-30 {
    width: 30px
}

table.fixed .tf-35 {
    width: 35px
}

table.fixed .tf-40 {
    width: 40px
}

table.fixed .tf-45 {
    width: 45px
}

table.fixed .tf-50 {
    width: 50px
}

table.fixed .tf-55 {
    width: 55px
}

table.fixed .tf-60 {
    width: 60px
}

table.fixed .tf-65 {
    width: 65px
}

table.fixed .tf-70 {
    width: 70px
}

table.fixed .tf-75 {
    width: 75px
}

table.fixed .tf-80 {
    width: 80px
}

table.fixed.bear-only-override .tf-25 {
    width: 35px
}

table.fixed.bear-only-override .tf-30 {
    width: 40px
}

table.fixed.bear-only-override .tf-35 {
    width: 45px
}

@media (max-width: 480px) {
    table.fixed {
        table-layout: auto
    }

        table.fixed .tf-5 {
            width: auto
        }

        table.fixed .tf-10 {
            width: auto
        }

        table.fixed .tf-15 {
            width: auto
        }

        table.fixed .tf-20 {
            width: auto
        }

        table.fixed .tf-25 {
            width: auto
        }

        table.fixed .tf-30 {
            width: auto
        }

        table.fixed .tf-35 {
            width: auto
        }

        table.fixed .tf-40 {
            width: auto
        }

        table.fixed .tf-45 {
            width: auto
        }

        table.fixed .tf-50 {
            width: auto
        }

        table.fixed .tf-55 {
            width: auto
        }

        table.fixed .tf-60 {
            width: auto
        }

        table.fixed .tf-65 {
            width: auto
        }

        table.fixed .tf-70 {
            width: auto
        }

        table.fixed .tf-75 {
            width: auto
        }

        table.fixed .tf-80 {
            width: auto
        }
}

table.row-hints tbody tr:hover, table.row-hints tbody tr:nth-child(2n):hover {
    background-color: rgba(208,208,208,0.12)
}

table.col-hints td.col-hover:not(.col-exclude), table.col-hints th.col-hover:not(.col-exclude) {
    background-color: rgba(208,208,208,0.08)
}

table.col-hints td.col-hover.cell-minor, table.col-hints th.col-hover.cell-minor {
    color: white
}

.tile-container {
    position: relative;
    margin: 0 3px 0 0;
    display: inline-block;
    height: 55.7534246575px;
    margin-bottom: 2px;
    width: 116.8949771689px;
    background-size: 100% !important;
    box-shadow: 0 0 4px black
}

    .tile-container .decorative-backdrop {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0.2;
        background: url(/assets/dark_wall-984d7677d5d64ce705310e732783a095c4ee48fa8bac25d8b391b8f0f159a3e6.png)
    }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .tile-container .decorative-backdrop {
        background: url(/assets/dark_wall@2x-1bbce226a41f7b3a2b505cf913b82a7c5723f5acd6451d02cf56b3e47835ad80.png);
        background-size: 50%
    }
}

.tile-container .name {
    font-weight: 200;
    font-size: 0.9em;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    position: absolute;
    bottom: 4px;
    left: 4px;
    color: white
}

.tile-container:hover .decorative-backdrop {
    opacity: 0
}

.tile-container:hover .name {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    color: white
}

.timeline .start {
    margin: -4px 0
}

    .timeline .start .player {
        position: relative;
        background: rgba(217,217,217,0.05);
        height: 80px;
        padding: 12px 8px;
        margin: 4px 0
    }

        .timeline .start .player .avatar {
            position: absolute;
            top: 12px;
            left: 8px
        }

        .timeline .start .player .follow {
            position: absolute;
            top: 20px;
            right: 8px
        }

        .timeline .start .player .name {
            font-size: 1.3em;
            font-weight: 500;
            margin-left: 52px
        }

        .timeline .start .player .details {
            margin: 8px 0 0 52px;
            line-height: 150%
        }

.timeline .continue {
    margin-top: 16px
}

.timeline .events {
    padding: 0 8px
}

    .timeline .events .event {
        position: relative;
        border-bottom: 1px dotted rgba(10,10,10,0.3);
        margin-top: 18px;
        padding-bottom: 18px
    }

        .timeline .events .event .gutter {
            position: absolute;
            top: 0px;
            left: 0px
        }

        .timeline .events .event .content {
            margin-left: 60px;
            padding-top: 3px;
            min-height: 40px
        }

            .timeline .events .event .content .title {
                padding-bottom: 8px;
                text-shadow: 1px 1px 0 black
            }

                .timeline .events .event .content .title a {
                    color: #e6d1a4 !important;
                    font-weight: bold !important
                }

                .timeline .events .event .content .title .timestamp {
                    color: #a6a6a6
                }

            .timeline .events .event .content .subtitle a {
                text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
                color: white !important
            }

            .timeline .events .event .content .subtitle.comment-subtitle {
                background: rgba(10,10,10,0.2);
                padding: 6px
            }

            .timeline .events .event .content .body {
                padding: 8px 0 0 0
            }

                .timeline .events .event .content .body .item-detail {
                    padding: 4px 2px 2px 4px;
                    margin: 0 0 6px 0
                }

                    .timeline .events .event .content .body .item-detail a {
                        font-weight: normal !important
                    }

                .timeline .events .event .content .body span.inline-left-margin {
                    margin-left: 4px
                }

                .timeline .events .event .content .body span.inline-icon {
                    display: inline-block;
                    vertical-align: middle
                }

                .timeline .events .event .content .body .dbr {
                    color: #68d1f6
                }

                .timeline .events .event .content .body .gold {
                    color: #FBB829
                }

                .timeline .events .event .content .body .experience {
                    color: #76B8A6
                }

                .timeline .events .event .content .body .kda {
                    color: #F26522
                }

                .timeline .events .event .content .body.comment-body {
                    background: rgba(10,10,10,0.2);
                    padding: 6px
                }

                    .timeline .events .event .content .body.comment-body p {
                        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
                        color: #d9d9d9
                    }

                    .timeline .events .event .content .body.comment-body img {
                        max-width: 95% !important
                    }

.ui-tooltip, .qtip {
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;
    max-width: 600px
}

.tooltip {
    display: none
}

.ui-tooltip-fluid {
    display: block;
    visibility: hidden;
    position: static !important;
    float: left !important
}

.ui-tooltip-tip {
    display: none !important
}

.qtip-content {
    background: rgba(36,47,57,0.95);
    border: 2px solid #1C242D;
    border-radius: 0px;
    color: #C4C4C4;
    font-size: 12px;
    overflow: hidden;
    padding: 4px;
    line-height: 130%;
    box-shadow: 0 0 3px rgba(10,10,10,0.4)
}

.embedded-tooltip {
    padding: 10px
}

.portable-show-item-details-default .embedded-tooltip {
    padding: 0
}

.quality-consumable {
    color: #1D80E7
}

.quality-component {
    color: #FFFFFF
}

.quality-common {
    color: #2BAB01
}

.quality-rare {
    color: #1A87F9
}

.quality-epic {
    color: #B812F9
}

.quality-artifact {
    color: #E29B01
}

.item-tooltip, .skill-tooltip, .hero-tooltip {
    width: 400px;
    font-size: 13px;
    line-height: 18px
}

    .item-tooltip h1, .skill-tooltip h1, .hero-tooltip h1 {
        font-weight: bold;
        color: white
    }

    .item-tooltip .avatar, .skill-tooltip .avatar, .hero-tooltip .avatar {
        float: right;
        margin: 0 0 2px 4px
    }

    .item-tooltip .bigavatar, .skill-tooltip .bigavatar, .hero-tooltip .bigavatar {
        float: right;
        margin: 0 0 2px 8px
    }

    .item-tooltip image-container, .skill-tooltip image-container, .hero-tooltip image-container {
        z-index: 10
    }

    .item-tooltip .description, .item-tooltip .aghanim_description, .skill-tooltip .description, .skill-tooltip .aghanim_description, .hero-tooltip .description, .hero-tooltip .aghanim_description {
        padding: 12px 0 0 0
    }

        .item-tooltip .description p, .item-tooltip .aghanim_description p, .skill-tooltip .description p, .skill-tooltip .aghanim_description p, .hero-tooltip .description p, .hero-tooltip .aghanim_description p {
            padding: 2px 0;
            margin: 0;
            line-height: 16px
        }

            .item-tooltip .description p .active, .item-tooltip .description p .passive, .item-tooltip .aghanim_description p .active, .item-tooltip .aghanim_description p .passive, .skill-tooltip .description p .active, .skill-tooltip .description p .passive, .skill-tooltip .aghanim_description p .active, .skill-tooltip .aghanim_description p .passive, .hero-tooltip .description p .active, .hero-tooltip .description p .passive, .hero-tooltip .aghanim_description p .active, .hero-tooltip .aghanim_description p .passive {
                color: white;
                font-weight: bold
            }

        .item-tooltip .description .number, .item-tooltip .aghanim_description .number, .skill-tooltip .description .number, .skill-tooltip .aghanim_description .number, .hero-tooltip .description .number, .hero-tooltip .aghanim_description .number {
            color: white;
            font-weight: bold
        }

    .item-tooltip .aghanim_description, .skill-tooltip .aghanim_description, .hero-tooltip .aghanim_description {
        color: #A9CF54
    }

    .item-tooltip .effects p, .skill-tooltip .effects p, .hero-tooltip .effects p {
        color: white
    }

    .item-tooltip .effects span:first-child, .skill-tooltip .effects span:first-child, .hero-tooltip .effects span:first-child {
        margin-right: 4px;
        color: rgba(160,182,191,0.9)
    }

    .item-tooltip .effects span.yes, .skill-tooltip .effects span.yes, .hero-tooltip .effects span.yes {
        color: #A9CF54
    }

    .item-tooltip .effects .physical, .skill-tooltip .effects .physical, .hero-tooltip .effects .physical {
        color: #EA030E
    }

    .item-tooltip .effects .magical, .skill-tooltip .effects .magical, .hero-tooltip .effects .magical {
        color: #199DDB
    }

    .item-tooltip .effects .pure, .skill-tooltip .effects .pure, .hero-tooltip .effects .pure {
        color: #CAD8F4
    }

    .item-tooltip .effects .hp_removal, .skill-tooltip .effects .hp_removal, .hero-tooltip .effects .hp_removal {
        color: #cc7
    }

    .item-tooltip .effects .composite, .skill-tooltip .effects .composite, .hero-tooltip .effects .composite {
        color: #c7c
    }

    .item-tooltip .effects .universal, .skill-tooltip .effects .universal, .hero-tooltip .effects .universal {
        color: #fff
    }

    .item-tooltip .notes, .skill-tooltip .notes, .hero-tooltip .notes {
        padding: 8px 0 0 0;
        color: #6d6
    }

        .item-tooltip .notes p, .skill-tooltip .notes p, .hero-tooltip .notes p {
            color: #6d6
        }

        .item-tooltip .notes p, .item-tooltip .effects p, .skill-tooltip .notes p, .skill-tooltip .effects p, .hero-tooltip .notes p, .hero-tooltip .effects p {
            padding: 2px 0;
            margin: 0;
            line-height: 16px
        }

    .item-tooltip .stats, .skill-tooltip .stats, .hero-tooltip .stats {
        padding: 6px 0 0
    }

        .item-tooltip .stats .stat, .skill-tooltip .stats .stat, .hero-tooltip .stats .stat {
            padding: 1px 0
        }

            .item-tooltip .stats .stat .value, .skill-tooltip .stats .stat .value, .hero-tooltip .stats .stat .value {
                color: white
            }

            .item-tooltip .stats .stat.scepter, .skill-tooltip .stats .stat.scepter, .hero-tooltip .stats .stat.scepter {
                color: #A9CF54
            }

    .item-tooltip .build, .skill-tooltip .build, .hero-tooltip .build {
        margin: 12px 0 0 0
    }

    .item-tooltip .shop, .skill-tooltip .shop, .hero-tooltip .shop {
        margin: 8px 0 0 0;
        color: #C4C4C4
    }

    .item-tooltip .item-build, .skill-tooltip .item-build, .hero-tooltip .item-build {
        display: inline-block;
        padding: 0 16px 0 0
    }

        .item-tooltip .item-build .title, .skill-tooltip .item-build .title, .hero-tooltip .item-build .title {
            font-size: 12px;
            color: #d9d9d9;
            margin: 8px 0 0 0
        }

        .item-tooltip .item-build .order, .skill-tooltip .item-build .order, .hero-tooltip .item-build .order {
            margin: 4px 0 0 0
        }

            .item-tooltip .item-build .order .item, .skill-tooltip .item-build .order .item, .hero-tooltip .item-build .order .item {
                display: inline-block;
                margin: 0 4px 0 0
            }

                .item-tooltip .item-build .order .item .icon, .skill-tooltip .item-build .order .item .icon, .hero-tooltip .item-build .order .item .icon {
                    text-align: center
                }

                .item-tooltip .item-build .order .item .cost, .skill-tooltip .item-build .order .item .cost, .hero-tooltip .item-build .order .item .cost {
                    font-size: 12px;
                    color: #FBB829;
                    text-align: center
                }

    .item-tooltip .price, .item-tooltip .cooldown, .item-tooltip .manacost, .skill-tooltip .price, .skill-tooltip .cooldown, .skill-tooltip .manacost, .hero-tooltip .price, .hero-tooltip .cooldown, .hero-tooltip .manacost {
        display: inline-block;
        padding: 8px 0 0 0
    }

        .item-tooltip .price img, .item-tooltip .cooldown img, .item-tooltip .manacost img, .skill-tooltip .price img, .skill-tooltip .cooldown img, .skill-tooltip .manacost img, .hero-tooltip .price img, .hero-tooltip .cooldown img, .hero-tooltip .manacost img {
            height: 16px;
            margin-right: 8px;
            vertical-align: middle;
            display: inline
        }

        .item-tooltip .price .value, .item-tooltip .cooldown .value, .item-tooltip .manacost .value, .skill-tooltip .price .value, .skill-tooltip .cooldown .value, .skill-tooltip .manacost .value, .hero-tooltip .price .value, .hero-tooltip .cooldown .value, .hero-tooltip .manacost .value {
            vertical-align: middle
        }

        .item-tooltip .price .number, .item-tooltip .cooldown .number, .item-tooltip .manacost .number, .skill-tooltip .price .number, .skill-tooltip .cooldown .number, .skill-tooltip .manacost .number, .hero-tooltip .price .number, .hero-tooltip .cooldown .number, .hero-tooltip .manacost .number {
            color: white
        }

    .item-tooltip .cooldown, .skill-tooltip .cooldown, .hero-tooltip .cooldown {
        min-width: 50%
    }

    .item-tooltip .lore, .skill-tooltip .lore, .hero-tooltip .lore {
        margin: 8px 0 0 0;
        font-size: 0.95em;
        color: rgba(160,182,191,0.9);
        padding: 6px;
        font-style: italic;
        background-color: #1c242d
    }

.reborn-tooltip {
    color: rgba(160,182,191,0.9)
}

    .reborn-tooltip p {
        color: rgba(160,182,191,0.9)
    }

    .reborn-tooltip .avatar {
        float: left;
        margin: 0 8px 0 0
    }

        .reborn-tooltip .avatar a {
            box-shadow: 0 0 3px rgba(10,10,10,0.4)
        }

    .reborn-tooltip .tooltip-header {
        margin: -4px;
        padding: 8px 8px 4px;
        background-color: rgba(46,55,64,0.9)
    }

    .reborn-tooltip .price {
        margin-top: 0px;
        padding-top: 0px;
        font-weight: bold
    }

    .reborn-tooltip .name {
        color: rgba(255,255,255,0.9);
        margin-top: 2px;
        font-size: 16px;
        font-weight: bold
    }

    .reborn-tooltip .gold-icon img {
        transform: scale(1.2, 1.2)
    }

    .reborn-tooltip .description {
        padding: 0;
        position: relative
    }

        .reborn-tooltip .description .cooldown-and-cost {
            position: absolute;
            right: 6px;
            top: 0
        }

            .reborn-tooltip .description .cooldown-and-cost .cooldown, .reborn-tooltip .description .cooldown-and-cost .manacost {
                padding: 0;
                margin-top: 2px;
                margin-left: 8px;
                min-width: 0px;
                float: right
            }

                .reborn-tooltip .description .cooldown-and-cost .cooldown .number, .reborn-tooltip .description .cooldown-and-cost .manacost .number {
                    color: white
                }

    .reborn-tooltip .description-block {
        margin-top: 8px;
        padding: 4px;
        background-color: #39444f
    }

        .reborn-tooltip .description-block .description-block-header {
            font-weight: bold;
            background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(125,185,232,0) 100%);
            padding: 4px 5px;
            margin: -4px -4px 4px;
            color: rgba(255,255,255,0.95)
        }

        .reborn-tooltip .description-block.use {
            color: rgba(170,218,170,0.83);
            background-color: rgba(39,58,39,0.83)
        }

            .reborn-tooltip .description-block.use .description-block-header {
                color: rgba(240,255,240,0.95)
            }

        .reborn-tooltip .description-block.active, .reborn-tooltip .description-block.toggle {
            color: rgba(197,196,226,0.83);
            background-color: rgba(48,52,86,0.83)
        }

            .reborn-tooltip .description-block.active .description-block-header, .reborn-tooltip .description-block.toggle .description-block-header {
                color: rgba(242,241,255,0.95)
            }

    .reborn-tooltip .notes, .reborn-tooltip .notes p {
        margin-top: 8px;
        background-color: #6f8498;
        color: #0a0a0a;
        padding: 2px
    }

        .reborn-tooltip .notes.dispellable-type, .reborn-tooltip .notes.dispellable-type p, .reborn-tooltip .notes p.dispellable-type, .reborn-tooltip .notes p.dispellable-type p {
            background-color: #75986f
        }

        .reborn-tooltip .notes p {
            margin-top: 0
        }

.player-tooltip {
    width: 300px
}

    .player-tooltip .tooltip-header {
        display: flex
    }

    .player-tooltip .middle {
        flex: 1 1 auto
    }

    .player-tooltip .avatar {
        flex: 0 0 65px
    }

    .player-tooltip .name {
        max-width: 140px;
        margin-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .player-tooltip .rank-tier {
        flex: 0 0 70px;
        margin-left: 5px
    }

        .player-tooltip .rank-tier img {
            width: 100%;
            height: auto
        }

        .player-tooltip .rank-tier .leaderboard-rank-value {
            top: 46px;
            font-size: 1.2em
        }

    .player-tooltip .heroes {
        margin-top: 4px
    }

    .player-tooltip .image-hero {
        width: 24px;
        height: 24px
    }

    .player-tooltip .description {
        margin-top: 4px;
        padding: 4px;
        line-height: 1.5em
    }

        .player-tooltip .description .value {
            color: white
        }

    .player-tooltip .label {
        margin-right: 4px
    }

.skill-tooltip .tooltip-header {
    min-height: 45px;
    margin-bottom: 8px
}

.skill-tooltip .effects {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(160,182,191,0.4);
    margin-bottom: 8px
}

.skill-tooltip .stats {
    padding-top: 8px;
    border-top: 1px solid rgba(160,182,191,0.4);
    margin-top: 8px
}

.hero-tooltip {
    width: 350px
}

    .hero-tooltip .effects {
        padding-left: 3px
    }

    .hero-tooltip img.image-hero {
        height: 58px
    }

    .hero-tooltip .tooltip-header {
        padding-bottom: 5px;
        margin-bottom: 5px
    }

    .hero-tooltip .hero_attributes {
        margin-top: 4px
    }

    .hero-tooltip table tr, .hero-tooltip table tr:nth-child(2n) {
        background-color: transparent
    }

    .hero-tooltip table td {
        padding: 0
    }

    .hero-tooltip .subheader .primary-attribute {
        height: 18px;
        margin-left: 3px;
        display: inline-block;
        vertical-align: top
    }

.embedded-tooltip .item-tooltip, .embedded-tooltip .skill-tooltip {
    width: 100%
}

.item-tooltip .shop-icons {
    opacity: 0.8;
    display: inline-block
}

    .item-tooltip .shop-icons img {
        display: inline-block;
        vertical-align: top;
        height: 24px;
        margin-left: -4px
    }

.item-tooltip .shop {
    margin-top: 4px
}

    .item-tooltip .shop .shop-icons {
        margin-left: 2px
    }

        .item-tooltip .shop .shop-icons img {
            margin-top: -3px
        }

.tooltip-content-player {
    width: 260px
}

.tooltip-content img.image-player {
    height: 90px !important;
    width: auto !important
}

.tooltip-content li:before {
    content: " ● "
}

.tooltip-content-player.tooltip-content-esports {
    width: 360px
}

    .tooltip-content-player.tooltip-content-esports .img-player {
        height: 150px
    }

.tooltip-content-team {
    width: 240px
}

.tooltip-content-league, .tooltip-content-match {
    width: 300px
}

.tooltip-content .name {
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px
}

.tooltip-content .avatar, .tooltip-content .bigicon {
    float: right;
    margin: 0 0 2px 4px
}

.tooltip-content .description {
    font-size: 0.9em;
    color: #cccccc;
    line-height: 130%
}

.tooltip-content .properties {
    display: block
}

    .tooltip-content .properties div {
        display: block;
        padding: 2px 0
    }

        .tooltip-content .properties div span.smaller {
            font-size: 0.9em;
            color: #cccccc
        }

        .tooltip-content .properties div span.value {
            color: #76B8A6
        }

            .tooltip-content .properties div span.value.cost {
                color: #FBB829
            }

            .tooltip-content .properties div span.value.dbr {
                color: #FBB829
            }

.tooltip-content .current_team img {
    margin-right: 4px;
    vertical-align: text-bottom
}

.tooltip-content .minor-image img {
    height: 30px;
    width: auto !important;
    margin-right: 5px
}

.tooltip-content .status {
    text-transform: capitalize;
    clear: both
}

.tooltip-content .match-player-image {
    float: left
}

#highcharts-0 > span {
    z-index: -1
}

.group[rel="neighbour-tooltip"]:hover {
    cursor: default;
    opacity: 0.8
}

.key-legend-tooltip {
    display: none
}

.dashboard-performance .truesight-intro {
    color: #A89CEE
}

    .dashboard-performance .truesight-intro > div {
        display: inline-block;
        margin-right: 4px
    }

.dashboard-week section article {
    margin-bottom: 4px
}

.dashboard-week-heroes {
    padding-left: 2px
}

    .dashboard-week-heroes .hero {
        display: inline-block;
        padding: 6px 4px
    }

        .dashboard-week-heroes .hero .avatar .image-container-avatar img {
            height: 47px
        }

        .dashboard-week-heroes .hero .record {
            font-size: 1.1em;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
            padding-top: 4px;
            text-align: center
        }

.dashboard-recent-performances .dashboard-recent-performance {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-bottom: 1px solid #344452;
    padding: 6px 4px
}

    .dashboard-recent-performances .dashboard-recent-performance:last-child {
        border-bottom: none
    }

    .dashboard-recent-performances .dashboard-recent-performance:hover {
        background-color: #2c3946
    }

    .dashboard-recent-performances .dashboard-recent-performance .click-target {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1
    }

    .dashboard-recent-performances .dashboard-recent-performance a, .dashboard-recent-performances .dashboard-recent-performance .rateit {
        position: relative;
        z-index: 2
    }

    .dashboard-recent-performances .dashboard-recent-performance .js-rotate-when-expanded {
        color: rgba(255,255,255,0.6);
        position: absolute;
        left: 4px;
        top: 0
    }

    .dashboard-recent-performances .dashboard-recent-performance .group {
        position: relative
    }

    .dashboard-recent-performances .dashboard-recent-performance .kv-label {
        color: rgba(255,255,255,0.6);
        font-size: 11px
    }

    .dashboard-recent-performances .dashboard-recent-performance .kv-larger {
        font-size: 18px;
        margin-left: 16px;
        margin-bottom: 2px
    }

    .dashboard-recent-performances .dashboard-recent-performance .image-container-hero img {
        height: 32px
    }

    .dashboard-recent-performances .dashboard-recent-performance .image-container-item img {
        height: 32px
    }

    .dashboard-recent-performances .dashboard-recent-performance .last-performance-match-meta .kv-label {
        margin: 0 8px 6px 0
    }

    .dashboard-recent-performances .dashboard-recent-performance small {
        font-size: 11px
    }

    .dashboard-recent-performances .dashboard-recent-performance #match-rating .rateit {
        margin: 0
    }

    .dashboard-recent-performances .dashboard-recent-performance .rate-me {
        display: none !important
    }

    .dashboard-recent-performances .dashboard-recent-performance .achievements-small {
        margin-bottom: 5px
    }

        .dashboard-recent-performances .dashboard-recent-performance .achievements-small small {
            color: rgba(255,255,255,0.6);
            margin-bottom: 5px;
            display: block;
            text-transform: uppercase
        }

            .dashboard-recent-performances .dashboard-recent-performance .achievements-small small a {
                margin-left: 5px
            }

@media (max-width: 768px) {
    .top-performance {
        position: relative;
        padding-bottom: 100px
    }

        .top-performance .match-details {
            position: absolute;
            bottom: 8px;
            top: auto;
            text-align: left;
            right: auto
        }
}

:root {
    --takeover-partner-color: transparent;
    --takeover-partner-secondary: transparent
}

.hero-of-the-week a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    text-transform: uppercase
}

    .hero-of-the-week a .hero-info {
        display: flex;
        align-items: center;
        color: #f7f8ff
    }

        .hero-of-the-week a .hero-info .hero-name {
            padding-left: 4px
        }

    .hero-of-the-week a .hero-win-rate {
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #f7f8ff
    }

        .hero-of-the-week a .hero-win-rate .title {
            padding-bottom: 4px;
            color: #97999d
        }

    .hero-of-the-week a .image-container-hero .image-hero {
        height: 40px
    }

.home-takeover-header {
    background-color: var(--takeover-partner-color);
    border-bottom: 2px solid var(--takeover-partner-secondary)
}

    .home-takeover-header, .home-takeover-header th {
        letter-spacing: 1px;
        color: #f7f8ff;
        text-transform: uppercase
    }

        .home-takeover-header:first-child, .home-takeover-header:last-child, .home-takeover-header th:first-child, .home-takeover-header th:last-child {
            padding: 16px
        }

.link-partner {
    color: #f7f8ff !important
}

.home-takeover-hero-picks-bans, .hero_of_the_week {
    letter-spacing: 1px;
    color: #f7f8ff;
    text-transform: uppercase
}

    .home-takeover-hero-picks-bans .takeover-hero, .hero_of_the_week .takeover-hero {
        display: flex;
        align-items: center
    }

        .home-takeover-hero-picks-bans .takeover-hero .link-type-hero, .hero_of_the_week .takeover-hero .link-type-hero {
            padding-left: 8px
        }

@media (max-width: 768px) {
    .home-takeover-hero-picks-bans .takeover-hero .link-type-hero, .hero_of_the_week .takeover-hero .link-type-hero {
        display: none
    }
}

.home-takeover-hero-picks-bans .link-type-hero, .hero_of_the_week .link-type-hero {
    color: #f7f8ff
}

.home-takeover-hero-picks-bans .image-container-hero .image-hero, .hero_of_the_week .image-container-hero .image-hero {
    height: 32px;
    border-radius: 2px;
    box-shadow: 0 4px 20px 6px rgba(0,0,0,0.16);
    border: solid 1px var(--takeover-ad-color)
}

.home-takeover-hero-picks-bans td.cell-divider, .hero_of_the_week td.cell-divider {
    border-left: 1px solid rgba(151,151,151,0.32)
}

.home-takeover-view {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #f7f8ff
}

    .home-takeover-view .home-takeover-header {
        font-size: 14px;
        font-weight: bold
    }

    .home-takeover-view th {
        display: none
    }

    .home-takeover-view td:last-child {
        opacity: 0.42;
        font-weight: bold
    }

    .home-takeover-view td.cell-divider {
        border-left: 1px solid rgba(151,151,151,0.32)
    }

    .home-takeover-view .esports-team {
        display: flex;
        align-items: center;
        text-transform: none
    }

        .home-takeover-view .esports-team .team-image {
            padding-right: 16px
        }

            .home-takeover-view .esports-team .team-image img {
                padding: 4px 0;
                width: 38px
            }

.home-takeover {
    background-image: url(/assets/takeovers/bts-pro-series-10-desktop-8dde275ce98b74bc7dda4d388074b00bd1699d625a0e6cbbe9e61a44df698583.jpg);
    background-position: center;
    background-size: cover
}

@media (max-width: 768px) {
    .home-takeover {
        background-size: contain
    }
}

@media (max-width: 480px) {
    .home-takeover {
        background-image: url(/assets/takeovers/bts-pro-series-10-mobile-2edd80df20ac3fef8cd1b14af1f9eb03f2abe80bfbcb4c9fcb322aec42c2f99c.jpg);
        background-size: cover
    }
}

.home-takeover article {
    background: none;
    border: none;
    box-shadow: inherit;
    padding: 0
}

@media (max-width: 768px) {
    .home-takeover {
        height: auto;
        background-position: top center
    }
}

.home-takeover .home-takeover-article-logo {
    position: relative
}

    .home-takeover .home-takeover-article-logo a.logo-click-area {
        display: block;
        width: 100%;
        height: 260px
    }

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-logo a.logo-click-area {
        height: 200px
    }
}

.home-takeover .home-takeover-article-logo .home-takeover-logo {
    width: auto;
    height: 192px
}

@media (max-width: 768px) {
    .home-takeover .home-takeover-article-logo .home-takeover-logo {
        position: relative;
        width: 100%;
        max-height: 200px
    }
}

.home-takeover .home-takeover-article-series .takeover-header-sponsor {
    line-height: 1.2rem
}

.home-takeover .home-takeover-teams {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgba(0,0,0,0.4);
    padding: 8px 0 8px 0
}

    .home-takeover .home-takeover-teams .takeover-team {
        flex: 1 0 calc((100% / 8) - (6px * 2));
        max-width: calc((100% / 8) - (6px * 2));
        padding: 6px;
        text-align: center
    }

        .home-takeover .home-takeover-teams .takeover-team .team-image .img-team {
            width: 50%;
            height: auto
        }

@media (max-width: 768px) {
    .home-takeover .home-takeover-teams .takeover-team {
        flex: 1 0 calc((100% / 4) - (6px * 2));
        max-width: calc((100% / 4) - (6px * 2));
        font-size: 0.8em
    }

        .home-takeover .home-takeover-teams .takeover-team .team-image .img-team {
            width: 60%
        }
}

.home-takeover .home-takeover-teams .takeover-team.eliminated {
    opacity: 0.6;
    -webkit-filter: saturate(0%);
    filter: saturate(0%)
}

.home-takeover .home-takeover-groups-logo {
    width: 100%;
    height: auto;
    display: none
}

@media (max-width: 480px) {
    .home-takeover .home-takeover-groups-logo {
        display: block
    }
}

.home-takeover .home-takeover-article-groups {
    position: relative;
    background-image: url(/images/takeovers/ti10-bg.png);
    background-color: #534b58;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    height: 467px
}

    .home-takeover .home-takeover-article-groups a.logo-click-area {
        display: block;
        position: absolute;
        outline: 1px solid red;
        top: 5%;
        left: 30%;
        width: 40%;
        height: 60%
    }

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-groups a.logo-click-area {
        display: none
    }
}

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-groups {
        background-image: none;
        height: auto
    }
}

.home-takeover .home-takeover-article-groups .home-ti-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 386px;
    height: auto
}

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-groups .home-ti-logo {
        position: relative;
        width: 100%
    }
}

.home-takeover .home-takeover-article-groups .home-takeover-groups {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%
}

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-groups .home-takeover-groups {
        height: auto;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start
    }
}

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group {
    width: 280px;
    padding: 12px 6px
}

    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group > section {
        margin: 0
    }

    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group tbody {
        background-color: rgba(0,0,0,0.7)
    }

        .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group tbody tr {
            height: 38px;
            background-color: rgba(196,196,196,0.1)
        }

            .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group tbody tr:nth-child(2n) {
                background-color: rgba(196,196,196,0.05)
            }

@media (max-width: 480px) {
    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group {
        width: auto;
        flex: 1 0 100%;
        padding: 0
    }
}

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-upper {
    background-color: rgba(169,207,84,0.3)
}

    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-upper:nth-child(2n) {
        background-color: rgba(169,207,84,0.23)
    }

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-lower {
    background-color: rgba(251,184,41,0.25)
}

    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-lower:nth-child(2n) {
        background-color: rgba(251,184,41,0.18)
    }

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-eliminated {
    background-color: rgba(194,60,42,0.25)
}

    .home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .rank-eliminated:nth-child(2n) {
        background-color: rgba(194,60,42,0.18)
    }

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .takeover-score {
    color: white;
    font-weight: bold
}

.home-takeover .home-takeover-article-groups .home-takeover-groups .takeover-group .takeover-match-score {
    color: #bfbfbf
}

.home-takeover .home-takeover-article-series {
    position: relative;
    padding: 0 16px
}

    .home-takeover .home-takeover-article-series .home-takeover-group-series {
        background-image: url(/images/takeovers/ti10-bg.png);
        background-color: #000;
        background-repeat: no-repeat;
        background-position: top center;
        margin-bottom: 0
    }

@media (max-width: 768px) {
    .home-takeover .home-takeover-article-series .home-takeover-group-series {
        background-image: none
    }

        .home-takeover .home-takeover-article-series .home-takeover-group-series .takeover-series {
            background-color: rgba(34,28,16,0.8) !important
        }
}

.home-takeover .home-takeover-article-series .takeover-teams {
    background: none;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    padding: 20px 8px;
    flex-direction: column
}

    .home-takeover .home-takeover-article-series .takeover-teams .teams-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 4px 0
    }

        .home-takeover .home-takeover-article-series .takeover-teams .teams-group .team-image img {
            width: 48px;
            height: auto
        }

.home-takeover .home-takeover-article-series .home-takeover-upcoming-fixture {
    background-image: none;
    margin-bottom: 0
}

    .home-takeover .home-takeover-article-series .home-takeover-upcoming-fixture .header-sponsor {
        color: white;
        font-weight: 800;
        background-color: #1c242d;
        padding: 6px;
        display: inline-block;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 6px
    }

.home-takeover .home-takeover-article-series .home-takeover-fixture {
    display: flex;
    flex-flow: row wrap
}

    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture {
        display: block;
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-height: 106px;
        margin: 6px;
        box-sizing: border-box;
        background-color: #1c242d
    }

@media (max-width: 768px) {
    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture {
        flex: 1 1 calc(100% - 12px);
        max-width: calc(100% - 12px)
    }
}

.home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .important, .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture a.important {
    color: white
}

.home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .low-light, .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture a.low-light {
    color: rgba(255,255,255,0.6)
}

.home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    border-bottom: 1px solid var(--takeover-partner-secondary)
}

    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .top-info {
        display: flex;
        justify-content: space-between;
        padding: 6px;
        font-size: 0.8em;
        background-color: var(--takeover-partner-color);
        border-bottom: 1px solid var(--takeover-partner-secondary);
        letter-spacing: 1px;
        font-weight: 800;
        color: white;
        text-transform: uppercase;
        transition: background-color 1s ease-out
    }

        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .top-info .bracket-name {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap
        }

    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body {
        background-color: #242f39;
        display: flex;
        flex-direction: column;
        flex: 1 0 auto
    }

        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .datetime {
            padding-top: 8px;
            display: flex;
            justify-content: center;
            font-size: 0.8em;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
            color: white
        }

        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info {
            display: grid;
            padding: 12px 12px;
            grid-template-columns: repeat(15, 1fr);
            align-items: center;
            overflow: hidden
        }

            .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team {
                display: inline-block;
                grid-column: span 6
            }

                .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info {
                    display: flex;
                    gap: 6px
                }

                    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .team-image img {
                        vertical-align: middle;
                        width: 48px;
                        height: auto
                    }

                    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name {
                        flex: 1 1 auto;
                        font-size: 12px;
                        align-self: center;
                        color: white;
                        text-transform: uppercase
                    }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name .team-left-odds {
                            display: inline-block;
                            opacity: 0;
                            transition: opacity 1s ease-out
                        }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name .team-right-odds {
                            display: inline-block;
                            opacity: 0;
                            transition: opacity 1s ease-out
                        }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name .team-odds {
                            background-color: var(--takeover-partner-color);
                            font-size: 12px;
                            padding: 3px 3px;
                            border-radius: 2px;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            color: white;
                            font-weight: bold;
                            gap: 3px;
                            flex-wrap: wrap
                        }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name .esports-link {
                            color: inherit
                        }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name.tba {
                            color: rgba(255,255,255,0.6)
                        }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .info-team-name.lost-series {
                            color: rgba(255,255,255,0.6);
                            text-decoration: line-through
                        }

                    .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .image {
                        align-self: center;
                        flex: 0 0 48px;
                        background-color: #222222;
                        border-radius: 2px
                    }

                        .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .team-info .image a {
                            display: inline
                        }

                .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .team .line {
                    flex: 1 1 100%;
                    font-size: 0.8em;
                    padding-top: 6px;
                    white-space: nowrap
                }

            .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .left-team {
                text-align: right
            }

            .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .right-team {
                text-align: left
            }

            .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .status {
                flex: 1 0 48px;
                text-align: center;
                display: inline-block;
                grid-column: span 3;
                place-self: center
            }

                .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .status .live {
                    display: block;
                    padding: 1px 6px 2px 6px;
                    font-weight: bold;
                    font-size: 0.8em;
                    margin-bottom: 3px;
                    background-color: #ED3B1C;
                    color: white
                }

                .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .status .score {
                    display: block;
                    padding: 6px 0;
                    font-size: 16px;
                    font-weight: 800;
                    color: white
                }

                .home-takeover .home-takeover-article-series .home-takeover-fixture .takeover-fixture .takeover-fixture-wrapper .fixture-body .mid-info .status a.score:hover {
                    transform: scale(1.1);
                    transition: 0.2s ease-in all
                }

.home-takeover .home-takeover-leagues {
    padding: 24px 0px 44px
}

    .home-takeover .home-takeover-leagues .logo {
        max-width: 100px;
        max-height: 55px;
        object-fit: contain;
        flex: 0 0 auto;
        padding: 0 24px;
        border-right: 1px solid #454e57
    }

    .home-takeover .home-takeover-leagues .league-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 24px
    }

        .home-takeover .home-takeover-leagues .league-container .leagues {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 24px
        }

        .home-takeover .home-takeover-leagues .league-container a.league {
            text-align: center;
            font-size: 18px;
            padding: 20px 12px;
            text-decoration: underline
        }

.home-blog-post header {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

    .home-blog-post header small a {
        color: #d9d9d9
    }

.home-blog-post article {
    position: relative
}

    .home-blog-post article .image {
        position: relative
    }

        .home-blog-post article .image img {
            width: 100%
        }

        .home-blog-post article .image .comments {
            position: absolute;
            bottom: 8px;
            right: 6px
        }

            .home-blog-post article .image .comments a {
                color: #A9CF54;
                background: rgba(10,10,10,0.5);
                display: block;
                padding: 4px
            }

    .home-blog-post article .summary {
        display: block
    }

        .home-blog-post article .summary p {
            display: none
        }

            .home-blog-post article .summary p:first-child {
                display: block
            }

@media (min-width: 768px) {
    .home-blog-post.home-blog-post-small header {
        font-size: 14px
    }

    .home-blog-post.home-blog-post-small article {
        overflow: auto
    }

        .home-blog-post.home-blog-post-small article .comments {
            position: absolute;
            bottom: 4px;
            right: 4px;
            font-size: 12px
        }

        .home-blog-post.home-blog-post-small article .image {
            float: left;
            margin-top: 6px
        }

            .home-blog-post.home-blog-post-small article .image img {
                width: 200px;
                height: auto
            }

        .home-blog-post.home-blog-post-small article .summary {
            margin-left: 206px
        }
}

.home-featured-heroes a {
    color: white !important
}

@media (max-width: 480px) {
    .home-featured-heroes a:nth-child(n+4) {
        display: none
    }
}

.home-featured-heroes .hero {
    position: relative;
    width: 20%;
    box-sizing: border-box;
    display: inline-block
}

@media (max-width: 480px) {
    .home-featured-heroes .hero {
        width: 33%
    }
}

.home-featured-heroes .hero-image {
    width: 100%;
    height: auto
}

.home-featured-heroes .hero-name {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 14px;
    text-shadow: 0 2px 2px #0a0a0a !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 95%;
    text-transform: uppercase
}

.home-featured-heroes .hero-stat-value {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    background: rgba(36,47,57,0.7);
    padding: 4px
}

.home-featured-heroes-8 .hero {
    width: 12.5%
}

@media (max-width: 480px) {
    .home-featured-heroes-8 .hero {
        width: 20%
    }
}

.home-featured-heroes-8 .hero-name {
    font-size: 12px
}

@media (max-width: 480px) {
    .home-featured-heroes-8 a:nth-child(n+4) {
        display: inline
    }

    .home-featured-heroes-8 a:nth-child(n+6) {
        display: none
    }
}

.home-verified-players .link-type-player {
    max-width: 120px;
    display: block
}

.home-verified-players-last-match small {
    color: rgba(255,255,255,0.6);
    font-size: 11px
}

.home-verified-players-last-match .link-type-player {
    vertical-align: top
}

.home-verified-players-last-match .won, .home-verified-players-last-match .lost, .home-verified-players-last-match .abandoned {
    vertical-align: top;
    float: right
}

.home-hero-pulse .link-type-hero {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.beta-label {
    text-transform: uppercase;
    font-size: 0.9em;
    margin-left: 6px;
    color: #ED3B1C;
    position: relative;
    bottom: 7px
}

.homepage-hero-mastery .mastery-header {
    text-transform: uppercase;
    font-size: 11px;
    display: flex;
    align-items: center;
    padding: 6px 4px
}

    .homepage-hero-mastery .mastery-header .sub {
        margin-left: 8px;
        display: flex;
        gap: 2px
    }

        .homepage-hero-mastery .mastery-header .sub b {
            font-weight: bold
        }

    .homepage-hero-mastery .mastery-header .main {
        font-size: 16px;
        font-weight: bold;
        color: #a9cf54
    }

    .homepage-hero-mastery .mastery-header .designation-new {
        align-self: flex-start;
        font-size: 9px
    }

.homepage-hero-mastery .mastery-body {
    padding: 6px;
    background-color: #242F39;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .homepage-hero-mastery .mastery-body .selected-hero-container {
        display: flex;
        font-size: 12px;
        flex-direction: column;
        background-color: #2e3740;
        padding: 6px
    }

        .homepage-hero-mastery .mastery-body .selected-hero-container .grow {
            flex-grow: 1
        }

        .homepage-hero-mastery .mastery-body .selected-hero-container .grow-2 {
            flex-grow: 2
        }

        .homepage-hero-mastery .mastery-body .selected-hero-container .hero-title {
            margin-bottom: 6px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 4px
        }

        .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero-wrapper {
            display: flex;
            align-items: center
        }

        .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 16px
        }

            .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .stat-box {
                display: flex
            }

                .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .stat-box.gap {
                    gap: 24px
                }

                .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .stat-box .hero-stat {
                    white-space: nowrap
                }

                    .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .stat-box .hero-stat .stat-title {
                        color: rgba(255,255,255,0.6);
                        margin-bottom: 4px
                    }

            .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .selected-hero-icon img {
                height: 40px
            }

            .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .selected-hero-name {
                margin-left: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center
            }

                .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .selected-hero-name .minor {
                    margin-top: 2px;
                    font-size: 10px
                }

                    .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .selected-hero-name .minor a {
                        color: rgba(255,255,255,0.6)
                    }

                        .homepage-hero-mastery .mastery-body .selected-hero-container .current-hero .selected-hero-name .minor a time {
                            cursor: pointer
                        }

body section .more-with-plus {
    padding: 6px 10px;
    border: solid 1px #FBB829;
    color: #FBB829;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content
}

    body section .more-with-plus:hover {
        transform: scale(1.05)
    }

#home-mastery .mastery-loading {
    background-color: #242F39;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase
}

    #home-mastery .mastery-loading .icon {
        color: #FBB829
    }

.trend-chart {
    display: inline-block;
    width: 50%
}

.hero-secondary-ability-icons {
    display: inline-block;
    margin-left: 16px
}

.hero-role-blocks .role {
    display: inline-block;
    width: 50%;
    box-sizing: border-box
}

    .hero-role-blocks .role .blocks .block {
        display: inline-block;
        box-shadow: inset 0 0 0 1px white;
        height: 10px;
        box-sizing: border-box;
        margin-right: 2px;
        opacity: 0.7
    }

        .hero-role-blocks .role .blocks .block.filled {
            background: white;
            opacity: 1
        }

        .hero-role-blocks .role .blocks .block:last-of-type {
            margin-right: 0
        }

    .hero-role-blocks .role .label {
        text-transform: uppercase;
        font-size: 10px
    }

.hero-grid {
    margin: 0 -1px 0 -1px
}

@media (min-width: 992px) {
    .hero-grid.smaller-grid .hero {
        width: 12.5%;
        height: 55px
    }

        .hero-grid.smaller-grid .hero .name, .hero-grid.smaller-grid .hero .mask {
            display: none;
            font-size: 11px
        }

        .hero-grid.smaller-grid .hero:hover .name, .hero-grid.smaller-grid .hero:hover .mask {
            display: inherit;
            opacity: 1.0
        }
}

.hero-grid .hero {
    cursor: pointer;
    display: inline-block;
    width: 12.27%;
    height: 82px;
    background-size: cover !important;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 1px 0 1px
}

    .hero-grid .hero:hover .mask {
        opacity: 0.1
    }

    .hero-grid .hero .mask {
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.8)));
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
        background: -o-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 1;
        z-index: 1
    }

    .hero-grid .hero .notes {
        position: absolute;
        top: 2px;
        right: 0px;
        z-index: 100
    }

    .hero-grid .hero .name {
        position: absolute;
        bottom: 6px;
        left: 6px;
        color: white;
        text-shadow: 0px 0px 2px #0a0a0a !important;
        z-index: 100;
        font-size: 13px
    }

.legend {
    height: 21px
}

    .legend .legend-entry {
        display: inline-block;
        margin-left: 8px;
        font-size: 13px
    }

    .legend .note-symbol {
        display: inline
    }

.note-symbol {
    color: white;
    display: inline-block;
    text-align: center;
    padding: 2px 3px;
    font-size: 11px;
    margin-right: 4px;
    text-shadow: none
}

    .note-symbol.pick-rate {
        background: rgba(234,3,14,0.7)
    }

    .note-symbol.win-rate {
        background: rgba(169,207,84,0.7)
    }

.hero-link {
    font-weight: 800 !important
}

.hero-show {
    display: block
}

    .hero-show .primary {
        display: block
    }

@media (min-width: 992px) {
    .hero-show .primary {
        grid-column: span 8
    }
}

.hero-show .secondary {
    display: block
}

@media (min-width: 992px) {
    .hero-show .secondary {
        grid-column: span 4
    }
}

.hero-show .both {
    display: block
}

@media (min-width: 992px) {
    .hero-show .both {
        grid-column: span 12
    }
}

.skill-build {
    display: block;
    margin-bottom: 16px
}

    .skill-build .build {
        display: block;
        width: auto !important
    }

@media (min-width: 992px) {
    .skill-build .build {
        grid-column: span 9
    }
}

.skill-build .build article.smaller {
    max-width: 594px !important
}

.skill-build .build .skill-choices {
    padding: 6px
}

.skill-build .info {
    display: block;
    padding: 8px 0 0 0
}

@media (min-width: 992px) {
    .skill-build .info {
        grid-column: span 3
    }
}

@media (max-width: 991px) {
    .skill-build .info {
        margin-left: 10px
    }
}

.skill-build .info .entry {
    display: block;
    margin-bottom: 24px;
    width: 140px
}

    .skill-build .info .entry:first-child {
        margin-left: 0
    }

    .skill-build .info .entry .value {
        font-size: 1.2em;
        padding: 0 0 4px 0
    }

    .skill-build .info .entry .meter {
        padding: 0 0 4px 0
    }

    .skill-build .info .entry .label {
        font-weight: 200;
        font-size: 0.9em;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
        color: #bfbfbf;
        margin: 0 0 8px 0
    }

.hero_attributes .main td {
    text-align: center
}

.hero_attributes img {
    height: 36px;
    width: 36px
}

.hero_attributes .primary-intelligence .int, .hero_attributes .primary-agility .agi, .hero_attributes .primary-strength .str {
    font-weight: bold;
    color: white
}

    .hero_attributes .primary-intelligence .int img, .hero_attributes .primary-agility .agi img, .hero_attributes .primary-strength .str img {
        border-radius: 20px;
        border: 2px solid white
    }

.ability-priority {
    margin-bottom: 20px
}

    .ability-priority .abilities {
        box-shadow: 0 0 3px rgba(10,10,10,0.4);
        background: #242F39;
        border-radius: 1px;
        border: 1px solid #242F39;
        padding: 4px;
        text-align: center
    }

        .ability-priority .abilities .sep {
            display: inline-block;
            font-size: 16px;
            padding: 16px 0 0 0;
            color: #8fa3b9;
            text-shadow: 1px 1px 0 #0a0a0a;
            vertical-align: baseline
        }

        .ability-priority .abilities .ability {
            display: inline-block;
            padding: 4px 12px 6px 12px;
            vertical-align: top
        }

            .ability-priority .abilities .ability .icon {
                display: block
            }

            .ability-priority .abilities .ability .hotkey {
                color: white;
                display: block;
                padding: 2px 4px;
                font-size: 16px;
                font-weight: bold;
                text-shadow: 1px 1px 0 #0a0a0a;
                text-align: center
            }

    .ability-priority .stats {
        text-align: center;
        padding: 4px 0
    }

        .ability-priority .stats .stat {
            display: inline-block;
            text-align: left;
            font-weight: 100;
            width: 50%
        }

            .ability-priority .stats .stat .value {
                font-size: 16px;
                padding: 2px
            }

            .ability-priority .stats .stat .meter {
                padding: 2px
            }

            .ability-priority .stats .stat .label {
                color: #bfbfbf;
                font-size: 11px;
                text-transform: uppercase;
                padding: 2px
            }

.talent-cell {
    width: 150px
}

    .talent-cell:first-child {
        text-align: right
    }

    .talent-cell.active {
        font-weight: bold;
        color: #d9b284;
        text-shadow: 0 0 1px #a76321 !important
    }

.talent-level {
    max-width: 30px;
    min-width: 30px;
    width: 30px;
    text-align: center
}

    .talent-level div {
        display: inline-block;
        background-color: #0F161E;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #a76321;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        color: #d9b284;
        text-shadow: 0 0 3px #a76321 !important;
        padding-top: 7px;
        box-sizing: border-box
    }

.talent-cell.talent-trend {
    padding: 15px 0 !important
}

    .talent-cell.talent-trend .talent-name {
        position: absolute !important;
        left: 10px;
        font-size: 10px !important;
        z-index: 200
    }

        .talent-cell.talent-trend .talent-name.tt-top {
            top: 3px
        }

        .talent-cell.talent-trend .talent-name.tt-bottom {
            bottom: 3px
        }

.talent-graph-row .talent-level {
    max-width: 30px;
    min-width: 30px
}

.talent-data-row {
    height: 60px;
    vertical-align: text-bottom;
    position: relative
}

    .talent-data-row .show-only-small {
        display: none
    }

    .talent-data-row .talent-cell {
        padding-left: 25px;
        position: relative;
        line-height: 1.5em
    }

        .talent-data-row .talent-cell div {
            padding: 0 4px
        }

        .talent-data-row .talent-cell span, .talent-data-row .talent-cell div {
            position: relative;
            z-index: 100
        }

        .talent-data-row .talent-cell .talent-name {
            text-shadow: 1px 1px 0px #000 !important;
            font-size: 16px;
            color: white;
            padding: 8px 4px
        }

            .talent-data-row .talent-cell .talent-name .talent-name-inner {
                position: relative;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 1px;
                max-width: 200px
            }

@media (max-width: 991px) {
    .talent-data-row .talent-cell .talent-name .talent-name-inner {
        max-width: 100px
    }
}

.talent-data-row .talent-cell .talent-background {
    position: absolute;
    height: 30px;
    top: calc(50% - 15px);
    z-index: 0;
    left: -25px
}

.talent-data-row .talent-cell:first-child {
    padding-left: 0
}

    .talent-data-row .talent-cell:first-child div {
        right: 0
    }

    .talent-data-row .talent-cell:first-child .talent-background {
        left: initial;
        right: -25px
    }

.talent-data-row .talent-level div {
    position: relative;
    z-index: 110;
    width: 50px;
    height: 50px;
    font-size: 24px;
    padding-top: 12px;
    border-radius: 25px
}

.mastery-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

    .mastery-promo a {
        display: inline-flex;
        align-items: center;
        color: #FBB829 !important;
        border: 1px solid #FBB829;
        font-size: 1rem;
        padding: 4px 8px;
        transition: 0.25s ease-in-out all
    }

        .mastery-promo a p {
            color: #FBB829 !important;
            padding: 0
        }

        .mastery-promo a .small {
            font-size: 0.6em;
            color: #A9CF54;
            align-self: baseline
        }

.hero-outline .image-container {
    overflow: visible
}

.hero-outline.faction-dire img {
    filter: drop-shadow(1px 1px 0px #C23C2A) drop-shadow(-1px -1px 0px #C23C2A) drop-shadow(1px -1px 0px #C23C2A) drop-shadow(-1px 1px 0px #C23C2A)
}

.hero-outline.faction-radiant img {
    filter: drop-shadow(1px 1px 0px #92A525) drop-shadow(-1px -1px 0px #92A525) drop-shadow(1px -1px 0px #92A525) drop-shadow(-1px 1px 0px #92A525)
}

.small-talents .show-only-small {
    display: inline
}

.small-talents .talent-data-row {
    height: 35px
}

.small-talents .talent-cell {
    padding: 0 0;
    width: auto;
    text-align: left
}

    .small-talents .talent-cell:first-child div {
        right: initial
    }

    .small-talents .talent-cell:first-child .talent-background {
        left: -25px
    }

    .small-talents .talent-cell .talent-name {
        font-size: 12px;
        padding: 4px 4px
    }

        .small-talents .talent-cell .talent-name .talent-name-inner {
            padding: 0;
            top: 1px;
            max-width: 150px
        }

    .small-talents .talent-cell .talent-background {
        position: absolute;
        height: 20px;
        top: calc(50% - 10px);
        z-index: 0
    }

    .small-talents .talent-cell .talent-pick-rate {
        display: none
    }

    .small-talents .talent-cell .talent-win-rate {
        display: none
    }

.small-talents .talent-level {
    max-width: 50px;
    width: 50px
}

    .small-talents .talent-level div {
        width: 50px;
        height: 50px;
        font-size: 22px;
        padding-top: 13px;
        border-radius: 25px
    }

.small-talents .talent-win-rate-relative {
    float: right;
    padding-top: 5px !important;
    text-shadow: 1px 1px 0 #000 !important
}

.counter-outline .equal {
    width: 110px
}

.counter-outline .image-hero {
    height: 32px !important
}

article.r-tabbed-table thead .r-only-tablet th.rating {
    padding: 4px 10px 0 10px !important
}

    article.r-tabbed-table thead .r-only-tablet th.rating img.rank-tier-base {
        width: 24px;
        height: auto
    }

article.r-tabbed-table thead .r-none-tablet img.rank-tier-base {
    width: 36px;
    height: auto
}

.highcharts-xaxis-labels .rank-tiers {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center
}

    .highcharts-xaxis-labels .rank-tiers img.rank-tier-base {
        width: 24px;
        height: auto
    }

@media (max-width: 991px) {
    .hero-abilities td.cell-centered {
        min-width: 50px
    }

    .hero-abilities article {
        overflow: auto
    }

    .hero-abilities .footnote {
        margin-left: 10px
    }

    .hero-abilities .skill-build .info {
        width: auto;
        padding: 0
    }

        .hero-abilities .skill-build .info .entry {
            float: left;
            margin-right: 10px
        }

    .hero-abilities .skill-build .build {
        width: 100%
    }

    .hero-abilities .skill-build .skill {
        width: 700px
    }

    .hero-abilities .skill-build .smaller .skill {
        width: 600px
    }
}

@media (min-width: 992px) {
    article .hero-grid .hero {
        width: 16.66%;
        margin: 0
    }
}

@media (max-width: 991px) {
    .hero-grid .hero {
        margin: 0;
        height: 63px;
        width: 12.5%
    }
}

@media (max-width: 800px) {
    .hero-grid .hero {
        width: 16.66%
    }
}

@media (max-width: 600px) {
    .hero-grid .hero {
        width: 20%
    }
}

@media (max-width: 500px) {
    .hero-grid .hero {
        width: 25%
    }
}

@media (max-width: 400px) {
    .hero-grid .hero {
        width: 33.33%
    }
}

.truesight-pending-tooltip {
    display: none;
    max-width: 400px
}

    .truesight-pending-tooltip > div {
        padding: 3px 0
    }

    .truesight-pending-tooltip .title {
        font-weight: bold;
        color: white
    }

    .truesight-pending-tooltip .explanation {
        color: #d9d9d9
    }

    .truesight-pending-tooltip .footnote {
        color: #b3b3b3
    }

.match-show {
    position: relative
}

    .match-show .truesight-intro {
        border: 1px solid #A89CEE;
        color: #A89CEE;
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
        display: inline-block;
        padding: 4px 6px;
        margin: 0 1px 0 0;
        vertical-align: middle;
        text-decoration: none;
        box-sizing: border-box;
        z-index: 800
    }

        .match-show .truesight-intro .title, .match-show .truesight-intro .icon i:before {
            color: #A89CEE !important
        }

        .match-show .truesight-intro .title {
            display: inline
        }

        .match-show .truesight-intro .icon {
            margin-left: 7px;
            display: inline
        }

@media (max-width: 768px) {
    .match-show .truesight-intro {
        float: none;
        border: none;
        position: relative;
        width: 100%;
        display: block;
        text-align: center
    }
}

.match-show .match-result {
    font-size: 1.5em;
    font-weight: 800 !important;
    line-height: 2em;
    vertical-align: middle;
    text-align: center;
    text-shadow: 1px 1px 5px black;
    text-transform: uppercase
}

.match-show .match-links {
    position: absolute;
    top: 12px;
    right: 0px
}

    .match-show .match-links a {
        margin-left: 10px
    }

.match-show .collapsible .collapsed {
    max-height: 185px;
    overflow: hidden
}

.match-show .toggle {
    border-width: 1px;
    border-style: solid;
    border-color: #596a7b;
    background: rgba(10,10,10,0.15);
    border-image: 1px solid linear-gradient(#3f4b58, #50606f);
    color: #596a7b !important;
    text-shadow: 1px 1px 0 rgba(10,10,10,0.4);
    margin-top: 0;
    display: none;
    width: 100%
}

    .match-show .toggle:hover {
        background-image: linear-gradient(rgba(89,106,123,0.06), rgba(89,106,123,0.03))
    }

    .match-show .toggle i {
        margin-left: 8px
    }

.match-show .picks-inline, .series-show .picks-inline {
    margin-top: 10px
}

@media (max-width: 991px) {
    .match-show .picks-inline, .series-show .picks-inline {
        margin-left: 5px
    }
}

.match-show .picks-inline .pick, .match-show .picks-inline .ban, .match-show .picks-inline .nom, .series-show .picks-inline .pick, .series-show .picks-inline .ban, .series-show .picks-inline .nom {
    position: relative;
    display: inline-block;
    margin: 0 4px 4px 0;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top
}

    .match-show .picks-inline .pick .image-container, .match-show .picks-inline .ban .image-container, .match-show .picks-inline .nom .image-container, .series-show .picks-inline .pick .image-container, .series-show .picks-inline .ban .image-container, .series-show .picks-inline .nom .image-container {
        margin-right: 0 !important
    }

    .match-show .picks-inline .pick .icon, .match-show .picks-inline .ban .icon, .match-show .picks-inline .nom .icon, .series-show .picks-inline .pick .icon, .series-show .picks-inline .ban .icon, .series-show .picks-inline .nom .icon {
        position: absolute;
        z-index: 100;
        font-size: 20px;
        top: -3px;
        left: -3px;
        text-shadow: 1px 1px 0 black
    }

    .match-show .picks-inline .pick .seq, .match-show .picks-inline .ban .seq, .match-show .picks-inline .nom .seq, .series-show .picks-inline .pick .seq, .series-show .picks-inline .ban .seq, .series-show .picks-inline .nom .seq {
        background: rgba(10,10,10,0.8);
        position: absolute;
        top: 0px;
        padding: 2px;
        right: 0px;
        z-index: 100;
        width: 15px
    }

    .match-show .picks-inline .pick .label, .match-show .picks-inline .ban .label, .match-show .picks-inline .nom .label, .series-show .picks-inline .pick .label, .series-show .picks-inline .ban .label, .series-show .picks-inline .nom .label {
        background: #0a0a0a;
        padding: 2px;
        color: #d9d9d9;
        line-height: 12px
    }

        .match-show .picks-inline .pick .label i, .series-show .picks-inline .pick .label i {
            color: #2ECC40
        }

        .match-show .picks-inline .nom .label i, .series-show .picks-inline .nom .label i {
            color: #CCCCCC
        }

        .match-show .picks-inline .ban .label i, .series-show .picks-inline .ban .label i {
            color: #FF4136
        }

    .match-show .picks-inline .ban .image, .series-show .picks-inline .ban .image {
        position: relative
    }

        .match-show .picks-inline .ban .image .cover, .series-show .picks-inline .ban .image .cover {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 100;
            background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 2px), red 50%, rgba(0,0,0,0) calc(50% + 2px), rgba(0,0,0,0) 100%);
            pointer-events: none
        }

        .match-show .picks-inline .ban .image img, .series-show .picks-inline .ban .image img {
            filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
            filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: gray;
            -webkit-filter: grayscale(100%)
        }

.draft-table .picks-inline .image {
    margin-left: 10px
}

    .draft-table .picks-inline .image img {
        filter: none;
        -webkit-filter: none
    }

.draft-table .picks-inline .seq {
    display: block;
    left: 0
}

.draft-table .picks-inline .pick .seq {
    color: #92A525
}

.draft-table .picks-inline .ban .seq {
    color: #C23C2A
}

.draft-table .won-draft {
    background-color: rgba(37,112,189,0.5)
}

.draft-table .img-team {
    vertical-align: bottom
}

.draft-table .img-league {
    height: auto;
    width: 100%;
    max-width: 130px
}

.match-cosmetic-drops .drop {
    display: inline-block;
    margin-right: 20px
}

    .match-cosmetic-drops .drop > div {
        text-align: center;
        padding: 4px
    }

.party-cell {
    position: relative;
    box-sizing: border-box
}

    .party-cell .image-container {
        z-index: 200
    }

    .party-cell .party-indicator-solo {
        display: none
    }

    .party-cell .party-indicator {
        z-index: 100;
        position: absolute;
        left: -3px;
        top: 50%;
        height: 100%;
        width: 10px;
        border-top: 2px solid #d9d9d9
    }

        .party-cell .party-indicator:after {
            content: "";
            height: 50%;
            top: 0;
            position: absolute;
            border-left: 2px solid #d9d9d9
        }

        .party-cell .party-indicator:before {
            content: "";
            height: 50%;
            top: -50%;
            position: absolute;
            border-left: 2px solid #d9d9d9
        }

        .party-cell .party-indicator.party-indicator-first:before {
            display: none
        }

        .party-cell .party-indicator.party-indicator-last:after {
            display: none
        }

.buff-icons img {
    height: 25px !important;
    width: auto !important
}

.buff-icons .item-modifier {
    margin-top: 2px;
    margin-right: 2px
}

.buff-icons span.title {
    display: inline-block;
    margin: 7px 4px 0 0
}

    .buff-icons span.title:after {
        content: ":"
    }

section.radiant .party-cell .party-indicator, section.radiant .party-cell .party-indicator:after, section.radiant .party-cell .party-indicator:before {
    border-color: #92A525
}

section.dire .party-cell .party-indicator, section.dire .party-cell .party-indicator:after, section.dire .party-cell .party-indicator:before {
    border-color: #C23C2A
}

.match-plus-promo {
    position: relative
}

    .match-plus-promo .header {
        font-size: 16px;
        color: white;
        padding: 4px;
        text-shadow: 1px 1px 2px black;
        text-transform: uppercase;
        font-weight: normal
    }

    .match-plus-promo .content {
        color: #d9d9d9;
        padding: 4px
    }

    .match-plus-promo .link {
        padding: 4px
    }

@media (min-width: 992px) {
    .match-plus-promo .link {
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 8px
    }
}

.footnote-container {
    display: flex;
    margin-bottom: 12px;
    flex-wrap: wrap-reverse
}

    .footnote-container .footnote {
        flex: 1
    }

@media (max-width: 768px) {
    .footnote-container .footnote {
        flex: 0 0 100%
    }
}

.match-app-promo {
    margin-left: 12px;
    flex: 1;
    box-sizing: border-box;
    background-color: #242F39;
    padding: 16px;
    text-align: center
}

@media (max-width: 768px) {
    .match-app-promo {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0px;
        margin-bottom: 12px
    }
}

.match-app-promo .predict-title {
    text-align: center;
    margin-bottom: 12px
}

    .match-app-promo .predict-title .predict-winner {
        font-weight: bold;
        text-transform: uppercase
    }

        .match-app-promo .predict-title .predict-winner.radiant {
            color: #92A525
        }

        .match-app-promo .predict-title .predict-winner.dire {
            color: #C23C2A
        }

.match-app-promo .gauge-container {
    display: flex;
    align-items: center;
    margin-bottom: 12px
}

    .match-app-promo .gauge-container .gauge {
        height: 4px
    }

        .match-app-promo .gauge-container .gauge.radiant {
            background-color: #92A525
        }

        .match-app-promo .gauge-container .gauge.dire {
            background-color: #C23C2A
        }

    .match-app-promo .gauge-container .text {
        color: white;
        font-weight: bold
    }

        .match-app-promo .gauge-container .text:first-child {
            margin-right: 10px
        }

        .match-app-promo .gauge-container .text:last-child {
            margin-left: 10px
        }

.match-app-promo .description {
    text-align: center;
    color: #b3b3b3;
    margin-bottom: 12px
}

.match-app-promo .download {
    background-position: left center;
    background-image: url(/assets/pages/app/windows_green-f8c901585ef430b7f51888e812203899828d8bee7c27e042bdc7330cb02fc327.png);
    background-repeat: no-repeat;
    padding-left: 24px;
    color: #92A525;
    text-decoration: underline
}

.match-picks {
    display: block
}

    .match-picks .radiant-picks {
        background: rgba(146,165,37,0.1)
    }

    .match-picks .dire-picks {
        background: rgba(194,60,42,0.1)
    }

    .match-picks .radiant-picks, .match-picks .dire-picks {
        display: block;
        padding: 0 !important;
        margin: 0 !important
    }

@media (min-width: 992px) {
    .match-picks .radiant-picks, .match-picks .dire-picks {
        grid-column: span 6
    }
}

.match-picks .title {
    font-size: 1.5em;
    line-height: 2em;
    vertical-align: middle;
    text-align: center;
    text-shadow: 1px 1px 5px black;
    text-transform: uppercase
}

.match-picks .phase {
    display: block;
    text-align: center
}

.match-picks .pick-phase-1, .match-picks .ban-phase-1 {
    margin-top: 12px
}

.match-picks .event {
    position: relative;
    display: inline-block;
    padding: 8px
}

    .match-picks .event .num {
        position: absolute;
        top: 2px;
        right: 2px;
        background: rgba(10,10,10,0.8);
        box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
        border-radius: 15px;
        cursor: default;
        width: 22px;
        height: 13px;
        padding: 5px 0 4px 0;
        font-size: 11px;
        text-align: center;
        vertical-align: bottom;
        z-index: 500
    }

    .match-picks .event .name {
        display: block;
        text-align: center
    }

article.collapsible, article.filterable {
    position: relative
}

input.match-log-filter[type=text] {
    position: absolute;
    top: -31px;
    right: -3px
}

.match-item-with-time {
    position: relative;
    display: inline-block;
    text-align: center;
    margin-right: 1px;
    vertical-align: top
}

    .match-item-with-time .modifier {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 8px 0;
        border-color: transparent rgba(251,184,41,0.8) transparent transparent;
        z-index: 2
    }

    .match-item-with-time .time {
        color: rgba(255,255,255,0.6);
        font-size: 10px;
        font-weight: normal
    }

    .match-item-with-time.match-item-with-time-bigicon .time {
        font-size: 11px
    }

    .match-item-with-time .outside-embed {
        pointer-events: none;
        position: absolute;
        padding: 1px 1px 1px 1px;
        color: white;
        text-shadow: 1px 1px 1px #000 !important;
        background-color: rgba(0,0,0,0.4);
        font-size: 0.85em;
        z-index: 500
    }

        .match-item-with-time .outside-embed.force-font-size {
            font-size: 11px;
            font-weight: normal
        }

        .match-item-with-time .outside-embed.top {
            top: 0;
            padding-bottom: 2px
        }

        .match-item-with-time .outside-embed.right {
            right: 0;
            padding-left: 2px
        }

        .match-item-with-time .outside-embed.bottom {
            bottom: 0;
            padding-top: 2px
        }

        .match-item-with-time .outside-embed.left {
            left: 0;
            padding-right: 2px
        }

.match-chat.filtered .space {
    display: none
}

.match-log {
    color: #d9d9d9;
    font-size: 13px;
    line-height: 16px;
    vertical-align: top
}

    .match-log .line {
        position: relative;
        padding: 4px;
        clear: both
    }

        .match-log .line .time {
            color: white;
            position: absolute;
            top: 3px;
            left: 0;
            width: 60px;
            text-align: right
        }

        .match-log .line .extras {
            position: absolute;
            top: 3px;
            left: 65px
        }

            .match-log .line .extras > * {
                margin-right: 5px;
                display: inline-block
            }

        .match-log .line .event {
            margin-left: 95px
        }

            .match-log .line .event .inline-icon, .match-log .line .event .image-hero {
                height: 17px;
                width: auto;
                vertical-align: middle
            }

            .match-log .line .event .gold {
                color: #FBB829
            }

                .match-log .line .event .gold:after {
                    content: "g"
                }

            .match-log .line .event .xp {
                color: #76B8A6
            }

                .match-log .line .event .xp:after {
                    content: "xp"
                }

            .match-log .line .event .tower, .match-log .line .event .barracks {
                color: white
            }

            .match-log .line .event .kill-sources .source .image-container {
                vertical-align: middle
            }

            .match-log .line .event .kill-sources .source .image-container-hero {
                margin-right: 5px
            }

            .match-log .line .event .expandable {
                display: none;
                padding: 0 5px 5px;
                margin-top: 5px;
                background-color: #1C242D
            }

                .match-log .line .event .expandable.expanded {
                    display: block
                }

@media (max-width: 480px) {
    .match-log .line .event .expandable.expanded {
        margin-left: 0
    }
}

.match-chat {
    padding: 8px 8px 4px 8px;
    position: relative;
    font-size: 13px
}

    .match-chat .tooltip-wrapper {
        margin-left: -20px;
        width: 10px;
        display: inline-block;
        padding-right: 6px
    }

        .match-chat .tooltip-wrapper i {
            cursor: pointer
        }

@media (max-width: 480px) {
    .match-chat .tooltip-wrapper {
        display: none
    }
}

.match-chat .none {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    color: #d9d9d9;
    display: block;
    padding: 40px 0;
    text-align: center
}

.match-chat .inline-icon {
    height: 17px;
    width: auto;
    vertical-align: middle
}

.match-chat .space {
    content: " ";
    height: 0px;
    border-top: 1px dotted #1e2730;
    margin: 5px 0
}

.match-chat .event {
    color: #d9d9d9;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
}

    .match-chat .event .time {
        display: inline-block;
        color: #d9d9d9;
        min-width: 50px;
        padding-right: 4px;
        margin-right: 20px;
        text-align: right
    }

@media (max-width: 480px) {
    .match-chat .event .time {
        margin-right: 3px
    }
}

.match-chat .event .gold {
    color: #FBB829;
    font-weight: 100
}

    .match-chat .event .gold:after {
        content: "g"
    }

.match-chat .event .tower, .match-chat .event .barracks {
    color: white
}

.match-chat .event .duration {
    color: white
}

    .match-chat .event .duration:after {
        content: "s"
    }

.performance-artifact {
    margin: 6px 0 24px
}

    .performance-artifact .header {
        position: relative;
        min-height: 34px
    }

        .performance-artifact .header .avatar {
            float: left;
            margin-bottom: 5px
        }

        .performance-artifact .header .title {
            margin-left: 8px;
            margin-bottom: 10px;
            float: left
        }

            .performance-artifact .header .title small {
                display: block;
                margin: 4px 0 0 0
            }

        .performance-artifact .header .items {
            float: right;
            margin-bottom: 5px
        }

            .performance-artifact .header .items .image-container {
                box-shadow: 0 0 3px rgba(10,10,10,0.4)
            }

            .performance-artifact .header .items .pet {
                display: inline-block;
                border-left: 1px solid rgba(10,10,10,0.3);
                margin-left: 4px;
                padding-left: 8px
            }

        .performance-artifact .header .item-modifier {
            display: inline-block;
            margin-right: 6px;
            text-align: center
        }

            .performance-artifact .header .item-modifier img {
                height: 24px
            }

            .performance-artifact .header .item-modifier .time {
                color: rgba(255,255,255,0.6);
                font-size: 11px
            }

        .performance-artifact .header .image-container-hero {
            box-shadow: 0 0 3px rgba(10,10,10,0.4)
        }

    .performance-artifact .segment .items .image-container img {
        height: 30px
    }

@media (max-width: 480px) {
    .performance-artifact .segment .items .image-container img {
        height: 24px
    }
}

@media (max-width: 991px) {
    .performance-artifact {
        box-sizing: border-box
    }
}

@media (max-width: 480px) {
    .r-row .r-stat:nth-of-type(4) {
        clear: left
    }

    .performance-artifact .header .items {
        float: none !important;
        clear: left
    }
}

@media (max-width: 340px) {
    .r-row .r-stat:nth-of-type(4) {
        clear: none
    }
}

.performance .item-segments, .performance-artifact .item-segments {
    padding: 0 0 4px 8px;
    box-sizing: border-box;
    width: 100%
}

    .performance .item-segments .item-segment, .performance-artifact .item-segments .item-segment {
        display: inline-block;
        margin: 6px 14px 0 0
    }

        .performance .item-segments .item-segment .description, .performance-artifact .item-segments .item-segment .description {
            font-size: 0.9em;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
            color: #bfbfbf;
            font-weight: bold !important;
            padding: 4px 0
        }

        .performance .item-segments .item-segment .items, .performance-artifact .item-segments .item-segment .items {
            padding: 4px 0
        }

        .performance .item-segments .item-segment.final-build, .performance-artifact .item-segments .item-segment.final-build {
            display: block
        }

            .performance .item-segments .item-segment.final-build .description, .performance-artifact .item-segments .item-segment.final-build .description {
                color: #d9d9d9;
                text-transform: uppercase
            }

.skill-choices {
    clear: both;
    padding: 8px
}

    .skill-choices .skill .line {
        display: block;
        margin-bottom: 1px
    }

        .skill-choices .skill .line .icon {
            display: inline-block
        }

        .skill-choices .skill .line .entry {
            display: inline-block;
            height: 37px;
            width: 35.4px;
            margin: 0 1px 0 0;
            padding: 10px 0 14px;
            vertical-align: top;
            text-align: center;
            box-sizing: border-box
        }

            .skill-choices .skill .line .entry.choice {
                color: white;
                border: 2px solid white;
                background: rgba(28,36,45,0.5);
                font-weight: bold
            }

                .skill-choices .skill .line .entry.choice.talent {
                    padding: 2px 0 0;
                    border: none;
                    position: relative
                }

                    .skill-choices .skill .line .entry.choice.talent .number {
                        position: absolute;
                        top: 12px;
                        left: 8px;
                        text-align: center;
                        pointer-events: none;
                        text-shadow: 2px 2px 2px #000 !important;
                        color: rgba(255,255,255,0.81)
                    }

                    .skill-choices .skill .line .entry.choice.talent img {
                        height: 34px;
                        border: 2px solid #687f8a;
                        box-sizing: border-box
                    }

            .skill-choices .skill .line .entry.empty {
                background: #1C242D;
                content: ".";
                text-indent: -2000px
            }

    .skill-choices.smaller {
        padding: 3px
    }

        .skill-choices.smaller .skill .line .entry {
            width: 32px;
            padding: 11px 0 13px 0
        }

            .skill-choices.smaller .skill .line .entry.choice {
                border: 1px solid white
            }

article.skill-choices {
    overflow: auto;
    margin-left: 42px
}

@media (max-width: 991px) {
    article.skill-choices {
        margin-left: 52px
    }
}

article.skill-choices .line {
    min-width: 915px
}

article.skill-choices.smaller .line {
    min-width: 596px
}

article.skill-choices .icon {
    position: absolute;
    z-index: 100;
    left: 0px
}

@media (max-width: 991px) {
    article.skill-choices .icon {
        left: 10px
    }
}

article.skill-choices .icon .image-container {
    box-shadow: 0 0 3px rgba(10,10,10,0.4)
}

.kill_log .gold, .objective_log .gold, .rune_log .gold {
    color: #fbb829
}

    .kill_log .gold:after, .objective_log .gold:after, .rune_log .gold:after {
        content: "g"
    }

.kill_log .inline-icon, .objective_log .inline-icon, .rune_log .inline-icon {
    height: 1em
}

.kill_log .duration, .objective_log .duration, .rune_log .duration {
    color: #29ffff
}

    .kill_log .duration:after, .objective_log .duration:after, .rune_log .duration:after {
        content: "g"
    }

.kill_log .double-damage, .objective_log .double-damage, .rune_log .double-damage {
    color: #6798f4
}

.kill_log .haste, .objective_log .haste, .rune_log .haste {
    color: #ff3c20
}

.kill_log .invisibility, .objective_log .invisibility, .rune_log .invisibility {
    color: #8816a5
}

.kill_log .illusion, .objective_log .illusion, .rune_log .illusion {
    color: #ffca2a
}

.kill_log .regeneration, .objective_log .regeneration, .rune_log .regeneration {
    color: #75ff2e
}

.kill_log .bounty, .objective_log .bounty, .rune_log .bounty {
    color: #ff5200
}

.match-farm .item-purchases .chunk {
    float: left;
    padding-right: 0.5em
}

    .match-farm .item-purchases .chunk .time {
        text-align: center
    }

.ability-builds td, .ability-builds th {
    text-align: center
}

    .ability-builds th.hero {
        text-align: left
    }

    .ability-builds td.ability {
        padding: 0;
        margin: 0
    }

.ability-builds .image-container-skill {
    padding: 0;
    margin: 0
}

.ability-builds .talents {
    border-right: 1px solid rgba(255,255,255,0.1)
}

section.radiant header {
    color: #92A525
}

    section.radiant header a {
        color: #92A525 !important
    }

section.radiant article table td:nth-child(1) a {
    color: #92A525 !important
}

section.dire header {
    color: #C23C2A
}

    section.dire header a {
        color: #C23C2A !important
    }

section.dire article table td:nth-child(1) a {
    color: #C23C2A !important
}

section header .more a {
    color: white !important
}

    section header .more a.color-premium {
        color: #FBB829 !important
    }

section header .push-down .more {
    position: relative;
    top: 23px;
    z-index: 1000
}

.match_kills td, .match_kills th {
    text-align: center
}

.match_kills .gold {
    color: #fbb829
}

    .match_kills .gold:after {
        content: "g"
    }

.kill_log .gold, .objective_log .gold, .rune_log .gold, .vision_log .gold {
    color: #fbb829
}

    .kill_log .gold:after, .objective_log .gold:after, .rune_log .gold:after, .vision_log .gold:after {
        content: "g"
    }

.kill_log .inline-icon, .objective_log .inline-icon, .rune_log .inline-icon, .vision_log .inline-icon {
    height: 1em
}

.kill_log .duration, .objective_log .duration, .rune_log .duration, .vision_log .duration {
    color: #29ffff
}

    .kill_log .duration:after, .objective_log .duration:after, .rune_log .duration:after, .vision_log .duration:after {
        content: "s"
    }

.kill_log .double-damage, .objective_log .double-damage, .rune_log .double-damage, .vision_log .double-damage {
    color: #6798f4
}

.kill_log .haste, .objective_log .haste, .rune_log .haste, .vision_log .haste {
    color: #ff3c20
}

.kill_log .invisibility, .objective_log .invisibility, .rune_log .invisibility, .vision_log .invisibility {
    color: #8816a5
}

.kill_log .illusion, .objective_log .illusion, .rune_log .illusion, .vision_log .illusion {
    color: #ffca2a
}

.kill_log .regeneration, .objective_log .regeneration, .rune_log .regeneration, .vision_log .regeneration {
    color: #75ff2e
}

.match-farm .item-purchases .chunk {
    float: left;
    padding-right: 0.5em
}

    .match-farm .item-purchases .chunk .time {
        text-align: center
    }

.item-segments .segment {
    box-shadow: 0 0 3px rgba(10,10,10,0.4);
    display: inline-block;
    background-color: #242F39;
    border-radius: 2px;
    padding: 3px;
    margin: 0 2px 4px 0;
    font-size: 11px
}

    .item-segments .segment .items {
        display: block
    }

    .item-segments .segment .time {
        color: rgba(255,255,255,0.6);
        display: block;
        text-align: center
    }

    .item-segments .segment.expanded {
        margin: 0 4px 4px 0
    }

        .item-segments .segment.expanded .time {
            margin-top: 2px;
            text-align: left
        }

.item-segments-progression {
    vertical-align: top;
    position: relative;
    white-space: nowrap
}

    .item-segments-progression .segment {
        display: inline-block;
        min-height: 40px;
        padding-right: 7px;
        position: relative;
        vertical-align: top;
        white-space: nowrap
    }

        .item-segments-progression .segment .items > img {
            margin-right: 1px
        }

        .item-segments-progression .segment .time {
            color: #C4C4C4;
            font-size: 11px;
            padding-left: 2px;
            text-transform: uppercase
        }

.lanes {
    color: #999999;
    margin-top: 2px;
    font-size: 0.9em
}

    .lanes i {
        margin: 0 3px
    }

    .lanes acronym {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px dotted rgba(217,217,217,0.3);
        cursor: default
    }

.match-minimap-event-tooltip {
    max-width: 400px;
    line-height: 150% !important;
    vertical-align: middle
}

    .match-minimap-event-tooltip a {
        color: white
    }

    .match-minimap-event-tooltip p {
        display: block;
        line-height: 170% !important
    }

    .match-minimap-event-tooltip .inline-icon {
        height: 17px;
        width: auto;
        vertical-align: middle
    }

.match-minimap {
    position: relative;
    overflow: hidden
}

    .match-minimap .time-slider {
        position: absolute;
        bottom: 16px;
        left: 32px;
        width: 80%;
        z-index: 103
    }

@media (max-width: 480px) {
    .match-minimap .time-slider {
        width: 60%
    }
}

.match-minimap .time-slider .slider.slider-horizontal {
    width: 100%
}

.match-minimap .time-slider .slider-handle {
    background-color: #A9CF54;
    background-image: none
}

.match-minimap .time-slider .slider-track {
    background-image: linear-gradient(#2E3740, #191e22)
}

.match-minimap .time-slider .slider-selection {
    background-image: linear-gradient(#A9CF54, #92bb35)
}

.match-minimap .time-clock {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 20px;
    color: white;
    padding: 6px;
    background: rgba(10,10,10,0.4);
    z-index: 103
}

@media (max-width: 480px) {
    .match-minimap .time-clock {
        font-size: 16px;
        bottom: 12px
    }
}

.match-minimap .minimap-bg {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0.7
}

.match-minimap > svg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 101
}

.match-minimap .death-event {
    position: absolute;
    display: block;
    z-index: 102;
    border-radius: 50%;
    margin-left: -16px;
    margin-top: -16px;
    overflow: visible
}

    .match-minimap .death-event img {
        width: 32px;
        height: 32px
    }

    .match-minimap .death-event.death-event-radiant {
        background: rgba(109,123,28,0.5);
        box-shadow: 0 0 0 15px rgba(109,123,28,0.5)
    }

@media (max-width: 480px) {
    .match-minimap .death-event.death-event-radiant {
        box-shadow: 0 0 0 10px rgba(109,123,28,0.5)
    }
}

.match-minimap .death-event.death-event-dire {
    background: rgba(169,52,37,0.5);
    box-shadow: 0 0 0 15px rgba(169,52,37,0.5)
}

@media (max-width: 480px) {
    .match-minimap .death-event.death-event-dire {
        box-shadow: 0 0 0 10px rgba(169,52,37,0.5)
    }
}

.match-minimap .vision-icon {
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #ffffff;
    z-index: 102
}

    .match-minimap .vision-icon.vision-icon-sentry-ward:hover {
        border: 3px solid #30bfd2
    }

    .match-minimap .vision-icon.vision-icon-observer-ward:hover {
        border: 3px solid #f2cc67
    }

    .match-minimap .vision-icon.vision-icon-radiant:hover {
        background: rgba(146,165,37,0.6)
    }

    .match-minimap .vision-icon.vision-icon-dire:hover {
        background: rgba(194,60,42,0.6)
    }

    .match-minimap .vision-icon.vision-icon-sentry-ward {
        z-index: 103;
        width: 7%;
        height: 7%;
        margin-left: -3.5%;
        margin-top: -3.5%;
        border: 3px solid rgba(48,191,210,0.6)
    }

    .match-minimap .vision-icon.vision-icon-observer-ward {
        width: 14%;
        height: 14%;
        margin-left: -7%;
        margin-top: -7%;
        border: 3px solid rgba(242,204,103,0.6)
    }

    .match-minimap .vision-icon.vision-icon-radiant {
        background: rgba(146,165,37,0.3)
    }

    .match-minimap .vision-icon.vision-icon-dire {
        background: rgba(194,60,42,0.3)
    }

.match-minimap.vision-icon-radiant {
    color: #92A525
}

.match-minimap.vision-icon-dire {
    color: #C23C2A
}

.match-minimap .hero-icons {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 102
}

    .match-minimap .hero-icons .radiant .lane-outcome-win {
        border: 2px solid #92A525;
        border-radius: 16px
    }

    .match-minimap .hero-icons .dire .lane-outcome-win {
        border: 2px solid #C23C2A;
        border-radius: 16px
    }

    .match-minimap .hero-icons img {
        position: absolute;
        width: 24px;
        height: 24px;
        -webkit-filter: drop-shadow(0px 0px 3px #000)
    }

    .match-minimap .hero-icons .radiant .p-0 {
        left: 8%
    }

        .match-minimap .hero-icons .radiant .p-0.i-0 {
            bottom: 58%
        }

        .match-minimap .hero-icons .radiant .p-0.i-1 {
            bottom: 50%
        }

        .match-minimap .hero-icons .radiant .p-0.i-2 {
            bottom: 42%
        }

        .match-minimap .hero-icons .radiant .p-0.i-3 {
            bottom: 34%
        }

        .match-minimap .hero-icons .radiant .p-0.i-4 {
            bottom: 26%
        }

    .match-minimap .hero-icons .radiant .p-1.i-0 {
        left: 42%;
        bottom: 42%
    }

    .match-minimap .hero-icons .radiant .p-1.i-1 {
        left: 40%;
        bottom: 35%
    }

    .match-minimap .hero-icons .radiant .p-1.i-2 {
        left: 35%;
        bottom: 30%
    }

    .match-minimap .hero-icons .radiant .p-1.i-3 {
        left: 30%;
        bottom: 25%
    }

    .match-minimap .hero-icons .radiant .p-1.i-4 {
        left: 25%;
        bottom: 20%
    }

    .match-minimap .hero-icons .radiant .p-2 {
        left: 85%
    }

        .match-minimap .hero-icons .radiant .p-2.i-0 {
            bottom: 23%
        }

        .match-minimap .hero-icons .radiant .p-2.i-1 {
            bottom: 15%
        }

        .match-minimap .hero-icons .radiant .p-2.i-2 {
            bottom: 7%
        }

        .match-minimap .hero-icons .radiant .p-2.i-3 {
            bottom: 7%;
            left: 77%
        }

        .match-minimap .hero-icons .radiant .p-2.i-4 {
            bottom: 7%;
            left: 69%
        }

    .match-minimap .hero-icons .radiant .p-3.i-0 {
        left: 5%;
        bottom: 5%
    }

    .match-minimap .hero-icons .radiant .p-3.i-1 {
        left: 10%;
        bottom: 10%
    }

    .match-minimap .hero-icons .radiant .p-3.i-2 {
        left: 15%;
        bottom: 15%
    }

    .match-minimap .hero-icons .radiant .p-3.i-3 {
        left: 20%;
        bottom: 20%
    }

    .match-minimap .hero-icons .radiant .p-3.i-4 {
        left: 25%;
        bottom: 25%
    }

    .match-minimap .hero-icons .radiant .p-4 {
        bottom: 20%
    }

        .match-minimap .hero-icons .radiant .p-4.i-0 {
            left: 55%
        }

        .match-minimap .hero-icons .radiant .p-4.i-1 {
            left: 62%
        }

        .match-minimap .hero-icons .radiant .p-4.i-2 {
            left: 70%
        }

        .match-minimap .hero-icons .radiant .p-4.i-3 {
            left: 78%
        }

        .match-minimap .hero-icons .radiant .p-4.i-4 {
            left: 86%
        }

    .match-minimap .hero-icons .radiant .p-5 {
        bottom: 80%
    }

        .match-minimap .hero-icons .radiant .p-5.i-0 {
            left: 45%
        }

        .match-minimap .hero-icons .radiant .p-5.i-1 {
            left: 38%
        }

        .match-minimap .hero-icons .radiant .p-5.i-2 {
            left: 29%
        }

        .match-minimap .hero-icons .radiant .p-5.i-3 {
            left: 21%
        }

        .match-minimap .hero-icons .radiant .p-5.i-4 {
            left: 13%
        }

    .match-minimap .hero-icons .dire .p-0 {
        left: 8%;
        bottom: 90%
    }

        .match-minimap .hero-icons .dire .p-0.i-0 {
            bottom: 74%
        }

        .match-minimap .hero-icons .dire .p-0.i-1 {
            bottom: 82%
        }

        .match-minimap .hero-icons .dire .p-0.i-2 {
            bottom: 90%
        }

        .match-minimap .hero-icons .dire .p-0.i-3 {
            left: 15%;
            bottom: 90%
        }

        .match-minimap .hero-icons .dire .p-0.i-4 {
            left: 23%;
            bottom: 90%
        }

    .match-minimap .hero-icons .dire .p-1.i-0 {
        left: 48%;
        bottom: 48%
    }

    .match-minimap .hero-icons .dire .p-1.i-1 {
        left: 50%;
        bottom: 55%
    }

    .match-minimap .hero-icons .dire .p-1.i-2 {
        left: 55%;
        bottom: 60%
    }

    .match-minimap .hero-icons .dire .p-1.i-3 {
        left: 60%;
        bottom: 65%
    }

    .match-minimap .hero-icons .dire .p-1.i-4 {
        left: 65%;
        bottom: 70%
    }

    .match-minimap .hero-icons .dire .p-2 {
        left: 85%
    }

        .match-minimap .hero-icons .dire .p-2.i-0 {
            bottom: 36%
        }

        .match-minimap .hero-icons .dire .p-2.i-1 {
            bottom: 44%
        }

        .match-minimap .hero-icons .dire .p-2.i-2 {
            bottom: 52%
        }

        .match-minimap .hero-icons .dire .p-2.i-3 {
            bottom: 60%
        }

        .match-minimap .hero-icons .dire .p-2.i-4 {
            bottom: 68%
        }

    .match-minimap .hero-icons .dire .p-3.i-0 {
        left: 90%;
        bottom: 90%
    }

    .match-minimap .hero-icons .dire .p-3.i-1 {
        left: 85%;
        bottom: 85%
    }

    .match-minimap .hero-icons .dire .p-3.i-2 {
        left: 80%;
        bottom: 80%
    }

    .match-minimap .hero-icons .dire .p-3.i-3 {
        left: 75%;
        bottom: 75%
    }

    .match-minimap .hero-icons .dire .p-3.i-4 {
        left: 70%;
        bottom: 70%
    }

    .match-minimap .hero-icons .dire .p-4 {
        bottom: 10%
    }

        .match-minimap .hero-icons .dire .p-4.i-0 {
            left: 55%
        }

        .match-minimap .hero-icons .dire .p-4.i-1 {
            left: 62%
        }

        .match-minimap .hero-icons .dire .p-4.i-2 {
            left: 71%
        }

        .match-minimap .hero-icons .dire .p-4.i-3 {
            left: 79%
        }

        .match-minimap .hero-icons .dire .p-4.i-4 {
            left: 87%
        }

    .match-minimap .hero-icons .dire .p-5 {
        bottom: 70%
    }

        .match-minimap .hero-icons .dire .p-5.i-0 {
            left: 45%
        }

        .match-minimap .hero-icons .dire .p-5.i-1 {
            left: 38%
        }

        .match-minimap .hero-icons .dire .p-5.i-2 {
            left: 29%
        }

        .match-minimap .hero-icons .dire .p-5.i-3 {
            left: 21%
        }

        .match-minimap .hero-icons .dire .p-5.i-4 {
            left: 13%
        }

.minimap-tooltip {
    display: none;
    background-image: url(/assets/matches/map_682-24752cfba66d63b8cb00dc0b16456d81037fc90662a3602391ce9fcf31ae1f24.jpg);
    background-size: 400px 400px;
    width: 400px;
    height: 400px;
    position: relative
}

    .minimap-tooltip .map-item {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #ffffff
    }

        .minimap-tooltip .map-item.dust-smoke {
            width: 4%;
            height: 4%;
            margin-left: -3%;
            margin-top: -3%;
            background-color: #AA8ADB
        }

        .minimap-tooltip .map-item.generic {
            width: 3%;
            height: 3%;
            margin-left: -1.5%;
            margin-top: -1.5%;
            background-color: rgba(255,255,255,0.5)
        }

        .minimap-tooltip .map-item.rune-haste {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #FC725A
        }

        .minimap-tooltip .map-item.rune-regeneration {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #3BC022
        }

        .minimap-tooltip .map-item.rune-invisibility {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #9B55CA
        }

        .minimap-tooltip .map-item.rune-double-damage {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #1CA2FA
        }

        .minimap-tooltip .map-item.rune-illusion {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #FDCB5A
        }

        .minimap-tooltip .map-item.rune-bounty {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #ff5200
        }

        .minimap-tooltip .map-item.rune-arcane {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #ed7dfb
        }

        .minimap-tooltip .map-item.rune-water {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #00ffff
        }

        .minimap-tooltip .map-item.rune-wisdom {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #F6C4CC
        }

        .minimap-tooltip .map-item.rune-shield {
            width: 4%;
            height: 4%;
            margin-left: -2%;
            margin-top: -1.5%;
            background-color: #A1A1A1
        }

        .minimap-tooltip .map-item.sentry-ward {
            width: 7%;
            height: 7%;
            margin-left: -3.5%;
            margin-top: -3.5%;
            background-color: rgba(0,201,255,0.67);
            border: 2px solid #00c9ff
        }

        .minimap-tooltip .map-item.observer-ward {
            width: 14%;
            height: 14%;
            margin-left: -7%;
            margin-top: -7%;
            background-color: rgba(255,186,3,0.67);
            border: 2px solid #ffba03
        }

        .minimap-tooltip .map-item.faction-radiant {
            border: 2px solid #21ff00
        }

        .minimap-tooltip .map-item.faction-dire {
            border: 2px solid #C23C2A
        }

        .minimap-tooltip .map-item.hero {
            width: 36px;
            height: 36px;
            background-color: transparent;
            background-position: center;
            background-repeat: no-repeat;
            border: none;
            filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
            filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: gray;
            -webkit-filter: grayscale(100%)
        }

        .minimap-tooltip .map-item.border {
            width: 40px;
            height: 40px;
            margin-left: -4px;
            margin-top: -4px
        }

            .minimap-tooltip .map-item.border.faction-radiant {
                background-color: rgba(33,255,0,0.67)
            }

            .minimap-tooltip .map-item.border.faction-dire {
                background-color: rgba(194,60,42,0.67)
            }

.ui-tooltip i {
    margin: 0 3px
}

.lane-map-tooltip {
    display: none
}

.lane-large-tooltip {
    display: none
}

    .lane-large-tooltip > div {
        display: inline-block;
        vertical-align: top;
        padding: 8px;
        text-align: center
    }

    .lane-large-tooltip .time-segment-header {
        font-size: 14px;
        color: white
    }

    .lane-large-tooltip .time-segment-entry {
        padding: 6px 0 0 0
    }

    .lane-large-tooltip .time-segment-arrow {
        color: #666666;
        font-size: 14px
    }

.minimap-hero-tooltip {
    color: #949494
}

    .minimap-hero-tooltip i {
        padding: 0 5px
    }

    .minimap-hero-tooltip .lane-entry {
        color: white
    }

.match_kills_matchups_table th {
    width: 16.6%
}

.matchups_table_entry {
    background-color: #000000;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 3px;
    margin: 3px 6px 3px 0;
    min-width: 42px;
    font-size: 18px
}

    .matchups_table_entry.matchups_table_entry_radiant_dom {
        border: 1px solid #92A525
    }

    .matchups_table_entry.matchups_table_entry_dire_dom {
        border: 1px solid #C23C2A
    }

    .matchups_table_entry.matchups_table_entry_sample {
        padding: 2px;
        margin-right: 3px;
        width: auto;
        font-weight: normal;
        font-weight: 14px
    }

.matchups_table_hero {
    text-align: center;
    display: block;
    margin: 0 auto;
    border: 2px solid #000;
    width: 80%;
    max-width: 80px
}

    .matchups_table_hero.matchups_table_hero_radiant {
        border-color: #92A525
    }

    .matchups_table_hero.matchups_table_hero_dire {
        border-color: #C23C2A
    }

    .matchups_table_hero img {
        width: 100%;
        height: auto !important
    }

    .matchups_table_hero .image-container {
        display: block
    }

.matchups_table_name {
    padding-top: 3px;
    text-align: center;
    font-weight: normal;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 480px) {
    .matchups_table_entry {
        font-size: 14px;
        min-width: 36px
    }
}

@media (max-width: 440px) {
    .matchups_table_name {
        font-size: 10px
    }
}

.match_farm_item_progression_table, .match_farm_last_hits_table, .match_overview_build_table, .hero_builds_ability_table {
    overflow: auto;
    margin-left: 66px
}

    .match_farm_item_progression_table tr th:first-child, .match_farm_last_hits_table tr th:first-child, .match_overview_build_table tr th:first-child, .hero_builds_ability_table tr th:first-child {
        position: absolute;
        z-index: 100;
        left: 5px
    }

    .match_farm_item_progression_table th .image-container-hero, .match_farm_last_hits_table th .image-container-hero, .match_overview_build_table th .image-container-hero, .hero_builds_ability_table th .image-container-hero {
        box-shadow: 0 0 3px rgba(10,10,10,0.4)
    }

    .match_farm_last_hits_table tr th:first-child {
        padding: 0 2px
    }

    .match_farm_last_hits_table tbody td {
        height: 26px;
        min-width: 30px
    }

    .match_overview_build_table tbody td {
        height: 35px;
        min-width: 32px;
        box-sizing: border-box;
        vertical-align: top
    }

        .match_overview_build_table tbody td img {
            display: inline
        }

        .match_overview_build_table tbody td .image-container {
            padding-top: 5px
        }

    .hero_builds_ability_table tbody td {
        height: 42px
    }

    .match_farm_item_progression_table td, .match_farm_item_progression_table th {
        padding-right: 8px !important
    }

.ability-breakdown-table .cell-icon {
    text-align: center
}

.action-summary-table .group, .kill-sources .group {
    padding-top: 5px;
    cursor: default
}

    .action-summary-table .group:hover, .kill-sources .group:hover {
        opacity: 0.8
    }

.action-summary-table .source .hero, .kill-sources .source .hero {
    width: 170px
}

.action-summary-table .source .total, .kill-sources .source .total {
    width: 60px
}

.action-summary-table tr.r-only-mobile, .kill-sources tr.r-only-mobile {
    background-color: #1a2229 !important
}

.action-summary-table .ability-group, .kill-sources .ability-group {
    display: inline-block;
    border-right: 1px solid rgba(10,10,10,0.35);
    padding-right: 8px;
    margin-right: 8px
}

    .action-summary-table .ability-group:last-child, .kill-sources .ability-group:last-child {
        border-right: none;
        padding-right: none;
        margin-right: none
    }

    .action-summary-table .ability-group .ability-level, .kill-sources .ability-group .ability-level {
        display: none
    }

    .action-summary-table .ability-group img, .kill-sources .ability-group img {
        margin-right: 5px;
        height: 28px
    }

    .action-summary-table .ability-group .ability-details, .kill-sources .ability-group .ability-details {
        display: inline-block;
        vertical-align: top
    }

        .action-summary-table .ability-group .ability-details .subtext, .kill-sources .ability-group .ability-details .subtext {
            margin-top: -5px
        }

.highcharts-with-annotations {
    position: relative
}

.highcharts-tooltip {
    z-index: 100
}

    .highcharts-tooltip > span {
        box-shadow: 0 0 3px rgba(10,10,10,0.4);
        background-color: #1C242D;
        padding: 7px 5px;
        border: 1px solid #2E3740;
        line-height: 130%
    }

.highcharts-annotations {
    position: absolute;
    top: 10px;
    right: 0;
    width: calc(100% - 67px);
    height: 87%;
    pointer-events: none
}

    .highcharts-annotations .annotation-column {
        pointer-events: auto;
        width: 16px;
        position: absolute;
        opacity: 0.7;
        z-index: 0
    }

        .highcharts-annotations .annotation-column:hover {
            opacity: 1;
            transform: scale(2, 2);
            -webkit-filter: drop-shadow(0px 0px 1px #000)
        }

        .highcharts-annotations .annotation-column img {
            position: absolute;
            width: 16px;
            height: 16px
        }

        .highcharts-annotations .annotation-column.the-dire {
            bottom: 0
        }

.annotation-tooltip {
    display: none
}

    .annotation-tooltip img.image-minihero {
        position: relative;
        top: 3px;
        margin-right: 2px;
        width: 16px;
        height: 16px
    }

.random {
    margin-right: 5px
}

.match-skill-acronym {
    border-bottom: 1px dotted rgba(217,217,217,0.2);
    cursor: default
}

.match-series-header article {
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
    padding: 4px 4px 0 4px
}

    .match-series-header article .league-link {
        flex-basis: 200px;
        flex-grow: 0
    }

    .match-series-header article .flex-small {
        margin-right: 5px
    }

    .match-series-header article .series-link {
        flex-basis: 100px;
        flex-grow: 1;
        padding: 5px
    }

        .match-series-header article .series-link .link {
            font-size: 1.3em
        }

        .match-series-header article .series-link .head-to-head .team {
            margin-top: 5px
        }

            .match-series-header article .series-link .head-to-head .team img {
                width: 36px;
                height: 22px
            }

        .match-series-header article .series-link .head-to-head .score {
            float: right;
            margin-top: 6px;
            font-size: 1.2em;
            clear: right
        }

    .match-series-header article .game-link {
        position: relative;
        padding-top: 15px;
        height: 80px;
        overflow: hidden;
        box-sizing: border-box
    }

        .match-series-header article .game-link .link, .match-series-header article .game-link .empty {
            width: 100%;
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            padding: 5px;
            z-index: 100;
            box-sizing: border-box
        }

        .match-series-header article .game-link .duration {
            position: absolute;
            top: 5px;
            right: 5px
        }

        .match-series-header article .game-link .empty, .match-series-header article .game-link .live .link {
            text-align: center;
            font-size: 1.2em;
            padding: 22px;
            line-height: 1.2em
        }

        .match-series-header article .game-link .live .link {
            border: 1px solid
        }

    .match-series-header article .match-score {
        width: 100%;
        background-color: transparent;
        float: none;
        box-shadow: none;
        color: inherit !important
    }

        .match-series-header article .match-score .centered {
            font-size: 0.8rem
        }

            .match-series-header article .match-score .centered.marker {
                top: 18px;
                opacity: 0.8
            }

        .match-series-header article .match-score .score-line {
            margin-top: 3px
        }

    .match-series-header article .league-link img {
        width: 100%;
        height: auto
    }

    .match-series-header article .results .winner {
        color: white
    }

    .match-series-header article .results .active, .match-series-header article .results .game-link:hover {
        background-color: #39444f
    }

        .match-series-header article .results .active a, .match-series-header article .results .game-link:hover a {
            color: white
        }

.truesight-icon-group {
    float: right
}

.match-victory-subtitle {
    text-align: center
}

    .match-victory-subtitle .score {
        font-size: 1.5em;
        width: 40px;
        display: inline-block
    }

    .match-victory-subtitle .the-radiant {
        text-align: right
    }

    .match-victory-subtitle .the-dire {
        text-align: left
    }

    .match-victory-subtitle .duration {
        margin: 0 1em;
        position: relative;
        top: -3px
    }

.match-victim-kills {
    display: flex;
    flex-wrap: wrap
}

    .match-victim-kills section {
        flex: 1;
        flex-basis: 300px
    }

        .match-victim-kills section:first-child {
            margin-right: 1em
        }

        .match-victim-kills section .victim {
            display: inline-block;
            vertical-align: bottom
        }

            .match-victim-kills section .victim img {
                height: 24px
            }

        .match-victim-kills section .tooltip {
            display: none
        }

        .match-victim-kills section .kills {
            display: inline-block;
            padding: 4px;
            vertical-align: text-top;
            background-color: rgba(0,0,0,0.2);
            margin-top: -8px;
            margin-left: 2px;
            font-size: 1.1em
        }

            .match-victim-kills section .kills.with-gold {
                margin-top: 1px;
                padding: 0 0 2px 2px;
                background-color: transparent;
                vertical-align: top;
                min-width: 35px
            }

            .match-victim-kills section .kills .gold {
                display: inline;
                border-bottom: 1px dotted rgba(217,217,217,0.3);
                font-size: 0.7em
            }

        .match-victim-kills section td {
            padding-left: 5px;
            line-height: 1.1em
        }

@media (max-width: 480px) {
    .match-victim-kills section td {
        text-align: center
    }
}

.match-victim-kills section td.none {
    opacity: 0.4
}

.table-legend {
    float: right
}

    .table-legend span {
        margin-left: 4px;
        text-transform: none;
        font-size: 0.9em;
        position: relative;
        top: 8px;
        color: #727577
    }

.global-max, .global-min {
    border-bottom: 1px solid
}

.victory-icon {
    margin-left: 4px;
    color: white
}

tr.self-player:not(:hover) {
    background-color: #1C242D !important
}

.subtext.abandoned + br {
    display: none
}

html.dark-moon-skin {
    background-color: #2f3841;
    background-image: url(/assets/dark-moon-background-9708b7fc515a69e502909108568d6903afbfee5a9774467de5b8541d6c0763e7.jpg);
    background-position: top center;
    background-repeat: no-repeat
}

    html.dark-moon-skin .notification.steam, html.dark-moon-skin .notification.announce {
        display: none
    }

    html.dark-moon-skin div.container-inner-content {
        background-color: transparent !important
    }

html.siltbreaker-skin {
    background-color: #0b1820;
    background-image: url(/assets/siltbreaker-background-6ffe3760ee16e9de0733f0c2cf7a05a0d55ec514c1e9ff7d30faa74c2e44ccdb.jpg);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat
}

    html.siltbreaker-skin .notification.steam, html.siltbreaker-skin .notification.announce {
        display: none
    }

    html.siltbreaker-skin div.container-inner-content {
        background-color: transparent !important
    }

.custom-game-container {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(10,10,10,0.55);
    background: rgba(10,10,10,0.65)
}

    .custom-game-container h2 {
        font-size: 28px;
        text-align: center;
        padding: 14px
    }

        .custom-game-container h2 .subtext {
            font-size: 16px !important
        }

    .custom-game-container .custom-game-breakdown {
        text-align: center;
        display: flex;
        margin-bottom: 2em;
        flex-wrap: wrap
    }

        .custom-game-container .custom-game-breakdown .pop {
            padding: 0.8em;
            flex: 1 0 auto
        }

            .custom-game-container .custom-game-breakdown .pop .header {
                font-weight: bold;
                width: 100%;
                margin-bottom: 1em
            }

            .custom-game-container .custom-game-breakdown .pop .entries {
                display: flex;
                height: 52px;
                align-items: center
            }

                .custom-game-container .custom-game-breakdown .pop .entries .entry {
                    flex: 1
                }

                    .custom-game-container .custom-game-breakdown .pop .entries .entry .count {
                        font-size: 0.9em;
                        margin-top: 0.5em;
                        color: rgba(255,255,255,0.6)
                    }

.single-lines.frostivus {
    position: relative
}

    .single-lines.frostivus .victory-icon {
        position: absolute;
        right: 0;
        padding-right: 8px
    }

.promo-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

@media (max-width: 768px) {
    .promo-wrap {
        justify-content: center
    }
}

.promo-wrap .trackdota-promo {
    display: flex
}

@media (max-width: 768px) {
    .promo-wrap .trackdota-promo {
        justify-content: center;
        padding: 4px
    }
}

.promo-wrap .trackdota-promo a {
    display: inline-flex;
    align-items: center;
    color: #e84256 !important;
    border: 1px solid #e84256;
    padding: 4px 8px;
    font-size: 1rem;
    transition: 0.25s ease-in-out all
}

    .promo-wrap .trackdota-promo a span {
        padding: 0 4px 0 8px
    }

    .promo-wrap .trackdota-promo a div.logo {
        background-image: url(/assets/trackdota-favicon-65e73abe24af314a44877c4ce434d9c0fb8721764351e2cc64272a691e458190.svg);
        height: 1rem;
        width: 1rem;
        background-size: contain;
        background-position: center center
    }

    .promo-wrap .trackdota-promo a img.hero {
        height: 20px;
        width: 35px;
        border-radius: 2px;
        object-fit: cover
    }

.promo-wrap .app-promo {
    display: flex
}

@media (max-width: 768px) {
    .promo-wrap .app-promo {
        justify-content: center;
        padding: 4px
    }
}

.promo-wrap .app-promo a {
    display: inline-flex;
    align-items: center;
    color: #92A525 !important;
    border: 1px solid #92A525;
    padding: 4px 8px;
    font-size: 1rem;
    transition: 0.25s ease-in-out all
}

    .promo-wrap .app-promo a span {
        padding: 0 0px 0 8px
    }

    .promo-wrap .app-promo a div.logo {
        background-image: url(/assets/pages/app/windows_green-f8c901585ef430b7f51888e812203899828d8bee7c27e042bdc7330cb02fc327.png);
        height: 1rem;
        width: 1rem;
        background-size: contain;
        background-position: center center
    }

.promo-wrap .mastery-promo {
    display: flex
}

@media (max-width: 768px) {
    .promo-wrap .mastery-promo {
        justify-content: center;
        padding: 4px
    }
}

.promo-wrap .mastery-promo .played {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px
}

    .promo-wrap .mastery-promo .played img.hero {
        height: 24px;
        width: 40px;
        border-radius: 2px;
        object-fit: cover;
        margin-left: 4px
    }

.promo-wrap .mastery-promo a {
    display: inline-flex;
    align-items: center;
    color: #FBB829 !important;
    border: 1px solid #FBB829;
    padding: 4px 8px;
    font-size: 1rem;
    transition: 0.25s ease-in-out all
}

    .promo-wrap .mastery-promo a .small {
        font-size: 0.6em;
        color: #A9CF54;
        align-self: baseline
    }

.poll-show {
    display: block
}

    .poll-show .description {
        display: block;
        margin-top: 8px
    }

@media (min-width: 992px) {
    .poll-show .description {
        grid-column: span 7
    }
}

.poll-show .description p {
    line-height: 150%;
    padding: 10px 0
}

.poll-show .action {
    display: block
}

@media (min-width: 992px) {
    .poll-show .action {
        grid-column: span 5
    }
}

.poll-show .action article {
    font-size: 1.1em;
    padding-bottom: 8px
}

    .poll-show .action article div.input > label {
        color: white;
        line-height: 125%
    }

.team.dire {
    color: #C23C2A
}

.team.radiant {
    color: #92A525
}

.team-show {
    display: block
}

    .team-show .primary {
        display: block
    }

@media (min-width: 992px) {
    .team-show .primary {
        grid-column: span 8
    }
}

.team-show .secondary {
    display: block
}

@media (min-width: 992px) {
    .team-show .secondary {
        grid-column: span 4
    }
}

.draw {
    color: #7f7f7f !important
}

.lost, .negative {
    color: #C23C2A !important
}

.won, .positive {
    color: #A9CF54 !important
}

.abandoned {
    color: #a6a6a6 !important
}

.matchid {
    color: #d9d9d9 !important
}

.premium, .popularity {
    color: #FBB829 !important
}

.greeviling {
    color: #2ed14f !important
}

.player-team-0 {
    color: #92A525 !important
}

.player-team-1 {
    color: #C23C2A !important
}

.dbr {
    color: #68d1f6 !important
}

dd.admin, span.value.admin {
    color: #A97DC1 !important
}

span.score {
    color: #A89CEE
}

.top-performance-small-line .inline-item {
    display: inline-block;
    text-align: center
}

    .top-performance-small-line .inline-item .icon.very-important .image-container-icon {
        border: 1px solid #FBB829;
        box-shadow: 0 0 4px #FBB829
    }

    .top-performance-small-line .inline-item .icon.important .image-container-icon {
        border: 1px solid rgba(251,184,41,0.4);
        box-shadow: 0 0 4px rgba(251,184,41,0.4)
    }

    .top-performance-small-line .inline-item .icon.boots .image-container-icon {
        border: 1px solid #76B8A6;
        box-shadow: 0 0 4px #76B8A6
    }

    .top-performance-small-line .inline-item .time {
        font-size: 10px;
        margin: 1px 0 0 0;
        color: #b3b3b3
    }

.top-performance-small-line .lhd-record .last-hits {
    color: #A9CF54
}

.top-performance-small-line .kda-text {
    color: #EA030E
}

.top-performance-small-line .gpm-text {
    color: #FBB829
}

.top-performance-small-line .xpm-text {
    color: #76B8A6
}

.top-performance {
    position: relative;
    padding: 8px
}

    .top-performance .player {
        position: relative
    }

        .top-performance .player .avatar {
            display: inline-block;
            float: left
        }

        .top-performance .player .details {
            margin-left: 8px;
            display: inline
        }

            .top-performance .player .details .name {
                display: inline;
                font-size: 24px;
                font-weight: bold;
                margin: 0 8px 6px 0
            }

                .top-performance .player .details .name span.description {
                    color: #b3b3b3;
                    display: inline;
                    font-size: 16px;
                    font-weight: 100;
                    margin-left: 5px;
                    text-transform: lowercase
                }

                    .top-performance .player .details .name span.description em {
                        color: white;
                        font-weight: 100
                    }

                        .top-performance .player .details .name span.description em a {
                            color: white !important;
                            text-decoration: none
                        }

            .top-performance .player .details .extras {
                margin-left: 52px;
                margin-top: 4px
            }

                .top-performance .player .details .extras .entry {
                    display: inline-block;
                    margin-right: 12px;
                    font-size: 11px;
                    color: #b3b3b3;
                    text-transform: uppercase
                }

                    .top-performance .player .details .extras .entry.rank a {
                        color: #A89CEE !important;
                        font-weight: bold
                    }

    .top-performance .match-details {
        position: absolute;
        top: 8px;
        right: 8px;
        text-align: right
    }

        .top-performance .match-details .final-items .item {
            text-align: center;
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            margin-left: 2px
        }

            .top-performance .match-details .final-items .item .icon {
                margin-bottom: 3px
            }

            .top-performance .match-details .final-items .item .time {
                font-size: 10px;
                padding: 2px;
                color: #b3b3b3
            }

        .top-performance .match-details .score {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px
        }

            .top-performance .match-details .score span.points {
                color: #A89CEE
            }

        .top-performance .match-details .link {
            margin-top: 5px
        }

    .top-performance .performance-details {
        clear: both;
        margin: 5px 0 0 -3px
    }

        .top-performance .performance-details .entry {
            display: inline-block;
            margin-right: 6px;
            padding: 4px;
            min-width: 40px
        }

            .top-performance .performance-details .entry .value {
                font-size: 20px;
                font-weight: bold;
                padding-bottom: 4px;
                color: white
            }

                .top-performance .performance-details .entry .value.kda span.kills {
                    color: #EA030E
                }

                .top-performance .performance-details .entry .value.kda span.deaths {
                    color: #979797
                }

                .top-performance .performance-details .entry .value.kda span.assists {
                    color: #A9CF54
                }

                .top-performance .performance-details .entry .value.gpm {
                    color: #FBB829
                }

                .top-performance .performance-details .entry .value.xpm {
                    color: #76B8A6
                }

                .top-performance .performance-details .entry .value.runes {
                    color: #ff5200
                }

                .top-performance .performance-details .entry .value.apm {
                    color: #D56D9F
                }

                .top-performance .performance-details .entry .value.last-hits {
                    color: #A9CF54
                }

                .top-performance .performance-details .entry .value span.sep {
                    font-weight: normal;
                    color: rgba(217,217,217,0.5);
                    padding: 0 2px
                }

            .top-performance .performance-details .entry .label {
                font-size: 11px;
                color: #b3b3b3;
                text-transform: uppercase
            }

    .top-performance .ability-build {
        margin: 8px 0 0 0
    }

        .top-performance .ability-build .ability {
            text-align: center;
            display: inline-block;
            font-size: 12px;
            margin-right: 2px
        }

            .top-performance .ability-build .ability .icon {
                margin-bottom: 3px
            }

            .top-performance .ability-build .ability .level {
                color: #d9d9d9
            }

            .top-performance .ability-build .ability .time {
                font-size: 10px;
                padding: 2px;
                color: #b3b3b3
            }

    .top-performance .item-build {
        margin: 12px 0 0 0
    }

        .top-performance .item-build .segment {
            display: inline-block;
            margin: 0 8px 8px 0
        }

            .top-performance .item-build .segment .items > div {
                display: inline-block
            }

            .top-performance .item-build .segment .time {
                font-size: 11px;
                margin: 2px 0 0 0;
                color: #b3b3b3
            }

.performance {
    padding: 16px 0 24px 0;
    border-bottom: 1px solid rgba(10,10,10,0.2)
}

    .performance:last-child {
        border-bottom: 0
    }

    .performance .header {
        position: relative;
        min-height: 34px
    }

        .performance .header .avatar {
            position: absolute;
            top: 0px;
            left: 0px
        }

        .performance .header .title {
            display: inline-block;
            margin-left: 54px
        }

            .performance .header .title small {
                display: block;
                margin: 4px 0 0 0
            }

        .performance .header .details {
            display: inline-block
        }

            .performance .header .details > div {
                margin-left: 8px;
                padding: 0 12px;
                display: inline-block
            }

                .performance .header .details > div small {
                    display: block;
                    margin: 4px 0 0 0
                }

        .performance .header .items {
            position: absolute;
            right: -2px;
            bottom: 4px
        }

    .performance .subheader {
        padding: 8px 0 0 0
    }

        .performance .subheader .entry {
            display: inline-block;
            margin-left: 20px;
            width: 176px
        }

            .performance .subheader .entry:first-child {
                margin-left: 0
            }

            .performance .subheader .entry .value {
                font-size: 1.2em;
                padding: 0 0 4px 0
            }

            .performance .subheader .entry .meter {
                padding: 0 0 4px 0
            }

            .performance .subheader .entry .label {
                font-weight: 200;
                font-size: 0.9em;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
                color: #bfbfbf;
                margin: 0 0 8px 0
            }

.performance-comparison {
    position: relative;
    background: rgba(10,10,10,0.2);
    margin: 12px 0 16px 0
}

    .performance-comparison .match {
        display: inline-block;
        width: 160px;
        vertical-align: top;
        text-align: center;
        padding: 12px 20px
    }

        .performance-comparison .match .result {
            text-align: center;
            font-size: 1.6em;
            font-weight: 500
        }

        .performance-comparison .match .matchid {
            font-size: 0.9em;
            text-align: center;
            margin-top: 2px
        }

        .performance-comparison .match .duration {
            clear: both;
            display: inline-block;
            margin-top: 20px;
            text-align: center;
            width: 120px
        }

            .performance-comparison .match .duration .value {
                font-size: 1.2em;
                padding: 0 0 2px 0
            }

            .performance-comparison .match .duration .meter {
                padding: 0 0 2px 0
            }

                .performance-comparison .match .duration .meter .bar {
                    text-align: left
                }

            .performance-comparison .match .duration .label {
                font-weight: 200;
                font-size: 0.9em;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
                color: #bfbfbf
            }

    .performance-comparison .player-won {
        background: rgba(169,207,84,0.1)
    }

    .performance-comparison .player-lost {
        background: rgba(194,60,42,0.2)
    }

    .performance-comparison .player {
        position: relative;
        display: inline-block;
        padding: 8px;
        width: 369px
    }

        .performance-comparison .player .player-avatar {
            display: inline-block;
            width: 48px
        }

        .performance-comparison .player .hero-avatar {
            display: inline-block;
            width: 86px
        }

        .performance-comparison .player .name {
            display: inline-block;
            padding: 4px;
            vertical-align: top
        }

            .performance-comparison .player .name .player-name a {
                font-size: 1.6em;
                font-weight: 500
            }

    .performance-comparison .items {
        padding: 4px 0
    }

    .performance-comparison .stats {
        display: block;
        margin-top: 14px
    }

        .performance-comparison .stats .entry {
            display: inline-block;
            margin-right: 8px;
            width: 84px
        }

            .performance-comparison .stats .entry:first-child {
                margin-left: 0
            }

            .performance-comparison .stats .entry .value {
                font-size: 1.2em;
                padding: 0 0 4px 0
            }

            .performance-comparison .stats .entry .meter {
                padding: 0 0 4px 0
            }

            .performance-comparison .stats .entry .label {
                font-weight: 200;
                font-size: 0.9em;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
                color: #bfbfbf;
                margin: 0 0 8px 0
            }

form.premium-sale-form {
    padding: 6px
}

@media (min-width: 992px) {
    form.premium-sale-form {
        margin: auto;
        width: 720px
    }
}

form.premium-sale-form div.step {
    margin-bottom: 12px
}

    form.premium-sale-form div.step div.step-title {
        font-size: 16px;
        padding: 8px 0;
        color: white
    }

        form.premium-sale-form div.step div.step-title span.small {
            color: #C4C4C4;
            margin-left: 6px;
            font-size: 14px
        }

    form.premium-sale-form div.step div.step-body {
        padding: 8px 0
    }

        form.premium-sale-form div.step div.step-body p {
            color: #C4C4C4;
            padding: 4px 0
        }

form.premium-sale-form div.plan-selection {
    color: white
}

    form.premium-sale-form div.plan-selection span.details {
        color: #C4C4C4
    }

    form.premium-sale-form div.plan-selection span.ordinary-cost {
        text-decoration: line-through
    }

    form.premium-sale-form div.plan-selection span.savings {
        color: #c9e194
    }

form.premium-sale-form div.payment-method-selection div.payment-method-choice {
    display: inline-block;
    height: 32px;
    padding-right: 12px
}

    form.premium-sale-form div.payment-method-selection div.payment-method-choice label img {
        height: 26px;
        cursor: pointer;
        width: auto
    }

form.premium-sale-form .payment-partner {
    padding: 8px;
    background: #1C242D;
    color: white
}

form.premium-sale-form .payment-partner-cards {
    margin-top: 6px;
    text-align: right
}

    form.premium-sale-form .payment-partner-cards img {
        height: 20px;
        width: auto;
        margin-right: 2px
    }

form.premium-sale-form div.payment-method-details {
    display: none
}

    form.premium-sale-form div.payment-method-details.active {
        display: block
    }

.d3-tip {
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    line-height: 125%;
    padding: 12px;
    max-width: 360px;
    text-align: justify
}

@media (min-width: 992px) {
    .player-header-interactive {
        margin-top: -14px
    }
}

.player-chart-container {
    width: 100%
}

    .player-chart-container .no-data {
        padding: 200px 0;
        text-align: center
    }

    .player-chart-container svg .axis path {
        fill: none;
        stroke: none
    }

    .player-chart-container svg .axis line {
        fill: none;
        stroke: #0a0a0a;
        stroke-opacity: 0.2;
        shape-rendering: crispEdges
    }

    .player-chart-container svg .axis text {
        fill: #d9d9d9;
        fill-opacity: 0.3;
        stroke: none;
        shape-rendering: crispEdges
    }

.player-personal-ranking {
    position: relative;
    font-family: Arial;
    margin-bottom: 16px
}

    .player-personal-ranking .trend-chart {
        position: absolute
    }

        .player-personal-ranking .trend-chart.trend-chart-rank {
            bottom: 65px;
            left: 250px
        }

            .player-personal-ranking .trend-chart.trend-chart-rank circle {
                fill: white
            }

        .player-personal-ranking .trend-chart.trend-chart-score {
            bottom: 65px;
            left: 400px
        }

            .player-personal-ranking .trend-chart.trend-chart-score circle {
                fill: #A89CEE
            }

        .player-personal-ranking .trend-chart.trend-chart-win-rate {
            bottom: 65px;
            left: 550px
        }

            .player-personal-ranking .trend-chart.trend-chart-win-rate circle {
                fill: #A9CF54
            }

        .player-personal-ranking .trend-chart.trend-chart-matches-played {
            bottom: 65px;
            left: 700px
        }

            .player-personal-ranking .trend-chart.trend-chart-matches-played circle {
                fill: #EA030E
            }

        .player-personal-ranking .trend-chart.trend-chart-kda-ratio {
            bottom: 65px;
            left: 850px
        }

            .player-personal-ranking .trend-chart.trend-chart-kda-ratio circle {
                fill: #F26522
            }

    .player-personal-ranking .name {
        color: white;
        font-size: 32px;
        padding: 12px 0 18px 0;
        text-align: center;
        text-shadow: 0 1px 1px black;
        text-transform: uppercase
    }

        .player-personal-ranking .name span.on {
            color: #FBB829
        }

        .player-personal-ranking .name span.hero {
            color: #bfbfbf
        }

        .player-personal-ranking .name .last-match {
            display: block;
            font-size: 12px;
            padding: 8px 0;
            text-align: center
        }

            .player-personal-ranking .name .last-match a {
                cursor: pointer
            }

    .player-personal-ranking .explanation {
        position: absolute;
        top: 110px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        color: white;
        font-size: 24px;
        text-align: center;
        text-shadow: 0 1px 1px black;
        z-index: 100
    }

        .player-personal-ranking .explanation span.highlight {
            color: #A89CEE
        }

        .player-personal-ranking .explanation.small {
            font-size: 21px;
            padding: 0 0 16px 0
        }

        .player-personal-ranking .explanation.smallest {
            font-size: 18px;
            padding: 0 0 16px 0
        }

    .player-personal-ranking .avatar {
        position: absolute;
        top: 10px;
        right: 10px
    }

    .player-personal-ranking .sample .stats {
        opacity: 0.1
    }

    .player-personal-ranking .stats {
        position: relative;
        text-align: center
    }

        .player-personal-ranking .stats .stat {
            display: inline-block;
            margin-bottom: 8px
        }

            .player-personal-ranking .stats .stat .radial-svg .component {
                fill: black;
                fill-opacity: 0.6
            }

                .player-personal-ranking .stats .stat .radial-svg .component .background {
                    fill-opacity: 0.0
                }

                .player-personal-ranking .stats .stat .radial-svg .component .label {
                    fill: white;
                    text-anchor: middle
                }

            .player-personal-ranking .stats .stat .radial-svg .label {
                text-anchor: middle;
                fill: white;
                fill-opacity: 1.0
            }

            .player-personal-ranking .stats .stat .radial-svg .arc, .player-personal-ranking .stats .stat .radial-svg .arc2 {
                stroke-weight: 0.1
            }

            .player-personal-ranking .stats .stat .radial-svg .arc {
                z-index: 10
            }

            .player-personal-ranking .stats .stat .radial-svg .arc2 {
                z-index: 20
            }

            .player-personal-ranking .stats .stat.stat-division-bronze .arc {
                fill: #C7783A
            }

            .player-personal-ranking .stats .stat.stat-division-silver .arc {
                fill: #A9BBAF
            }

            .player-personal-ranking .stats .stat.stat-division-gold .arc {
                fill: #EEC357
            }

            .player-personal-ranking .stats .stat.stat-division-platinum .arc {
                fill: #9EC1EB
            }

            .player-personal-ranking .stats .stat.stat-division-diamond .arc {
                fill: #CAD8F4
            }

            .player-personal-ranking .stats .stat.stat-division-professional .arc {
                fill: #39CCCC
            }

            .player-personal-ranking .stats .stat.stat-rank .arc, .player-personal-ranking .stats .stat.stat-rank .arc2, .player-personal-ranking .stats .stat.stat-percentile .arc, .player-personal-ranking .stats .stat.stat-percentile .arc2 {
                fill: white
            }

            .player-personal-ranking .stats .stat.stat-score .arc, .player-personal-ranking .stats .stat.stat-score .arc2 {
                fill: #A89CEE
            }

            .player-personal-ranking .stats .stat.stat-win-rate .arc {
                fill: #A9CF54
            }

            .player-personal-ranking .stats .stat.stat-win-rate .arc2 {
                fill: #c2e76f
            }

            .player-personal-ranking .stats .stat.stat-matches .arc {
                fill: #EA030E
            }

            .player-personal-ranking .stats .stat.stat-matches .arc2 {
                fill: #ff212c
            }

            .player-personal-ranking .stats .stat.stat-kda-ratio .arc {
                fill: #F26522
            }

            .player-personal-ranking .stats .stat.stat-kda-ratio .arc2 {
                fill: #ff8348
            }

@media (max-width: 991px) {
    .player-personal-ranking .name {
        font-size: 20px
    }

    .player-personal-ranking .explanation {
        top: 70px;
        font-size: 18px;
        padding: 0 20px
    }

    .player-personal-ranking .stat {
        min-width: 100px;
        margin-right: 10px;
        margin-bottom: 15px !important
    }

    .player-personal-ranking .r-line-graph {
        position: relative;
        text-align: left;
        width: 100%;
        display: inline-block !important
    }

        .player-personal-ranking .r-line-graph .bar {
            background-color: #000
        }

        .player-personal-ranking .r-line-graph .r-label {
            color: rgba(255,255,255,0.6);
            font-weight: normal;
            font-size: 14px;
            display: block;
            position: absolute;
            text-transform: lowercase;
            font-variant: small-caps;
            bottom: 0;
            width: 100%;
            bottom: -15px
        }

            .player-personal-ranking .r-line-graph .r-label.r-always-hidden {
                display: none
            }
}

.player-records .record {
    position: relative;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 380px;
    margin: 8px;
    background: #1C242D
}

@media (max-width: 768px) {
    .player-records .record {
        display: block;
        width: auto
    }
}

.player-records .record .backdrop {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(10,10,10,0.8)
}

.player-records .record .card {
    position: relative;
    text-shadow: 0 1px 1px #0a0a0a
}

    .player-records .record .card .title {
        color: white;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 27px 0 0 0
    }

    .player-records .record .card .value {
        font-size: 28px;
        padding: 20px 0;
        text-align: center;
        color: #A9CF54
    }

    .player-records .record .card .hero {
        color: white;
        font-size: 14px;
        text-align: center;
        padding: 4px 0
    }

    .player-records .record .card .details {
        color: #d9d9d9;
        font-size: 12px;
        text-align: center;
        padding: 13px 0
    }

    .player-records .record .card .trend {
        opacity: 0.6;
        height: 48px;
        margin: -4px
    }

    .player-records .record .card .previous table {
        border: 0
    }

        .player-records .record .card .previous table .previous-value {
            color: white;
            font-size: 13px
        }

.player-records .record:hover {
    margin: 6px;
    border: 2px solid #A9CF54
}

    .player-records .record:hover .backdrop {
        background: rgba(10,10,10,0.5)
    }

    .player-records .record:hover .trend {
        opacity: 1
    }

.player-records .record-box {
    float: left;
    width: 594px;
    overflow: auto
}

    .player-records .record-box:nth-child(odd) {
        margin-right: 24px
    }

    .player-records .record-box article {
        overflow: auto
    }

    .player-records .record-box .streaks {
        float: left;
        width: 50%
    }

        .player-records .record-box .streaks tbody tr {
            height: 39px
        }

            .player-records .record-box .streaks tbody tr td {
                text-align: center
            }

.player-records .value {
    font-size: 1.3em;
    font-weight: 800 !important
}

.player-activity {
    margin-bottom: 12px
}

    .player-activity i {
        cursor: default
    }

    .player-activity .highcharts-data-labels span {
        z-index: -1
    }

.player-activity-player-page .year-chart .labels div {
    height: 17px
}

@media (min-width: 1200px) {
    .player-activity-player-page .year-chart .labels div {
        height: 22px
    }
}

.player-activity-player-page .year-chart .day {
    height: 17px;
    width: 17px
}

@media (min-width: 1200px) {
    .player-activity-player-page .year-chart .day {
        height: 22px;
        width: 22px
    }
}

.year-chart {
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    padding-top: 20px;
    margin-bottom: 10px
}

    .year-chart .col {
        display: inline-block;
        vertical-align: top
    }

    .year-chart .day {
        height: 15px;
        width: 15px;
        margin: 2px 0 2px 2px;
        background: rgba(10,10,10,0.2)
    }

@media (min-width: 1200px) {
    .year-chart .day {
        height: 19px;
        width: 19px
    }
}

.year-chart .day .inner {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center
}

.year-chart .day.blank {
    background: none
}

.year-chart .year-chart-tooltip {
    display: none
}

.year-chart .clearfix {
    clear: both
}

.year-chart .labels div {
    color: rgba(255,255,255,0.6);
    height: 15px;
    margin: 2px 4px 2px 2px;
    padding: 0 0 0 6px;
    text-align: right;
    font-size: 11px
}

@media (min-width: 1200px) {
    .year-chart .labels div {
        height: 19px
    }
}

.year-chart .month {
    color: rgba(255,255,255,0.6);
    position: absolute;
    top: 4px;
    margin-left: 4px;
    font-size: 11px
}

.player-summary .year-chart, .portable-recent-performances-default .year-chart {
    overflow-x: hidden
}

.no-year-data {
    padding: 5px;
    text-align: center
}

.deletion-confirmation {
    color: rgba(255,255,255,0.6);
    padding: 10px
}

    .deletion-confirmation ul {
        list-style: disc inside
    }

        .deletion-confirmation ul li {
            margin: 0 0 5px
        }

    .deletion-confirmation span {
        margin-right: 5px
    }

    .deletion-confirmation .body {
        color: white;
        margin-left: 30px
    }

.role-icon {
    margin: 0
}

    .role-icon.support-icon {
        color: #ffda6e
    }

    .role-icon.core-icon {
        color: #ff6666
    }

.lane-icon {
    margin: 0
}

    .lane-icon.safelane-icon {
        color: #66b5ab
    }

    .lane-icon.offlane-icon {
        color: #fda55a
    }

    .lane-icon.midlane-icon {
        color: #b970ca
    }

    .lane-icon.jungle-icon {
        color: #75946b
    }

    .lane-icon.roaming-icon {
        color: #b1b1b1
    }

.grouped-icons {
    float: right;
    font-size: 1.1em;
    position: relative;
    top: 2px
}

td .role-icon, td .lane-icon {
    margin-right: 3px
}

.minimap-hero-tooltip i.role-icon, .minimap-hero-tooltip i.lane-icon {
    margin: 0
}

.randomed-icon {
    margin: 0
}

.player-lane-text .role-icon, .player-lane-text .lane-icon {
    font-size: 1.2em
}

.fixed-width-right-stat {
    width: 60px;
    text-align: right;
    display: inline-block;
    margin-right: 0.4em
}

    .fixed-width-right-stat.small {
        width: 40px
    }

.match-aggregate-stats .r-stats-grid .kv {
    font-size: inherit;
    font-weight: normal
}

    .match-aggregate-stats .r-stats-grid .kv small {
        font-size: 0.8em
    }

.profile-quality {
    display: flex;
    position: relative;
    flex-wrap: wrap
}

    .profile-quality .grade {
        font-size: 3em;
        flex-grow: 0;
        flex-basis: 80px;
        text-align: center;
        align-self: center
    }

    .profile-quality .explain {
        flex-grow: 1;
        border-left: 1px solid rgba(101,108,115,0.42);
        margin-left: 4px;
        padding: 4px 4px 2px
    }

        .profile-quality .explain th {
            padding-top: 0
        }

.repair-overlay {
    position: absolute;
    flex: 0;
    background-color: rgba(0,0,0,0.6);
    height: 100%;
    width: 100%;
    text-shadow: 1px 1px 1px #000 !important;
    text-align: center
}

    .repair-overlay .apology {
        line-height: 1.3em
    }

    .repair-overlay .icon {
        font-size: 2em;
        margin: 8px 0
    }

    .repair-overlay p {
        margin: 0.1em 0
    }

.qualifies-for-phone {
    color: white
}

@media (max-width: 768px) {
    .trend-chart {
        width: 100% !important;
        margin-bottom: 10px
    }
}

.role-chart {
    box-sizing: border-box;
    padding-bottom: 6px;
    position: relative
}

    .role-chart .repair-overlay {
        z-index: 1000
    }

        .role-chart .repair-overlay .icon {
            font-size: 1.2em
        }

    .role-chart .bar {
        width: 100%;
        height: 50px;
        margin-top: 0
    }

    .role-chart .sector {
        float: left;
        height: 6px;
        position: relative
    }

        .role-chart .sector .lane-group {
            padding-top: 4px
        }

        .role-chart .sector i.fa {
            display: inline;
            color: inherit
        }

        .role-chart .sector.role {
            height: 6px;
            box-sizing: border-box
        }

            .role-chart .sector.role:hover .label {
                color: white
            }

            .role-chart .sector.role:first-child {
                padding-right: 12px
            }

            .role-chart .sector.role .inner {
                height: 6px;
                width: 100%
            }

            .role-chart .sector.role .label {
                color: rgba(255,255,255,0.6);
                padding: 4px;
                text-transform: uppercase;
                font-size: 0.8em;
                height: 1em;
                overflow: hidden
            }

            .role-chart .sector.role .lane .label {
                padding-top: 6px
            }

        .role-chart .sector .segment-core {
            color: #660000
        }

        .role-chart .sector .segment-support {
            color: #6e5200
        }

        .role-chart .sector .segment-midlane {
            color: #26102b
        }

        .role-chart .sector .segment-safelane {
            color: #091312
        }

        .role-chart .sector .segment-offlane {
            color: #572901
        }

        .role-chart .sector .segment-jungle {
            color: black
        }

        .role-chart .sector .segment-roaming {
            color: #323232
        }

.kotl-build-order .segment {
    position: relative;
    display: inline;
    margin-right: 3px
}

.kotl-build-order small {
    position: absolute;
    left: 1px;
    bottom: 4px;
    padding: 2px;
    background-color: rgba(0,0,0,0.4);
    color: white;
    font-size: 11px;
    pointer-events: none
}

.kotl-build-order .ability {
    position: relative;
    display: inline-block;
    margin: 1.5px
}

    .kotl-build-order .ability:first-child {
        margin-left: 0
    }

    .kotl-build-order .ability:last-child {
        margin-right: 0
    }

    .kotl-build-order .ability.first {
        opacity: 1
    }

        .kotl-build-order .ability.first .image-container {
            overflow: visible
        }

            .kotl-build-order .ability.first .image-container img {
                box-shadow: 0px 0px 2px #fff
            }

    .kotl-build-order .ability .level-embedded {
        position: absolute;
        pointer-events: none;
        padding: 1px 2px;
        background-color: rgba(0,0,0,0.6);
        font-size: 0.8em;
        bottom: 2px;
        right: 2px
    }

.kotl-build-order.starting-items {
    width: 92px
}

    .kotl-build-order.starting-items img.image-item {
        height: 20px
    }

.player-mastery .selected-hero-container {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px
}

    .player-mastery .selected-hero-container .grow {
        flex-grow: 1
    }

    .player-mastery .selected-hero-container .grow-2 {
        flex-grow: 2
    }

    .player-mastery .selected-hero-container .hero-title {
        margin-bottom: 12px;
        font-weight: bold
    }

    .player-mastery .selected-hero-container .current-hero-wrapper {
        padding: 16px;
        background-color: #2e3740
    }

    .player-mastery .selected-hero-container .current-hero {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px
    }

        .player-mastery .selected-hero-container .current-hero .stat-box {
            display: flex
        }

            .player-mastery .selected-hero-container .current-hero .stat-box.gap {
                gap: 24px
            }

            .player-mastery .selected-hero-container .current-hero .stat-box .hero-stat {
                white-space: nowrap
            }

                .player-mastery .selected-hero-container .current-hero .stat-box .hero-stat .stat-title {
                    color: rgba(255,255,255,0.6);
                    margin-bottom: 4px
                }

        .player-mastery .selected-hero-container .current-hero .selected-hero-icon img {
            height: 48px
        }

        .player-mastery .selected-hero-container .current-hero .selected-hero-name {
            margin-left: 12px
        }

            .player-mastery .selected-hero-container .current-hero .selected-hero-name .minor {
                margin-top: 2px
            }

                .player-mastery .selected-hero-container .current-hero .selected-hero-name .minor a {
                    color: rgba(255,255,255,0.6)
                }

                    .player-mastery .selected-hero-container .current-hero .selected-hero-name .minor a time {
                        cursor: pointer
                    }

    .player-mastery .selected-hero-container .datalist {
        margin-bottom: 16px
    }

        .player-mastery .selected-hero-container .datalist input {
            box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
            width: 100%;
            background: #2E3740;
            border: none;
            border-radius: 0;
            color: white;
            display: inline-block;
            font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
            padding: 8px 16px;
            box-sizing: border-box;
            -webkit-appearance: none
        }

            .player-mastery .selected-hero-container .datalist input:active, .player-mastery .selected-hero-container .datalist input:focus {
                background-color: #282f37
            }

    .player-mastery .selected-hero-container .most-played-heroes {
        display: flex;
        gap: 8px
    }

        .player-mastery .selected-hero-container .most-played-heroes .most-played-icon img {
            height: 32px
        }

.data-selector-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px
}

    .data-selector-container label {
        color: rgba(255,255,255,0.6);
        font-size: 0.8em;
        font-weight: bold;
        margin-bottom: 8px
    }

    .data-selector-container .datalist input {
        box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
        width: 100%;
        background: #2E3740;
        border: none;
        border-radius: 0;
        color: white;
        display: inline-block;
        font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
        padding: 8px 16px;
        box-sizing: border-box;
        -webkit-appearance: none
    }

        .data-selector-container .datalist input:active, .data-selector-container .datalist input:focus {
            background-color: #282f37
        }

.no-data {
    height: 300px;
    background-color: #242f39;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 991px) {
    .performance-averages-table {
        font-size: 10px
    }
}

.performance-averages-table .gold {
    color: #fbb829
}

.performance-averages-table .time-filter {
    font-weight: bold;
    font-size: 1.2em;
    color: #c4c4c4;
    text-shadow: 0 2px 2px rgba(0,0,0,0.25);
    padding: 16px 8px;
    text-transform: uppercase;
    width: 160px
}

@media (max-width: 991px) {
    .performance-averages-table .time-filter {
        width: auto
    }
}

.performance-averages-table th {
    text-align: center;
    font-size: 1.2em;
    color: #b6b7b8
}

    .performance-averages-table th:first-child {
        text-align: left
    }

.performance-averages-table .divider {
    border-right: 1px solid #404851
}

.performance-averages-table thead {
    background-color: #343f49
}

.performance-averages-table tbody tr {
    background-color: #2c3741
}

    .performance-averages-table tbody tr:nth-child(2) {
        background-color: #242f39
    }

.performance-averages-table tbody td:not(:first-child) {
    padding: 8px 0
}

.performance-averages-table .stat-title {
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
    text-align: center
}

    .performance-averages-table .stat-title.main-title {
        color: #FBB829;
        font-weight: bold
    }

.performance-averages-table .stat-column {
    display: flex;
    flex-direction: column;
    align-items: center
}

.performance-averages-table .stat-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px
}

    .performance-averages-table .stat-row .arrow-down {
        color: #c23c2a
    }

    .performance-averages-table .stat-row .arrow-up {
        color: #a9cf54
    }

    .performance-averages-table .stat-column .stat-value, .performance-averages-table .stat-row .stat-value {
        font-size: 2em;
        font-weight: bold
    }

    .performance-averages-table .stat-column .stat-subtitle, .performance-averages-table .stat-row .stat-subtitle {
        text-transform: uppercase;
        font-size: 1.2em;
        margin-bottom: 4px;
        color: rgba(255,255,255,0.6)
    }

    .performance-averages-table .stat-column .stat-offset, .performance-averages-table .stat-row .stat-offset {
        color: rgba(255,255,255,0.6);
        font-size: 1.2em;
        font-weight: bold
    }

.lane-composition {
    margin-top: 4px;
    position: relative;
    display: flex
}

    .lane-composition img {
        height: 20px
    }

    .lane-composition .player-lane {
        flex: 1 1 50%;
        margin-right: 3px;
        text-align: right
    }

        .lane-composition .player-lane.unopposed {
            text-align: left
        }

    .lane-composition .opposing-lane {
        flex: 1 1 50%;
        margin-left: 13px
    }

    .lane-composition .versus {
        color: rgba(255,255,255,0.6);
        position: absolute;
        left: calc(50% - 5px);
        font-variant: small-caps;
        top: calc(50% - 8px)
    }

    .lane-composition .role-indicator {
        border-bottom: 2px solid;
        margin: 2px 1px;
        display: inline-block
    }

        .lane-composition .role-indicator.role-1 {
            border-color: #ffda6e
        }

        .lane-composition .role-indicator.role-2 {
            border-color: #ff6666
        }

acronym.super {
    font-variant: small-caps;
    padding: 0 3px;
    position: relative;
    top: -12px
}

td .below-bar {
    margin-top: -2px;
    padding-top: 0px
}

.biography.collapsible .inner {
    line-height: 1.4em
}

.biography.collapsible .collapsed {
    height: 94px;
    overflow: hidden
}

.biography.collapsible button {
    width: 100%;
    border: none;
    background: none;
    font-size: 12px;
    padding: 5px
}

    .biography.collapsible button i {
        margin-left: 5px
    }

td.roles-stacked {
    width: 10px
}

    td.roles-stacked i:first-child {
        margin-bottom: 2px
    }

.rank-tier-wrapper {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: 5px
}

.rank-tier-images {
    position: relative
}

    .rank-tier-images .rank-tier-base {
        position: absolute;
        width: 100%;
        height: auto
    }

    .rank-tier-images .rank-tier-pip {
        position: absolute;
        width: 100%;
        height: auto
    }

    .rank-tier-images .leaderboard-rank-value {
        position: absolute;
        width: 100%;
        top: 32px;
        padding: 3px;
        color: white;
        text-align: center;
        box-sizing: border-box;
        font-size: 0.8em;
        font-weight: bold;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
    }

.leaderboard-ranks-table td.rank-tier .rank-tier-images {
    margin-top: -23px
}

.leaderboard-ranks-table td.roles-cell {
    padding: 5px
}

    .leaderboard-ranks-table td.roles-cell .role-chart {
        padding: 0
    }

.leaderboard-ranks-table .link-type-player {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 1.1em
}

.leaderboard-ranks-table .leaderboard-rank-value {
    font-size: 1.1em
}

html.leaderboard-ranks-skin {
    background-color: #2f3841;
    background-image: url(/assets/leaderboard-ranks-bg-27fa5acd75a5ff8fd1f51aa4d77ed4732437ddebb975c4400938695723e6834b.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

    html.leaderboard-ranks-skin .page-show {
        padding-bottom: 24px
    }

    html.leaderboard-ranks-skin body {
        background-color: rgba(0,0,0,0.7)
    }

    html.leaderboard-ranks-skin div.container-inner-content {
        background-color: transparent !important
    }

    html.leaderboard-ranks-skin article {
        background-color: transparent;
        border: none;
        box-shadow: none
    }

    html.leaderboard-ranks-skin tbody {
        background-color: rgba(0,0,0,0.5)
    }

.time-slider-mobile {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
}

@media (max-width: 480px) {
    .time-slider-mobile {
        display: flex
    }
}

.time-slider-mobile .time-slider {
    width: 100%
}

.time-slider-desktop {
    display: flex;
    align-items: center;
    gap: 30px
}

@media (max-width: 480px) {
    .time-slider-desktop {
        display: none
    }
}

.time-slider-desktop .time-slider {
    width: 85%
}

.time-slider-wrapper {
    padding: 10px 20px
}

    .time-slider-wrapper .time-slider-title {
        font-weight: bold;
        white-space: nowrap
    }

    .time-slider-wrapper .time-slider {
        z-index: 103
    }

        .time-slider-wrapper .time-slider .slider.slider-horizontal {
            width: 100%
        }

            .time-slider-wrapper .time-slider .slider.slider-horizontal .slider-track {
                height: 4px;
                margin-top: -2px;
                background: #1C242D
            }

                .time-slider-wrapper .time-slider .slider.slider-horizontal .slider-track .slider-handle {
                    background-color: #A9CF54;
                    background-image: none;
                    width: 16px;
                    height: 16px;
                    margin-left: -8px
                }

                .time-slider-wrapper .time-slider .slider.slider-horizontal .slider-track .slider-tick {
                    width: 1px;
                    height: 16px;
                    margin-left: 0;
                    background: #82878c
                }

            .time-slider-wrapper .time-slider .slider.slider-horizontal .slider-selection {
                background: #A9CF54;
                z-index: 1
            }

.rateit .rateit-hover {
    background-position: left -32px
}

.rateit .rateit-hover-rtl {
    background-position: right -32px
}

.rateit .rateit-selected {
    background-position: left -16px
}

.rateit .rateit-selected-rtl {
    background-position: right -16px
}

.rateit .rateit-preset {
    background-position: left -48px
}

.rateit .rateit-preset-rtl {
    background-position: left -48px
}

.rateit-range div {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.rateit button:hover, .rateit .rateit-range {
    cursor: pointer
}

.rateit.readonly button:hover, .rateit.readonly .rateit-range {
    cursor: default
}

#match-rating {
    margin-top: 0.5em
}

    #match-rating .rate-me {
        display: inline-block;
        margin: 3px 0 2px 5px;
        vertical-align: top
    }

    #match-rating .rateit {
        margin: 0 5px
    }

td .rate-me {
    margin: 3px 0 !important
}

td .rateit {
    margin: 0 !important
}

.match-show #match-rating {
    text-align: center
}

.random-0 .rateit-range div, .random-0 .rateit-range {
    background-image: url(/assets/rateit/custom/random_0-764802ffbf1daa64e1240f22830d7078cecbccb066357602572e8117a59cb209.png)
}

.random-1 .rateit-range div, .random-1 .rateit-range {
    background-image: url(/assets/rateit/custom/random_1-46403455b4078d4666b423bb98e6783a367f52218989075f4fd92980dccfdfec.png)
}

.random-2 .rateit-range div, .random-2 .rateit-range {
    background-image: url(/assets/rateit/custom/random_2-9d3e91de81884f765b66124ef1999c6533e62a64bd80b4483bcc8c4d6bf68765.png)
}

.random-3 .rateit-range div, .random-3 .rateit-range {
    background-image: url(/assets/rateit/custom/random_3-31308ab31a20b013c934c42ceff3aaaa152caa266591efaff4628a921a643717.png)
}

.random-4 .rateit-range div, .random-4 .rateit-range {
    background-image: url(/assets/rateit/custom/random_4-b1131f94f26a831932d460ea78eb33077d53ae4141fff206e692b67d85d506fe.png)
}

.random-5 .rateit-range div, .random-5 .rateit-range {
    background-image: url(/assets/rateit/custom/random_5-a1be25423fc39e504bf22d604cb3e4af414926d5b260a542406ffcac01102dff.png)
}

.random-6 .rateit-range div, .random-6 .rateit-range {
    background-image: url(/assets/rateit/custom/random_6-df630b589e6e6412f667a10d83d1dcf5b24870b9d4493b8feb006a59db04c61d.png)
}

.random-7 .rateit-range div, .random-7 .rateit-range {
    background-image: url(/assets/rateit/custom/random_7-304f22a09cd15a88c74ff1f9f3eeeccfe19ad2d5573f64590051eb89590c02d1.png)
}

.hero-9 .rateit-range div, .hero-9 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-27 .rateit-range div, .hero-27 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-28 .rateit-range div, .hero-28 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-31 .rateit-range div, .hero-31 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-32 .rateit-range div, .hero-32 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-33 .rateit-range div, .hero-33 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-34 .rateit-range div, .hero-34 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-35 .rateit-range div, .hero-35 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-41 .rateit-range div, .hero-41 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-53 .rateit-range div, .hero-53 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-56 .rateit-range div, .hero-56 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-71 .rateit-range div, .hero-71 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-84 .rateit-range div, .hero-84 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-86 .rateit-range div, .hero-86 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-88 .rateit-range div, .hero-88 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-91 .rateit-range div, .hero-91 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

.hero-105 .rateit-range div, .hero-105 .rateit-range {
    background-image: url(/assets/rateit/stars-6d8aa52f24fda0ec817f1a637b40fe43c73fd8926bae21f92a412adfccbd63d3.png)
}

div.settings {
    margin-bottom: 10px;
    display: block
}

    div.settings .primary {
        display: block
    }

@media (min-width: 992px) {
    div.settings .primary {
        grid-column: span 8
    }
}

div.settings .secondary {
    display: block
}

@media (min-width: 992px) {
    div.settings .secondary {
        grid-column: span 4
    }
}

.inline-filter div.settings {
    margin-bottom: 0
}

#cancel-subscription #premium_cancellation_reason, #cancel-subscription #premium_cancellation_message {
    width: 320px
}

#change-plan #premium_plan_change_plan_id {
    width: 280px
}

#update-card .selectBox {
    min-width: 4em;
    padding-right: 10px
}

#update-card #premium_upgrade_exp_2i {
    width: 110px
}

#update-card #premium_upgrade_exp_1i {
    width: 40px
}

#update-card #premium_upgrade_plan_id {
    width: 240px
}

.setting-status i.on {
    color: #c9e194
}

.setting-status i.pending {
    color: #fbc042
}

.setting-status i.off {
    color: #fd424b
}

.setting-status i.disabled {
    color: rgba(217,217,217,0.3)
}

.settings-social-grid .social-network {
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 24px;
    text-align: center
}

.standout-link {
    font-weight: bold;
    color: white !important;
    text-decoration: underline !important
}

.settings-guide ul li .explanation, .settings-guide ol li .explanation {
    color: #d9d9d9
}

.settings-guide ul {
    list-style: circle outside
}

    .settings-guide ul li {
        list-style: disc
    }

.settings-guide ol {
    list-style: decimal
}

    .settings-guide ol li {
        list-style: decimal
    }

.settings-guide ul, .settings-guide ol {
    color: #d9d9d9;
    margin-left: 2em;
    margin-bottom: 0.8em
}

    .settings-guide ul li, .settings-guide ol li {
        line-height: 22px
    }

section.social-network article {
    min-height: 160px
}

.statuses .status {
    margin-bottom: 32px
}

    .statuses .status .title {
        font-size: 1.4em;
        margin: 0 0 8px 21px
    }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .statuses .status.normal {
        display: none
    }
}

.statuses .status.retina {
    display: none
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .statuses .status.retina {
        display: block
    }

        .statuses .status.retina img {
            width: 940px;
            height: 200px
        }
}

.deadlocks code {
    display: block;
    font-family: "Courier New", Courier;
    max-width: 900px !important;
    word-wrap: break-word !important
}

.dropit {
    list-style: none;
    padding: 0;
    margin: 0
}

    .dropit .dropit-trigger {
        position: relative
    }

    .dropit .dropit-submenu {
        position: absolute;
        bottom: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        width: 100%;
        list-style: none;
        margin: 0
    }

        .dropit .dropit-submenu li {
            display: block
        }

    .dropit .dropit-open .dropit-submenu {
        display: block
    }

#quiz .quiz-step {
    line-height: 1.5em
}

#quiz ul {
    list-style: none;
    width: auto;
    margin: 2% 2%;
    padding: 2%;
    overflow: auto;
    display: none
}

    #quiz ul.current {
        display: block
    }

    #quiz ul li {
        display: block;
        overflow: auto;
        padding: 8px 6px;
        margin: 4px 0
    }

        #quiz ul li.quiz-answer {
            cursor: pointer;
            background-color: rgba(68,68,68,0.5);
            border: 1px solid #666
        }

            #quiz ul li.quiz-answer:hover, #quiz ul li.quiz-answer:focus, #quiz ul li.quiz-answer:active {
                border: 1px solid #444;
                background-color: rgba(34,34,34,0.5)
            }

        #quiz ul li.question, #quiz ul li.results-inner {
            display: block;
            float: none;
            width: 100%;
            text-align: left;
            margin: 0;
            margin-bottom: 0.6em;
            font-size: 1.1em
        }

        #quiz ul li.results-inner {
            padding: 5% 2%
        }

            #quiz ul li.results-inner img {
                width: 250px
            }

        #quiz ul li:last-child {
            margin-right: 0
        }

#quiz .question-wrap, #quiz .answer-wrap {
    display: block;
    padding: 1%;
    margin: 1em 10%;
    border-radius: 10px
}

#quiz .answer-wrap {
    background: Turquoise;
    transition: background-color 0.5s ease
}

#finish_button, #start_button, #error, #results, #take-the-test {
    display: none
}

    #finish_button a, #start_button a, #error a, #results a, #take-the-test a {
        margin-top: 10px
    }

#results {
    margin-bottom: 50px
}

    #results .outcome {
        max-width: 500px;
        background-color: rgba(34,34,34,0.5);
        padding: 10px 20px;
        border: 1px solid #444;
        margin: 20px auto 0;
        display: none
    }

        #results .outcome h3 {
            text-align: center;
            font-size: 1.7em;
            margin: 10px 0 20px 0;
            display: block
        }

        #results .outcome p {
            margin: 20px 0 10px
        }

            #results .outcome p br {
                display: block;
                margin: 10px 0;
                content: " "
            }

    #results #chart {
        max-width: 500px;
        margin: 0 auto;
        padding: 10px 20px
    }

        #results #chart .highcharts-container {
            margin: 30px auto 0px;
            overflow: visible !important
        }

            #results #chart .highcharts-container svg {
                overflow: visible
            }

.faq.very-important .item p {
    color: #ED3B1C
}

.color-betting {
    color: #57a315 !important
}

.bets {
    font-weight: normal
}

.betting-container {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(10,10,10,0.55);
    color: white;
    margin: auto;
    text-align: center
}

    .betting-container.betting-container-betting-page {
        background: rgba(10,10,10,0.65);
        width: 60%
    }

@media (max-width: 480px) {
    .betting-container.betting-container-betting-page {
        width: 95%
    }
}

.betting-container.betting-container-rankings-page {
    background: rgba(10,10,10,0.65);
    width: 80%
}

@media (max-width: 480px) {
    .betting-container.betting-container-rankings-page {
        width: 95%
    }
}

.betting-container.betting-container-player-page {
    background-color: #1f2831;
    background-image: url(/assets/get-excited-and-place-bets-f477a129acf2219ee24ee2d4b0d5178738b9b22a87f7a283bd025dc7e6fd5fd6.jpg);
    background-position: center 70%;
    background-repeat: no-repeat;
    background-size: cover
}

.betting-container .r-stats-grid {
    text-align: center;
    margin: auto;
    padding: 20px
}

    .betting-container .r-stats-grid .kv.kv-larger {
        padding: 0 8px
    }

.betting-container .slots {
    display: block;
    margin: 20px auto;
    text-align: center
}

    .betting-container .slots .col {
        border: 2px solid rgba(10,10,10,0.6);
        border-radius: 4px;
        background: #0a0a0a;
        display: inline-block;
        height: 64px;
        padding: 2px 2px;
        margin: 0 4px;
        overflow: hidden
    }

        .betting-container .slots .col .slot {
            height: 64px;
            padding-bottom: 2px
        }

            .betting-container .slots .col .slot > img {
                height: 64px
            }

.betting-container p {
    padding: 8px 0
}

.betting-container #bet-result {
    margin: 20px;
    text-align: center;
    font-size: 20px
}

.betting-container #bet-and-spin {
    padding-bottom: 10px
}

    .betting-container #bet-and-spin #bet-amount {
        font-size: 22px;
        vertical-align: bottom
    }

    .betting-container #bet-and-spin #bet-start {
        background: #57a315;
        border: 1px solid #63ba18;
        color: #FFFFFF;
        font-size: 22px;
        text-transform: uppercase;
        display: inline-block;
        padding: 7px;
        vertical-align: bottom
    }

        .betting-container #bet-and-spin #bet-start.disabled {
            cursor: default;
            background: #aaa;
            border: 1px solid #ccc
        }

    .betting-container #bet-and-spin .bet-suggestion {
        padding: 10px 0;
        font-size: 10px;
        color: #d9d9d9;
        font-style: italic
    }

#stop-stop-stop, #reset-machine {
    display: none
}

html.betting-skin {
    background-color: #1f2831;
    background-image: url(/assets/get-excited-and-place-bets-f477a129acf2219ee24ee2d4b0d5178738b9b22a87f7a283bd025dc7e6fd5fd6.jpg);
    background-position: top center;
    background-repeat: no-repeat
}

    html.betting-skin .notification.steam, html.betting-skin .notification.announce {
        display: none
    }

    html.betting-skin div.container-inner-content {
        background-color: transparent !important
    }

abbr[title], acronym[title] {
    text-decoration: none
}

.clean {
    color: rgba(255,255,255,0.6)
}

.clearfix {
    clear: both
}

.r-only, .r-only-mobile, .r-only-tablet {
    display: none !important
}

.subtext {
    font-size: 11px !important
}

@media (max-width: 991px) {
    .r-none {
        display: none !important
    }

    .r-only {
        display: block !important
    }

    td.r-only, th.r-only {
        display: table-cell !important
    }

    .r-horizontal-scroll {
        overflow-x: auto
    }

    .primary, .secondary {
        width: 50% !important;
        margin-left: 0 !important
    }

        .primary div, .secondary div {
            margin-left: 0
        }
}

@media (max-width: 768px) {
    .r-none-tablet {
        display: none !important
    }

    .r-only-tablet {
        display: block !important
    }

    tr.r-only-tablet {
        display: table-row !important
    }

    td.r-only-tablet, th.r-only-tablet {
        display: table-cell !important
    }
}

@media (max-width: 480px) {
    .r-none-mobile {
        display: none !important
    }

    .r-only-mobile {
        display: block !important
    }

    tr.r-only-mobile {
        display: table-row !important
    }

    td.r-only-mobile, th.r-only-mobile {
        display: table-cell !important
    }
}