body {
    margin:0;
    font-family:'Roboto', sans-serif;
    font-weight:400;
    color:#333;
    background: radial-gradient(circle, rgb(254, 244, 235), rgb(252, 246, 222));

}

a {
    color:#134f86;
    text-decoration:none;
}

ul {
    float:left;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Roboto', sans-serif;
    font-weight:300;
}

h1 {
    background:#efefef;
    width:100%;
    overflow:auto;
    padding:20px 0 20px 40px;
    margin:0;
}

.module {
    padding:10px 20px;
    float:left;
    width:500px;
}

.module h3 {
    margin:20px 0 0;
    padding:0;
    width:100%;
}

.module p {
    margin:10px 0 20px;
    width:100%;
    float:left;
}

#header {
    background: efe3d7;
    overflow:auto;
    padding:10px 20px;
    border-bottom:6px solid #84f97c;
}

#header:hover {
    background: #efe3d7; /* Изменение цвета фона при наведении */
}

#header .logo {
    text-decoration:none;
    font-family:'Roboto', sans-serif;
    font-weight:300;
    text-transform:uppercase;
    font-size:24px;
    color:#160b3a;
    float:left;
}

#header a {
    color:#160b3a;
}

#header .menu {
    list-style:none;
    float:right;
    margin:0;
    padding:0;
}

.contents {
    width: 25%; /* Задаёт ширину элемента в 20% от ширины родительского контейнера */
    padding: 10px;  /* Устанавливает внутренние отступы по 10 пикселей со всех сторон */
    float: left; /* Выравнивает элемент по левому краю, позволяя другим элементам обтекать его справа */
    background: #e6e1e1;  /* Задаёт фоновый цвет в серо-коричневых тонах (HEX #b1a5a5) */
    border-radius: 30px; /* Скругляет углы элемента с радиусом 30 пикселей */
    color: #0f5493;  /* Устанавливает белый цвет текста (HEX #fff) */
    font-family: 'Roboto', sans-serif; /* Задаёт шрифт Roboto с запасным вариантом sans-serif */
}

/* Стили для блока content, чтобы он выглядел как страница книги */



.contents ul {
    list-style: none;    /* Убирает стандартные маркеры списка (точки/кружки) */
    margin: 0;          /* Обнуляет внешние отступы списка */
    padding: 0;         /* Обнуляет внутренние отступы списка */
    width: 100%;        /* Занимает 100% ширины родительского контейнера */
}

.contents ul li {
    margin: 0 0 10px 0; /* Внешние отступы: 0 сверху/справа/слева, 10px снизу */
    padding: 4px 10px 10px; /* Внутр. отступы: 4px сверху, 10px справа/снизу */
    overflow: auto;     /* Автоматическое добавление прокрутки при переполнении */
    cursor: move;       /* Изменяет курсор на "перемещение" при наведении */
}

.contents ul li.selected {
    background:#e3e1e1; /* Серо-коричневый фон для выделенного элемента */
}

.contents ul li:hover {
    background:#cfcfcf ; /* Темно-серый фон при наведении */
}

.contents ul li.placeholder {
  background: #333;    /* Темный фон */
    border: 1px dashed #ccc; /* Пунктирная светло-серая граница */
    padding: 0;         /* Нет внутренних отступов */
    margin: 10px 0;     /* Отступы 10px сверху/снизу */
}

.contents ul span {
    text-transform: uppercase; /* Преобразует текст в ВЕРХНИЙ РЕГИСТР */
    color: #bbb;        /* Светло-серый цвет текста */
    font-size: 12px;    /* Размер шрифта 12px */
}

.contents ul a {
display: block;     /* Делает ссылку блочным элементом */
    color: #0a4880;        /* Белый цвет текста */
    text-decoration: none; /* Убирает подчеркивание ссылки */
}

.contents ul a:hover {
    color: #121eab;     /* Ярко-зеленый цвет при наведении */
    cursor: move;       /* Курсор "перемещение" (как у элементов списка) */
}

ul.content-types li {
    list-style: none;   /* Убирает маркеры списка */
    float: left;        /* Выравнивает элементы по горизонтали */
    margin: 10px;       /* Внешние отступы по 10px со всех сторон */
    background: #efefef; /* Светло-серый фон */
    padding: 8px 14px;  /* Внутренние отступы 8px сверху/снизу, 14px слева/справа */
}

.hidden {
    display:none;
}

form p {
    overflow:auto;
}

.errorlist {
    color:#ae2c2c;
    margin:0;
}

label {
    float:left;
    clear:both;
    margin:0 0 8px 0;
}

input, select, textarea {
    border:1px solid #ccc;
    border-bottom:3px solid #ccc;
    padding:8px 12px;
    font-size:16px;
    font-family:'Roboto', sans-serif;
    float:left;
    clear:both;
    width:300px;
}

textarea {
    height:80px;
}

select {
    width:324px;
}

input[type=submit], a.button {
    border-radius:15px;
    background: radial-gradient(circle, rgb(200, 225, 249), rgb(252, 246, 222));
    color:#0e5391;
    font-size:16px;
    text-transform:uppercase;
    border:none;
    padding:10px 20px;
    margin:20px 0;
}
.unique-button {
    border-radius: 15px;
    background: #4dcc43;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    padding: 10px 20px;
    margin: 20px 0;
    cursor: pointer; /* Добавляем указатель при наведении */
    transition: background 0.3s ease; /* Плавное изменение фона */
}

.unique-button:hover {
    background: radial-gradient(circle, rgb(180, 210, 240), rgb(240, 230, 210)); /* Изменение цвета при наведении */
}
a.secondary-button {
    border:3px solid #4dcc43;  /*  */
    padding:10px 20px;  /*  */
    margin:10px 0;  /*  */
}

input[type=submit]:hover, a.button:hover {
    background:radial-gradient(circle, rgb(180, 210, 240), rgb(240, 230, 210)); /*  Стиль для кнопки submit и элементов с классом button при наведении*/
}

ul#course-modules {
    list-style:none;   /*  */
    overflow:auto;    /*  */
}

ul#course-modules textarea {
    width:600px;   /*  */
    height:120px;  /*  */
}

ul#course-modules li {
    padding:20px;  /*  */
    overflow:auto;  /*  */
    cursor:move;  /*  */
    user-select:none;  /*  */
}

ul#course-modules li:nth-child(even) {
    background:#efefef;  /*  */
}

ul#course-modules li:hover {
    background:#ccc;  /*  */
}

#module-contents div {
    padding: 10px 20px;    /* Внутренние отступы: 10px сверху/снизу, 20px слева/справа */
    border: 1px solid #ccc; /* Сплошная серая рамка толщиной 1px */
    background: #fff;       /* Белый фон */
}

#module-contents div.placeholder {
    border: 1px dashed #ccc; /* Пунктирная серая рамка вместо сплошной */
}

#module-contents form {
    margin: 0;    /* Убирает внешние отступы */
    padding: 0;   /* Убирает внутренние отступы */
}

#module-contents input[type=submit] {
    color: #0f5493;        /* синий цвет текста (#3fad37) */
    background: none;      /* Прозрачный фон (удаление стандартного фона кнопки) */
    margin: -20px 0 0;    /* Отрицательный отступ сверху (-20px) и 0 по другим сторонам */
    padding: 0;           /* Убирает все внутренние отступы */
    float: left;          /* Выравнивание кнопки по левому краю */
    text-transform: none; /* Отмена преобразования регистра текста */
}

#module-contents div:hover {
    cursor:move;  /* изменяет вид курсора мыши при наведении на элементы <div> внутри контейнера */
}

.course-info {
    border: 1px solid #ccc;  /* Рамка толщиной 1px серого цвета (#ccc) */
    padding: 0 20px;        /* Внутренние отступы: 0 сверху/снизу, 20px слева/справа */
    margin-bottom: 10px;    /* Внешний отступ снизу 10px */
    width: 500px;          /* Фиксированная ширина блока 400px */
    overflow: auto;       /* Автоматическое добавление прокрутки при переполнении */
    border-radius: 12px;
}

.course-info a {
    margin-right: 10px;  /* Внешний отступ справа 10px для всех ссылок */

}

.course-info: hover{

cursor:move;

}
.helptext {
    color:#ccc;  /*  */
    padding-left:20px;  /*  */
}



/* Блок заметок */
.notes {
    float: right; /*  */
    width: 300px; /*  */
    margin-left: 20px; /*  */
    padding: 10px;  /*  */
    background: #f9f9f9;  /*  */
    border: 1px solid #ddd;  /*  */
    border-radius: 8px;  /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /*  */
}

.notes h2 {
    font-size: 18px;  /*  */
    font-weight: 400;  /*  */
    color: #333;   /*  */
    margin: 0 0 10px 0;  /*  */
    padding-bottom: 10px;   /*  */
    border-bottom: 1px solid #ddd;  /*  */
}

.notes textarea {
    width: 280px;  /*  */
    height: 150px;  /*  */
    padding: 10px;  /*  */
    font-family: 'Roboto', sans-serif;  /*  */
    font-size: 14px;  /*  */
    border: 1px solid #ccc;  /*  */
    border-radius: 4px;  /*  */
    resize: both;  /*  */
}

.notes button {
    display: block;  /*  */
    width: 100%;  /*  */
    padding: 10px;  /*  */
    margin-top: 10px;  /*  */
    background: #4dcc43;  /*  */
    color: #fff;  /*  */
    font-size: 14px;  /*  */
    font-family: 'Roboto', sans-serif;  /*  */
    border: none;  /*  */
    border-radius: 4px;   /*  */
    cursor: pointer;  /*  */
}

.notes button:hover {
    background: #3fad37; /*  */
}

@media (max-width: 768px) {
    .module, .notes {
        width: 100%;  /*  */
        margin-left: 0;  /*  */
        margin-bottom: 20px;  /*  */
    }
}

.add-note-link {
    display: inline-block;  /*  */
    margin: 10px 0;  /*  */
    padding: 10px 20px; /*  */
    background-color: #4dcc43;  /*  */
    color: white;  /*  */
    text-decoration: none;   /*  */
    border-radius: 4px;  /*  */
}

.add-note-link:hover {
    background-color: #3fad37;  /*  */
}
.task-panel {
    background: #f9f9f9;  /*  */
    border: 1px solid #ddd;  /*  */
    border-radius: 8px;  /*  */
    padding: 20px; /*  */
    margin: 20px 0;  /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /*  */
    width: 100%; /* Ширина на всю ширину родительского контейнера */
    /* Или используйте width: 100vw; для ширины на весь экран */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
    height: 30%;
}

.task-list {
    display: flex;  /*  */
    gap: 10px;  /*  */
    list-style: none;  /*  */
    padding: 0;  /*  */
    margin: 0;  /*  */
    overflow-x: auto;  /*  */
}

.task {
    display: flex;  /*  */
    align-items: center;  /*  */
    gap: 10px;  /*  */
    background: #fff;  /*  */
    border: 1px solid #ddd;  /*  */
    border-radius: 4px;  /*  */
    padding: 10px;  /*  */
    min-width: 150px;  /*  */
    cursor: pointer;  /*  */
    transition: background-color 0.3s ease;  /*  */
}

.task:hover {
    background: #f1f1f1;  /*  */
}

.complete-btn, .delete-btn {
    background: none;  /*  */
    border: none;  /*  */
    cursor: pointer;  /*  */
    font-size: 16px;  /*  */
    padding: 5px;  /*  */
    border-radius: 4px;  /*  */
    transition: background-color 0.3s ease;  /*  */
}

.complete-btn {
    color: #4dcc43;  /*  */
}

.delete-btn {  /*  */
    color: #ff4d4d;  /*  */
}

.complete-btn:hover {
    background: rgba(77, 204, 67, 0.1);  /*  */
}

.delete-btn:hover {
    background: rgba(255, 77, 77, 0.1);  /*  */
}

.bookmark-panel {
    margin-top: 5px; /*  */
    padding: 20px; /*  */
    background: radial-gradient(circle, rgb(200, 225, 249), rgb(252, 246, 222)); /*  */
    border-radius: 50px; /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*  */
}
.bookmark-panel:hover {
    background: radial-gradient(circle, rgb(180, 210, 240), rgb(240, 230, 210)); /* Новый градиент */
}
.bookmark-panel h2 {
    text-align: center; /* Выравнивание текста по центру */
}
.bookmark-images {
    display: flex;  /*  */
    gap: 15px;  /*  */
    flex-wrap: wrap;  /*  */
}

.bookmark {
    text-align: center;  /*  */
     margin-top: 0;  /*  */
}

.bookmark-img {
    width: 80px;  /* Уменьшенный размер */
    height: 80px;  /* Уменьшенный размер */
    border-radius: 10px;  /*  */
    border: 2px solid #ccc;  /*  */
    object-fit: cover;  /*  */
    transition: transform 0.2s ease;  /*  */
}

.bookmark-img:hover {
    transform: scale(1.1);  /* Увеличение при наведении */
}

/* Стили для формы добавления в закладки */

.bookmark form {
    margin-top: 10px; /*  */
    padding: 20px; /*  */
    background-color: #efefef; /*  */
    border: 1px solid #ccc; /*  */
    border-radius: 5px; /*  */
    font-family: 'Roboto', sans-serif; /*  */
}

.bookmark form h3 {
    margin: 0 0 20px 0; /*  */
    font-size: 18px;  /*  */
    font-weight: 300;  /*  */
    color: #333;  /*  */
}
.bookmark-panel h2 {
    margin: 0 0 20px 0;  /*  */
    font-size: 24px;  /*  */
    font-weight: 300;  /*  */
    color: #333;  /*  */
}
.bookmark form label {
    display: block;  /*  */
    margin-bottom: 10px;  /*  */
    font-size: 14px;  /*  */
    color: #555;  /*  */
    font-weight: 400;  /*  */
    padding-left: 10px; /* Опционально */
    position: relative;  /*  */
    cursor: pointer;  /*  */
    text-align: left; /* Выравнивание текста по левому краю */
}

.bookmark form input[type="checkbox"] {
    margin-right: 10px;  /*  */
}

.bookmark form input[type="submit"] {
    background-color: #4dcc43;  /*  */
    color: white;  /*  */
    border: none; /*  */
    padding: 10px 20px;  /*  */
    border-radius: 15px;  /*  */
    cursor: pointer;  /*  */
    font-size: 16px;  /*  */
    text-transform: uppercase;  /*  */
    font-weight: 400;  /*  */
    transition: background-color 0.3s ease;  /*  */
}

.bookmark form input[type="submit"]:hover {
    background-color: #3fad37;  /*  */
}

.pagination {
    margin: 20px 0;
    text-align: center;
}

.pagination-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px; /* Отступ между кнопками */
}

.pagination-button,
.pagination-current {
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #4CAF50;
    border-radius: 5px;
    white-space: nowrap; /* Запрещаем перенос текста */
}

.pagination-button {
    color: #4CAF50;
    background-color: white;
}

.pagination-button:hover {
    background-color: #f1f1f1;
    border-color: #45a049;
}

.pagination-current {
    color: white;
    background-color: #4CAF50;
}

.text-panel-info {
            display: flex;
            margin:auto;

            width: clamp(300px, 60%, 800px);/* 2.3/10 ширины экрана (примерно 1/4) */
            min-width: 250px; /* Минимальная ширина */
            padding: 25px;
            gap: 15px;
            background-color: #f9f7f1;
            border-radius: 12px; /* Закругленные углы */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
            border: 1px solid #e0e0e0; /* Граница */
            transition: background-color 0.3s ease; /* Плавное изменение цвета */
            margin: 0 auto; /* Автоматические отступы по бокам */
            box-sizing: border-box;


        }

.text-panel-info:hover {
    background-color: #f0f0f0; /* Цвет при наведении (на полтона темнее) */
}

.text-content-info {
    color: #333333;
    line-height: 1.6;
    text-align: justify; /* Выравнивание по ширине */
}

.contents-info-fiz {/* Стили для элементов с классом "contents" */
    width: 20%;           /* Ширина элемента - 20% от ширины родительского контейнера */
    margin-top: 20px; /* Отступ сверху 20px */
    padding: 10px;        /* Внутренние отступы со всех сторон по 10 пикселей */
    float: left;          /* Выравнивание элемента по левому краю с обтеканием */
    background: #b1a5a5;  /* Фоновый цвет - серо-коричневый (HEX #b1a5a5) */
    border-radius: 30px;   /* Закругление углов радиусом 30 пикселей */
    color: #fff;          /* Цвет текста - белый (HEX #fff) */
    font-family: 'Roboto', sans-serif; /* Шрифт текста - Roboto, если недоступен - любой sans-serif */
}