/* Tactical-Ops.eu CSS Overwrites */

html {
  background-color: #070D10;
}

body {
  background-image: 
    linear-gradient(
      rgba(7, 13, 16, 0.8),
      rgba(7, 13, 16, 0.8)
    ),

    linear-gradient(
      to bottom,
      rgba(7, 13, 16, 0.15) 10%,
      rgba(7, 13, 16, 0.50) 25%,
      rgba(7, 13, 16, 0.75) 40%,
      rgba(7, 13, 16, 0.9) 50%,
      rgba(7, 13, 16, 1) 65%
    ),

    url('https://tactical-ops.eu/images/TO-Scope.jpg');

  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.topbar {background: #0A1014;}
.dropdown-menu {background-color: #0A1014;}
.topbar .navbar .dropdown-menu::after {background: #0A1014;}
 .sidebar-header {background: #242A2C;}
.sidebar-wrapper {background: #0A1014;}
@media screen and (min-width: 1025px) {.wrapper.toggled.sidebar-hovered .sidebar-wrapper {background-color:#0A1014;}.wrapper.toggled.sidebar-hovered .sidebar-header {background-color: #0A1014;}}
@media screen and (max-width: 1024px) {.sidebar-wrapper {background: #0A1014;}.sidebar-header {background: #0A1014;}}

/* Links */
a {color: #0086ED;}
a:hover {color: #D4D4D4;}
.custom-table a {color: #D4D4D4;}
.custom-table a:hover {color: #0086ED;}
.gallery a:hover .gallery-title {color: #0086ED;}
.gallery a:focus .gallery-title {color: #0086ED;}
.gallery-title a {color: #D4D4D4;}
.gallery-title a:hover {color: #0086ED;}
.servers .players {color: #0086ED;}
.gallery a.players .gallery-title {color: #0086ED;}
.topbar .navbar .navbar-nav .nav-link {color: #D4D4D4;}

/* Nav */
.sidebar-wrapper .metismenu a .parent-icon {font-size: 17px;}
.nav-tabs {--bs-nav-tabs-border-color: rgb(255 255 255 / 20%);}
.sidebar-wrapper .metismenu a {padding: 6px 12px;}
.sidebar-wrapper .metismenu ul a {padding: 6px 4px 6px 12px;}

/* Site Logo */
.logo-text {font-size:18px; padding-left:4px}
.logo-icon {margin-right: 2px; margin-top:2px; width: 43px}

/* Mobile Logo */
.mobile-logo {font-size: 18px;}
@media only screen and (min-width: 1025px) {.mobile-logo {display: none;}}

 /* App Dropdown Menu */
.topbar .navbar .dropdown-app .dropdown-menu .app-container {height: 300px;}
.topbar .navbar .dropdown-app .dropdown-menu {width: 340px;}
.app-icon {font-size: 32px;}
.topbar .navbar .dropdown-app .dropdown-menu {border: 1px solid rgb(255 255 255 / 10%);}
.topbar .navbar .dropdown-menu::after {border-top: 1px solid rgb(255 255 255 / 10%); border-left: 1px solid rgb(255 255 255 / 10%);}
.dropdown-menu {border: 1px solid rgb(255 255 255 / 10%);}

 /* Topbar */
.topbar {height: 56px; border-bottom: 0px;}
.topbar .navbar {width: 100%; height: 56px;}
.sidebar-wrapper {height: calc(100% - 56px); top: 56px;}
.sidebar-header {height: 56px;}

/* Page Content */
.page-wrapper {margin-top:0;}
.page-content {padding: 84px 24px 20px 24px;}
@media only screen and (max-width: 1025px) {.page-content {padding: 84px 10px 20px 10px;}}
hr {opacity: .185;}

/* Fontsize */
h1 {font-size: 22px; margin-left: 2px;}
h2 {font-size: 16px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 14px;}
h6 {font-size: 14px;}

/* Card */
.card {margin-bottom: 2.1rem; background-color: rgb(255 225 255 / 2.8%);
  --bs-card-border-radius: 4px;}
 .card, .card-body {color: #C9CACC;}

 /* Flex Buttons */
.flex-buttons {display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start;}

/* Back To Top */
.back-to-top {background-color: rgb(255 255 255 / 15%);}
.back-to-top:hover {background-color: rgb(255 255 255 / 40%);}

/* Search */
#search {width:160px;font-size:14px;padding-top:6px;}
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:searchfield-cancel-button}
.form-control {border: 1px solid rgb(255 255 255 / 30%); background-color: rgb(255 255 255 / 5%)}
.form-control:hover {border: 1px solid rgb(255 255 255 / 30%); background-color: rgb(255 255 255 / 10%)}
.form-control:focus {border: 1px solid rgb(255 255 255 / 30%); background-color: rgb(255 255 255 / 10%)}
.search-wrapper {position: relative; display: inline-block; width: 160px;}
.search-wrapper .search-icon {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #888; pointer-events: none; font-size: 0.9em;}
.search-wrapper input.form-control {padding-left: 30px;}

/* Table */
.servers, .server-details, .server-players, .spec-maps {margin-bottom:0px;}
.custom-table {font-size: 14px; width: 100%;}
.custom-table th, .custom-table td {padding: 8px;}
.custom-table > tbody > tr:nth-of-type(odd) {background-color: rgba(255, 225, 255, 0.04);}
.custom-table > tbody > tr:hover {background-color: rgba(255, 255, 255, 0.15);}

/* DataTables */
div.dataTables_wrapper div.dataTables_length select {margin-top: 3px; margin-bottom: 8px; margin-left: 6px; margin-right: 6px;}
div.dataTables_wrapper div.dataTables_filter label {margin-top: 3px; margin-bottom: 8px; margin-right: 4px;}

/* Server Browser Buttons */
.servers-filters {display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
#servers-buttons {margin-top:16px;}
#servers-buttons button {margin-right:4px;}
#servers-buttons button.active {background-color: rgb(255 255 255 / 25%); color: white; }
#servers-buttons button.active::after {content: attr(data-arrow); margin-left: 5px; }
.form-check-input {--bs-form-check-bg: var(--bs-form-control-bg); width: 1.5em; height: 1.5em; margin-top: 0;}

/* Server Browser Table */
.servers tbody tr:hover {cursor: pointer;}
.servers th:nth-child(1), .servers th:nth-child(2), .servers th:nth-child(6), .servers td:nth-child(1), .servers td:nth-child(2), .servers td:nth-child(6) {text-align: center;}
.servers-country {width: 24px; height:auto;}
.servers-map {width: auto; height:76;}
@media only screen and (max-width: 1024px) {.servers-map {width: auto; height:38;}}
@media (max-width: 1024px) {.mapname-column {display: none;}}

/* Table Word Breaks */
.stats tbody td:nth-child(3) {min-width: 120px;max-width: 200px;word-break: break-word;}
.servers tbody td:nth-child(3) {word-break: break-word; overflow-wrap: anywhere;}
.servers tbody td:nth-child(4) {word-break: break-word; overflow-wrap: anywhere;}
.server-details tbody td:nth-child(2) {word-break: break-word; overflow-wrap: anywhere;}
.server-players tbody td:nth-child(1) {word-break: break-word; overflow-wrap: anywhere;}
.gametracker tbody td:nth-child(2) {word-break: break-word; overflow-wrap: anywhere;}
.files tbody td:nth-child(1) {word-break: break-word; overflow-wrap: anywhere;}
.spec-maps tbody td:nth-child(1) {word-break: break-word; overflow-wrap: anywhere;}

/* Charts */
.highcharts-series .highcharts-point {fill-opacity: 1 !important; stroke-opacity: 1 !important;}
.highcharts-column-series .highcharts-point {stroke-width: 0 !important;}
.highcharts-color-0 { fill: #7cb5ec !important; stroke: #7cb5ec !important; }
.highcharts-color-1 { fill: #5f27cd !important; stroke: #5f27cd !important; }
.highcharts-color-2 { fill: #90ed7d !important; stroke: #90ed7d !important; }
.highcharts-color-3 { fill: #f7a35c !important; stroke: #f7a35c !important; }
.highcharts-color-4 { fill: #8085e9 !important; stroke: #8085e9 !important; }
.highcharts-color-5 { fill: #f15c80 !important; stroke: #f15c80 !important; }
.highcharts-color-6 { fill: #e4d354 !important; stroke: #e4d354 !important; }
.highcharts-color-7 { fill: #2b908f !important; stroke: #2b908f !important; }
.highcharts-color-8 { fill: #f45b5b !important; stroke: #f45b5b !important; }
.highcharts-color-9 { fill: #91e8e1 !important; stroke: #91e8e1 !important; }
.highcharts-color-10 { fill: #ff9f43 !important; stroke: #ff9f43 !important; }
.highcharts-color-11 { fill: #1dd1a1 !important; stroke: #1dd1a1 !important; }
.highcharts-color-12 { fill: #ee5253 !important; stroke: #ee5253 !important; }
.highcharts-color-13 { fill: #54a0ff !important; stroke: #54a0ff !important; }
.highcharts-color-14 { fill: #5f6caf !important; stroke: #5f6caf !important; }
.highcharts-color-15 { fill: #ff6b6b !important; stroke: #ff6b6b !important; }
.highcharts-color-16 { fill: #48dbfb !important; stroke: #48dbfb !important; }
.highcharts-color-17 { fill: #10ac84 !important; stroke: #10ac84 !important; }
.highcharts-color-18 { fill: #f368e0 !important; stroke: #f368e0 !important; }
.highcharts-color-19 { fill: #c8d6e5 !important; stroke: #c8d6e5 !important; }
.highcharts-color-20 { fill: #576574 !important; stroke: #576574 !important; }
.highcharts-color-21 { fill: #ffcc00 !important; stroke: #ffcc00 !important; }
.highcharts-color-22 { fill: #9b59b6 !important; stroke: #9b59b6 !important; }
.highcharts-color-23 { fill: #e67e22 !important; stroke: #e67e22 !important; }
.highcharts-color-24 { fill: #2ecc71 !important; stroke: #2ecc71 !important; }
.highcharts-color-25 { fill: #e84393 !important; stroke: #e84393 !important; }

/* Image Resizing */
@media only screen and (max-width: 1025px) {.img_resize {width: 100px;height: auto;}}
.newmaps img {width: 128px;height: 72px;}
@media only screen and (min-width: 1025px) {.newmaps img {width: 256px;height: 144px;}}

 /* Music Player */
.musicplayer {background-color: rgb(255 255 255 / 3%);}

/* Accordion */
:root, [data-bs-theme=light] {--bs-border-color: rgb(255 255 255 / 5%)}
.accordion-button:not(.collapsed) {background-color: rgb(255 255 255 / 10%);}
.accordion-item {background-color: rgb(255 255 255 / 5%);border: 1px solid rgb(255 255 255 / 5%);}

/* Error Page */
.error-page {color:#D4D4D4; padding-bottom:100px; padding-top:100px; padding-left:30px; padding-right:30px}

/* HTM Import */
.htm-import h1 {margin-bottom:12px}

 /* Gallery */
.gallery-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;}
.gallery-grid-servers {grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));}

.gallery {
display: block;
border-radius: 4px;
overflow: hidden;
background: rgb(255 255 255 / 5%);
text-decoration: none;
color: inherit;
}

.gallery:hover {
box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.135);
}

.gallery-title {
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #C9CACC;
}

.gallery-img {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 ratio */
background: #000;
overflow: hidden;
}

.gallery-img img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.gallery-img .yt-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: rgb(255 255 255 / 60%);
transition: color 0.3s ease;
pointer-events: none;
}

.gallery-img:hover .yt-icon {
color: rgb(255 255 255 / 85%);
}

.gallery-img .img-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: rgb(255 255 255 / 100%);
transition: opacity 0.3s ease;
pointer-events: none;
opacity: 0;
}

.gallery-img:hover .img-icon {
opacity: 0.8;
}

.gallery-grid-sprays {
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

.gallery-spray {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 ratio */
background: #808080;
overflow: hidden;
}

.gallery-spray img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}