/* Подключение шрифтов Google */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600&display=swap');

/* Основные стили */
body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px; /* Настройте размер под ваш дизайн */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    color: #31271e;
    font-weight: 400; /* Используйте нужную толщину: 400, 500, 700 */
    line-height: 130%;	
}

h2 {
    margin: 25px 0 10px 0;	
}

p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.search {
    width: 30px !important; 
    position: absolute; 
    margin: 6px 0 0 -35px; 
    opacity: 0.4;
}

.portrait {
    float: left; 
    width: 300px; 
    margin: 0 20px 20px 0;
}

/* Таблицы */
.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    background-color: #2a475e;
/*    border: 1px solid #1b2838;*/
    border-radius: 5px;
/*    overflow: hidden;*/
}

.table th, .table td {
    text-align: left;
/*    vertical-align: top; */
}

.table td {
    padding: 15px 15px;
}

.table th {
    background-color: #1b2838;
    color: #c7d5e0;
    font-weight: 600;
    padding: 5px 15px;
}

.table tbody tr:nth-child(odd) {
    background-color: #2f5878;
}

.table tbody tr:hover {
    background-color: #356b95;
/*    cursor: pointer;*/
}

.table-responsive {
    overflow-x: auto; /* Разрешить горизонтальную прокрутку */
    -webkit-overflow-scrolling: touch; /* Для плавной прокрутки на устройствах с iOS */
}
/* Стили для скроллера внутри .table-responsive */
.table-responsive {
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
}

.table-responsive::-webkit-scrollbar {
    height: 8px; /* Высота горизонтального скроллера */
    width: 8px; /* Ширина вертикального скроллера (если понадобится) */
}

.table-responsive::-webkit-scrollbar-track {
    background: #2a475e; /* Цвет фона скроллера */
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #1b2838; /* Цвет бегунка */
    border-radius: 10px;
    border: 2px solid #2a475e; /* Граница бегунка */
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: chocolate; /* Цвет бегунка при наведении */
}

/* Для Firefox */
.table-responsive {
    scrollbar-width: thin; /* Устанавливаем узкий скроллер */
    scrollbar-color: #1b2838 #2a475e; /* Цвет бегунка и фона для Firefox */
}


/* Списки */
.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #1b2838;
    border-radius: 5px;
    overflow: hidden;
    background-color: #2a475e;
}

.list-group-item {
    padding: 10px 15px;
    border-bottom: 1px solid #1b2838;
    color: #c7d5e0;
    transition: background-color 0.3s;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item:hover {
    background-color: #3c596e;
    cursor: pointer;
}

.bullet {
    color: #7e7a6d;
    margin: 0 10px;
}

.no-wrap {
    white-space: nowrap;
}

.main {
    text-align: center;
    margin-top: 50px;
}

.main p {
    font-size: 18px;	
}

/* Кнопки */
.btn {
    display: inline-block;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
/*
    background-color: #1b2838;
    border: 1px solid #d2691e;
    padding: 10px 15px;
*/
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.btn:hover {
    background-color: #2d3a4c;
    color: #fff1c8;
}

/* Карточки */
.card {
    border: 1px solid #1b2838;
    border-radius: 5px;
    background-color: #2a475e;
    padding: 15px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-text {
    margin-bottom: 1rem;
    color: #c7d5e0;
}

/* Формы */
.form-control {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #1b2838;
    border-radius: 5px;
    background-color: #2a475e;
    color: #c7d5e0;
}

.form-control:focus {
    border-color: chocolate;
    outline: none;
    box-shadow: 0 0 5px rgba(210, 105, 30, 0.5);
}

.form-group {
    margin-bottom: 1rem;
}

/* Уведомления */
.alert {
    padding: 15px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #ffffff;
}

.alert-success {
    background-color: #2a475e;
    border-color: #1b2838;
}

.alert-danger {
    background-color: #8b0000;
    border-color: #650000;
}





/* Фон затемнения */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1001;
}

.modal-open {
    overflow: hidden; /* Блокируем прокрутку */
}

/* Модальное окно */
.modal {
    position: fixed;
    max-height: 90%; /* Ограничиваем высоту окна */
    overflow-y: auto; /* Включаем вертикальную прокрутку */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #a8a494;
    padding: 20px;
    border-radius: 8px;
    display: none;
    z-index: 1002;
    animation: fadeIn 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

/* Стиль заголовка */
.modal h2 {
    text-align: center;
    margin: 0 0 20px 0;
/*
    font-size: 1.5rem;
    color: #ffffff;
*/
}

/* Общие стили формы */
.modal form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Меньший отступ между элементами */
}

/* Метки полей */
.modal form label {
    margin-bottom: -5px; /* Минимальный отступ от поля */
}

/* Поля ввода */
.modal form input[type="text"],
.modal form input[type="password"],
.modal form input[type="email"] {
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #7e7a6d;
    border-radius: 5px;
    background: #959284;
    color: #000;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

/* Поля ввода при фокусе */
.modal form input[type="text"]:focus,
.modal form input[type="email"]:focus,
.modal form input[type="password"]:focus {
    border-color: #00dbef;
}

/* Кнопка отправки */
.modal form button[type="submit"] {
    margin-top: 20px;    
    padding: 12px 20px; /* Компактная кнопка */
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: center; /* Центрирование кнопки */
}

/* Анимация тряски */
@keyframes shake {
    0%, 100% { transform: translate(-50%, -50%); }
    20%, 60% { transform: translate(calc(-50% - 10px), -50%); }
    40%, 80% { transform: translate(calc(-50% + 10px), -50%); }
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Стили для контейнера генерации пароля */
.password-info {
    display: flex;
    justify-content: flex-end;
    margin: -5px 0 -10px 0;
}

.password-info button {
    background: #1b2838;
    color: #ffffff;
    padding: 8px 15px;
    font-size: 0.9rem;
    border: 1px solid #415a6b;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.password-info button:hover {
    background: chocolate;
    border-color: chocolate;
}

.shake {
    animation: shake 0.3s ease;  /* Удлиняем продолжительность до 1 секунды */
}

.error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 5px;
}

#langModal {
    padding: 50px 0 45px 0;
}

.lang img {
    position: absolute;
    margin-left: 120px;
}

.lang div {
    margin-left: 170px;
    display: inline-block;
    margin-bottom: 10px;
}

.favorites {
    max-width: 500px;
    border: 8px solid #959284;
    text-align: left;
    padding: 15px 15px;
}

.favorites .act {
    background: #959284;	
}

.favorites .pas .field {
    padding: 12px 10px;
    width: 85%;	
}

.favorites .act .field {
    padding: 12px 10px;
    width: 85%;	
}


.favShare {
    display: inline-block;
    float: right;
    margin: -41px 8px 0 10px;
}

/* Контейнеры для сообщений об ошибках */
.msg_error {
    color: #ff644a;
    font-size: 0.75rem;
    margin: -6px 13px 0px 13px;
    padding: 3px 8px;
    border: 1px dashed #ff644a;
    display: none;
    line-height: 120%;
    display: none;
}

/* Стиль для генератора паролей */
/*
.password-info {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.password-info button {
    background: #1b2838;
    color: #ffffff;
    padding: 8px 15px;
    font-size: 0.9rem;
    border: 1px solid #415a6b;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.password-info button:hover {
    background: chocolate;
    border-color: chocolate;
}

/* Стиль для всех блоков с прокруткой */
.scrollable {
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #7e7a6d #959284;
}

.scrollable::-webkit-scrollbar {
   width: 8px;
}

.scrollable::-webkit-scrollbar-track {
   background: #2a475e;
   border-radius: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
   background-color: #1b2838;
   border-radius: 10px;
   border: 2px solid #2a475e;
}

.scrollable::-webkit-scrollbar-thumb:hover {
   background-color: chocolate;
}

.striped-background {
    background: repeating-linear-gradient(
        135deg,         /* Угол наклона полос */
        #a8a494,       /* Цвет полосы */
        #a8a494 12px,   /* Ширина цветной полосы */
        transparent 12px, /* Начало прозрачной полосы */
        transparent 24px /* Конец прозрачной полосы */
    );
}

.fs-1 {
    font-size: 18px; /* Настройте размер под ваш дизайн */
}
.fs--1 {
    font-size: 14px; /* Настройте размер под ваш дизайн */
}

.avatar-middle {
    width: 50px;
    border-radius: 30px;
    border: 4px solid #ffffff;
}

.stream h3 {
    margin: 5px 0 0 0;	
}

.stream img[data-resizable="true"] {
/*    height: 50%;	*/
    box-sizing: border-box; /* Включает padding и border в общую ширину и высоту элемента */
    border: 4px solid #979385; /* Начальная прозрачная рамка */
    transition: border-color 0.5s ease; /* Плавный переход цвета рамки */
}

.icon {
    display: inline-block;
    vertical-align: sub;
}

.icon img {
    height: 18px;
    margin: 0 3px;
    cursor: pointer;
}

.icon-sm {
    display: inline-block;
    margin: 3px 0 0 10px;
    position: absolute;
}

.icon-sm img {
    height: 18px;
    margin: 0 3px;
    cursor: pointer;
}

.gallery h3 {
    margin: 5px 0 0 0;	
}

.gallery img {
    width: 100%;	
    box-sizing: border-box; /* Включает padding и border в общую ширину и высоту элемента */
    border: 4px solid transparent; /* Начальная прозрачная рамка */
    transition: border-color 0.5s ease; /* Плавный переход цвета рамки */
}

.gallery label {
    display: block;
    margin-top: 10px;
}

.gallery input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea
{
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #7e7a6d;
    border-radius: 5px;
    background: #959284;
    color: #000;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.gallery textarea
{
    height: 200px;	
}

.gallery input[type="button"], button 
{
    padding: 12px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    background: #000000;
    color: #fff1c8;
    outline: none;
    cursor: pointer;
}

.gallery input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus 
{
    background: #FFF;
    color: #000;
}
.gallery .secondary {
    color: #888;	
}
#loading {
    text-align: center;
    display: none;
}

#loading img {
    width: 100px;	
    margin: -20px 0 -50px 0;
}

#uploaded-images div {
    width: 200px; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
    background-size: cover; 
    background-color: #959284;
    background-position: center center;
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 10px;	
}

#other-images div {
    width: 150px; 
    height: 150px; 
    position: relative; 
    overflow: hidden; 
    background-size: cover; 
    background-color: #e5ddc2;
    background-position: center center;
    margin: 0 20px 20px 38px;
    border: 2px solid #e5ddc2;
}

#bottom-images {
    text-align: center; 
}

#bottom-images div {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-color: #e5ddc2;
    background-position: center center;
    margin: 0 10px 20px 10px;
    border: 2px solid #e5ddc2;
    display: inline-block;
}

.secondary {
    opacity: 0.4;
}

.techinfo {
    background:	#FFFF00;
    padding: 0px 10px;
    margin: 0px 10px;
}

.avatar {
    width: 100px; 
    height: 100px; 
    float: left; 
    overflow: hidden; 
    background-size: cover; 
    background-color: #959284;
    background-position: center center;
    border-radius: 100px;	
}
/*
#uploaded-images div2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#uploaded-images div {
    height: 200px;	
    width: 200px;
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 10px;	
}
*/

#register-success, #register-fail {
    display: none;
}

.is-invalid {
    border: 1px solid #990000 !important;
    color: #990000 !important;
}

.invalid-feedback {
    display: none;	
    background: #990000;
    line-height: 120%;
    color: #FFF;
    margin-top: 4px;
    padding: 10px 15px;
}

.author {
    font-style: italic;
    text-align: right;
}

.link {
    color: #000;	
}

.link:visited {
    color: #000;	
}

.link:hover {
    color: #193356;	
}

#drop-area {
    border: 2px dashed #ccc;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    margin: 20px auto;
}
#drop-area.hover {
    border-color: #000;
}
#file-input {
    display: none;
}
#file-list {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .modal {
        width: 90%;
    }
    .nav-btn-unique {top:80px;}
    .favShare {
    margin: -44px 8px 0 10px;
    }
    .favorites .act .field, .favorites .pas .field {
    width: 75%;	
    }
    .portrait {
    width: 120px; 
    margin-bottom: 10px;
    }
    .lang img {
    margin-left: 55px;
    }
    .lang div {
    margin-left: 100px;
    line-height: 100%;
    font-size: 18px;
    display: inline-block;
    margin-bottom: 15px;
    }
    .lang a,.lang a:visited {
    color:#2d3a4c;
    }
}

@media (max-width: 1200px) {
    .point {
        display: none;
    }
    #menu ul li {
        margin: 0 3px;
    }	
}