/* Copyright 2023 by TerraBot.de */
/* HTML-Tags */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'TerraBot';
    src: url('files/fonts/UniversRegular.ttf');
}


html {
    background-image: linear-gradient(135deg, #000 0%, #01384b 30%, #000 85%);
    min-height: 100%;
    min-width: 100%;
}

body {
    font-family: 'TerraBot', sans-serif;
    font-size: 15px;
    color: #ccc;
    height: calc(100% - 50px);
    min-width: 100%;
    background: none;
}
    body:before {
        content: "Copyright 2023 by TerraBot.de V1.0 Ranksystem-Statistic 1.3.22";
        position: absolute;
        top: -200px;
        visibility: hidden;
    }

.fade.in {
    backdrop-filter: blur(3px);
}

/*.navbar-brand:before {
    content: url("files/gfx/cosmicblue-branding.png");
    color: #006e94;
    margin-right: 5px;
}*/

.alert a {
    color: #01384b;
    transition: all 0.6s;
}
.alert a:hover {
    color: #10B0E9;
    text-decoration: none;
}
thead a {
    color: #ccc !important;
    transition: all 0.6s;
}
thead a:hover {
    color: #fff !important;
    text-decoration: none;
}
a {
    color: #ccc;
    transition: all 0.6s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
h1, h2, h3 {
    color: #fff;
}
text {
    fill: #fff !important;
    color: #fff !important;
}
path {
    cursor: pointer;
}

table {
    border: none !important;
    background-color: rgba(0,0,0,0.4);
}

svg:not(.fa-users):not(.fa-clock):not(.fa-info-circle):not(.svg-inline--fa) {
    opacity: 0.6;
    transition: all 1s;
}

svg:hover {
    opacity: 1 !important;
}

text {
    fill: #fff !important;
    color: #fff !important;
}

img[alt='avatar'] {
    transition: all 1s;
}

img[alt='avatar']:hover {
    transform: scale(3);
    box-shadow: #000 3px 3px 5px;
}

/* Special Character */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.filter-option-inner>.filter-option-inner-inner .labelcid {
    display: inline-block;
}
.filter-option-inner>.filter-option-inner-inner .labelcid2 {
    display: inline-block;
}
.filter-option-inner>.filter-option-inner-inner {
    display: block;
    height: 27px;
}
.filter-option-inner-inner {
    padding-left: 0;
}
.filter-option-inner-inner>svg {
    position: inherit;
    margin-right: 15px;
}
.filter-option-inner-inner>img[src='../tsicons/placeholder.png'] {
    display: none;
}

#default_header_origin_value {
    margin-top: 1em;
}


/* Class-Contents "Selectors" */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.alert-info {
    color: #01384b;
    background-image: linear-gradient(135deg, #247491 0%, #10B0E9 30%, #247491 85%);
    border-color: #01384b;
}
.alert-success {
    color: #01384b;
    background-image: linear-gradient(135deg, #247491 0%, #10B0E9 30%, #247491 85%);
    border-color: #01384b;
}

/* Main-Navigation */
.navbar-inverse {
    background: rgba(0,0,0,0.9);
}

    .side-nav {
        background: rgba(0,0,0,0.9);
    }

    @media (min-width: 768px){
        #wrapper {
            padding-left: 75px;
        }
        .side-nav {
            overflow: unset;
        }
        .side-nav {
            width: 75px;
        }
        .side-nav>li {
            position: relative;
        }
        .side-nav>li>a {
            border: 1px solid transparent;
            position: relative;
            display: block;
            width: 75px;
            height: 75px;
            padding: 0;
            text-align: center;
        }
        .side-nav>li>a>svg {
            font-size: 32px;
            margin: 10px auto 0 auto;
        }
        .side-nav>li>a>.item-margin {
            position: absolute;
            left: 0;
            top: 45px;
            transition: all 0.6s;
            width: 100%;
            display: inline-block;
            text-align: center;
            margin:0;
            font-size: 10px;
            padding: 0 0 0 0;
        }

        .navbar-nav>li>a {
            line-height: 12px !important;
        }

        a[data-target='#demo']:after {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border: 1px solid;
            border-right-color:  #fff;
            border-top-color:  #fff;
            border-left-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            right: 5px;
            top: 5px;
            transform: rotate(45deg);
            transition: all 0.6s;
            opacity: 0.6;
        }

        a[data-target='#demo'][aria-expanded='true']:after {
            border-right-color:  #10b0e9;
            border-top-color:  #10b0e9;
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: rotate(135deg);
            right: 5px;
            top: 0;
            opacity: 1;
        }
        
        /*.side-nav>li>a>.item-margin::before {
            content: "";
            position: absolute;
            display: block;
            border: 5px solid #10b0e9;
            border-right-color: transparent;
            border-top-color: transparent;
            top: 15px;
            left: 0;
            transform: rotate(45deg);
        }*/
        .side-nav>li>a>.item-margin + .item-margin {
            display: none;
        }
        .side-nav>li:not(.active)>a:hover>.item-margin {
            z-index: 20;
            opacity: 1;
        }
        .side-nav>li>a:focus, .side-nav>li:not(.active)>a:hover {
            border: 1px solid #10B0E9 !important;
            box-shadow: #10b0e9 5px 5px 2rem inset;
            border-radius: 0 !important;
            opacity: 1;
            background: none !important;
        }
        .side-nav>li>a:focus>svg, .side-nav>li>a:hover>svg {
            opacity: 1 !important;
        }
        .side-nav>li>ul#demo {
            position: absolute;
            min-width: 225px;
            z-index: 10;
            left: 75px;
            top: 0;
            list-style: none;
            background-color: rgba(0,0,0,0.9);
            box-shadow: #000 3px 3px 5px;
        }

        #demo>li>a {
            border: 1px solid transparent;
        }
        #demo>li>a:hover {
            border: 1px solid #10B0E9 !important;
            box-shadow: #10b0e9 5px 5px 2rem inset;
            border-radius: 0 !important;
            background: none !important;
        }
        #demo>li>a:active, #demo>li>a:focus {
            color: #10b0e9;
        }
        
        .navbar-nav>li {
            float: none;
        }
        
        
        .navbar-nav>li {
            float: none;
        }

        .divider {
            display: none !important;
        }

        .activates > svg {
            color: #10b0e9;
        }
    }

.progress {
    background-color: rgba(0,0,0,0.7);
}
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
        background: rgba(0,0,0,0.7);
    }


    .navbar-inverse .navbar-nav>.active>a>svg, .navbar-inverse .navbar-nav>.active>a:focus>svg, .navbar-inverse .navbar-nav>.active>a:hover>svg {
        color: #10B0E9;
    }

/* Drop-Down-Menu */
.dropdown-menu {
    background: rgba(0,0,0,0.7);
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
    color: #fff;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: rgba(0,0,0,0.7);
}
.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: rgba(0,0,0,0.9);
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}
.dropdown-menu>li>a {
    color: #fff;
    opacity: 0.7;
    line-height: 3;
    border: 1px solid transparent;
}
    .dropdown-menu>li:not(.disabled)>a:focus, .dropdown-menu>li:not(.disabled)>a:hover {
        color: #fff;
        border: 1px solid #10B0E9 !important;
        box-shadow: #10b0e9 5px 5px 2rem inset;
        border-radius: 0 !important;
        opacity: 1;
        background: none !important;
    }

.top-nav>.open>.dropdown-menu {
    min-width: 300px !important;
}

.glyphicon-ok::before {
    filter: brightness(0) invert(1);
}

input.dropdown-toggle {
    background: rgba(0,0,0,0.7);
}
input[type=text]{
    border-color: rgba(255,255,255,0.2);
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #ccc;
    background-color: rgba(0,0,0,0.7);
    border-color: #10b0e9;
}
.btn-default {
    color: #ccc;
    background-color: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.2);
    transition: all 0.6s;
}
.btn-default.focus, .btn-default:focus, .btn-default:hover {
    color: #e7e7e7;
    background-color: rgba(0,0,0,0.6);
    border-color: #10b0e9;
}
.form-control {
    background-color: rgba(0,0,0,0.7);
    color: #ccc;
}
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: rgba(0,0,0,0.7);
    background-image: none;
    border-color: #10b0e9;
}
.input-group-addon {
    background-color: #01384b;
    color: #ccc;
    border-color: rgba(255,255,255,0.2);
}
select>option {
    background-color: #000;
    color: #666;
}
select>option:active {
    color: #10b0e9;
}
select>option:checked{
    color: #10b0e9 !important;
}

/* Button */
button[name='logout'] {
    padding: 2px 5px !important;
    font-size: 14px !important;
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #10b0e9;
    border-color: #10b0e9;
}
.btn-success {
    color: #fff;
    background-color: #01384b;
    border-color: #10b0e9;
    transition: all 0.6s;
}
.btn-success:hover {
    color: #fff;
    background-color: #10b0e9;
    border-color: #10b0e9;
}
.btn-success.active, .btn-success:active, .open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #10b0e9;
    border-color: #10b0e9;
}
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: #10b0e9;
    border-color: #10b0e9;
}
.bootstrap-switch {
    border-color: rgba(255,255,255,0.2);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    color: #fff;
    background: #10b0e9;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    color: #ccc;
    background: rgba(0,0,0,0.7);
}
.bootstrap-switch .bootstrap-switch-label {
    color: #ccc;
    background: rgba(0,0,0,0.7);
}
.bootstrap-switch-on .bootstrap-switch-label {
    color: #fff;
}
/* Table */
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border: none;
}

.table-hover tbody tr {
    transition: all 1s;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.7);
    color: #fff;
}

.table-hover tbody tr:hover .text-success {
    color: #10B0E9;
}



.table>thead>tr>th {
    background-color: rgba(0,0,0,0.7);
}
.table>thead>tr>th {
    border-bottom: none;
}
    .affix {
        background-color: rgba(0,0,0,0.7)!important;
        z-index: 10;
        width: calc(100% - 125px);
        position: sticky;
    }

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    line-height: 3;
    border-top: none;
    white-space: nowrap;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background: rgba(0,0,0,0.4);
}

td.text-success {
    text-align: center !important;
}

#list-rankup > tbody tr>td:not(:first-child){
    /*text-align: left;*/
}

#list-rankup > tbody tr>td:first-child + td, #list-rankup > tbody tr>td[title='Servergruppe ID:%'] {
    text-align: center;
}

#list-rankup > tbody tr>td>.flag-icon {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    line-height: 39px;
}
#list-rankup > tbody tr>td>svg {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 14px;
}


#page-wrapper {
    background: none;
}

.text-success {
    color: #10B0E9;
}

.pagination>li>a, .pagination>li>span {
    color: #ccc;
    transition: all 1s;
    text-decoration: none;
    background-color: rgba(0,0,0,0.7);
    border: none;
    line-height: 2;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: rgba(0,0,0,0.9);
    box-shadow: #10b0e9 5px 5px 2rem inset;
    border-color: none;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    background-color: rgba(0,0,0,0.9);
    color: #10B0E9;
}
.panel {
    background-color: rgba(0,0,0,0.7);
    border: none;
}
.panel-heading {
    background: none !important;
    opacity: 0.7;
}
.panel-footer {
    background: none;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus:not(#dropdownMenu1), .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1):focus, .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1):hover {
    background: rgba(0,0,0,0.7);
    border: 1px solid #10B0E9;
    color: #10B0E9;
}
.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: rgba(0,0,0,0.9);
    color: #10B0E9;
}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary:not(#dropdownMenu1) {
    background: #10B0E9;
    border: 1px solid #01384b;
    color: #01384b;
}
.open>.dropdown-toggle.btn-primary#dropdownMenu1 {
    background-color: rgba(0,0,0,0.9);
    color: #10B0E9;
}
.btn-primary {
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 18px;
    transition: all 1s;
    color: #ccc;
    border: 1px solid #ccc;
}
.btn-primary:hover {
    background: rgba(0,0,0,0.7);
    box-shadow: #10b0e9 5px 5px 2rem inset;
    border: 1px solid #10B0E9;
    color: #fff;
}
.btn-primary.focus, .btn-primary:focus {
    background: rgba(0,0,0,0.7);
    box-shadow: #10b0e9 5px 5px 2rem inset;
    border: 1px solid #10B0E9;
    color: #fff;
}
.label-warning {
    background-color: #10B0E9;
    display: block;
    line-height: 29px;
}

/* InfoModal */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.modal-content {
    background-color: rgba(0,0,0,0.7);
}
.modal-content button.close {
    color: #fff;
    opacity: 0.8;
    transition: all 0.6s;
}
.modal-content button.close:hover {
    color: #fff;
    opacity: 1;
}
.modal-header {
    color: #fff;
}

.modal-body {
    color: #ccc;
}

.modal-footer {
    color: #fff;
}

/* Donuts */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#donut_time_color_1{color:#0b62a4}
#donut_time_color_2{color:#3980b5}
#donut_version_color_1{color:#5cb85c}
#donut_version_color_2{color:#73C773}
#donut_version_color_3{color:#8DD68D}
#donut_version_color_4{color:#AAE6AA}
#donut_version_color_5{color:#C9F5C9}
#donut_version_color_6{color:#E6FFE6}
#donut_nation_color_1{color:#f0ad4e}
#donut_nation_color_2{color:#ffc675}
#donut_nation_color_3{color:#fecf8d}
#donut_nation_color_4{color:#ffdfb1}
#donut_nation_color_5{color:#fce8cb}
#donut_nation_color_6{color:#fdf3e5}
#donut_platform_color_1{color:#d9534f}
#donut_platform_color_2{color:#FF4040}
#donut_platform_color_3{color:#FF5050}
#donut_platform_color_4{color:#FF6060}
#donut_platform_color_5{color:#FF7070}
#donut_platform_color_6{color:#FF8080}
#graph_lineColors_1{color:#0b62a4}
#graph_lineColors_2{color:#7a92a3}
#graph_pointFillColors_1{color:#3980b5}
#graph_pointFillColors_2{color:#98aab7}
#graph_pointStrokeColors_1{color:#0b62a4}
#graph_pointStrokeColors_2{color:#7a92a3}
#graph_fillOpacity{opacity:0.4}
.graph_tooltip_client_color{color:#0b62a4}
.graph_tooltip_channel_color{color:#7a92a3}

/* InfoSite */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.stats_info div.row {
    background-color: rgba(0,0,0,0.7);
    margin-bottom: 1em;
}

.stats_info div.row h2 .text-warning, .stats_info div.row h2 .text-danger, .stats_info div.row h2 .text-info {
    color: #10B0E9 !important;
}

