body{
    font-size: 14px !important;
    font-family: 'Roboto Reqular', sans-serif !important;
    color: #fff;
}


html,
body {
    height: 100%;
}

.background{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/public/default2/img/bg.jpeg) no-repeat center center fixed;
    background-size: cover;
    opacity: 0.9;
    z-index: -1;
    background-color: #333333;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(71 15 90 / 85%);
    z-index: -1;
}


.modal .button-close{
    background: unset;
    border: none;
    color: #fff;
}

.modal .button-close:hover{
    opacity: 0.7;
}

.page{
    margin-top: 30px;
}

.page .page-title{
    font-size: 2.2em;
    margin-bottom: 0.7em;
}

.page .page-bg{
    padding: 2em 1em;
    background: #292423eb;
    color: #dbdbdb;
}


.header-bg{
    border-radius: 5px;
    border: 1px solid #00000047;
    background: #16161659;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 992px) {
    .header-bg{
        padding-top: 0.5em !important;
        padding-bottom: 0.5em !important;
    }
}

.header-bg li{
    padding: 1em;
}

.header-bg li a{
    text-transform: uppercase;
}

header .btn-logout{
    border-radius: 0;
    background: #f76d7aa3;
    color: #fff;
    border-color: unset;
}

header .btn-logout:hover{
    opacity: 0.7;
    color: #fff;
}

header .btn-lk{
    background: #0000004f;
    color: #000000;
    background: url(/public/img/yellow_button.jpg);
    text-shadow: 0 1px 1px #ffcf26, 0 1px 6px #ffc700;
    font-weight: bold;
    padding: 0.5em 1.2em;
    border-radius: 6px
}

header .btn-lk:hover{
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

header .nav-link{
    color: #fff;
}

header .nav-link:hover{
    opacity: 0.7;
    color: #fff;
}

.main-content{
    flex: 1 0 auto;
}


.content-title{
    font-size: 2.2em;
    margin-bottom: 0.7em;
}

.table-dark thead tr th{
    border-bottom: none;
    padding: 0.8em;
}

.table-dark td{
    padding: 0.8em;
}

.table-dark tr{
    border-bottom: #1b1729;
}

.table-dark .address, .players{
    background: #1b1729;
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
}

.table-dark .vote{
    background: #1b1729;
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
}

.table-dark .fa-thumbs-down{
    color: #f35959;
}

.table-dark  .fa-thumbs-up{
    color: #6ff359;
}

.footer {
    border-top: 2px solid #1b1729;
    background: #16161659;
    flex: 0 0 auto;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

select option {
    background: rgb(45 40 62);
    color: #fff;
    text-shadow: 0 1px 0 rgba(45, 40, 62, 0.32);
}

.table-dark{
    background: #2d283e;
    color: #fff;
}



.news .card{
    background: #00000047;
    border: 1px solid #ffffff33;
}



.comments .comment{
    background-color: #2d283e;
    padding: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #00000075;
}

.pay-select .card{
    min-height: 80px;
    background: rgb(255 255 255 / 31%);
    border: 1px solid #b5b5b5;
    cursor: pointer;
    color: #fff;
    cursor: pointer;
}

.pay-select a{
    color: #fff;
    text-decoration: none;
}


.pay-select .card.active {
    background: rgb(255 255 255 / 12%);
    border: 1px solid #b5b5b5;
}



.pay-select .colors .radio-tile, .pay-select .top-place .radio-tile {
    display: none;
}

.pay-select .colors .radio-tile-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    color: white;
    font-weight: bold;
    text-align: center;
}

.pay-select .colors .radio-tile:checked + .radio-tile-label {
    transform: scale(1.1);
    border: 3px solid #000;
}




.pay-select .top-place .radio-tile-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: #2d283e;
    border: 1px solid #040404;
}

.pay-select .top-place .radio-tile:checked + .radio-tile-label {
    transform: scale(1.1);
    border: 1px solid #000;
}


.btn-loader {
    position: relative; /* Делаем кнопку контейнером для позиционирования */
    display: inline-flex; /* Используем flex для выравнивания */
    align-items: center; /* Выравниваем элементы по вертикали */
    justify-content: center; /* Выравниваем элементы по горизонтали */
}

.btn-loader .loader {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.user-refill .card{
    color: #000;
}
.user-refill .payment-method-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-refill .payment-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}


.user-refill #submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.user-refill .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1;
}



.form-control{
    border-radius: 0.22em !important;
}




/* News */
.btn-all-news{
    background-color: var(--main-gold); color: #000; font-weight: bold; padding: 8px 30px;
    background: url(/public/img/yellow_button.jpg);
    text-shadow: 0px 1px 1px #d4b751, 0px 1px 6px #d4b751;
    color: #000 !important;
}

.news-card {
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2);
}

.news-card-view {
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.news-body {
    transition: all 0.3s ease;
}

.news-card:hover .news-body {
    background-color: #222222 !important;
}

.news-section {
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.news-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://i.imgur.com/JYw7pPx.jpg') center center;
    background-size: cover;
    opacity: 0.05;
    z-index: 0;
}

.news-section .container {
    position: relative;
    z-index: 1;
}


.faq .card{
    background: #00000047;
    border: 1px solid #ffffff33;
}


.faq .card ul li{

    padding: 0.3em 0.5em !important;
    border-bottom: 1px solid rgba(211, 211, 211, 0.6);
}

.faq .card ul li a{
    color: #ffc107;
}


.btn{
    border-radius: 0.3em;
}

.modal-content{
    background-color: #3c3956;
}