/* Init */
body {
    min-width: 360px;
}
input[type=checkbox], input[type=radio] {
    appearance: none;
    user-select: none;
    color: rgb(28 100 242);
    background-color: rgb(243 244 246);
    border-color: rgb(209 213 219);
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    flex-shrink: 0;
    padding: 0;
    vertical-align: middle;
    height: 1em;
    width: 1em;
    margin-top: 0.2em;
}
[type=checkbox] {
    border-radius: 0.25rem;
}
[type=radio] {
    border-radius: 1rem;
}
.bg-dark [type=checkbox], .bg-dark [type=radio] {
    accent-color: currentColor;
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
}
[type=radio]:checked {
    background-color: currentColor;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: transparent;
}
[type=checkbox]:checked {
    appearance: revert;
/*    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");*/
}
[type=radio]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus, input[type=radio]:focus {
    outline: none;
/*    box-shadow: 0 0 0 2px rgb(28 100 242), 0 0 0 4px rgba(63,131,248,.5), 0 0 #0000;*/
}
.radio label, .checkbox label {
    padding-left: 1.5em;
}
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-left: -1.5em;
}

#content-wrapper {
    padding-bottom: 25px;
}
@media (min-width: 768px) {
    #content-wrapper {
        min-height: 806px;
    }
}
.navbar-brand {
    font-weight: bold;
    letter-spacing: 1px;
}
.navbar-static {
    color: white;
    float: right;
    padding: 9px 5px;
    margin-right: 8px;
}
#main-nav {
    border-radius: 0;
    margin-bottom: 0;
    z-index: 3;
    background-color: #05101e;
    box-shadow: 0 0 8px 2px #000000
}
#invoke-main-search-form, #sign-in-button {
    margin-top: 12px;
    font-size: 12px;
    font-weight: bold;
}
#menu-user-icon {
    display: none;
}
#menu-user-icon img {
    width: 40px;
    border-radius: 50%;
}
@media (min-width: 768px) {
    .navbar-static {
        margin-right: 15px;
    }
    .navbar-static:first-child {
        margin-right: 0;
    }
}
@media (max-width: 767px) {
    #navbar-main {
        clear: both;
    }
}
@media (max-width: 991px) {
    .nav > li > a {
        padding-left: 12px;
        padding-right: 12px;
    }
    #invoke-main-search-form,
    #sign-in-button {
        margin-top: 10px;
        font-size: 16px;
    }
    #invoke-main-search-form span,
    #sign-in-button span {
        display: none;
    }
}

abbr[title] {
    text-decoration: none;
}
section {
    margin-top: 25px;
}
.no-margins {
    margin: 0;
}
.std-margins {
    margin: 12px 0;
}
.unselectable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.bg-light {
    background-color: #e4ecf3;
}
.positive {
    color: green;
}
.negative {
    color: red;
}
.hl {
    border-bottom: 1px dashed;
}

.btn-soft {
    color: #2c3e50;
    background-color: #ecf0f1;
    border-color: #dbe3e5;
}
.btn-soft:hover {
    color: initial;
    background-color: #dde9ec;
    border-color: #d0e4e8;
}
.label-soft {
    background-color: #ecf0f1;
    color: initial;
}
.list-group-item-soft {
    background: #ecf0f1;
}
.highcharts-tooltip {
    z-index: 1;
}

/* DARK */
.bg-dark {
    background-color: #05101e;
    color: #efefef;
}
.bg-dark code {
    background-color: black;
    font-size: initial;
}
.bg-dark .progress {
    background-color: rgb(255 255 255 / 15%);
}
.bg-dark .form-control {
    color: #efefef;
    background-color: #05101e;
    border-color: #3a434e;
    border-width: 1px;
}
.bg-dark input.form-control::placeholder {
    color: #3a434e;
}
.bg-dark table.table > tbody > tr > td {
    border-color: rgb(255 255 255 / 10%);
}
.bg-dark table.table > thead > tr > th,
.bg-dark table.table > tfoot > tr > th {
    border-color: rgb(255 255 255 / 20%);
}
.bg-dark .table-hover>tbody>tr:hover {
    background-color: rgb(255 255 255 / 10%);
}
.bg-dark .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgb(255 255 255 / 5%);
}
@media screen and (max-width: 767px) {
    .bg-dark .table-responsive {
        border-color: rgb(255 255 255 / 20%);
    }
}

.bg-dark #app-settings {
    background-color: #091627;
}
.bg-dark .btn-soft {
    color: #efefef;
    background-color: #112b4c;
    border: 1px solid #1a406f;
}
.bg-dark .btn-soft:hover {
    background-color: #1a406f;
    border-color: transparent;
}

/* THEME CUSTOM CSS  */
footer {
    padding: 30px 0 20px;
    border-top: 1px solid black;
}
footer .container {
    font-size: 14px;
    opacity: 0.7;
}
@media (max-width: 576px) {
    .col-xxs-12 {
        width: 100% !important
    }
    .col-xxs-6 {
        width: 50% !important
    }
    .hidden-xxs {
        display: none !important;
    }
}

.text-italic {
    font-style: italic;
}
.rowless-col {
    padding: 10px;
}
.diff {
    white-space: nowrap;
}
.headline {
    font-style: italic;
    text-transform: uppercase;
}
.badge {
    color: #efefef;
}
.badge.alt {
    color: #2c3e50;
    background-color: transparent;
    box-shadow: 0 0 2px 0 #2c3e50;
}

/* THEME OVERLOAD */
a, a:hover, a:focus {
    color: #8aa8d0;
}
table a:not(.btn), .table a:not(.btn) {
    text-decoration: none;
}
table a:hover, .table a:hover {
    text-decoration: underline;
}
table.table {
    margin-bottom: 0;
}
table.table tr td:first-child a {
    font-weight: 600;
}
table.table > thead > tr > th,
table.table > tfoot > tr > th {
    border-bottom: 1px solid #e6eaea; /*#ecf0f1*/
}
table.table > tbody > tr > td {
    border-top: 1px dashed #e6eaea; /*#ecf0f1*/
    vertical-align: middle;
}
table.table > tbody > tr:first-child > td {
    border-top: none;
}
table.table.table-no-border > tbody > tr > td {
    border-top: none;
}
table.table.table-sm > tbody > tr > td {
    padding: 3px;
}
table.table.table-xs > tbody > tr > td {
    padding: 0 1px;
}
.text-center th {
    text-align: center;
}
table.table.table-wide > tbody > tr > td {
    padding-left: 15px;
    padding-right: 15px;
}

table.dataTable {
    margin: 0!important;
}
div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px;
}
.dataTables_wrapper .input-sm {
    height: 25px;
    padding: 0px 5px;
}
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before {
    content: unset;
    display: none;
}
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after {
    top: unset;
    right: unset;
    display: inline;
    font-family: 'Font Awesome 5 Free';
    margin-left: 7px;
    font-size: 16px;
    line-height: unset;
}
table.dataTable thead>tr>th.sorting:after {
    opacity: .2;
    content: "\f0dc";
}
table.dataTable thead>tr>th.sorting_asc:after {
    opacity: .6;
    line-height: 1.8;
    content: "\f0de";
}
table.dataTable thead>tr>th.sorting_desc:after {
    opacity: .6;
    line-height: 1.1;
    content: "\f0dd";
}

.pagination>li>a, .pagination>li>span  {
    padding: 2px 10px;
    background-color: #a6c0e2;
}
.pagination>.disabled>a, .pagination>.disabled>span,
.pagination>.disabled>a:hover, .pagination>.disabled>span:hover,
.pagination>.disabled>a:focus, .pagination>.disabled>span:focus {
    color: #bbcce4;
    background-color: #ecf4ff;
}
.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>.active>a, .pagination>.active>span,
.pagination>.active>a:hover, .pagination>.active>span:hover,
.pagination>.active>a:focus, .pagination>.active>span:focus {
    background-color: #8ba8d0;
}
.bg-dark :is(.pagination>li>a, .pagination>li>span) {
    padding: 2px 10px;
    background-color: #8ba8d080;
}
.bg-dark :is(
    .pagination>.disabled>a, .pagination>.disabled>span,
    .pagination>.disabled>a:hover, .pagination>.disabled>span:hover,
    .pagination>.disabled>a:focus, .pagination>.disabled>span:focus
) {
    background-color: transparent;
}
.bg-dark :is(
    .pagination>li>a:hover,
    .pagination>li>a:focus,
    .pagination>.active>a, .pagination>.active>span,
    .pagination>.active>a:hover, .pagination>.active>span:hover,
    .pagination>.active>a:focus, .pagination>.active>span:focus
) {
    background-color: #8ba8d0ba;
}
@media (max-width: 767px) {
    .pagination-complex>li>a, .pagination-complex>li>span {
        padding: 2px 6px;
        font-size: 14px;
    }
}


.lity {
    z-index: 2147483647;
}

.tooltip, .tooltip.in {
    opacity: unset;
    filter: none;
    word-break: break-word;
}


small, .small {
    font-size: 80%;
}
.panel-title {
    font-size: 19px;
    text-transform: uppercase;
}
.page-header {
    text-transform: uppercase;
}

/* Progress */
table .progress {
    width: 90%;
    margin-top: 2px;
}
table.text-center .progress {
    margin-left: auto;
    margin-right: auto;
}
table.text-left .progress {
    margin-right: auto;
}
table.text-right .progress {
    margin-left: auto;
}
.progress-mini {
    height: 5px;
    margin-bottom: 0;
    margin-top: 3px;
}
.progress-micro {
    height: 3px;
    margin-bottom: 0;
    border-radius: 0;
}
.progress-bar-dangerL {
    background-color: #ffb3ab;
}
.progress-bar-twitch {
    background-color: #4b367c;
}
.progress-bar-twitchL {
    background-color: #a991d4;
}
.progress-bar-live {
    background-color: #fc3636;
}

/* STATS BAR */
.stats-bar {
    border-left: 3px solid;
    border-color: #2C3E50;
    padding: 0 0 0 7px;
}
.stats-bar.stats-bar-muted {
    border-color: #95a5a6;
}
.stats-bar.stats-bar-success {
    border-color: #18BC9C;
}
.stats-bar.stats-bar-info {
    border-color: #3498DB;
}
.stats-bar.stats-bar-warning {
    border-color: #F39C12;
}
.stats-bar.stats-bar-danger {
    border-color: #E74C3C;
}
.stats-bar.stats-bar-twitchL {
    border-color: #a991d4;
}
.stats-bar.stats-bar-live {
    border-color: #fc3636;
}
.stats-bar.stats-bar-gold {
    border-color: gold;
}
.stats-bar.stats-bar-max {
    border-color: #bcb01b;
}

/* STATS */
.stats-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 600;
}
.stats-value.stats-value-sm {
    font-size: 15px;
}
.stats-value .diff {
    font-size: 75%;
}
.stats-label {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-list .stats-bar {
    margin-bottom: 8px;
}

/* CHANNELS TOPMOST FORM */
.cform {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
    margin: 2% 0;
}
.c-selector, #lang-selector, #channels-category, #cform-link {
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid;
    padding: 8px 10px;
    border-radius: 5px;
}
.c-selector, #lang-selector, #channels-category {
    max-width: 200px;
    padding: 8px 15px;
    border-color: black;
}
.bg-dark .c-selector, .bg-dark #lang-selector {
    background-color: #05101e;
    border-color: rgb(255 255 255 / 20%);
}
#cform-link:hover, #cform-link:focus {
    text-decoration: none;
    color: inherit;
}
@media (max-width: 767px) {
    .cform {
        justify-content: center;
    }
    .c-selector, #lang-selector, #channels-category, #cform-link {
        font-size: 80%;
    }
}

/* VAlign Wrapper */
.valign-wrapper, td.cell-slot {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.valign-wrapper img, td.cell-slot img {
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
}

/* Cell Slot */
.image-cell {
    width: 60px;
}
.image-cell > img {
    width: 60px;
    height: 60px;
}
/* Cell Slot Legacy */
td.cell-slot.no-left {
    padding-left: 0!important;
}
td.cell-slot a {
    font-weight: 600;
}
td.cell-slot img {
    margin-right: 9px;
    height: 60px;
}
td.cell-slot.sm img {
    margin-right: 7px;
    height: 46px;
}
td.cell-slot.lg img {
    margin-right: 10px;
    height: 72px;
}

/* APP SCOPE */
.header {
    z-index: 2;
    position: relative;
    background-color: #05101e;
    color: white;
    box-shadow: 0 0 8px 2px #000000;
}
.header-background {
    background-color: #05101e;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.33;
    overflow: hidden;
    filter: blur(3px);
}
.header-scope {
    position: relative;
    margin: 45px 10px;
}
#app {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
#app-conception {
    flex: 1 1;
    margin: 0 0 .5% 3%;
    overflow: hidden;
}
#app-logo {
    flex: 0 0 160px;
    position: relative;
}
#app-logo a.fa-balance-scale {
    position: absolute;
    top: -10px;
    right: -2px;
    font-size: 22px;
    color: white;
    opacity: 0.35;
}
#app-logo img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.live-indicator-container {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -2px;
}
.live-indicator {
    font-size: 15px;
    letter-spacing: 0.1em;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
#app-title {
    font-size: 35px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
#app-conception #app-title {
    font-weight: bold;
    letter-spacing: 0.1em;
}
#app-title small {
    font-size: 22px;
    font-weight: normal;
    letter-spacing: initial;
    text-transform: lowercase;
}
#app-nav {
    margin-top: 18px;
}
#app-nav>li {
    margin: 0 5px 5px 0;
}
#app-nav>li>a {
    padding: 4px 15px;
    font-size: 16px;
    color: #efefef;
    background-color: #112b4c;
    border: 1px solid #1a406f;
}
#app-nav>li.active>a, #app-nav>li>a:hover, #app-nav>li>a:focus {
    /*border-bottom: 2px solid #18bc9c;*/
    box-shadow: 0 2px 0 0 #18bc9c;
}
#app-nav>li.active>a:hover, #app-nav>li.active>a:focus {
    color: inherit;
}

#app-settings {
    width: fit-content;
    margin: 0 auto;
    transition: .3s ease-in;
    opacity: 0;
    padding: 18px 15px 15px;
    border-radius: 0 0 7px 7px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0px #000000;
}
#app-settings.appear {
    opacity: 1;
}
#app-settings.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}
#app-settings > *:nth-child(n+2) {
    margin-left: 10px;
}
#app-settings button {
    font-size: 16px;
    font-family: monospace;
    line-height: 2;
}
#timeframe.active {
    box-shadow: inset 0 -2px 0 0 #18bc9c;
    animation: timeframePulse 2.2s ease-out;
}
@keyframes timeframePulse {
    from {
        box-shadow: 0 0 transparent;
    }
    22% {
        box-shadow: 0 0 13px 3px #18bc9c;
    }
    44% {
        box-shadow: 0 0 transparent
    }
    66% {
        box-shadow: 0 0 13px 3px #18bc9c;
    }
    88% {
        box-shadow: 0 0 transparent;
    }
    90% {
        box-shadow: inset 0 0 transparent;
    }
    to {
        box-shadow: inset 0 -2px 0 0 #18bc9c;
    }
}

.rank-badge {
    display: block;
    padding: 0.5em .6em 0.5em;
    text-align: center;
    white-space: nowrap;
    border-radius: .25em;
    line-height: 1;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    background-color: #ffff78;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.rank-badge.unranked {
    background-color: rgb(228, 228, 228);
}
.rank-badge.r4 {
    background-color: #64eaff;
}
.rank-badge.r3 {
    background-image: linear-gradient(to right bottom,#21ff5a,#60fff8);
}
.rank-badge.r2 {
    background-image: linear-gradient(to bottom right,#a763ff,#ff6df4);
}
.rank-badge.r1 {
    background-color: gold;
    background-image: linear-gradient(to bottom right, #ff8a11, gold)
}

@media (max-width: 767px) {
    #app {
        text-align: center;
        justify-content: center;
    }
    #app-conception {
        flex-basis: 100%;
        margin: 0;
    }
    #app-title {
        font-size: 30px;
        margin-top: 15px;
    }
    .rank-badge {
        margin-top: 20px;
    }
}


/* SEARCH PANEL */
#main-search-form {
    display:none;
    background-color: #05101e;
    padding-bottom: 20px;
    text-align:center;
    position: absolute;
    z-index: 100;
    width: 100%;
}
.search-form input {
    vertical-align: top;
    text-align: center;
    padding: 0 5px 5px 5px;
    width:50%;
    min-width: 250px;
    border:none;
    background:none;
    border-bottom: 1px solid white;
    color:white;
    outline:none;
    font-size:26px;
}
@media (max-width: 767px) {
    .search-form input {
        font-size:22px;
    }
}
.search-form input::placeholder {
   color: rgba(255,255,255,0.6);
}
.search-form button {
    vertical-align: top;
    margin-top: 5px;
    background:none;
    border:none;
    font-size:32px;
    color:#bfc6c7;
}

/* TIMEZONE SWITCH */
#timezone-switch {
    opacity: .7;
    text-align: center;
    font-size: 80%;
    cursor: pointer;
}
#timezone-switch > span {
    border-bottom: 1px dashed;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* TWITCH LIVE CIRCLE */
.twitch-live-circle {
    width: .8rem;
    height: .8rem;
    border-radius: 2rem;
    background: #fc3636;
    display: inline-block;
    position: relative
}
.twitch-live-circle:after {
    content: '';
    width: .8rem;
    height: .8rem;
    background: #fc3636;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    opacity: .75;
    animation: twitchLivePulse 1.5s infinite;
    animation-timing-function: ease-out
}
@keyframes twitchLivePulse {
    from {
        transform: scale3d(1,1,1);
        opacity: .75
    }

    75% {
        transform: scale3d(4,4,4);
        opacity: 0
    }

    to {
        transform: scale3d(4,4,4);
        opacity: 0
    }
}

/* HEATMAP */
.heatmap {
    /*max-width: 1130px;*/
    background: #091627;
    padding: 4px;
    clear: right;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    margin: auto;
}

.year-map {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    padding-top: 20px;
    margin-bottom: 10px
}

.year-map .week {
    display: inline-block;
    vertical-align: top;
}

.year-map .day {
    position: relative;
    display: block;
    height: 18px;
    width: 18px;
    margin: 2px 0 2px 2px;
    box-shadow: inset 0px 0px 0 1px rgb(255 255 255 / 3%);
}
.year-map .day.blank {
    box-shadow: none;
}
.year-map .day.with-streams {
    /*box-shadow: none;*/
    box-shadow: inset 0px 0px 0 1px rgb(0 0 0 / 10%);
}
.year-map .day:last-child i.bl {
    height: 100%;
}
.year-map .day i.bl, .year-map .day i.bt {
    position: absolute;
    background: rgb(255 255 255 / 35%);
}
.hide-separators i.bl, .hide-separators i.bt {
    display: none;
}
.year-map .day i.bl {
    left: -1px;
    height: calc(100% + 2px);
    width: 1px;
}
.year-map .day i.bt {
    top: -1px;
    left: -1px;
    height: 1px;
    width: calc(100% + 2px);
}

.year-map .week[data-ids] {
    cursor: pointer;
}
.year-map .week:hover .day:not(.blank) {
    border: 1px solid rgb(255 255 255 / 50%);
}

.year-map .labels div {
    height: 18px;
    margin: 2px 4px 2px 2px;
    padding: 0 0 0 6px;
    text-align: right;
    font-size: 12px;
}

.year-map .month {
    position: absolute;
    top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.75);
}
.year-map .month.l {
    margin-left: -10px;
}
.year-map .month.r {
    margin-left: 10px;
}

/* WAITME */
.loader {
    margin: 16% 0 32%;
    position: relative;
}
.loader * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.loader-center-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.loader-loading-spinner {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    position: relative;
    border: 5px solid rgba(0, 0, 0, 0.05);
    border-left: 5px solid rgb(24, 188, 156);
    animation: loading-spin .5s infinite linear;
    border-radius: 50%;
}
@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1turn);
    }
}
.waitme {
    display: none;
}

/* SELECTOID */
.selectoid > * {
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}
.selectoid.v0 > * {
    padding: 0.2em 1em;
    margin-bottom: 0.2em;
    background-color: #e4ecf3;
}
.selectoid.v0 > *.active, .selectoid.v0 > *:hover {
    color: #fff;
    background-color: #8ba8d0; /*#9691E4*/
}
.selectoid.v1 {
    margin-bottom: 7px;
}
.selectoid.v1 > * {
    padding: 0 .2em;
}
.selectoid.v1 > *.active, .selectoid.v1 > *:hover {
    box-shadow: inset 0 -0.15em 0 #8ba8d0;
}

/* GAMES SHARES | G-BLOCKS */
#games-shares {
    color: white;
    background: black;
    overflow: hidden;
    height: 145px;
}
.g-block {
    float: left;
}
.g-block .volume {
    padding: 2px 0 2px;
    text-align: center;
}
.g-block .g-block- {
    overflow: hidden;
    width: 100%;
    border-left: 1px solid transparent;
}
.g-block:first-child .g-block- {
    border-left: none;
}
.g-block .g-block-- {
    width: 100%;
    height: 118px;
    background: transparent center;
    background-size: 90px;
}
.g-block .g-block--- {
    width: 100%;
    height: 100%;
    background-color: #2e659c;
    opacity: 0.2;
}

/* Clips pages */
#clips-period {
    position: sticky;
    top: 0;
    z-index: 1;
    width: fit-content;
    margin: 25px auto;
}
#clips-period > button {
    font-weight: bold;
    text-transform: uppercase;
    color: initial;
}
#loader-clips {
    margin: 60px 0 120px;
}

/* Clips template */
.clips-grid {
    display: grid;
    row-gap: 27px;
    column-gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) {
    .clips-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 991px) {
    .clips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 576px) {
    .clips-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.clip-entity {
    color: white;
}
.clip-tp {
    position:relative;
    cursor: pointer;
    border-radius: 5px;
}
.clip-thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 5px;
}
.clip-placeholder {
    width: 100%;
    border-radius: 10px;
    opacity: .5;
}
.clip-meta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .25s ease-in-out;
}
.clip-meta > * {
    position: absolute;
    background-color: rgba(0,0,0,.7);
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 90%;
}
.clip-tp:hover .clip-meta {
    opacity: 0;
}
.clip-duration {
    right: 7px;
    top: 7px;
}
.clip-views {
    left: 7px;
    bottom: 7px;
}
.clip-created {
    right: 7px;
    bottom: 7px;
}
.clip-bp {
    display: flex;
    flex-direction: row;
    padding-top: 10px;
}
.clip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
}
.clip-entity:hover .clip-info {
    font-weight: bold;
}
.clip-info-image {
    flex: 0 0 40px;
    margin-right: 10px;
}
.clip-info-image > img {
    width: 100%;
}
.clip-channel-logo {
    border-radius: 50%;
}
.clip-title {
    color: #939da5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bg-dark .clip-title {
    color: #b4bcc2;
}
.clip-channel-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-more, .clips-more {
    margin-top: 25px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    font-style: italic;
}

/* CHANNEL BRIEF STATS */
.brief-item {
    margin: 5px 0;
    border: 1px dashed #dce2e2;
    padding: 10px 16px;
    line-height: 1.2;
}
.brief-item .brief-header {
    font-size: 16px;
    margin-bottom: 6px;
}

/* ENTITY */
.entity {
    position: relative;
    overflow: hidden;

    border-radius: 6px;
    background-color: #ecf0f1;
    box-shadow: 0 0 2px #2C3E50;

    color: #2C3E50;
    font-size: 22px;
}

.entity:hover, .entity:focus {
    color: initial;
    text-decoration: none;
    box-shadow: 0 0 3px 1px #2C3E50;
}

.entity.entity-line {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    line-height: 1;
}

.entity.entity-line > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding: 10px;
    overflow: hidden;
}

.entity.entity-line .entity-notch {
    height: 100%;
    width: 7px;
    position: absolute;
    left: 0;
    top: 0; /*ie*/
}

.entity .progress {
    position: absolute;
    width: 80%;
    bottom: 4px;
    left: 10%; /*ie, opera*/
}

/* ENTITY: CHANNEL STREAMS */
#channel-streams {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
#channel-streams > * {
    width: 360px;
}
@media (max-width: 1199px) {
    #channel-streams {
        justify-content: space-around;
    }
    #channel-streams > *:nth-child(3) {
        display: none;
    }
}
#channel-streams .cs-e-d {
    float: left;
    font-size: 110%;
}
#channel-streams .cs-e-my {
    float: left;
    margin-left: 5px;
}
#channel-streams .cs-e-m {
    font-size: 80%;
}
#channel-streams .cs-e-y {
    font-size: 50%;
}
#channel-streams .entity {
    height: 40px;
}
#channel-streams .entity > div:nth-child(1) {
    flex: 0 0 90px;
    position: relative;
}
#channel-streams .entity > div:nth-child(2) {
    flex: 0 0 90px;
    background-color:#18BC9C;
    color: white;
    position: relative;
}
#channel-streams .entity > div:nth-child(3) {
    flex: 0 0 90px;
    background-color:#3498DB;
    color: white;
    position: relative;
}
#channel-streams .entity > div:nth-child(4) {
    flex: 0 0 90px;
    background-color:#2c3e50;
    color: white;
    position: relative;
    font-size: 90%;
}
#channel-streams .entity > div:nth-child(5) {
    display: none;
    flex: none;
    width: 100%;
    padding: 0;
    position: absolute;
    background: rgb(236 240 241 / 80%);
}
#channel-streams .entity:hover > div:nth-child(5) {
    display: block;
}
#channel-streams .entity > div > * {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ENTITY: CHANNEL GAMES */
#channel-games {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    overflow: auto;
    padding: 3px 0;
}
@media (max-width: 1199px) {
    #channel-games {
        justify-content: space-between;
    }
    #channel-games .entity:nth-child(n+2) {
        margin-left: 10px;
    }
}
#channel-games .entity {
    flex: 0 0 120px;
}
#channel-games .entity .cover > img {
    width: 100%;
}
#channel-games .entity .body {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#channel-games .entity .body > div {
    text-align: center;
    color: white;
    padding-bottom: 4px;
    position: relative;
}

/* STREAM VOD VIDEO BAR */
.video-bar {
    width: 100%;
    position: relative;
    box-shadow: 0 0 2px #8ba8d0; /*#819498*/
    border-radius: 2px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 15px;
}
.video-bar:hover {
    box-shadow: 0 0 3px 1px #8ba8d0;
}
.video-bar-background {
    background-size: cover;
    background-position: center;
    background-color: #8ba8d0;
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    overflow: hidden;
    /*filter: blur(4px);*/
}
.video-bar-title {
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 5px 5px 15px;
    white-space: nowrap;
    overflow: hidden;
}
.video-bar-extension {
    position: absolute;
    right: 10px;
    bottom: 5px;
}
.video-bar-extension > * {
    margin-left: 9px;
}
.video-bar-extension .fa-question-circle {
    cursor: help;
}

/* STREAM TIMESTAMPS */
.stream-timestamps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    max-width: 500px;
}
.stream-timestamps > div:nth-child(2) {
    flex: 1 1;
    text-align: center;
    height: 8px;
    overflow: hidden;
    padding: 0 20px;
    font-size: 6px;
    color: #777;
}
.stream-timestamps .fa-circle {
    padding: 0 5px;
}
.stream-timestamps .stream-timestamp-dt {
    font-weight: bold
}
.stream-timestamps .stream-timestamp-label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
}

/* STREAM TITLES LIST */
#stream-titles .control-switch {
    color: rgb(255 255 0);
}
#stream-titles .qscroll > div {
    display: flex;
    padding: 10px 0 0 15px;
}
#stream-titles .qscroll > div:first-child {
    padding-top: 0;
}
#stream-titles .qscroll > div > div:first-child {
    position: relative;
    flex: 0 0 30px;
    box-shadow: none!important;
}
#stream-titles .qscroll > div.line {
    cursor: pointer;
}
#stream-titles .qscroll > div.line > div:first-child i.fa-circle {
    position: absolute;
    top: 7px;
    left: 3.5px;
    font-size: 8px;
}
#stream-titles .qscroll > div.line > div:first-child i.fa-check-circle {
    color: rgb(255 255 0);
}
#stream-titles .qscroll > div.line > div:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 2.5s;
}
#stream-titles .qscroll > div.line:hover > div {
    box-shadow: inset 0 -1px rgb(255 255 0 / 55%);
    transition: .15s;
}
#stream-titles .qscroll > div.line > div:last-child > span:not(:nth-child(3)) {
    width: 42px;
    display: inline-block;
}
#stream-titles .qscroll > div.line > div:last-child > span:nth-child(2) {
    display: none;
    font-size: 88%;
    white-space: nowrap;
}
#stream-titles .qscroll > div.line > div:last-child > span:nth-child(3) {
    color: #b4bcc2;
    margin-left: 6px;
}
#stream-titles .qscroll > div.line:hover > div:last-child > span:nth-child(1) {
    display: none;
}
#stream-titles .qscroll > div.line:hover > div:last-child > span:nth-child(2) {
    display: inline-block;
}


/* CONTROL SWITCH *BESIDE HEADLINE* */
.with-control {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 11px;
}
.with-control .headline {
    margin: 0;
}
.control-switch {
    white-space: nowrap;
    font-weight: bold;
    padding: 1px 6px;
    margin-left: 10px;
    font-size: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .5s;
}
.control-switch:hover {
    border-color: initial;
}

/* CUSTOM SCROLL BAR */
.qscroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.qscroll::-webkit-scrollbar-button {
    display: none;
}
.qscroll::-webkit-scrollbar-thumb {
    background: rgb(128 128 128 / 50%);
}
.qscroll::-webkit-scrollbar-thumb:hover {
    background: rgb(128 128 128 / 70%);
}
.qscroll::-webkit-scrollbar-track {
    background: transparent;
}
.qscroll {
    overflow: auto;
}

/* INDEX PAGE HEADLINE */
.index-page .headline {
    color: #7c9ab9;
}
.index-page .headline .value-title {
    float: right;
    width: 150px;
    text-align: center;
}

/* INDEX PAGE TOPS TABLES */
table.tops tr {
    cursor: pointer;
}
table.tops .item-title {
    font-weight: 600;
    font-size: 18px;
    color: #2c3e4f;
    text-decoration: none!important;
    line-height: 1;
    word-break: break-all;
}
table.tops .twitch-live-circle {
    right: -10px;
    top: -2px;
}
table.tops .meta {
    word-spacing: 5px;
}
table.tops .image-cell {
    width: 50px;
}
table.tops .image-cell > img {
    width: 50px;
    height: 50px;
}
table.tops .image-cell-game {
    width: 45px;
}
table.tops .value-cell {
    width: 150px;
    text-align: center;
    font-size: 110%;
}
table.tops .value-cell > *:first-child {
    font-weight: bold;
    letter-spacing: .1em;
}
table.tops .value-cell > *:last-child {
    color: #b4bcc2;
}
table.tops .stream-status {
    overflow: hidden;
    word-break: break-all;
    height: 20px;
    font-size: 90%;
}

/* RANKED LIST */
.ranked-list h2 {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.ranked-list .selectoid.v0 {
    margin-bottom: 10px;
}
.ranked-list .selectoid.v0 > * {
    margin: 0 0.3em 0.3em 0;
    padding: 0.2em 0.6em 0.2em 0.5em;
    border-radius: 15px;
    color: #728ba2;
    font-weight: bold;
    text-decoration: none!important;
    letter-spacing: 0.3px;
}
.ranked-list .selectoid.v0 > *.active,
.ranked-list .selectoid.v0 > *:hover {
    background-color: #425167;
    color: white;
}
.ranked-list .selectoid.v0 {
    margin-top: 25px;
}

.ranked-item-header {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}
.ranked-item-header > * {
    flex: 0 0 100px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
.ranked-item-header > [title] {
    cursor: help;
}
.ranked-item {
    width: 100%;
    height: 70px;
    overflow: hidden;
    font-size: 20px;

    display: flex;
    flex-direction: row;
    margin: 0 auto 9px auto;
    line-height: 1;
    background-color: #f2f6f9;
    cursor: pointer;
}
.ranked-item:hover {
    box-shadow: 0 0 5px 1px #cfd9da;
}
.ranked-item small {
    color: #b4bcc2;
}

.ri-position {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #828282;
    font-weight: bold;
}

.ri-image {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 70px;
}
.ri-image img {
    width: 70px;
    background-color: #f2f6f9;
}
.ranked-item:hover .ri-image img {
    position: absolute;
    z-index: 2;
    width: 92px;
    box-shadow: 0 0 10px 0px #000000;
    border: 1px solid #f3f2f3;
}

.ri-name {
    flex: 1 1;
    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;
}
.ri-name > a {
    padding-left: 16px;
    font-weight: 600;
    color: #2c3e4f;
    text-decoration: none!important;
}
.ri-name > * {
    z-index: 1;
}
.ri-scale {
    z-index: 0;
    position: absolute;
    left: 0; top: 0;
    width: 0;
    height: 100%;
    opacity: 0.25;
    transition: width 1.7s;
}

.ri-value {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: monospace;
    letter-spacing: 1px;
    font-weight: bold;
}

.ri-change, .ri-share {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    text-align: center;
}

@media (max-width: 767px) {
    .ranked-item {
        font-size: 17px;
    }
}

/* PANEL GROWTH */
.pg-wrapper {
    border: 1px solid rgba(0,0,0,.12);
}
.pg-chart {
    margin: 16px;
}
.pg-controls {
    display: flex;
    /*overflow-x: auto;*/
    flex-wrap: wrap;
}
.pge {
    flex: auto;
    position: relative;
    width: 0;
    color: rgba(0,0,0,0.65);
    cursor: pointer;
    font-size: 16px;
    border-right: 1px solid rgba(0,0,0,.12);
    border-bottom: 1px solid rgba(0,0,0,.12);
}
.pge.unselected:hover {
    opacity: 0.9;
    background-color: #f5f5f5;
    box-shadow: inset 0 8px 0 rgba(0,0,0,.12);
}
.pge .pge-content {
    margin: 16px;
    transition: color .3s ease;
    width: 100%;
    user-select: none;
}
.pge .pge-t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pge .pge-v {
    font-size:32px;
}
@media screen and (max-width: 991px) {
    .pge {
        flex: 0 0 25%;
        font-size: 12px;
        overflow: hidden;
    }
    .pge .pge-content {
        margin: 6px 5px;
    }
    .pge .pge-v {
        font-size:22px;
    }
    .pge.unselected:hover {
        box-shadow: inset 0 5px 0 rgba(0,0,0,.12);
    }
}

/* COMPARE BLOCKS */
.compare-block {
    width: 100%;
    height: 80px;
    overflow: hidden;
    font-size: 18px;
    display: flex;
    line-height: 1;
    background-color: #f2f6f9;
    margin-bottom: 10px;
}
.compare-name {
    flex: 1 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.compare-name > a {
    padding: 0 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2c3e4f;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .05em;
}
.compare-image {
    flex: 0 0 80px;
    display: flex;
    position: relative;
    background: white;
}
.compare-image::before {
    content:' ';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: #f2f6f9;
}
.compare-image > img {
    width: 100%;
    border-radius: 50%;
    background: #f2f6f9;
    z-index: 1;
}
.compare-color {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.compare-color:before {
    content: '\f00d';
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    color: white;
}

/* Game page */
.g-x-wrapper {
    padding-top: 35px;
    padding-bottom: 35px;
    background: #05101e;
    color: white;
}
.g-x-wrapper + .g-x-wrapper {
    padding-top: 15px;
}
.g-x-b {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
.g-x-i {
    margin: 15px 20px 0 0;
    position: relative;
}
.g-x-i img {
    border-radius: 6px;
    width: 100%;
}
.g-x-i img.g-x-i-face {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0 0 0px 2px rgba(0, 0, 0, .4);
}
.g-x-c {
    flex: 1 1 0;
    overflow: hidden;
}
.g-x-c h2 {
    margin: 12px 0 0;
    font-weight: bold;
    letter-spacing: 0.1em;
    word-spacing: 0.15em;
}
.g-x-l {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.g-x-l.g-x-l-margin {
    margin-top: 12px;
}
.g-x-s-block {
    flex: 0 0 29%;
    margin: 12px 0;
    overflow: hidden;
    line-height: 1;
    padding: 15px;
    border-radius: 6px;
    background: #091627;
}
.g-x-c .g-x-s-block {
    margin: 6px 0;
}
.g-x-l.g-x-l-4 .g-x-s-block {
    flex-basis: 21%;
}
.g-x-s-title {
    font-size: 18px;
    font-weight: bold;
    text-wrap: nowrap;
}
.g-x-s-value {
    text-align: right;
    font-size: 24px;
    font-family: monospace;
    word-spacing: -0.3em;
    white-space: nowrap;
}
.g-x-s-value .g-x-s-value-addon {
    padding: 0 7px 0 0;
    font-size: 60%;
    color: #b4bcc2;
}
.g-x-s-label {
    color: #b4bcc2;
    text-align: right;
    font-size: 15px;
    margin-top: 5px;
}

#stream-games .g-x-wrapper {
    padding: 15px 0;
}
#stream-games .g-x-i {
    margin-top: 0;
    width: 140px;
}
#stream-games .g-x-s-value {
    font-size: 20px;
}
#stream-games .g-x-l.g-x-l-margin {
    margin-top: 4px;
}

@media (max-width: 767px) {
    .g-x-b {
        text-align: center;
        justify-content: center;
    }
    .g-x-i {
        margin: 0 0 10px 0;
        max-width: 160px;
    }
    .g-x-c {
        flex-basis: 100%;
    }
    .g-x-l.g-x-l-4 .g-x-s-block {
        flex-basis: 45%;
    }
    .g-x-c h2 {
        font-size: 24px;
    }
    .g-x-s-value {
        font-size: 20px;
    }
    .g-x-s-label {
        font-size: 14px;
    }

    #stream-games .g-x-s-label {
        white-space: nowrap;
    }
    #stream-games .g-x-i {
        width: 120px;
    }
}

.g-x-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 5px;
    color: #b4bcc2;
}
.g-x-header .g-x-title {
    text-transform: uppercase;
}
.g-x-header .g-x-selector {
    flex: 1 1;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
}
.g-x-header .g-x-selector > * {
    display: inline-block;
    margin: 2px 0 0 10px;
    border-bottom: 1px dashed;
    vertical-align: text-bottom;
    color: #b4bcc2;
    cursor: pointer;
}
.g-x-header .g-x-selector > *.active {
    color: white;
}

.g-x-s-block .up,
.g-x-s-block .down {
    font-family: "Font Awesome 5 Free";
}
.g-x-s-block .up:before {
    /*content: "\f0d8";*/
    content: '\21E7';
    color: #5d8a5d;
}
.g-x-s-block .down:before {
    /*content: "\f0d7";*/
    content: '\21E9';
    color: #a56060;
}

/* STD COLORS */
.color-default {
    color: #95a5a6;
}
.color-viewers {
    color: #18BC9C;
}
.color-channels, .color-followers {
    color: #3498DB;
}
.color-views {
    color: #F39C12;
}
.color-chatters {
    color: #F39C12;
}
.color-streamed {
    color: #E74C3C;
}
.color-watched {
    color: #a991d4;
}
.color-live {
    color: #fc3636;
}
.color-gold {
    color: gold;
}
.color-viewersMax {
    color: #bcb01b;
}
.color-channelsMax {
    color: #ed561b;
}
.color-games {
    color: #1bab00;
}

/* SUBS LIST */
.subs-list > .sub {
    margin: 0 4.5px 7.5px 0;
}
.sub {
    display: inline-block;
    vertical-align: middle;
    cursor: default;

    border: 2px solid transparent;
    border-radius: 2px;
}
.sub.sub-gifted {
    background-color: #84aac3;
}
.sub.sub-prime {
    background-color: #009DDF;
}
.sub.sub-tier1 {
    background-color: #B07FFF;
}
.sub.sub-tier2 {
    background-color: #6700ff;
}
.sub.sub-tier3 {
    background-color: #6700ff;
}
.sub > span {
    display: inline-block;
    vertical-align: middle;
    text-align: center;

    padding: 1px 5px;
    font-size: 13px;
    line-height: 1.2;
    color: #ffffff;
}
.sub > span:not(:first-child) {
    opacity: 0.65;
}
.sub > span > i.fa-star,
.sub > span > i.fa-star-half-alt {
    color: gold;
}

/* Subs colors */
.sub-default {
    color: gold;
    border-color: gold;
}
.sub-default-w {
    color: #f5c800;
}
.sub-undefined {
    color: #95a5a6;
}
.sub-gifted {
    color: #84aac3;
}
.sub-gifted-w {
    color: #5384a5;
}
.sub-prime {
    color: #009DDF;
}
.sub-tier1 {
    color: #B07FFF;
}
.sub-tier2 {
    color: #6700ff;
}
.sub-tier3 {
    color: #6700ff;
}

.border-gifted {
    border-color: #84aac3;
    box-shadow: 0 -8px 20px 1px #84aac3;
}
.border-prime {
    border-color: #009DDF;
    box-shadow: 0 -8px 20px 1px #009DDF;
}
.border-tier1 {
    border-color: #B07FFF;
    box-shadow: 0 -8px 20px 1px #B07FFF;
}
.border-tier2 {
    border-color: #6700ff;
    box-shadow: 0 -8px 20px 1px #6700ff;
}
.border-tier3 {
    border-color: #6700ff;
    box-shadow: 0 -8px 20px 1px #6700ff;
}


#mini-profile {
    text-align:center;
}
#mini-profile > * {
    overflow: hidden;
}
#mini-profile img {
    width: 100px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* USER DASHBOARD */
.dashboard {
    max-width: 480px;
    margin: 55px auto 25px auto;
    overflow: hidden;
    border-radius: .4em;
    box-shadow: 0 0 8px 2px #000000;
}
.dashboard-block {
    padding: 25px 30px 25px;
    border-top: 1px solid black;
}
.dashboard-block:first-child {
    border-top: none;
}
.dashboard .btn {
    padding: 2px 8px;
    font-size: 15px;
    line-height: 1.5;
}

.dashboard #mini-profile {
    background-color: #091627;
}
.dashboard #mini-profile img {
    background-color: transparent;
}
.dashboard #mini-profile h4 {
    font-weight: bold;
    font-size: 23px;
}

#point-menu-box {
    position: absolute;
    z-index:2;
    text-align: center;
    margin: 0;
    border-width: 2px;
}
#point-menu-box .panel-heading {
    background-color: #fafafa;
}
#point-menu-box td {
    cursor: pointer;
}
#point-menu-box .close {
    padding-right: 3px;
}