        .book {
            display: flex;
            align-items: flex-start;
            gap: 15px;

            min-height: 75px;
            text-decoration: none;
            color: inherit;
        }

        /* Обложка */
        .book-cover {
            flex: 0 0 52px;
            width: 52px;
            height: 74px;

            object-fit: cover;

            background: #fff;
            border: 1px solid #ddd;
            border-radius: 2px;

            box-shadow: 1px 1px 2px rgba(0, 0, 0, .08);
        }

        /* Если обложки нет */
        .book-cover.empty {
            background: #fff;
        }

        .book-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: .2rem .75rem;
        }

        .book-title {
    margin: 0 0 .35rem;
    font-size: 1rem;
            line-height: 1.2;
            font-weight: 600;

            color: #111;
			
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;			
			
			
        }

        .book-meta {
            margin: 0;

            font-size: 12px;
            line-height: 1.2;

            color: #222;
        }


/* Панель действий */

.book-actions {
    flex: 0 0 40px;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;

    padding-left: .6rem;
    border-left: 1px solid var(--bs-border-color);
}

/* Все кнопки скрыты */
.book-action {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: .45rem;

    opacity: 0;
    visibility: hidden;

    background: transparent;
    color: var(--bs-secondary-color);

    transition:
        opacity .15s ease,
        visibility .15s ease,
        color .15s ease,
        background-color .15s ease,
        transform .1s ease;
}

.book:hover {
    background-color: #f8f9fa;
    border-color: rgba(13, 110, 253, .25);
}

/* Навели на карточку — показываем все */
.book:hover .book-action {
    opacity: 1;
    visibility: visible;
}

/* Активные кнопки видны всегда */
.book-action.active {
    opacity: 1;
    visibility: visible;
}

.book-action .icon-active {
    display: none;
}

.book-action.active .icon-normal {
    display: none;
}

.book-action.active .icon-active {
    display: inline-block;
}
	
.book-action.active.favorite {
    color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

.book-action.active.read {
    color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
}

.book-action.active.bookmark {
    color: var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}
	
		
        /* На мобильном — одна колонка */
@media (max-width: 991.98px) {
    .books-grid {
 /*       margin: 15px 15px; */
    }

    .books-row {
        row-gap: 15px !important;
    }
	
    .book-action {
        opacity: 1;
        visibility: visible;
    }	
}


.book-view-switcher {
    display: inline-flex;
    align-items: center;
    border-radius: .5rem;
}

.book-view-btn {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: .4rem;

    background: transparent;
    color: var(--bs-secondary);

    cursor: pointer;

    transition: color .15s ease, background-color .15s ease;
}

.book-view-btn:hover {
    color: var(--bs-body-color);
    background: rgba(0, 0, 0, .05);
}

.book-view-btn.active {
    color: var(--bs-primary);
    background: #e3ffe1;
}

.book-view-btn i {
    font-size: 1.1rem;
}


/* ошибки в полях на странице профиля */
.profile-form .is-invalid {
  color:#d63939;
  border-color: #db3b21;
}

.profile-form input.is-invalid + label.is-invalid {
  display: block;
  margin-top: 0.3rem;
}

/* классы для своего шрифта */
.hi-icon {
  fill:currentColor;
  display:inline-block;
  text-decoration:none
}

.scroller-control .hi-icon {
    opacity: 1;
    flex-shrink: 0;
    margin-right: .5rem;
}

.filter-options-collapse i {
  transform:rotate(-90deg)
}

.filter-group.collapsed .filter-options-collapse i {
  transform:rotate(90deg)
}



.select-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.select-menu-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
}




.btn .hi-icon {
	opacity: 1;
	flex-shrink:0;
	margin-right:.3125rem	
}

.hi-lg {
    font-size: 1.5rem;
}

.hi-sm {
    font-size: 1rem;
}

.hi-dot {
	font-size: 6px;
	margin: 3px;
}

.tag-active {
	background-color: #2ae12d47;
}

/* фикс размещения тоста */
.toast {
    z-index: 9999;
    position: fixed;

    background-color: #fff;
    color: #212529;



    border-radius: .5rem;

    box-shadow:
        0 .25rem .75rem rgba(0, 0, 0, .12),
        0 .75rem 2rem rgba(0, 0, 0, .08);

    opacity: 1;
}

.passkey-list {
  background: #f8fafc;
  border: 1px solid rgba(34,36,38,.1);
  border-radius: 5px;
  display: flex;
  position: relative;
  width: 100%;
}

.passkey-list .key {
  color: #ff8c24;
  font-size: 38px !important;
  filter:
    drop-shadow(1px 1px 0 #805b10)
    drop-shadow(-1px -1px 0 #fff0a0)
    drop-shadow(0 0 2px rgba(212, 175, 55, 0.5));
}

.passkey-name {
    cursor: text;
}

.passkey-name-edit {
    opacity: 0;
    margin-left: 6px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.passkey-list:hover .passkey-name-edit {
    opacity: 1;
}

.passkey-name-edit:hover {
    opacity: 1;
}

.passkey-name-input {
    display: block;
    width: 100%;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 24px;
    box-shadow: none;
    border-radius: 0;
}

.passkey-name-input:hover,
.passkey-name-input:focus,
.passkey-name-input:active {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.passkey-edit-icon {
    position: absolute;
    top: 8px;
    right: 58px;
    opacity: 0;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.15s ease;
}



/* фикс размера постеров */
.item-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* фикс размера постеров */
.item-grid-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* фикс размера постеров */
.detail-col { flex:0 0 292px }

/* убрать ненужные отступы в описании книги */
.book-description-block p { margin-bottom: 0; }

/* примечания автора или издателя */
.book-description-block emphasis {
    display: block;
    margin-top: .75rem;
    padding-right: .75rem;
    border-right: 3px solid var(--bs-secondary);
    color: var(--bs-secondary-color);
    font-size: .875rem;
    font-style: italic;
    text-align: right;
}

/* убрать ненужные отступы в описании авторов, жанров, переводчиков */
.agt-description-block p { margin-bottom: 0; }

/* фикс на стрелочки в панели отображения кода блока description */
.ace_custom-widget, .ace_fold-widget {	background-size: auto; }

/* ссылки на избранное, жанры авторы итд */
.fav-link { color: #28a745; }

.item-grid .year {
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.125rem;
  padding: 0 7px;
}



.th-text { background-color:#fff; color:#000; cursor:auto; padding:15px; text-align:left; font-size:14px; position:absolute; z-index: 99; width:460px; box-shadow:0 0 20px 0 rgba(0,0,0,0.2); border-radius:3px;}
.th-text:after {content:""; border:10px solid #fff; border-left-color:transparent; border-bottom-color:transparent; position:absolute; top:30px; right:100%;}
.pop-left .th-text:after {border:10px solid #fff; border-right-color:transparent; border-bottom-color:transparent; left:100%; right:auto;}
.th-text + .th-text {display: none !important;}
.pop-left22 .th-text {left:auto; right:100%;}
.th-text > .fa {font-size:50px; color:#CCC; display:block; text-align:center;}
.th-text .finfo {background-color:#f2f2f2; padding:15px; margin:15px -15px -15px -15px;}

.th-text .finfo li {margin-bottom:0 !important;}
.th-text .fdesc {line-height: 15px; font-size: 14px; margin: 10px 0;}
.th-text .sect-title h1 {
	font-size:14px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 20px;
}

.th-text .fb2-down .fa {display: none;}
.th-text .fb2-down {position: absolute; right: 0; top: 0; display: inline-block; height: 26px; line-height: 26px; padding: 0 15px; width: auto;}

.th-youtube {width: 33.33%;}
.th-youtube .th-desc {height: 80px;}

.fbtn .fa {font-size:30px; height:50px; line-height:50px; width:50px; text-align:center; background-color:rgba(0,0,0,0.2); position:absolute; left:0; top:0;}
.fbtn {width:100%; cursor:pointer; height:50px; line-height:50px; font-weight:bold; margin-top:0px; position:relative; padding-left:50px; text-align: center;}
.fb2-down {background-color:#db4437; color:#fff;}
.fbtn:hover {box-shadow:0 0 20px 0 rgba(0,0,0,0.2);}

.fb2-down {position: absolute; right: 0; top: 0; display: inline-block; height: 26px; line-height: 26px; padding: 0 15px; width: auto;}














.this-book {
	font-weight: 500;
	color: green;
}

.tag:hover .tag-count {
    visibility: hidden;
}

.tag-count {
  background:#1abb9c;
  border-bottom-right-radius:5px;
  border-top-right-radius:5px;
  color:#fff;
  min-width:32px;
  padding:0 .5rem;
  text-align:right;
  white-space: nowrap;
}


.hb-filter-input {
    width: 80px;
    transition: width 0.25s ease, box-shadow 0.2s ease;
}

.hb-filter-input:focus {
    width: 180px;
    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25);
}

.folders-hide-desc:hover {
	cursor:pointer;
}

.folders-create:hover {
	cursor:pointer;
}

.fb2-reload:hover {
	cursor:pointer;
}

.folders-edit:hover {
	cursor:pointer;
}

.folders-hide-desc.hidden {
	background:beige;
}

.hb-folder-description {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
} 

.hb-folder-description.hidden {
  opacity: 0;
  transform: translateY(-10px);
}


.offcanvas-backdrop {
  background-color: #182839;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1045;
}

.offcanvas-backdrop.fade {
  opacity:0
}
.offcanvas-backdrop.show{opacity:.5}

.offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
    visibility: visible;
}

.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}
.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}
.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}
.offcanvas-backdrop.fade{opacity:0}
.offcanvas-backdrop.show{opacity:.5}


.form-check-input.fav[type=checkbox] {
  display: none;
  float: right;
  background-color: #1abb9c;
  background-image: inherit;
  mask-image: url('data:image/svg+xml;charset=utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z"/></svg>');  
}

.form-check-input.fav:checked[type=checkbox] {
  mask-image: url('data:image/svg+xml;charset=utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z"/></svg>');
  display: block;
}

.filter-item:hover .form-check-input.fav {
  display: block;
  cursor:pointer;
}

.filter-item:hover .form-check-input.fav:hover {
  display: block;
  cursor:pointer;
}










.filter-fieldset {
     overflow-y: auto;
     overflow-x: hidden;
     position: static;
}

.filter-body {
     position: relative;
}

.filter-item label.form-check-label {
    display: block;
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
    margin-right: 20px;
}

.filter-item label.form-check-label:hover {
    background: #fff;
    z-index: 10;
    padding-right: 10px;
}




/*


.filter-fieldset {
    overflow-y: visible;
}

label.form-check-label {
    display: block;
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
    margin-right: 20px;
}

label.form-check-label:hover {
    display: inline-block;
    background: #fff;
    z-index: 10;
    position: relative;
    padding-right: 5px;
}

*/

.filter-group .filter-options-settings {
	margin-right: 3px;
	padding-right: 0.5rem;
	padding-left: 0.5rem;  
	color: #656565;
	flex-shrink: 0;
	opacity: .7;
	text-align: center; 
}

.filter-group .collapsed {
	display: none;
}

.filter-group .filter-options-settings:hover {
	color:inherit;
	opacity:1
}

.filter-group.collapsed .filter-options-settings {
	display: none;
}

.filter-group-settings {
	background-color: #0000000a;
	padding-left: 10px;
	border-radius: 5px;
	margin-bottom: 4px;
}

.want {
  background-color:transparent;
  border:1px solid transparent;
  border-radius:5px;
  color:#000;
  cursor:pointer;
  display:inline-block;
  font-size:.875rem;
  font-weight:400;
  line-height:1.5;
  padding:.40625rem .75rem;
  text-align:center;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -webkit-user-select:none;
  user-select:none;
  vertical-align:middle
}
.booklist-block {
  display:inline-block
}
.booklist-block .want {
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 640 640' fill='%23656565'%3E%3Cpath d='M480 576L192 576C139 576 96 533 96 480L96 160C96 107 139 64 192 64L496 64C522.5 64 544 85.5 544 112L544 400C544 420.9 530.6 438.7 512 445.3L512 512C529.7 512 544 526.3 544 544C544 561.7 529.7 576 512 576L480 576zM192 448C174.3 448 160 462.3 160 480C160 497.7 174.3 512 192 512L448 512L448 448L192 448zM224 216C224 229.3 234.7 240 248 240L424 240C437.3 240 448 229.3 448 216C448 202.7 437.3 192 424 192L248 192C234.7 192 224 202.7 224 216zM248 288C234.7 288 224 298.7 224 312C224 325.3 234.7 336 248 336L424 336C437.3 336 448 325.3 448 312C448 298.7 437.3 288 424 288L248 288z'/%3E%3C/svg%3E") no-repeat;
  border:0 solid transparent;
  border-radius:0;
  display:inline-block;
  height:16px;
  margin:0;
  padding:0;
  width:16px
}
.booklist-block.active .want {
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 640 640' fill='%23ff6300'%3E%3Cpath d='M480 576L192 576C139 576 96 533 96 480L96 160C96 107 139 64 192 64L496 64C522.5 64 544 85.5 544 112L544 400C544 420.9 530.6 438.7 512 445.3L512 512C529.7 512 544 526.3 544 544C544 561.7 529.7 576 512 576L480 576zM192 448C174.3 448 160 462.3 160 480C160 497.7 174.3 512 192 512L448 512L448 448L192 448zM224 216C224 229.3 234.7 240 248 240L424 240C437.3 240 448 229.3 448 216C448 202.7 437.3 192 424 192L248 192C234.7 192 224 202.7 224 216zM248 288C234.7 288 224 298.7 224 312C224 325.3 234.7 336 248 336L424 336C437.3 336 448 325.3 448 312C448 298.7 437.3 288 424 288L248 288z'/%3E%3C/svg%3E") no-repeat;
  opacity:.6
}
.booklist-block.active .want:hover {
  opacity:1
}

.detail-chapter-actions .add-to-fav {
	cursor:pointer;
}
.detail-chapter-actions .add-to-fav.active {
	color:#ff6300 !important;
	opacity:.6;	
}
.detail-chapter-actions .add-to-fav.active:hover {
	opacity:1
}

.detail-chapter-actions .add-to-readed{
	cursor:pointer;	
}
.detail-chapter-actions .add-to-readed.active {
	color:#ff6300 !important;
	opacity:.6;	
}
.detail-chapter-actions .add-to-readed.active:hover {
	opacity:1
}

.detail-chapter-actions .download-book:hover {
	color:green !important;	
}


/* отображение избранного или прочитанного */
.detail-chapters .detail-chapter.is-favorited {
	background-color: #f3fff0;
}
.detail-chapters .detail-chapter.is-readed {
	border-color: #c0ad0a;
}

/* шестерня в настройках сайта */
.side-nav-head i {
font-size: 18px !important;
  height: 36px !important;
  line-height: 36px !important;
  width: 36px !important;
}

/* Список папок на странице книги*/
.detail-folders {
  color: inherit;
}

@media(min-width:992px) {
  .detail-chapter-date {
    min-width:75px;
    text-align:right;
    visibility:visible
  }
  .detail-folders:hover .detail-chapter-date {
    visibility:hidden
  }
  .detail-chapter-actions {
    display:none;
    position:absolute;
    right:0
  }
  .detail-folders:hover .detail-chapter-actions {
    display:block
  }
}

.hb-books-folder {
	background-color: #eaeef369;
	border-radius: 5px;
	transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;	
}

.hb-books-folder.active {
	background-color: #1abb9c33;
}

.hb-books-folder.active:hover {
	background-color: #1abb9c5e;
}

.hb-books-folder:hover {
	background-color: #1abb9c33;
}

.hb-books-folder .folder-private-switch.active {
	color: red;	
}
.hb-books-folder .folder-private-switch {
	cursor:pointer;
	color: green;
}
.hb-books-folder .folder-private-switch:hover {
	opacity: 0.5;
}


.hb-books-folder .folder-opds-switch.disabled {
	color: red;	
}
.hb-books-folder .folder-opds-switch {
	cursor:pointer;
	color: green;
}
.hb-books-folder .folder-opds-switch:hover {
	opacity: 0.5;
}




.folders-block {
	display:inline-block
}

.folders-block .icon {
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 640 640' fill='%23656565'%3E%3Cpath d='M64 400l384 0c8.8 0 16-7.2 16-16l0-240c0-8.8-7.2-16-16-16l-149.3 0c-17.3 0-34.2-5.6-48-16L212.3 83.2c-2.8-2.1-6.1-3.2-9.6-3.2L64 80c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16zm384 48L64 448c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l138.7 0c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4L448 80c35.3 0 64 28.7 64 64l0 240c0 35.3-28.7 64-64 64z'/%3E%3C/svg%3E") no-repeat;
	border:0 solid transparent;
	border-radius:0;
	display:inline-block;
	height:16px;
	margin:0;
	padding:0;
	width:16px;
	background-color:transparent;
	color:#000;
	cursor:pointer;
	font-size:.875rem;
	font-weight:400;
	line-height:1.5;
	transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-user-select:none;
	user-select:none;
	vertical-align:middle  
}
.folders-block .icon:hover {
	opacity:1;	
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 448 512' fill='%2300D190'%3E%3Cpath d='M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z'/%3E%3C/svg%3E") no-repeat;
}
.folders-block.in-folder .icon {	
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 640 640' fill='%23ff6300'%3E%3Cpath d='M64 400l384 0c8.8 0 16-7.2 16-16l0-240c0-8.8-7.2-16-16-16l-149.3 0c-17.3 0-34.2-5.6-48-16L212.3 83.2c-2.8-2.1-6.1-3.2-9.6-3.2L64 80c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16zm384 48L64 448c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l138.7 0c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4L448 80c35.3 0 64 28.7 64 64l0 240c0 35.3-28.7 64-64 64z'/%3E%3C/svg%3E") no-repeat;
	opacity:.6
}
.folders-block.in-folder .icon:hover {
	opacity:1;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 640 640' fill='%23ff0000'%3E%3Cpath d='M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E") no-repeat;
}
/*
 /Список папок на странице книги
*/




/*
 кусок отвечает за самописные "таблицы" на div-ах
*/

  .haff-table, .haff-table * { box-sizing: border-box; }
  .haff-table { background: #fff; overflow: hidden; }

  /* Свой флекс-ряд вместо Bootstrap .row — у .row дочерние элементы получают
     жёсткий width:100%, который ломает "авто"-ширину средних колонок на мобильных */
  .haff-table .haff-table-header,
  .haff-table .haff-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .35rem 0;
    line-height: 1.3;
  }
  .haff-table .haff-table-header {
    font-weight: 600;
    font-size: .95rem;
    border-bottom: 2px solid #000;
  }
  .haff-table .haff-table-row {
    border-bottom: 1px solid #e9ecef;
    font-size: .95rem;
  }
  .haff-table .haff-table-row:last-child { border-bottom: none; }
  .haff-table .haff-table-row:hover { background: #f8f9fa; }
  .haff-table .haff-table-row a { text-decoration: none; }
  .haff-table .haff-table-row a:hover { text-decoration: underline; }

  /* Ширина колонки задаётся через CSS-переменную --basis,
     которую JS считает как 100% / кол-во колонок в шапке.
     Отступ между колонками — через padding, а не gap, чтобы не вылезать за 100% */
  .haff-table .cell {
    flex: 0 0 var(--basis, auto);
    width: var(--basis, auto);
    max-width: var(--basis, auto);
    padding: 0 .5rem;
  }
  /* Обнуляем боковой отступ у крайних колонок, чтобы у таблицы
     не было отступов слева/справа (удобно класть её в panel-body) */
  .haff-table .cell:first-child { padding-left: 0; }
  .haff-table .cell:last-child { padding-right: 0; }

  /* Сортировка по клику на шапку */
  .haff-table .haff-table-header .cell.sortable {
    cursor: pointer;
    user-select: none;
  }
  .haff-table .haff-table-header .cell.sortable::after {
    content: '\2195'; /* ↕ */
    margin-left: .35em;
    font-size: .8em;
    opacity: .35;
  }
  .haff-table .haff-table-header .cell.sortable.sort-asc::after {
    content: '\2191'; /* ↑ */
    opacity: 1;
  }
  .haff-table .haff-table-header .cell.sortable.sort-desc::after {
    content: '\2193'; /* ↓ */
    opacity: 1;
  }

  /* На мобильных: первая колонка — на всю ширину сверху;
     средние колонки (Книг, Просмотры...) — рядом друг с другом в одну строку;
     последняя колонка (Обновлена) — отдельной строкой на всю ширину */
  @media (max-width: 767.98px) {
    .haff-table .haff-table-header { display: none; }

    .haff-table .cell-main {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      margin-bottom: .15rem;
      padding-left: 0;
      padding-right: 0;
    }
    .haff-table .cell-mid {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      padding: 0 1.25rem 0 0;
      font-size: .85rem;
      color: #495057;
    }
    .haff-table .cell-last {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      margin-top: .15rem;
      padding-left: 0;
      padding-right: 0;
      font-size: .85rem;
      color: #495057;
    }
    .haff-table .cell-mid::before,
    .haff-table .cell-last::before {
      content: attr(data-label) ": ";
      color: #868e96;
    }
  }
/*
 /кусок отвечает за самописные "таблицы" на div-ах
*/



/* 
тристейты в фильтре
*/
/* Кастомные состояния чекбоксов. Подключать ПОСЛЕ light.css */

/* Отметка checked-чекбокса: плюс вместо галочки */
.filter-content .form-check-input:checked[type=checkbox] {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8 M10 6v8'/%3E%3C/svg%3E")
}

/* data-state="2": красный вид */
.filter-content .form-check-input[data-state="2"] ~ .form-check-label {
  color:#db3b21
}
.filter-content .form-check-input[data-state="2"]:focus {
  box-shadow:0 0 0 .25rem rgba(218,54,51,.25);
  outline:0
}
.filter-content .form-check-input[type=checkbox][data-state="2"]:checked {
  border-color:#db3b21;
  background-color:#db3b21
}

/* data-state="2": вид indeterminate (зелёный, белая чёрточка) */
.filter-content .form-check-input[type=checkbox][data-state="2"] {
  background-color:#1abb9c;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E");
  border-color:#1abb9c
}

/*
 /тристейты в фильтре
*/