img{width: 100%;}

.text{
    word-break: break-all;
    word-wrap: break-word;
    line-height: normal;
    white-space: pre-wrap;
}

.btn {
    --btn-padding-x: 2rem;
    --btn-padding-y: 0.6rem;
    --btn-font-size: 0.8125rem;
    --btn-font-weight: 700;
    --btn-line-height: 1.25rem;
    --btn-border-width: 1px;
    --btn-border-radius: 2px;
    --btn-disabled-opacity: 0.5;
    letter-spacing: 0.04em;
    font-weight: 600;
    align-items: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-block;
    border: var(--btn-border-width) solid #1b1b1c;
    border-radius: var(--btn-border-radius);
    background: var(--btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.btn-primary {
    --btn-color: rgb(182 207 139);
    --btn-hover-bg: #2c2c28;
    --btn-border-color: #152005;
    --btn-hover-color: #ffffff;
    --btn-hover-border-color: #382501;
    --btn-focus-shadow-rgb: 151, 105, 255;
    box-shadow: inset 0 0 15px 4px #121111;
    border-radius: 8px;
    border: 1px solid #3c3c3c;
}


/* .btn-primary:hover{
    color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
} */

.btn-go {
    --btn-color: rgb(240, 240, 240);
    --btn-bg: linear-gradient(0, #44542e54, #696c2d);
    --btn-border-color: #0f1606;
    --btn-hover-color: #ffffff;
    --btn-hover-bg: linear-gradient(0deg, #3d320b, #6e552fc7);
    --btn-hover-border-color: #97886ed9;
    --btn-focus-shadow-rgb: 151, 105, 255;
    box-shadow: inset 0 0 31px #2a3212;
}

.btn-go:hover{
    color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}


input[type=text], input[type=number], input[type=password], textarea{
    background: #0000002e;
    border: 1px solid #00000073;
    font-family: skif;
    color: rgb(240, 238, 228);
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input::placeholder, textarea ::placeholder{
    color: #d6d2c1c9;
}

input, textarea:focus{
    border: none;
    outline: 0;
}

.header{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    max-width: 480px;
    padding: 0;
    font-weight: bold;
    font-size: 12px;
    height: 20px;
    display: flex;
    align-items: center;
}

.head-scroll{
    width: 100%;
    max-width: 480px;
    font-weight: bold; font-size: 1.05em;
    overflow: auto;
    white-space: nowrap;
}
.head-scroll a {
    color: #d9d9d9;
}

.timer-right{
    position: fixed;
    top: 40;
    right: 10;
    z-index: 99;
}

.container{
    font-weight: normal;
    background: #2e2e2e;
    box-shadow: inset 0 0 15px #a18e48;
    padding: 4px;
    color: #ebdb8b;
}

.footer{
    max-width: 480px;
    height: 40px;
    padding: 0;
    bottom: 0;
}

.footer a{
    padding: 4px 0 4px 0;
    color: #a1c7f0;
    line-height: 30px;
    border: 1px solid #00000063;;
    border-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hr_end {margin: 0 10px;border-bottom: 1px double #ffffff17;}

.header_title{
    color: #a7a7a7;
    font-size: 18px;
    line-height: 32px;
    font-family: Munchkin, sans-serif;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 4px;
}

.icon-1{width: 24px; height: 24px;background-size: cover;}
.footer a:first-child{border-left: 0;}
.footer a:last-child{border-right: 0;}


.btn-green {
    cursor: pointer;
    text-align: center;
    position: relative;
    display: inline-block;
    min-width: 80px;
    padding: 7px;
    padding-left: 12px;
    padding-right: 12px;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 60px rgb(0 0 0 / 0%) inset, 0.1em 0.1em 0.2em #000000e8;
    background: linear-gradient(#147405, #0e4605 48%, #0b4207 52%, #031a02);
}

.btn-blue {
    cursor: pointer;
    text-align: center;
    position: relative;
    display: inline-block;
    min-width: 80px;
    padding: 7px;
    padding-left: 12px;
    padding-right: 12px;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 60px rgb(0 0 0 / 0%) inset, 0.1em 0.1em 0.2em #000000e8;
    background: linear-gradient(#055770, #043746 48%, #04313e 52%, #01141a);
}

.close{
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 0;
    color: red;
    font-size: 30px;
    line-height: 0.7;
    cursor: pointer;
    border: none;
    z-index: 99999999;
}

.menu-bottom{
    position: absolute;
    width: 100%;
    max-width: 480px;
    bottom: 0;
}

select {
    border: 1px solid #303030;
    background: #505050;
}


.list-container {
    background: #0e161cc4;
    border-radius: 8px;
    margin: 10px;
}

.btn-nav{
    flex: 1;
    text-align: center;
    box-shadow: 0 0 0 60px rgb(0 0 0 / 0%) inset, 0.1em 0.1em 0.2em #000000e8; border-right: 1px solid #c1c1c11f;background: #121d26;
}

.btn-nav:last-child{
    border: none;
}
.btn-nav a{
    display: block;
    padding: 8px 12px 8px 12px;
}


tr{background: #26262770;}
td{padding: 8px 0;}


.progress-container {
    width: 100%;
    height: 20px;
    background-color: #ccc;
    margin-top: 20px;
    position: relative;
    overflow: hidden; /* Добавляем свойство overflow, чтобы скрыть часть прогресс-бара, который еще не заполнен */
}
  
.progress-bar {
    width: 98%;
    height: 94%;
    background: #0000008f;
    position: absolute;
    top: 1px;
}
  


.d-none{display: none;}
.d-none-i{display: none !important;}

.d-block{display: block;}
.d-iblock{display: inline-block;}


.d-flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.js-content-center{justify-content: center;}
.js-around{justify-content: space-around;}
.js-between{justify-content: space-between;}
.js-items-center{justify-items: center;}
.items-center{align-items: center;}
.m-auto{margin: auto;}
.text-center{text-align: center;}
.flex1{flex: 1;}

.p-fixed{position: fixed;}
.p-abs{position: absolute;}
.p-rel{position: relative;}

.w-100{width: 100% !important;}
.w-90{width: 90% !important;}
.w-80{width: 80% !important;}
.w-70{width: 70% !important;}
.w-60{width: 60% !important;}
.w-50{width: 50% !important;}
.w-40{width: 40% !important;}

.mh-80{min-height: 80%;}


.m-0{margin: 0px;}
.m-1{margin: 5px;}
.m-2{margin: 10px;}
.m-3{margin: 20px;}
.m-4{margin: 50px;}
.m-5{margin: 100px;}
.m-6{margin: 150px;}
.m-7{margin: 200px;}

.mt-0{margin-top: 0px;}
.mt-1{margin-top: 5px;}
.mt-2{margin-top: 10px;}
.mt-3{margin-top: 20px;}
.mt-4{margin-top: 50px;}
.mt-5{margin-top: 100px;}
.mt-6{margin-top: 150px;}
.mt-7{margin-top: 200px;}

.mb-0{margin-bottom: 0px;}
.mb-1{margin-bottom: 5px;}
.mb-2{margin-bottom: 10px;}
.mb-3{margin-bottom: 20px;}
.mb-4{margin-bottom: 50px;}
.mb-5{margin-bottom: 100px;}
.mb-6{margin-bottom: 150px;}
.mb-7{margin-bottom: 200px;}

.p-0{padding: 0px !important;}
.p-1{padding: 2px !important;}
.p-2{padding: 5px !important;}
.p-3{padding: 10px !important;}
.p-4{padding: 15px !important;}
.p-5{padding: 20px !important;}
.p-6{padding: 30px !important;}
.p-7{padding: 50px !important;}
.p-8{padding: 75px !important;}

.pt-0{padding-top: 0px !important;}
.pt-1{padding-top: 2px !important;}
.pt-2{padding-top: 5px !important;}
.pt-3{padding-top: 10px !important;}
.pt-4{padding-top: 15px !important;}
.pt-5{padding-top: 20px !important;}
.pt-6{padding-top: 30px !important;}
.pt-7{padding-top: 50px !important;}
.pt-8{padding-top: 75px !important;}

.pb-1{padding-bottom: 2px !important;}
.pb-2{padding-bottom: 5px !important;}
.pb-3{padding-bottom: 10px !important;}
.pb-4{padding-bottom: 15px !important;}
.pb-5{padding-bottom: 20px !important;}
.pb-6{padding-bottom: 30px !important;}
.pb-7{padding-bottom: 50px !important;}
.pb-8{padding-bottom: 75px !important;}

.pl-1{padding-left: 2px !important;}
.pl-2{padding-left: 5px !important;}
.pl-3{padding-left: 10px !important;}
.pl-4{padding-left: 15px !important;}
.pl-5{padding-left: 20px !important;}
.pl-6{padding-left: 30px !important;}
.pl-7{padding-left: 50px !important;}
.pl-8{padding-left: 75px !important;}

.pr-1{padding-right: 2px !important;}
.pr-2{padding-right: 5px !important;}
.pr-3{padding-right: 10px !important;}
.pr-4{padding-right: 15px !important;}
.pr-5{padding-right: 20px !important;}
.pr-6{padding-right: 30px !important;}
.pr-7{padding-right: 50px !important;}
.pr-8{padding-right: 75px !important;}

.fs-12px{font-size: 12px;}
.fs-13px{font-size: 13px;}
.fs-14px{font-size: 14px;}
.fs-16px{font-size: 16px;}
.fs-18px{font-size: 18px;}
.fs-20px{font-size: 20px;}


.l-sp1{letter-spacing: 0.9px;}
.l-sp2{letter-spacing: 1.2px;}
.l-sp3{letter-spacing: 1.5px;}
.l-sp4{letter-spacing: 1.8px;}

.opacity5{opacity: 0.5;}
.opacity8{opacity: 0.8;}

.color-1{color: #ffffff;}
.color-2{color: #F7C069;}
.color-3{color: #fbf265;}
.color-4{color: #cccfd3;}
.color-5{color: #d38d19;}

.color_red{color: red !important;}
.color_green{color: green !important;}
.color_green2{color: rgb(0, 218, 18) !important;}
.color_lawngreen{color: lawngreen;}
.color_white{color: white !important;}
.color_yellow2{color: rgba(255,255,0,0.56);}

.shadowGreen{box-shadow: inset 0 0 15px 0px #3d7a08;}
p{margin: 8px 0;}