body {
    margin-bottom: 60px;
    background-color: #0b1e2e;
    color: #f0f0f0;
    height:87vh;
    overflow:hidden;
}
html {
    background-color: #0b1e2e;
}
.bg-gamebody {
    background-color: #0b1e2e;
}
.body-content {
    height: 86vh;
    overflow: auto;
}
    
    :root {
        --ltr: ltr;
        --rtl: rtl;
        --bg-color: #0b1e2e;
        --bg: var(--bg-color);
        --blue: #102030;
        --text-color: #f0f0f0;
        --color: #f0f0f0;
        --scrollbar: #455055;
        --shimmer-static-bg: #656565;
        --toast-bg: white;
        --toast-color: black;
        --selection: #3BB9FF;
        --yellow-gradient: transparent linear-gradient(135deg, #FCB404, #FFD54F) 0 0 no-repeat padding-box;
        --yellow: #FCB404;
        --header-hero-fade-top: linear-gradient(0deg, transparent 40%, var(--bg-color));
        --header-hero-fade-bottom: linear-gradient(0deg, var(--bg-color) 5%, transparent);
        --bg-magic-hr: linear-gradient(45deg, #00BCD4 0%, #4CAF50 100%);
        --bg-magic-border: var(--bg-magic-hr);
        --btn-color: #00BCD4;
        --radius-normal: .325rem;
        --radius-low: .125rem;
        --radius-high: 1.25rem;
        --bg-glow-border: linear-gradient(45deg, #46b9b5, #0097A7);
        --border-dynamic: rgba(0, 188, 212, .625);
        --tg-element-bg: rgba(77, 208, 225, .25);
        --tg-element-bg-modal: rgba(11, 30, 46, .75);
        --tg-element-color: rgba(128, 255, 255, .75);
        --tg-element-shadow: 0 0 1rem rgba(77, 208, 225, .325);
        --tg-element-shadow-hover: 0 0 1rem rgba(77, 208, 225, .625);
        --tg-element-border: 1px solid rgba(77, 208, 225, .325);
        --tg-element-border-hover: 1px solid rgba(77, 208, 225, .625);
        --scanLineWidth: .25rem;
        --scanLineColor: rgba(16, 32, 48, .25);
        --mobileMenuColor: #0097A7;
    }

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */


/* استایل برای غیرفعال شدن آیکن */
.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.error-message {
    color: red ;
    font-size: 0.9em;
    margin-top: 5px;
    
}

.borderbottom {

    border-bottom: 1px solid #00BCD4;
}
/*--------------    Navbar    -----------------*/
.navigation {
    position: fixed;
    width: 100%;
    height: 45px;
z-index:100;
display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: var(--tg-element-shadow-hover);
    transition: 0.5s;
    bottom: 0;
    border-top: 1px solid #00BCD4;
    color: var(--text-color);
    background: var(--tg-element-bg-modal);
    border-top: var(--tg-element-border);
    border-radius: var(--radius-normal);
    transition: .15s transform ease-out;
}



.bg-mo {
    background: var(--tg-element-bg);
    border: 1px solid #00BCD4;
    border-right: 0;
}



.card {
    position:relative;
    border: 1px solid #00BCD4;
    color: var(--text-color);
    background: var(--tg-element-bg);
    border-top: var(--tg-element-border);
    border-radius: var(--radius-normal);
    transition: .15s transform ease-out;
}
.card-head {
    top: 0;
    margin-top: -20px;
    left: 0;
    margin-left: 15px;
    position: absolute;
    color: var(--text-color);
    background: var(--bg);
    border: var(--tg-element-border);
    border-radius: var(--radius-normal);
    transition: .15s transform ease-out;
    font-size: 15px;
}
.card-detaile {
    top: 0;
    margin-top: 15px;
    left: 0;
    margin-left: 15px;
    position: absolute;
    color: var(--text-color);
    background: var(--tg-element-bg-modal);
    border: var(--tg-element-border);
    border-radius: var(--radius-normal);
    transition: .15s transform ease-out;
}


    .navigation ul {
        display: flex;
        justify-content: space-between;
        width: 87.5%;
    }

        .navigation ul li {
            list-style: none;
            width: 17.5%;
            height: 45px;
            z-index: 2;
            text-align:center;

        }

            .navigation ul li a {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;

            }

                .navigation ul li a .icon {
                    position: relative;
                    display: block;
                    line-height: 65px;
                    font-size: 1.5em;
                    transition: 0.5s;
                    color: var(--text-color);
                }

            .navigation ul li.active a .icon {
                transform: translateY(-20px);
                color: #fff;
            }

.active-tab {
    position: absolute;
    top: -22px;
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 12px;
    transition: all 0.5s ease;
    transform: rotate(45deg);
    border: 5px solid #0b1e2e;
    z-index: 1; /* زیر آیتم‌ها قرار بگیرد */


    
}

.navigation ul li.active {
    z-index: 3; /* بالاتر از active-tab قرار بگیرد */
}


.navbar-nav{
    font-size:14px;
}


.bg-box {
    background: rgba(77, 208, 225, .25);
}




.animation {
    background-image: linear-gradient(90deg, var(--border-dynamic) 50%, transparent 50%), linear-gradient(90deg, var(--border-dynamic) 50%, transparent 50%), linear-gradient(0deg, var(--border-dynamic) 50%, transparent 50%), linear-gradient(0deg, var(--border-dynamic) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 18px 2px, 18px 2px, 2px 18px, 2px 18px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1.25s infinite linear;
}

@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top;
    }

    100% {
        background-position: left 18px top, right 18px bottom, left bottom 18px, right top 18px;
    }
}

.img-Team {
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animation:hover  {
    box-shadow: 0 0 15px rgba(70, 185, 181, 0.7), 0 0 30px rgba(0, 151, 167, 0.5);
}


/* تعریف انیمیشن تکان بدون تأخیر اولیه */
@keyframes gentle-shake-no-delay {
    0% {
        transform: rotate(0deg); /* موقعیت اولیه */
        transform-origin: 50% 50%; /* مرکز چرخش */
    }

    2% {
        transform: rotate(1deg); /* کمی به سمت راست */
    }

    4% {
        transform: rotate(-1deg); /* کمی به سمت چپ */
    }

    6% {
        transform: rotate(1deg); /* کمی به سمت راست */
    }

    8% {
        transform: rotate(-1deg); /* کمی به سمت چپ */
    }

    10% {
        transform: rotate(0deg); /* بازگشت به حالت اولیه */
    }

    100% {
        transform: rotate(0deg); /* ثابت ماندن تا پایان انیمیشن */
    }
}
/* اعمال انیمیشن به مستطیل */
.gentle-shake-animation {
    animation: gentle-shake-no-delay 5s infinite; /* انیمیشن هر 6 ثانیه یک بار */
}


/* انیمیشن ورود نوتیفیکیشن از سمت چپ */
.notification {
    animation: slideInFromLeft 0.5s ease-out;
    margin-top: 10px;
    position: relative;
    width: 300px;
}

/* انیمیشن ورود نوتیفیکیشن از سمت چپ */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* سبک دکمه بستن کوچک‌تر */
.btn-close {
    font-size: 16px;
    width: 20px;
    height: 20px;
    padding: 0;
}

.notification-text {
    flex-grow: 1;
    padding-left: 10px;
}

.notification-container {
    position: fixed;
    top: 20px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



.modal-content {
    background: var(--tg-element-bg-modal);
    border: var(--tg-element-border);
    box-shadow: var(--tg-element-shadow);
    overflow: hidden;
    border-radius: var(--radius-normal);
    transition: .15s transform ease-out;
}

.loding-box {
    display: flex;
    justify-content: center;
    align-items: anchor-center;
}