.button-mac {
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

/* Жёлтая кнопка */
.button-yellow {
  background: linear-gradient(to bottom, #ffeb3b, #fdd835);
  color: #333;
}

.button-yellow:hover {
  background: linear-gradient(to bottom, #ffee58, #fbc02d);
}

.button-yellow:active {
  background: linear-gradient(to bottom, #fdd835, #fbc02d);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Красная кнопка */
.button-red {
  background: linear-gradient(to bottom, #ff5252, #e53935);
}

.button-red:hover {
  background: linear-gradient(to bottom, #ff6e6e, #d32f2f);
}

.button-red:active {
  background: linear-gradient(to bottom, #e53935, #c62828);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Зелёная кнопка */
.button-green {
  background: linear-gradient(to bottom, #66bb6a, #43a047);
}

.button-green:hover {
  background: linear-gradient(to bottom, #81c784, #388e3c);
}

.button-green:active {
  background: linear-gradient(to bottom, #43a047, #2e7d32);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Синяя кнопка */
.button-blue {
  background: linear-gradient(to bottom, #42a5f5, #1e88e5);
}

.button-blue:hover {
  background: linear-gradient(to bottom, #64b5f6, #1976d2);
}

.button-blue:active {
  background: linear-gradient(to bottom, #1e88e5, #1565c0);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Чёрная кнопка */
.button-black {
  background: linear-gradient(to bottom, #424242, #212121);
}

.button-black:hover {
  background: linear-gradient(to bottom, #616161, #1b1b1b);
}

.button-black:active {
  background: linear-gradient(to bottom, #212121, #000000);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
}

/* Серая кнопка */
.button-gray {
  background: linear-gradient(to bottom, #e0e0e0, #bdbdbd);
  color: #333;
}

.button-gray:hover {
  background: linear-gradient(to bottom, #f5f5f5, #9e9e9e);
}

.button-gray:active {
  background: linear-gradient(to bottom, #bdbdbd, #757575);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}



/* Белая кнопка */
.button-white {
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
  color: #333;
}

.button-white:hover {
  background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
}

.button-white:active {
  background: linear-gradient(to bottom, #e0e0e0, #bdbdbd);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}


.is-bold{
  font-weight: bold;
}



  .container1 a {
    flex-shrink: 0; /* Запрещаем сжимать ссылки */
    
  }

.stick {
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: none; /* Убирает линию, если она граница */
    scrollbar-width: none; /* Скрывает скроллбар в Firefox */
    padding: 12px 0 20px 0px;
}
.stick::-webkit-scrollbar {
    display: none; /* Скрывает скроллбар в Chrome/Safari */
}


  .timer {

    font-weight: bold;
    font-size: 16px;
    min-height: 25px;
   
  }



body{
  padding-bottom:200px;
}
.hide{
  display: none;
}







.openBox{
  cursor: pointer;
}





/* Стили для контейнера */
        .preloader {
            position: fixed; /* Фиксированное положение */
            top: 0;
            left: 0;
            width: 100%; /* На всю ширину экрана */
            height: 100%; /* На всю высоту экрана */
            background: linear-gradient(to bottom, #fff, #fff);
            display: flex; /* Используем Flexbox */
            justify-content: center; /* Центрирование по горизонтали */
            align-items: center; /* Центрирование по вертикали */
            z-index: 1000; /* Чтобы был поверх всего */
        }

     
.preloader.hide {
    opacity: 0;
}





.dynamic-gradient {
  background: linear-gradient(-45deg, #fff6a8, #ffdfdf, #fff6a8, #ffdfdf);
  background-size: 400% 400%;
  animation: gradientWave 10s ease infinite;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}




.dynamic-gradient-gray {
  background: linear-gradient(-45deg, #f5f5f5, #e0e0e0, #f5f5f5, #e0e0e0); /* Самый светлый серый градиент */
  background-size: 400% 400%; /* Увеличиваем размер фона для анимации */
  animation: gradientWave 10s ease infinite; /* Анимация градиента */
  border-radius: 10px; /* Закругленные углы */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Тень для объема */
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%; /* Начальная позиция градиента */
  }
  50% {
    background-position: 100% 50%; /* Промежуточная позиция градиента */
  }
  100% {
    background-position: 0% 50%; /* Конечная позиция градиента */
  }
}



.dynamic-gradient-lightblue {
  background: linear-gradient(-45deg, #e6f7ff, #cceeff, #e6f7ff, #cceeff);
  background-size: 400% 400%;
  animation: gradientWave 10s ease infinite;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Анимация остается такой же */
@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}




a {
    color: #000;
  }





.dynamic-gradient-blue {
  background: linear-gradient(-45deg, #fff6a8, #ffdfdf, #fff6a8, #ffdfdf);
  background-size: 400% 400%;
  animation: gradientWave 10s ease infinite;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}




/* Стили для анимации появления */
    .content-block {
      display: none; /* Скрываем блоки по умолчанию */
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .content-block.active {
      display: block; /* Показываем блок */
      opacity: 1; /* Делаем его видимым */
    }








        #popupBox, .popup-box {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow-y: auto;
            touch-action: none; /* Решение для passive events */
        }

        .popup-content {
            position: relative;
            margin: 80px auto;
            width: 90%;
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .close-overlay {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .close-overlay:hover {
            background: rgba(0,0,0,0.5);
        }

        .close-overlay i {
            color: white;
            font-size: 28px;
            transition: all 0.3s;
        }

        .close-overlay:hover i {
            color: #ffeb3b;
            transform: scale(1.2);
        }

        .loader {
            display: none;
            width: 50px;
            height: 50px;
            border: 5px solid transparent;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #ffeb3b, #ff5722, #ffeb3b);
            animation: spin 1s linear infinite;
            margin: 20px auto;
            position: relative;
        }

        .loader::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
        }

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

        .popup-body {
            min-height: 150px;
            overflow-y: auto;
            max-height: 70vh;
        }

        @media (max-width: 768px) {
            .close-overlay {
                top: 10px;
                right: 10px;
            }
            .close-overlay i {
                font-size: 24px;
            }
        }






.simple-editor {
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 600px;
    margin: 10px;
}

.editor-toolbar {
    padding: 5px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.editor-toolbar button {
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 3px 8px;
    margin-right: 5px;
    cursor: pointer;
}

.editor-textarea {
    min-height: 150px;
    padding: 10px;
    outline: none;
}

.editor-textarea:empty:before {
    content: attr(placeholder);
    color: #999;
}





 .navbar.is-fixed-bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 999;
      background-color: white;
      border-top: 1px solid #ddd;
      padding: 0.5rem 1rem;
    }

.popup-footer.is-fixed {
  position: absolute; /* Меняем fixed на absolute */
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  border-radius: 10px;
  background: #fff;
  
  }

/* Растягиваем кнопки */
.popup-footer.is-fixed .columns {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.popup-footer.is-fixed .column {
  padding: 0 5px;
}

.popup-footer.is-fixed .button-mac {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Оптимизация для мобильных */
@media screen and (max-width: 768px) {
  .popup-footer.is-fixed {
    padding: 8px;
  }
  .popup-footer.is-fixed .column {
    padding: 0 3px;
  }
}

.hide{
    display: none;
}



body,html,div,p,a,.button,td,.box,input,textarea,select{
  color:#333;
}

.np{
  padding:0!important;
  margin: 0!!important;
}

.fresh-green-gradient {
    background: linear-gradient(-45deg, #e9fce9, #d4f7d4, #e9fce9, #d4f7d4);
    background-size: 400% 400%;
    animation: gradientWave 10s ease infinite;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 100, 0, 0.1);
}