body {
    font-family: 'Play';
    color: #f7f619;
    text-rendering: optimizeLegibility;
    background-color: #22a8cb;
}

#background-сanvas {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: blur(150px);
    -webkit-filter: blur(150px);
    -moz-filter: blur(150px);
    -o-filter: blur(150px);
    -ms-filter: blur(150px);
}

h1 {
    font-weight: 700;
    -webkit-filter: drop-shadow(0px 0px 4px #1f222c);
    filter: drop-shadow(0px 0px 4px #1f222c);
}

.counters {
    font-size: 1.25rem;
    font-weight: 700;
    -webkit-filter: drop-shadow(0px 0px 4px #1f222c);
    filter: drop-shadow(0px 0px 4px #1f222c);
}

.form-select {
    color: #fff !important;
    background-color: #3e475f !important;
}

.form-control {
    color: #fff !important;
    background-color: #3e475f !important;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1;
}

.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}
.sortable .sort-arrow {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.sortable.asc .sort-arrow {
    border-bottom: 5px solid #fff;
}
.sortable.desc .sort-arrow {
    border-top: 5px solid #fff;
}

table {
    --bs-table-hover-bg: rgba(0, 0, 0, 0.1) !important;
    --bs-table-hover-color: #fff !important;
    --bs-table-color-state: #fff !important;
    --bs-table-bg: #3e475f !important;
    --bs-table-border-color: #1f222c !important;
    -webkit-filter: drop-shadow(0px 0px 4px #1f222c);
    filter: drop-shadow(0px 0px 4px #1f222c);
}

.row-steam-mod,
.row-steam-mod td {
    background-color: #00838f;
}

.row-psn,
.row-psn td {
    background-color: #0277bd;
}

.row-steam-ukr,
.row-steam-ukr td {
    background-color: #2e7d32;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    background: #fff;
    color: #000;
    border-color: #999;
}

.dropdown-center {
    z-index: 100;
}
#hamburger {
    background-color: #3e475f;
    color: #ffffff;
}

#hamburger:hover,
#hamburger:active {
    background-color: #3e475f;
    color: #ffffff;
    border-color: #ffffff;
}

.dropdown-menu {
    --bs-dropdown-bg: #3e475f;
}
.dropdown-item {
    --bs-dropdown-link-color: #ffffff;
    --bs-dropdown-link-active-bg: rgba(31, 34, 44, 0.5);
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-hover-bg: #1f222c;
    --bs-dropdown-link-hover-color: #ffffff;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color) !important;
    background-color: var(--bs-dropdown-link-hover-bg) !important;
}

.dropdown-menu a {
    text-decoration: none;
    position: relative;
    color: #22a8cb;
    font-size: 1em;
}

.dropdown-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.dropdown-menu a:hover::after {
    width: 100%;
}

.game-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 4px;
}