* {
    font-family: inherit;
    
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}
html {
    scroll-behavior: smooth;  /* Включает плавную прокрутку для якорных ссылок */
}
body{
    background-color: #EAEAEA; 
    font-family: 'Roboto', sans-serif !important;
    /*font-size: 14pt;*/
    line-height: 1.2 !important;
    height: auto;  /* Занимаем всю высоту экрана */
    margin: 0;
    padding: 0;         
}
h1 {
    text-align: left;  /* Выравнивание по левому краю */
    font-weight: bold; /* Жирный текст */
    font-size: 18pt;   /* Размер 18pt */
    color: #3498DF; 
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding: 0px !important;
}
h2 {
    text-align: left;  /* Выравнивание по левому краю */
    font-weight: bold; /* Жирный текст */
    font-size: 16pt;   /* Размер 16pt */
    color: #3498DF;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 0px !important;
}
h3 {
    text-align: left;  /* Выравнивание по левому краю */
    font-weight: bold; /* Жирный текст */
    font-size: 14pt;   /* Размер 14pt */
    color: #3498DF;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding: 0px !important;
}

.header-main {    
    top: 0px;
    left: 0;
    right: 0;
    height: 115px; /* Устанавливаем высоту хедера */
    z-index: 1000;
}
.article {
    background-color: #FFFFFF; 
    min-height: calc(100vh - 60px - 100px - 60px - 50px);           
    width:100%;
    margin-top: 40px;  /* Отступ сверху, равный высоте хедера */
    margin-bottom: 30px; /* Отступ снизу, равный высоте футера */
    left: 0;
    right: 0;
    padding: 30px;     
}
.custm-header{
    background: #1FABC6;
    text-align: right;  /* Выравнивание по левому краю */    
}


.tab {
    
    overflow: auto; 
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;    
    transition: 0.3s;
    font-size: 12pt;
  }
  .tab button:hover {
    background-color: #ddd;
  }
  
  .tab button.active {
    background-color: #ccc;
  }
  
  .tabcontent {
    display: none;
    padding: 15px 15px;
    border: 2px solid #ccc;
    border-top: none;
    overflow: auto;
    min-height: 50vh;
  }
.col-tab-content{
    min-width:200px;
}

.row-block{
    margin: 10px 0px;
}
.container-optum{
    min-height: calc(100vh - 60px - 100px - 60px - 50px); 
    
}

.row-paginater{
    
    background-color: #FFFFFF;
    height: 50px;   
    
    border: 1px solid #ccc; /* Граница толщиной 1px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */      
    display: flex; /* Используем Flexbox */    
    padding: 0px;
    margin: 10px 0px ;   
    border-radius: 15px; /* Скругляем углы */
    justify-content: center;    /* Горизонтальное центрирование */
    align-items: center;        /* Вертикальное центрирование */

}

#footer-panel{
    height:100px;            
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #595959 !important;
    border-top: 1px solid #e9ecef;            
    z-index: 1000;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

#main{    
    display: flex;                  /* Включение Flexbox */
    justify-content: center;         /* Горизонтальное выравнивание по центру */
    align-items: center;  
    width: 100%;  
    min-height: calc(100vh - 60px - 100px - 60px - 50px);
}
.optum-btn{
    display: flex; 
    align-items: center;        /* выравнивание по вертикали */
    justify-content: center; 
    margin: 0px;
    padding:0px;
    width:100%;    
    margin:0 5px;
    padding: 10px 0;
    height: 100%;
    font-size: 12pt !important;
    background-color: #1FABC6;  /* Цвет фона */
    color: white;               /* Цвет текста */
    border-radius: 8px;         /* Скругление углов */
    cursor: pointer;            /* Курсор при наведении */
    transition: background-color 0.3s, box-shadow 0.3s; /* Анимация */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
  
  }
  
  .optum-btn:hover {
    background-color: #045e6e;  /* Чуть темнее при наведении */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Тень глубже */
    color: white;   
    font-weight: bold;
  }
  
  .optum-btn:active {
    background-color: #035566;  /* Ещё темнее при нажатии */
    transform: scale(0.98);     /* Эффект "нажатия" */
    color: white;   
    font-weight: bold;
  
  }

  .optum-danger-btn {
    background-color: #b35c5c;  /* Основной цвет — приглушённый красно-коричневый */
    display: flex; 
    align-items: center;        /* выравнивание по вертикали */
    justify-content: center; 
    margin: 0px;
    padding:0px;
    width:100%;    
    margin:0 5px;
    padding: 10px 0;
    height: 100%;
    font-size: 12pt !important;
    color: white;               /* Цвет текста */
    border-radius: 8px;         /* Скругление углов */
    cursor: pointer;            /* Курсор при наведении */
    transition: background-color 0.3s, box-shadow 0.3s; /* Анимация */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
  }
  
  .optum-danger-btn:hover {
    background-color: #944a4a;  /* Темнее при наведении */
    color: white;  
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    font-weight: bold;
  }
  
  .optum-danger-btn:active {
    background-color: #783939;  /* Еще темнее при нажатии */
    color: white;  
    transform: scale(0.98);
    font-weight: bold;
  }

.text-and-img-right {
    padding-left:0px;           
   
}

.img-container img {
    width: 100%;
    height: auto;
    padding: 0px;
}

.only-img {
    display: flex;
    justify-content: center;
    padding: 0px;
}


.site-branding {
    position: absolute; /* Используем абсолютное позиционирование */
    right: 0;          /* Привязываем к правому краю */
    top: 0;            /* Привязываем к верхнему краю */
    padding: 15px;     /* Добавляем отступы, если нужно */
}

.active-page{
    background: #424242 !important;
    color: #ffffff; /* Измените цвет текста */
    font-family: 'Roboto', sans-serif !important;
    font-size: 14pt !important; /* Измените размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    padding: 0px 10px !important; /* Измените отступы */
   
    margin: 0px 5px;
    height: 60px;
    
}
.bg-dark{
    background: #595959 !important;
    /*height: 60px; */
    padding: 0px;
    margin: 0px;}
    

.nav-link_custm {
    display: flex;              /* Включаем Flexbox */
    font-family: 'Roboto', sans-serif !important;
    color: #ffffff !important; /* Измените цвет текста */
    font-size: 14pt !important; /* Измените размер шрифта */
    padding: 0px 10px !important; /* Измените отступы */
    
    margin: 0px 0px;
    
    height: 60px !important;
    
    align-items: center;        /* Центрирование по вертикали */
}
.navbar-collapse {
    background-color: #595959; /* Ваш цвет */
    width:100%;
    padding: 0px;
    margin: 0px;    
    font-family: 'Roboto', sans-serif !important;
    color: #ffffff !important; /* Измените цвет текста */
    font-size: 12pt !important; /* Измените размер шрифта */
    z-index: 9000;
  }

.nav-link_custm:hover {
    background: #424242; /* Измените фон при наведении */
    color: #ffffff; /* Цвет текста при наведении */
    padding: 0px 10px !important; /* Измените отступы */
   
    
    height: 100%;
}
.nav-custm{
    height: 60px;
}

.preview-img{
    max-height:30vh;
    max-width: 100%;
}
.preview-img-app{
    

  width: 100%;          /* Картинка на всю ширину контейнера */
  height: auto;         /* Сохраняем пропорции */
  object-fit: cover;    /* Можно поменять на contain, если важно видеть всю картинку */
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}
.row-custom {
    background: #FFFFFF !important;
    border: 1px solid #ccc !important; /* Граница толщиной 1px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Тень */      
    display: flex !important; /* Используем Flexbox */
    flex-wrap: wrap !important; /* Позволяем переносить блоки на следующую строку */
    padding: 0px !important;
    margin: 10px 0px !important;
    
    border-radius: 15px !important; /* Скругляем углы */

}



.col-custom{
  display: flex !important; /* Позволяем колонкам использовать Flexbox */
  margin: 0px !important;
  margin-right: 0px !important;
  padding: 0px !important;
  align-items: center; /* Центрируем содержимое колонок по вертикали */
   
}

.row-main {
    background: #FFFFFF;
    border: 1px solid #ccc; /* Граница толщиной 1px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */      
    display: flex; /* Используем Flexbox */
    flex-wrap: wrap; /* Позволяем переносить блоки на следующую строку */
    padding: 0px;
    margin: 10px 0px;
    min-height: 180px;
    border-radius: 15px; /* Скругляем углы */

}
.col-main{
    display: flex; /* Позволяем колонкам использовать Flexbox */
    margin: 0px;
    margin-right: 0px;
    padding: 0px;
    padding-left:10px;
    align-items: center; /* Центрируем содержимое колонок по вертикали */
     
  }

.section-custm{
    margin: 0px !important;
    padding: 0px !important;
    line-height: 1.2 !important; /* Задает стандартное межстрочное расстояние */

}
.container-fluid{
    padding: 0px;
}
section{
    padding: 0px;
}
.row{
    padding: 0px;
}

.btn-main-menu{
    font-family: 'Roboto', sans-serif !important;
    font-size: 14pt !important; /* Измените размер шрифта */
    color: #ffffff !important;
    padding: 0px 10px;
   
    background: #4a90e2;
    margin: 0px 5px;
    
    min-width: 80px;
    max-width: 150px;
    height: 40px;
         
}
.btn-main-menu:hover{
    color: #ffffff;
    font-weight: bold; /* Жирный текст */
    background: #357ABD;;

}


sub, sup {
    font-family: 'Roboto', sans-serif !important;
    font-size: 8pt !important; /* Измените размер шрифта */
}
p, em, blockquote,strong, li, a, b, i, u, small, mark, del, ins, pre, code, kbd, samp, var, q, cite, span, ul,ol {
    margin: 0px; /* Убирает внешние отступы */
    
    line-height: 1.5 !important; /* Задает стандартное межстрочное расстояние */
    font-family: 'Roboto', sans-serif !important;
    font-size: 14pt; /* Измените размер шрифта */
    color: #000000;
    padding: 0px;
}

.soderzhaniye-row{
    width: 100%; /* Занимает всю доступную ширину */    
    border-top: 2px solid #EAEAEA; ;  /* Верхняя граница 1px */
    border-bottom: 2px solid #EAEAEA; ;  /* Нижняя граница 1px */
    
}

.two-columns {
    column-count: 2;
    column-gap: 30px; /* Расстояние между колонками */
  }



  .block-contact-form{
    margin: 15px 0px;
}
label{
    font-family: 'Roboto', sans-serif !important;
    font-weight: bold;
    font-size: 12pt !important;

}
input[type="text"], input[type="number"], select, button {
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    line-height: 1.2;
}
textarea{
    font-family: 'Roboto', sans-serif !important;
    font-size: 14pt !important;
    line-height: 1.2 !important;
}
.text-post{
    margin: 30px 0px;
}
.contact-inform{
    margin: 30px 0px;
}


/* Стили для выравнивания текста */
.ql-align-left {
    text-align: left; /* Выравнивание по левому краю */
}

.ql-align-center {
    text-align: center; /* Центрирование текста */
}

.ql-align-right {
    text-align: right; /* Выравнивание по правому краю */
}
.ql-align-justify {
    text-align: justify; /* Выравнивание по ширине */
}

/* Стили для инлайн-форматирования */
.ql-bold {
    font-weight: bold; /* Жирный шрифт */
}

.ql-italic {
    font-style: italic; /* Курсив */
}

.ql-underline {
    text-decoration: underline; /* Подчёркнутый текст */
}

/* Стили для списков */
.ql-list {
    margin-left: 1.5em; /* Отступ для списков */
}

.nav-item {
    position: relative; /* Для корректного позиционирования подменю */
}

.dropdown-menu {
    display: none; /* Скрываем подменю */
    background: #595959;
    position: absolute; /* Позволяет правильно позиционировать подменю */
    left: 0; /* Настройте по необходимости */
    top: 100%; /* Размещаем подменю под родителем */
    z-index: 1000; /* Убедитесь, что оно над другими элементами */
}

.nav-item:hover .dropdown-menu {
    display: block; /* Показываем подменю при наведении */
}

.arrow {
    margin-left: 5px; /* Отступ слева для разделения от текста */
    transition: transform 0.2s; /* Плавный переход при наведении */

    cursor: pointer; /* Указатель при наведении */
    font-size: 0.9rem; /* Размер стрелки */
    background: none; /* Убираем фон */
    border: none; /* Убираем границу */
    color: #ffffff; /* Цвет стрелки */
}

.nav-item.dropdown:hover .arrow {
    transform: rotate(180deg); /* Поворачиваем стрелку при наведении */
}


/* Класс для таблицы */
.slope-plot-table {
    width: 100%;
    border-collapse: collapse;
}

/* Класс для ячеек таблицы */
.slope-plot-td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

/* Класс для заголовков таблицы */
.slope-plot-th {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    background-color: #f2f2f2;
}

.alert {
    padding: 20px;
    background-color: #FFD700; /* Bright yellow to resemble a glowing light */
    color: red; /* Red text color */
    opacity: 0.8;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    text-align: center; /* Center the text */
}

.alert-icon {
    font-size: 24px;
    margin-right: 10px;
}




/* Общие стили для карточек */
.product-card {
    flex: 0 0 49%; /* Карточка занимает 49% от ширины родительского контейнера */
    border: 1px solid #ddd; /* Граница карточки */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для карточки */
    margin-bottom: 15px; /* Отступ между карточками */
    min-width: 300px;
    padding:15px;
}

/* Размер изображения в карточке */
.product-card .card-img-top {
    max-height: 50vh; /* Максимальная высота — треть экрана */
    object-fit: contain; /* Сохранение пропорций с обрезкой */
    max-width: 100%; /* Ширина 100% карточки */
    
}

/* Внутренние отступы для контента карточки */
.product-card .card-body {
    padding: 15px; /* Внутренние отступы */
}

/* Заголовок карточки */
.product-card .card-title {
    font-size: 14pt; /* Размер шрифта */
    margin-bottom: 10px; /* Отступ снизу */
}

/* Текст карточки */
.card-text {
    padding:0px 10px;
    font-size: 12pt;
    color: #000000; /* Цвет текста */
}

/* Пагинация */
.pagination {
    display: flex;
    gap: 10px; /* Расстояние между элементами пагинации */
}

.pagination a, .pagination .current {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .current {
    background-color: #ddd;
    color: #333;
}


/*Стили для карточки приложения*/
.card-row-app {
    display: flex;
    width: 100%; /* Карточка занимает 100% ширины */
    
    height: calc(1em * 1.2 * 7); /* 7 строк текста, 1.2 — межстрочный интервал */
    border: 1px solid #ddd; /* Для наглядности */
  
    background-color: #ffffff;
    margin:10px 20px
  }

  .image-container-app{
    flex: 0 0 33.333%; /* Соответствует col-4 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .card-image-app {
    width: 100%;
    height: auto;
    object-fit: cover; /* Позволяет подгонять изображение по заданному размеру */
    aspect-ratio: 16 / 9; /* Соотношение сторон */
  }
  .text-container-app {
    padding: 1rem;
    padding-top:0px;
    height: 100%;
    overflow: hidden; /* Скрываем лишний текст */
    display: -webkit-box; /* Включаем поддержку для line-clamp */
    
    -webkit-box-orient: vertical; /* Вертикальная ориентация блока */
    
    line-height: 1.2em; /* Межстрочный интервал для точного расчета высоты */
    
}

.text-container-app a {
   
    text-decoration: none; 
    color: inherit
  }

/* Основные стили для мобильных устройств */
@media (max-width: 900px) {

    body{
        font-size: 10pt !important;
        line-height: 1.2 !important;  
    }    
    h1 {
        font-size: 14pt;   /* Размер 14pt */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }    
    h2 {
        font-size: 12pt;   /* Размер 12pt */
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }    
    h3 {
        font-size: 10pt;   /* Размер 10pt */
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .optum-btn{    
        font-size: 10pt !important;
        padding: 5px 0;
      }

    .optum-danger-btn {    
        padding: 5px 0;
        font-size: 10pt !important;
      }

    .two-columns {
        column-gap: 15px; /* Расстояние между колонками */
      }

    .row-custom {
        min-height: 50px;
    }
    .header-main {    
        top: 0px;
        left: 0;
        right: 0;
        height: 50px; /* Устанавливаем высоту хедера */
        z-index: 1000;
    }
    .nav-link_custm {
        height:50px;
    }
    #main{

        padding: 0px;
        margin: 0px;        
      }
    
    
    .article {
        padding: 15px;        
    }    
    .row-block{
        margin: 10px 0px;
    }
    .row-paginater{
        height: 30px;
        margin: 10px 0px ;   
        border-radius: 5px; /* Скругляем углы */    
    }    
    .site-content{
        width:100%;
        background-color: #EAEAEA;    
        margin-top:40px;  /* Отступ сверху, равный высоте хедера */
        margin-bottom: 30px; /* Отступ снизу, равный высоте футера */
        left: 0;
        right: 0;
        padding: 0px;
    }   

    .active-page{
        font-size: 12pt !important; /* Измените размер шрифта */        
    }
    
    .nav-link_custm {
        font-size: 12pt !important; /* Измените размер шрифта */
        height: 50px;
    }

    p, ul, em, blockquote,strong, ol, li, a, b, i, u, small, mark, del, ins, pre, code, kbd, samp, var, q, cite, span {
        line-height: 1.2 !important; /* Задает стандартное межстрочное расстояние */
        font-size: 10pt !important; /* Измените размер шрифта */
    }
    .product-card {
        flex: 0 0 100%; /* Карточка занимает 100% ширины родительского контейнера */
        min-width: 200px;
    }
    .product-card .card-img-top {
        max-height: 40vh; /* Уменьшаем высоту для мобильных экранов */
    }
    .product-card .card-title {
        font-size: 12pt; /* Уменьшаем размер шрифта заголовка */
    }
    .card-text {
        font-size: 10pt; /* Уменьшаем размер шрифта текста */
    }
    .container-optum{
        width:90%;
    }  

    .tab button {
        padding: 7px 8px;
        font-size: 10pt;
      }
    
    .col-tab-content{
        min-width:120px;
    }
}