body {
    background-color: #f0f0f0;
}

.bg-lazure {background-color: #d1ecf2;}
.bg-besquit { background-color: #ebe4ce; }
.bg-peach { background-color: #ffd5c2; }
.bg-mint { background-color: #d0e4cb; }
.bg-lavender { background-color: #e3d3fc; }

.neumorphic-box {
    background-color: #fdfdfd;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 8px 8px 20px #b9b9b9, -8px -8px 20px #ffffff;
    transition: box-shadow 0.3s ease;
    margin-top: 25px;
    margin-bottom: 25px;

}

.neumorphic-box:hover {
    box-shadow: 15px 15px 25px #b9b9b9, -15px -15px 30px #ffffff;
}

.neumorphic-box-insert {
    background-color: #fdfdfd;
    border-radius: 20px;
    padding: 20px;
    box-shadow: inset 8px 8px 20px #b9b9b9, inset -8px -8px 20px #e7e7e7;
    transition: box-shadow 0.3s ease;
    margin-top: 25px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;

}

.neumorphic-box-insert:hover {
    box-shadow: inset 15px 15px 25px #b9b9b9, inset -15px -15px 30px #e7e7e7;
}

.neumorphic-list-group {
    background-color: #fdfdfd;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 8px 8px 16px #b9b9b9, -8px -8px 16px #ffffff;
    transition: box-shadow 0.3s ease;
    margin: 25px;
}

.neumorphic-list-group:hover {
    box-shadow: 10px 10px 20px #b9b9b9, -10px -10px 20px #ffffff;
}

.neumorphic-nav {
    background-color: #fdfdfd;
    border-radius: 20px;
    padding: 12px;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
    transition: box-shadow 0.3s ease;
    margin-bottom: 40px;
}

@media (max-width: 350px) {
    #navWarp {
        flex-wrap: wrap;
    }
}

.neumorphic-nav:hover {
    box-shadow: 7px 7px 14px #b9b9b9, -7px -7px 14px #ffffff;
}

.neumorphic-nav .navbar-brand {
    display: flex;
    align-items: center;
    color: #333;
    font-weight: bold;
}

.neumorphic-nav .navbar-nav {
    display: flex; /* Изменили направление вывода элементов на горизонтальное */
    align-items: center;
}

.neumorphic-nav .navbar-nav .nav-item {
    margin-right: 20px; /* Добавили отступ между элементами */
}

.neumorphic-nav .navbar-nav .nav-link {
    color: #333;
    transition: color 0.3s ease;
}

.neumorphic-nav .navbar-nav .nav-link:hover {
    color: #222;
}

.neumorphic-nav .navbar-nav .nav-item .nav-link {
    background-color: #f0f0f0;
    border: 0 solid #b9b9b9;
    border-radius: 15px;
    padding: 10px 20px;
    box-shadow: 8px 8px 16px #b9b9b9, -8px -8px 16px #ffffff;
    transition: box-shadow 0.3s ease;
    color: #333;
}

.neumorphic-nav .navbar-nav .nav-item .nav-link:hover {
    box-shadow: 10px 10px 20px #b9b9b9, -10px -10px 20px #ffffff;
    background-color: #e0e0e0;
    color: #222;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

/* Базовый класс для кнопок */
.neumorphic-btn-base {
    border: none;
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 15px 25px;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
    color: #333;
    transition: box-shadow 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    margin: 10px;
}

.neumorphic-btn-base:hover {
    border: none;
    box-shadow: 3px 3px 6px #b9b9b9, -3px -3px 6px #ffffff;
    background-color: #e0e0e0;
    color: #222;
}

.neumorphic-btn-base:active {
    border: none;
    box-shadow: inset 3px 3px 6px #b9b9b9, inset -3px -3px 6px #ffffff; /* Добавлен внутренний бокс-шэдоу */
}

/* Дополнительные классы для различных цветов кнопок */
.neumorphic-btn-primary {
   
    background-color: #007bff; /* Основной цвет фона для первичной кнопки */
    color: #fff; /* Цвет текста для первичной кнопки */
}

.neumorphic-btn-success {
    border: none;
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease;
    background-color: #28a745; /* Основной цвет фона для успешной кнопки */
    color: #fff; /* Цвет текста для успешной кнопки */
}

.neumorphic-btn-success:hover{
    border: none;
    background-color: #000000; /*  */
    color: #fff; /*  */
}

/* Дополнительные классы для различных типов кнопок Bootstrap */
.neumorphic-btn-danger {
   
    background-color: #dc3545; /* Основной цвет фона для кнопки Danger */
    color: #fff; /* Цвет текста для кнопки Danger */
}

.neumorphic-btn-warning {
    
    background-color: #ffc107; /* Основной цвет фона для кнопки Warning */
    color: #212529; /* Цвет текста для кнопки Warning */
}

.neumorphic-btn-info {
    
    background-color: #17a2b8; /* Основной цвет фона для кнопки Info */
    color: #fff; /* Цвет текста для кнопки Info */
}

.neumorphic-btn-customerIO {
    
    background-color: #0b373c; /* Основной цвет фона для кнопки Info */
    color: #e3ffcc; /* Цвет текста для кнопки Info */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-customerIO:hover {
    background-color: #e3ffcc; /* */
    color: #0b373c; /* */
}

.neumorphic-btn-livechat {

    background-color: #ff5200; /*  */
    color: #fff; /*  */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-livechat:hover {
    background-color: #fff2d6; /* #fff2d6   #fecf02 */
    color: #ff5200; 
}

.neumorphic-btn-onesignal {

    background-color: #bb3132; /*  */
    color: #fff; /*  */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-onesignal:hover {
    background-color: #d7d8f9; /*  */
    color: #14143c; 
}

.neumorphic-btn-helpdesk {

    background-color: #00a449; /*  */
    color: #fff; /*  */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-intercom {

    background-color: #074574; /*  */
    color: #fff; /*  */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-helpdesk:hover {
    background-color: #b8dcbb; /* */
    color: #212529; 
}

.neumorphic-btn-VIPtable {

    background-color: #14143c; /*  */
    color: #d7d8f9; /*  */
    transition: box-shadow 0.8s ease, background-color 0.8s ease, color 0.8s ease; /* Анимация перехода для свойства background */
}

.neumorphic-btn-VIPtable:hover {
    background-color: #d7d8f9; /* */
    color: #212529;
}

/* input */

.neumorphic-input {
    background-color: #f0f0f0;
    border: none;
    
    border-radius: 15px;
    padding: 24px;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
    color: #333;
    transition: box-shadow 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

.neumorphic-input:hover {
    outline: none;
    background-color: #e0e0e0;
    color: #333;
    box-shadow: 3px 3px 6px #b9b9b9, -3px -3px 6px #ffffff;
}

.neumorphic-input:focus {
    outline: none;
    background-color: #f0f0f0;
    color: #333;
    box-shadow: inset 3px 3px 6px #b9b9b9, inset -3px -3px 6px #ffffff;
}



/*.neumorphic-alert {*/
/*    background-color: #f0f0f0;*/
/*    border-radius: 15px;*/
/*    padding: 15px;*/
/*    margin: 15px;*/
/*    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;*/
/*    color: #333;*/
/*    transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;*/
/*    border: 2px solid transparent; !* Добавляем прозрачную рамку *!*/
/*}*/

.neumorphic-alert {

    /*background-color: rgba(240, 128, 128, 0.8); !* Красный (RGBA цвет с 80% прозрачностью) *!*/
    border: 0px solid white;
    border-radius: 15px;
    padding: 15px;
    margin: 10px;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.7px;
    transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.neumorphic-alert-content {
    flex-grow: 1; /* Добавлено */
    font-weight: normal;
    letter-spacing: normal;
}

.neumorphic-alert-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


.neumorphic-alert-primary { background-color: rgba(0, 123, 255, 0.8); } /* Синий */
.neumorphic-alert-secondary { background-color: rgba(108, 117, 125, 0.8); } /* Серый */
.neumorphic-alert-success { background-color: rgba(40, 167, 69, 0.8); } /* Зеленый */
.neumorphic-alert-danger { background-color: rgba(220, 53, 69, 0.6); } /* Красный */
.neumorphic-alert-warning { background-color: rgba(255, 193, 7, 0.8); } /* Желтый */
.neumorphic-alert-info { background-color: rgba(23, 162, 184, 0.8); } /* Голубой */
.neumorphic-alert-light { background-color: rgba(248, 249, 250, 0.8); } /* Светло-серый */
.neumorphic-alert-dark { background-color: rgba(52, 58, 64, 0.8); } /* Темно-серый */

.neumorphic-alert:hover {
    box-shadow: 7px 7px 14px #b9b9b9, -7px -7px 14px #ffffff; /* Увеличиваем тень при наведении */
}

.neumorphic-btn-pagination {
    border: none;
    background-color: #212121; /* Черный фон */
    border-radius: 15px;
    padding: 15px 25px;
    box-shadow: 5px 5px 10px #000, -5px -5px 10px #ffffff;
    color: #fff; /* Белый текст */
    transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, cursor 0.3s ease; /* Добавлен переход для курсора */
    margin: 10px;
    cursor: pointer; /* Изменяем курсор */
}

.neumorphic-btn-pagination:hover {
    box-shadow: 3px 3px 6px #000, -3px -3px 6px #ffffff;
    background-color: #3d3d3d; /* Изменяем фон при наведении */
    color: #fff; /* Изменяем цвет текста при наведении */
}

.neumorphic-btn-pagination:active {
    box-shadow: inset 3px 3px 6px #000, inset -3px -3px 6px #5d5d5d; /* Добавлен внутренний бокс-шэдоу */
}

.neumorphic-text {
    padding: 10px; /* Добавляем отступы для текста */
    border: none; /* Добавляем рамку */
    border-radius: 15px; /* Добавляем закругление углов */
    background-color: #212121; /* Цвет фона */
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff; /* Добавляем тень */
    color: #fff; /* Цвет текста */
}

.neumorphic-divider {
    position: relative;
    padding: 0;
}

.neumorphic-divider div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1.5px;
    background-color: #afafaf;
    color: #484848;
}

/* Сharts */
.chart-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    padding: 15px;
    margin-bottom: 40px;
    height: 600px; /* фиксированная высота блока */
    overflow-x: auto;
    position: relative;
}

.chart-container canvas {
    height: 100% !important; /* canvas займет всю высоту обертки */
    width: 100% !important;
}

/* Table */

.neumorphic-table {
    width: 100%;
    padding: 15px;
    /*border-width: 10px;*/
    background-color: #ffffff; /* Цвет фона таблицы */
    /*border-collapse: collapse;*/
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
}

.neumorphic-card-base{
    border-radius: 20px;
    
    padding: 7px;
}

.neumorphic-badgeForCard{
    border-radius: 15px 15px 0px 0px;
    padding: 7px;
}

/*.table th {*/
/*    border-bottom-color: gray;*/
/*}*/

/*.table th, .table td {*/
/*    border-bottom-color: #dee2e6 !important;*/
/*}*/

/*.table>:not(:last-child)>:last-child>* {*/
/*    border-bottom-color: initial !important;*/
/*}*/

/*.table th, .table td {*/
/*    border-bottom-color: initial !important;*/
/*}*/

/*!* Стили для границ таблицы *!*/
/*.neumorphic-table th,*/
/*.neumorphic-table td {*/
/*    border: 2px solid ; !* Цвет границы *!*/
/*    padding: 6px; !* Отступ вокруг содержимого ячеек *!*/
/*}*/

/*!* Стили для заголовков *!*/
/*.neumorphic-table th {*/
/*    background-color: #f0f0f0; !* Цвет фона заголовков *!*/
/*}*/

/*!* Поменять цвет горизонтальных линий *!*/
/*.neumorphic-table tbody tr:last-child td {*/
/*    border-bottom: 5px solid #af3030;*/
/*}*/

/*!* Поменять цвет вертикальных линий *!*/
/*.neumorphic-table th:last-child,*/
/*.neumorphic-table td:last-child {*/
/*    border-right: 5px solid #af3030;*/
/*}*/


.tg-list {
    text-align: center;
    display: flex;
    align-items: center;
}
.tg-list-item {
    margin: 0 2em;
}
h2 {
    color: #777;
}
h4 {
    color: #999;
}
.tgl {
    display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
    box-sizing: border-box;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
    background: none;
}
.tgl + .tgl-btn {
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}
.tgl + .tgl-btn:after {
    left: 0;
}
.tgl + .tgl-btn:before {
    display: none;
}
.tgl:checked + .tgl-btn:after {
    left: 50%;
}
.tgl-light + .tgl-btn {
    background: #f0f0f0;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
    background: #9fd6ae;
}
.tgl-ios + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 0 rgba(0, 0, 0, .08);
}
.tgl-ios + .tgl-btn:hover:after {
    will-change: padding;
}
.tgl-ios + .tgl-btn:active {
    box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
    padding-right: 0.8em;
}
.tgl-ios:checked + .tgl-btn {
    background: #313131;
}
.tgl-ios:checked + .tgl-btn:active {
    box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
    margin-left: -0.8em;
}




/* buble button   */

.justify-text {
    text-align: justify;
}

.bubbly-button {

    display: inline-block;
    font-size: 35px;
    padding: 3px 22px;

    -webkit-appearance: none;
    appearance: none;
    background-color: #ff0081;
    color: #fff;
    border-radius: 30px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
    z-index: 1000
}
.bubbly-button:focus {
    outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}
.bubbly-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
    transform: scale(0.9);
    background-color: #e60074;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}



/*aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/

/*
.bubbly-button {
    position: relative;
    padding: 20px 20px;
    border-radius: 50%; !* ✅ Делаем кнопку круглой *!
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #ff0081; !* Оранжевый *!
    font-size: 20px;
    transition: all 0.3s ease;
    width: 60px;
    height: 60px;
    text-align: center;
}

.bubbly-button:active {
    transform: scale(0.9);
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    width: 180%;
    left: 50%;
    height: 120%;
    transform: translateX(-50%);
    z-index: -1;
    background-repeat: no-repeat;
}

.bubbly-button:hover:before {
    top: -90%;
    background-image:
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, transparent 30%, #ff50ab 30%, transparent 40%),
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, #bd4e89 30%, transparent 30%),
            radial-gradient(circle, transparent 20%, #ff0081 25%, transparent 30%),
            radial-gradient(circle, #ff60b2 30%, transparent 30%),
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, #880c4a 30%, transparent 30%),
            radial-gradient(circle, #ff0081 30%, transparent 30%);
    background-size: 15% 15%, 30% 30%, 20% 20%, 30% 30%, 25% 25%, 15% 15%, 20% 20%, 15% 15%, 25% 25%;
    background-position: 50% 120%;
    animation: orangeTopBubbles 1.5s ease; !* ✅ Делаем анимацию длиннее *!
}

@keyframes orangeTopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.bubbly-button:hover::after {
    bottom: -90%;
    background-image:
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, #ff50ab 30%, transparent 30%),
            radial-gradient(circle, transparent 20%, #880c4a 25%, transparent 30%),
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, #880c4a 30%, transparent 30%),
            radial-gradient(circle, #ff0081 30%, transparent 30%),
            radial-gradient(circle, #ff50ab 30%, transparent 30%);
    background-size: 20% 20%, 30% 30%, 25% 25%, 30% 30%, 20% 20%, 30% 30%, 25% 25%;
    background-position: 50% 0%;
    animation: orangeBottomBubbles 1.5s ease; !* ✅ Делаем анимацию длиннее *!
}

@keyframes orangeBottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
*/





/* анимация для бокового левого меню */


@keyframes menuAnimation {
    0% {
        /* Состояние до анимации */
        background-color: #333;
        color: #fff;
    }
    100% {
        /* Состояние после анимации */
        background-color: #fff;
        color: #000;
    }
}

@keyframes menuAnimationReverse {
    0% {
        /* Состояние до анимации */
        background-color: #fff;
        color: #000;
    }
    100% {
        /* Состояние после анимации */
        background-color: #333;
        color: #fff;
    }
}

#logoImageMenu:not(.active) {
    filter: brightness(0) invert(1); /* Применяем фильтр для инвертирования цвета изображения */
}

#toggleMenu {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: left 400ms cubic-bezier(0.540, 0.260, 0.295, 0.815);

    border: none;
    background-color: #333;  /* #f0f0f0 */
    border-top-left-radius: 0px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0px;
    padding: 45px 5px;
    z-index: 1001;
    /*box-shadow: 15px 0px 10px -5px #b9b9b9; !* #b9b9b9 , #ffffff *!*/
    color: #f0f0f0; /* #333 */
}

#toggleMenu.active{
    animation: menuAnimation 0.4s ease-in-out  0.2s forwards;
}

#toggleMenu:not(.active) {
    animation: menuAnimationReverse 0.4s ease-in-out forwards;
}

#sideMenu {
    overflow: hidden;
    border-radius: 20px;
    position: fixed;
    top: 20px; /* Отступ сверху */
    left: -200px;
    width: 200px;
    height: calc(100% - 40px); /* Высота меню с учетом отступов сверху и снизу */
    background-color: #333;
    /*color: white;*/
    /*box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;*/
    transition: left 400ms cubic-bezier(0.540, 0.260, 0.295, 0.815);
    z-index: 1000;
    margin-left: 0px; /* Отступ слева */
    /*margin-right: 10px; !* Отступ справа *!*/
}

#sideMenu.active {
    left: 0;
    margin-left: 10px;
    animation: menuAnimation 0.4s ease-in-out  0.2s forwards;
}

#sideMenu:not(.active) {
    animation: menuAnimationReverse 0.4s ease-in-out forwards;
}

#sideMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sideMenu ul li {
    padding: 15px;
}

#sideMenu ul li a {
    color: white;
    text-decoration: none;
}

#sideMenu.active ul li a{
    animation: menuAnimation 0.4s ease-in-out  0.2s forwards;

}

#sideMenu ul li a:hover {
    color: #ffc107;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Здесь можно настроить прозрачность */
    z-index: 999; /* Позволяет затенить все остальные элементы */
    transition: background-color 0.3s ease;
}

.BtnSideMenu{
    background: transparent;
    border: none;
    color: black;
    text-decoration: none;
    border-radius: 15px;
    transition: background 0.3s linear, box-shadow 0.3s linear;

}

.BtnSideMenu:hover{
    border: none;
    color: #000000;
    background: #e3e3e3;
    box-shadow: 5px 5px 10px #b9b9b9, -5px -5px 10px #ffffff;
}

.neumorphic-btn-base:focus, .neumorphic-btn-base:active {
    outline: none !important;

}


/* table */

.sticky-block {
    z-index: 100;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: #f0f0f0;
     padding: 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     display: none; 
}


/* popper tooltip */

.tooltip-inner {
    border-radius: 15px;
    background-color: green !important;
    padding: 10px;
    color: #fff ;
    transition: opacity 0.5s ease-in-out;
    box-shadow: 3px 3px 6px #b9b9b9, -3px -3px 6px #ffffff;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: green; /* Arrow color */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: green; /* Arrow color */
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: green; /* Arrow color */
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #333; /* Arrow color */
}

/* Custom animation for tooltip */

/*.tooltip.show {*/
/*    opacity: 1;*/
/*}*/
/*@keyframes fadeIn {*/
/*    from { opacity: 0; transform: translateY(-10px); }*/
/*    to { opacity: 1; transform: translateY(0); }*/
/*}*/

/*.tooltip.show {*/
/*    animation: fadeIn 0.5s ease-in-out forwards;*/
/*}*/



/* Wave load anim */

@keyframes swirl {
    0% {
        opacity: 0.2;
        transform: translate(-50%, 50%) rotate(-45deg);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, 50%) rotate(-225deg);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, 50%) rotate(-225deg);
    }
    100% {
        opacity: 0.2;
        transform: translate(-50%, 50%) rotate(-45deg);
    }
}

.graphic {
    height: 150%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 150%;
}
.dot {
    background-color: #fff;
    border-radius: 50%;
    bottom: 0;
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 50%);
    width: 4px;
}
.arc {
    border-color: #CDE1E5 #2A83C2 transparent transparent;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    bottom: 0;
    position: absolute;
    left: 50%;
}
.arc-1 {
    animation: swirl 5.5s ease-in-out -0.1s infinite;
    padding-top: 1.724137931%;
    width: 1.724137931%;
}
.arc-2 {
    animation: swirl 5.5s ease-in-out -0.2s infinite;
    padding-top: 3.4482758621%;
    width: 3.4482758621%;
}
.arc-3 {
    animation: swirl 5.5s ease-in-out -0.3s infinite;
    padding-top: 5.1724137931%;
    width: 5.1724137931%;
}
.arc-4 {
    animation: swirl 5.5s ease-in-out -0.4s infinite;
    padding-top: 6.8965517241%;
    width: 6.8965517241%;
}
.arc-5 {
    animation: swirl 5.5s ease-in-out -0.5s infinite;
    padding-top: 8.6206896552%;
    width: 8.6206896552%;
}
.arc-6 {
    animation: swirl 5.5s ease-in-out -0.6s infinite;
    padding-top: 10.3448275862%;
    width: 10.3448275862%;
}
.arc-7 {
    animation: swirl 5.5s ease-in-out -0.7s infinite;
    padding-top: 12.0689655172%;
    width: 12.0689655172%;
}
.arc-8 {
    animation: swirl 5.5s ease-in-out -0.8s infinite;
    padding-top: 13.7931034483%;
    width: 13.7931034483%;
}
.arc-9 {
    animation: swirl 5.5s ease-in-out -0.9s infinite;
    padding-top: 15.5172413793%;
    width: 15.5172413793%;
}
.arc-10 {
    animation: swirl 5.5s ease-in-out -1s infinite;
    padding-top: 17.2413793103%;
    width: 17.2413793103%;
}
.arc-11 {
    animation: swirl 5.5s ease-in-out -1.1s infinite;
    padding-top: 18.9655172414%;
    width: 18.9655172414%;
}
.arc-12 {
    animation: swirl 5.5s ease-in-out -1.2s infinite;
    padding-top: 20.6896551724%;
    width: 20.6896551724%;
}
.arc-13 {
    animation: swirl 5.5s ease-in-out -1.3s infinite;
    padding-top: 22.4137931034%;
    width: 22.4137931034%;
}
.arc-14 {
    animation: swirl 5.5s ease-in-out -1.4s infinite;
    padding-top: 24.1379310345%;
    width: 24.1379310345%;
}
.arc-15 {
    animation: swirl 5.5s ease-in-out -1.5s infinite;
    padding-top: 25.8620689655%;
    width: 25.8620689655%;
}
.arc-16 {
    animation: swirl 5.5s ease-in-out -1.6s infinite;
    padding-top: 27.5862068966%;
    width: 27.5862068966%;
}
.arc-17 {
    animation: swirl 5.5s ease-in-out -1.7s infinite;
    padding-top: 29.3103448276%;
    width: 29.3103448276%;
}
.arc-18 {
    animation: swirl 5.5s ease-in-out -1.8s infinite;
    padding-top: 31.0344827586%;
    width: 31.0344827586%;
}
.arc-19 {
    animation: swirl 5.5s ease-in-out -1.9s infinite;
    padding-top: 32.7586206897%;
    width: 32.7586206897%;
}
.arc-20 {
    animation: swirl 5.5s ease-in-out -2s infinite;
    padding-top: 34.4827586207%;
    width: 34.4827586207%;
}
.arc-21 {
    animation: swirl 5.5s ease-in-out -2.1s infinite;
    padding-top: 36.2068965517%;
    width: 36.2068965517%;
}
.arc-22 {
    animation: swirl 5.5s ease-in-out -2.2s infinite;
    padding-top: 37.9310344828%;
    width: 37.9310344828%;
}
.arc-23 {
    animation: swirl 5.5s ease-in-out -2.3s infinite;
    padding-top: 39.6551724138%;
    width: 39.6551724138%;
}
.arc-24 {
    animation: swirl 5.5s ease-in-out -2.4s infinite;
    padding-top: 41.3793103448%;
    width: 41.3793103448%;
}
.arc-25 {
    animation: swirl 5.5s ease-in-out -2.5s infinite;
    padding-top: 43.1034482759%;
    width: 43.1034482759%;
}
.arc-26 {
    animation: swirl 5.5s ease-in-out -2.6s infinite;
    padding-top: 44.8275862069%;
    width: 44.8275862069%;
}
.arc-27 {
    animation: swirl 5.5s ease-in-out -2.7s infinite;
    padding-top: 46.5517241379%;
    width: 46.5517241379%;
}
.arc-28 {
    animation: swirl 5.5s ease-in-out -2.8s infinite;
    padding-top: 48.275862069%;
    width: 48.275862069%;
}
.arc-29 {
    animation: swirl 5.5s ease-in-out -2.9s infinite;
    padding-top: 50%;
    width: 50%;
}


/* animation menu i */

@keyframes shake {
    0% { transform: rotate(0deg); }
    12.5% { transform: rotate(10deg); }
    25% { transform: rotate(0deg); }
    37.5% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
    62.5% { transform: rotate(10deg); }
    75% { transform: rotate(0deg); }
    87.5% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.shake {
    animation: shake 0.7s ease;
}

@keyframes rotateRight {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotateRight {
    animation: rotateRight 0.4s linear;
}

@keyframes rotateLeft {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.rotateLeft {
    animation: rotateLeft 0.4s linear;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}