.arrow-icon {
    display: none;
}

#mobile-menu{
    display:none;
}

.header-container {
    display: none;
    /*background-color: #ffffff;*/
}


.flex-container {
    display: flex;
    justify-content: center;
}

.flex-item {
    
    text-align: center;
    padding: 0rem; /*1.5em;*/
    color: var(--text-buttons-color);
}

.tb4 table {
    border: 0px solid red;
    width: 1.6rem;
}

.tb5 table {
    width: 1rem;
}

.tb1 a,
.tb2 a,
.tb3 nav ul li img,
.tb3 nav ul li ul li img {
    border: 1px solid gray;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    color: var(--text-buttons-color);
    display: inline-block;
    line-height: 2rem;
    margin-top: 0.1rem;
    text-align: center;
    text-decoration: none;
    width: 9rem;
    
}


    .tb1 a:hover,
    .tb2 a:hover {
        /*background: var(--gray); /*#dfdfdf;*/
        color: var(--text-buttons-color-hover); /* #929292; */
    }

.tb3 nav ul li img,
.tb3 nav ul li ul li img {
    height: 2rem;
    width: auto;
    object-fit: contain;
}

.tb1 a {
    background: var(--login-button-color);
}

    .tb1 a:hover {
        background: var(--login-button-color-hover);
    }

.tb2 a {
    background: var(--basis-buttons-color);
}

    .tb2 a:hover {
        background: var(--basis-buttons-color-hover);
    }

    /*#current-flag {
    height: 2rem;
    max-height: 100%;
   width:auto;
}*/
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

.topmenu > li {
    display: inline-block;
    margin-right: 1rem;
    position: relative;
}

    .topmenu > li:last-child {
        margin-right: 0;
    }

.submenu {
    position: absolute;
    width: 100%;
    z-index: 10;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.three .submenu {
    visibility: hidden;
    opacity: 0;
    background: #ffffff00;
}

.three ul li:hover .submenu {
    visibility: visible;
    opacity: 1;
}
/*    .submenu li a,
    .submenu li img {
        border-bottom: 1px solid rgba(255,255,255,0);
        color: white;
    }*/

@media screen and (min-width: 1400px) {

    html {
        font-size: 18px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
    }
    .about-content {
        max-width: 80%;
    }

    .articles {
        max-width: 80%;
    }
}
@media screen and (max-width: 1399px) {
    html {
        font-size: 16px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
    }
    .about-content {
        max-width: 85%;
    }

    .articles {
        max-width: 85%;
    }
    .tb3 nav ul li img,
    .tb3 nav ul li ul li img {
        height: 32px;
        width: auto;
        object-fit: contain;
    }
}
/* Планшеты и небольшие ноутбуки */
@media screen and (max-width: 1024px) {
    html {
        font-size: 16px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
        
    }
    .about-content {
        max-width: 90%;
    }

    .articles {
        max-width: 90%;
    }
    .tb3 nav ul li img,
    .tb3 nav ul li ul li img {
        height: 32px;
        width: auto;
        object-fit: contain;
    }
}

@media screen and (max-width: 844px) {
    html {
        font-size: 14px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
        
    }

    .about-content {
        max-width: 95%;
    }

    .articles {
        max-width: 95%;
    }
    .tb3 nav ul li img,
    .tb3 nav ul li ul li img {
        height: 28px;
        width: auto;
        object-fit: contain;
    }
}

/* Мобильные устройства в горизонтальной ориентации или очень узкие планшеты */
@media screen and (max-width: 768px) {
    html {
        font-size: 12px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
        
    }

    .about-content {
        max-width: 100%;

    }

    .articles {
        max-width: 100%;
        
    }

    .tb1 a,
    .tb2 a {
        width: 7rem;
    }

    .tb3 nav ul li img,
    .tb3 nav ul li ul li img {
        height: 24px;
        width: auto;
        object-fit: contain;
    }

}

/* Мобильные устройства в портретной ориентации */
@media screen and (max-width: 480px) {
    html {
        font-size: 14px;
        /*background-color: #eaeaea;*/
        background-color: var(--background-color);
        
    }

    .about-content {
        max-width: 100%;
    }

    .articles {
        max-width: 100%;
    }
/*    .arrow-icon {
        display: block;
    }*/

/*картинка флага*/
    #mobile-menu .submenu-item img {
        height: 22px;
        width: auto;
        object-fit: contain;
        border-radius: 4px;
    }


    /* Стили для шапки */
    .flex-container{
        display: none;
    }

    .header-container {
        position: absolute;
        top: 20px; /* Отступ сверху */
        left: 20px; /* Отступ справа */
        display: flex;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }

    .burger {
        width: 50px;
        height: 50px;
        background-color: var(--login-button-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), /* внутренняя тень слева сверху */
        inset -2px -2px 5px rgba(255, 255, 255, 0.5); /* внутренняя светлая тень справа снизу */
        /*0px 4px 6px rgba(0, 0, 0, 0.3);*/ /* внешняя тень для объема */
    }

        .burger .line {
            width: 20px;
            height: 3px;
            background-color: var(--white);
            margin: 3px 0;
            border-radius: 3px;
            position: relative;
            z-index: 1;
        }

    /* --- Стили меню --- */

    #mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: -200px;
        width: 200px; /* увеличил ширину для удобства */
        height: 100%;
        background-color: var(--mobile-menu-background-color);
        overflow-y: auto;
        transition: left 0.5s ease;
        z-index: 1000;
        /*box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);*/
    }

        /* Видимость меню */
        #mobile-menu.open {
            left: 0;
        }

        #mobile-menu.closing {
            left: -200px;
        }

        /* Основные пункты меню */
        #mobile-menu ul {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 10px;
            margin: 0;
            list-style-type: none;
        }

        #mobile-menu li a {
            font-family: var(--font-main);
            color: var(--white);
            text-decoration: none;
            padding: 15px 20px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            background-color: var(--mobile-menu-background-color-hover);
            display: flex;
            align-items: center;
            gap: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), /* внутренняя тень слева сверху */
            inset -2px -2px 5px rgba(255, 255, 255, 0.5); /* внутренняя светлая тень справа снизу */
        }

            #mobile-menu li {
                margin-bottom: 10px;
            }

                #mobile-menu li a:hover {
                    background-color: var(--mobile-menu-background-color-hover);
                }

            /* --- Цветовое разделение пунктов --- */
            /* Первые два зелёные */
                #mobile-menu li:nth-child(1) a,
                #mobile-menu li:nth-child(2) a {
                    background-color: var(--login-button-color); /*#5aa87c;*/
                    color: var(--white);
                }

            /* Следующие три голубые */
                #mobile-menu li:nth-child(3) a,
                #mobile-menu li:nth-child(4) a,
                #mobile-menu li:nth-child(5) a {
                    background-color: var(--basis-buttons-color); /*/#3a7ea0;*/
                    color: var(--white);
                }


        /* Подменю */
            #mobile-menu .submenu-item {
                position: relative;
            }

            #mobile-menu .submenu {
                padding-left: 0;
                margin-left: 0;
            }
            /* --- Стил и подменю --- */
            #mobile-menu .submenu li {
                display: none;

            }

    #submenu1 li:nth-child(1) a {
        background-color: var(--mobile-menu-background-color-hover);
        color: var(--white);
    }

    #mobile-menu .submenu.open li {
        display: block;
        margin-bottom: 0px;
        padding: 0px 0px;
        border-radius: 8px;
        background-color: var(--mobile-menu-background-color-hover);
        
        gap: 0px;
    }

    /* Стили для стрелочки */
    .arrow-icon {
        margin-left: auto;
        font-size: 12px;
        transition: transform 0.5s ease;
        display: inline-block;
    }

    .rotate {
        transform: rotate(180deg);
    }


    /* Затемнение фона */
    #overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--zatemnenie);
        z-index: 99;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

        #overlay.open {
            display: block;
            opacity: 1;
        }

    /* Анимация закрытия меню */
/*    #mobile-menu.closing {
        transition: left 0.5s ease;
        left: -200px;
    }*/

    /* Анимация затемнения */
    #overlay.fading-out {
        /*transition: opacity 0.5s ease;*/
        opacity: 0;
    }

}