:root {
  --color-mine: #991F20;
  --color-headline: #333333;
  --color-text: #4E4E4E;
  --font-headline: "Playfair Display", serif;
  --font-text: "Raleway", sans-serif;
}

body{
margin:0;
padding:0;
font-family:var(--font-text);
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.06em;
text-align: left;
color: var(--color-text);
background-color:#ffffff;
position:relative;
}

html {
scroll-behavior: smooth;
}
div{
box-sizing: border-box;
}

.header{
display: flex;
height: 120px;
}
.header-mobile{
display: none;
}
.header-flex{
display: flex;
align-items: center;
}
@media screen and (max-width: 991px){
.header{
display: none;
}
.header-mobile{
display: flex;
height: 90px;
}
}
.logo-img{
float:right
}
@media screen and (max-width: 991px){
.logo-img{
display: none;
}
.navbar-brand{
display: none;
}
}

.h1{
font-family:var(--font-headline);
color:var(--color-headline);
font-size: 27px;
line-height: 36px;
font-weight: 700;
}
.headline-big{
font-family:var(--font-headline);
color:var(--color-headline);
font-size: 60px;
}
.text{
font-family:var(--font-text);
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.06em;
text-align: left;
color: var(--color-text);
}
.menu-col{
display: flex;
flex-direction: column;
justify-content: space-between;
position:relative;
background-color: var(--color-mine);
border-radius: 6px;
color:#ffffff;
min-height: calc(100vh - 120px);
padding: 15px;
}
@media screen and (max-width: 991px){
.menu-col{
background-color:#ffffff;
color: var(--color-headline);
}
}
.add-chapter{
font-family:var(--font-headline);
background-color: var(--color-mine);
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px;
border: solid 1px #ffffff;
padding: 0 14px;
height: 36px;
color:#ffffff;
text-decoration: none;
margin-bottom: 6px;
}
@media screen and (max-width: 991px){
.add-chapter{
background-color: #ffffff;
color: var(--color-headline);
border:solid 1px var(--color-headline);
}
}
.accordion-item-chapter .add-chapter{
margin-bottom: 0;
}
.accordion-chapter{
margin-bottom: 13px;
}
.chapter-item{
font-family:var(--font-headline);
background-color: var(--color-mine);
height:37px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 17px;
font-weight: 600;
line-height: 22.66px;
text-align: left;
color:#ffffff;
border-radius: 6px;
border: solid 1px #ffffff;
padding: 0 14px;
margin-top: 6px;
}
.chapter-item-white{
background-color: #ffffff;
color:#333333;
}
@media screen and (max-width: 991px){
.chapter-item{
border: solid 1px var(--color-headline);
}
}
.padd-r-15{
padding-right: 15px;
display: inline-block;
}
.chapter-view{
display: block;
width:12px;
height: 10px;
background: url(../images/eye-open.svg) no-repeat center;
margin-right: 6px;
border:none;
outline: none;
box-shadow: none;
}
.chapter-item-white .chapter-view{
background: url(../images/eye-close.svg) no-repeat center;
}
.chapter-menu{
display: block;
width:12px;
height: 10px;
background: url(../images/chapter-menu-white.svg) no-repeat center;
}
.chapter-item-white .chapter-menu{
    background: url(../images/chapter-menu-black.svg) no-repeat center;
}

/* Active chapter styles */
.chapter-item.active-chapter {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: solid 1px #333333 !important;
}

.chapter-item.active-chapter .chapter-view {
    background: url(../images/eye-close.svg) no-repeat center;
}

.chapter-item.active-chapter .chapter-menu {
    background: url(../images/chapter-menu-black.svg) no-repeat center;
}
.flex-c-sb{
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-start-sb{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.menu-button{
font-family:var(--font-headline);
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
color:#333333;
height:39px;
border:none;
box-shadow: none;
border-radius: 6px;
width: 100%;
}
@media screen and (max-width: 991px){
.menu-button{
display: none;
}
}
.button-backed{
width:32px;
height:30px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
border:none;
box-shadow: none;
background: url(../images/backed.svg) no-repeat center  #ffffff;
}
@media screen and (max-width: 991px){
.button-backed{
background: url(../images/backed-white.svg) no-repeat center var(--color-mine);
background-size: 20px;
}
.bottom-col{
padding-bottom: 80px;
}
}
.button-backed-red{
width:49px;
height:47px;
border-radius: 6px;
background-color: var(--color-mine);
display: flex;
align-items: center;
justify-content: center;
border:none;
box-shadow: none;
flex-shrink: 0;
}
.word-count{
font-family:var(--font-headline);
background-color: var(--color-mine);
color:#ffffff;
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-align: left;
border-radius: 6px;
border: solid 1px #ffffff;
display: flex;
align-items: center;
justify-content: center;
height:30px;
width:calc(100% - 46px);
}
@media screen and (max-width: 991px){
.word-count{
border: solid 1px var(--color-headline);
color:var(--color-headline);
background-color: #ffffff;
}
}
.flex-jc-end{
display: flex;
justify-content: end;
}
.menu-button-xs{
display: block;
position: relative;
width: 57px;
height: 57px;
background: url(../images/menu-button-xs.svg) no-repeat center #ffffff;
border: none;
outline: none;
padding: 0;
margin-right: 10px;
border-radius: 50%;
}
.menu-button-back{
display: block;
position: relative;
width: 57px;
height: 57px;
background: url(../images/menu-button-back.svg) no-repeat center #ffffff;
border: none;
outline: none;
padding: 0;
border-radius: 50%;
}
.menu-button-more{
display: block;
position: relative;
width: 57px;
height: 57px;
background: url(../images/menu-button-more.svg) no-repeat center #ffffff;
border: none;
outline: none;
padding: 0;
border-radius: 50%;
}



.mine-menu{
display: flex;
flex-direction: column;
}
.mine-menu-link{
display: flex;
align-items: center;
font-family:var(--font-headline);
color: var(--color-headline);
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-align: left;
width: 100%;
padding:0 0 0 40px;
margin-bottom: 7px;
height:48px;
text-decoration: none;
border-radius: 6px;
}
.mine-menu-link.active{
color:#ffffff;
}
.navbar{
padding: 0;
}
.nav-item{
list-style: none;
padding: 0;
margin: 0;
}
.menu-home{
background: url(../images/menu-home.svg) no-repeat 12px center;
}
.menu-library.active{
background: url(../images/menu-library-sel.svg) no-repeat 13px center var(--color-mine);
}
.menu-notification{
background: url(../images/menu-notification.svg) no-repeat 10px center;
}
.menu-profile{
background: url(../images/menu-profile.svg) no-repeat 12px center;
}
@media screen and (max-width: 991px){
.mine-menu-block{
position:fixed;
bottom: 15px;
left: 0;
right:0;
height:70px;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0px 0px 8px 0px #00000014;
border-radius: 10px;
background-color: #ffffff;
z-index: 100;
max-width: 696px;
margin: auto;
}
}
@media screen and (max-width: 768px){
.mine-menu-block{
max-width: 516px;
margin: auto;
}
}
@media screen and (max-width: 576px){
.mine-menu-block{
max-width: 540px;
left: 10px;
right:10px;
}
}
@media screen and (max-width: 991px){
.mine-menu-link{
padding: 0;
margin: 0;
}
.mine-menu-block span{
display: none;
}
.menu-home, .menu-home.active{
background: url(../images/mine-home.svg) no-repeat  center #ffffff;
}
.menu-library, .menu-library.active.active{
background: url(../images/mine-library.svg) no-repeat center #ffffff;
}
.menu-notification, .menu-notification.active{
background: url(../images/mine-notifications.svg) no-repeat center #ffffff;
}
.menu-profile, .menu-profile.active{
background: url(../images/mine-profil.svg) no-repeat center #ffffff;
}
}

.reading-now-block{
position:relative;
width:100%;
padding:8px;
border-radius: 15px;
background-color:#F8F7F3;
margin-top: 20px;
}
@media screen and (max-width: 991px){
.reading-now-block{
display: none;
}
}

#navbarInMenu.collapse:not(.show){
display: block;
}
@media screen and (max-width: 991px){
#navbarInMenu.collapse:not(.show){
display: none ;
}
}
.menu-xs-bg{
display: block;
position: relative;
}
@media screen and (max-width: 991px){
.menu-xs-bg{
position: fixed;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, .5);
}
}
.reading-now{
display: flex;
align-items: center;
font-family:var(--font-headline);
color:var(--color-headline);
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-align: left;
width: 100%;
padding:0 0 0 27px;
background: url(../images/menu-reading-now.svg) left center no-repeat;
margin:40px 0 0 15px;
}
@media screen and (max-width: 991px){
.reading-now{
display: none;
}
}
.cover-read-now{
background-color: #C4C4C4;
border-radius: 24px;
margin:0 0 20px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 140px;
}
.b-red{
background-color: var(--color-mine);
color:#ffffff;
border: none;
}
.b-white{
background-color: #ffffff;;
color:var(--color-headline);
border:solid 1px var(--color-headline);
}
button.button-sm-2, a.button-sm-2{
border-radius:6px;
font-size: 12px;
font-weight: 700;
font-family: var(--font-headline);
border-radius: 6px;
height: 32px;
border: solid 1px var(--color-headline);
color: var(--color-headline);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding:0 15px;
background-color: #ffffff;
}
button.button-sm-2.sel, a.button-sm-2.sel{
background-color: var(--color-mine);
color: #ffffff;
border: solid 1px var(--color-mine);
}
.button-sm{
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
font-size: 12px;
font-weight: 700;
font-family: var(--font-headline);
border-radius: 6px;
height: 30px;
width: 100%;
border: none;
text-decoration: none;
cursor: pointer;
}
.button-sm-3{
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
font-size: 12px;
font-style: italic;
font-family: var(--font-text);
border-radius: 6px;
height: 30px;
width:auto;
border: none;
text-decoration: none;
cursor: pointer;
padding:0 30px;
}
.button-lg{
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
font-family: var(--font-headline);
height: 52px;
text-decoration: none;
padding: 0 15px;
cursor: pointer;
min-width: 80px;
}
.button-sing{
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
font-family: var(--font-headline);
height: 42px;
text-decoration: none;
padding: 0 30px;
margin-right: 10px;
white-space: nowrap;
}
.name-writer{
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
font-size: 8px;
line-height: 12px;
letter-spacing: 0.05em;
text-align: left;
}
.name-book{
font-family: var(--font-headline);
color: var(--color-headline);
font-size: 16px;
font-weight: 700;
line-height: 18.88px;
text-align: left;
}
.round-ico{
width: 40px;
height: 40px;
border-radius: 50%;
border: solid 1px var(--color-headline);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.help{
position: absolute;
left: 0;
bottom: 15px;
font-size: 15px;
font-family: var(--font-headline);
color: var(--color-headline);
}
.help img{
display: inline-block;
margin-right: 7px;
}
@media screen and (max-width: 991px){
.help{
display: none;
}
}
.top-divider{
position: relative;
height:1px;
width: 40%;
background-color: var(--color-headline);
margin: 20px auto;
}
.top-divider::after{
content:"";
display: inline-block;
position: absolute;
right: -8px;
top: -3px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-headline);
border:solid 1px var(--color-headline);
}
.top-divider::before{
content:"";
display: inline-block;
position: absolute;
left: -8px;
top: -3px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color:#ffffff;
border:solid 1px var(--color-headline);
}
.name-2{
font-family:var(--font-text);
font-size: 17px;
font-weight: 500;
line-height: 19.96px;
letter-spacing: 0.02em;
text-align: center;
color:var(--color-text);
margin: 0;
}
@media screen and (max-width: 991px){
.name-2{
font-size: 14px;
line-height: 16px;
}
}
.h2{
font-family: var(--font-headline);
color: var(--color-headline);
font-size: 28px;
font-weight: 600;
line-height: 29.32px;
margin: 0;
}
@media screen and (max-width: 991px){
.h2{
font-size: 25px;
line-height: 33px;
}
}
.h3{
font-family: var(--font-headline);
color: var(--color-headline);
font-size: 22px;
font-weight: 600;
line-height: 29px;
margin: 0;
}
.text-center{
text-align: center;
}
.name-1{
font-family: var(--font-headline);
color: var(--color-headline);
font-size: 35px;
font-weight: 600;
line-height:46.6px;
text-align: left;
}
@media screen and (max-width: 991px){
.name-1{
font-size: 33px;
line-height: 44px;
}
}
.padd-name-1{
padding:0 0 24px 0;
}
.menu-link{
font-family: var(--font-headline);
color: var(--color-headline);
background-color: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 22.5px;
text-align: left;
display: flex;
align-items: center;
border-radius: 6px;
background-color: #ffffff;
border: solid 1px var(--color-headline);
height: 55px;
width: 100%;
padding: 0 15px;
margin-bottom: 12px;
text-decoration: none;
}
.books-menu .menu-link .more{
display: none;
}
@media screen and (max-width: 991px){
.menu-link{
height: 55px;
font-size: 17px;
line-height: 22px;
margin-bottom: 7px;
justify-content: center;
}
.books-menu .menu-link{
}
.books-menu .menu-link .more{
display: inline-block;
width:32px;
height:32px;
border-radius: 50%;
background: url(../images/chevron_right.svg) no-repeat center #ffffff;
background-size: 7px;
border: solid 1px var(--color-headline);
margin-left: auto;
}
}
.menu-link.sel{
color: #ffffff;
background-color: var(--color-mine);
border:none;
}
@media screen and (max-width: 991px){
.menu-link.sel{
color: var(--color-headline);
background-color: #ffffff;
border: solid 1px var(--color-headline);
}
}
.button-back{
font-family:  var(--font-text);
background-color: var(--color-mine);
font-size: 9px;
font-style: italic;
font-weight: 500;
line-height: 10.57px;
letter-spacing: 0.05em;
text-align: left;
color:#ffffff;
padding:10px 25px;
border-radius: 6px;
text-decoration: none;
}
@media screen and (max-width: 991px){
.button-back{
display: none;
}
}
.menu-col-padd{
width: 100%;
padding: 0 40px 0 0;
}
@media screen and (max-width: 991px){
.menu-col-padd{
padding:0;
}
}
.menu-col-padd-2{
width: 100%;
padding: 0 0 0 40px;
}
@media screen and (max-width: 991px){
.menu-col-padd-2{
padding: 0 0 0 0;
}
}
.star-block{
padding: 0 0 10px 0;
}
.star-block img{
display: inline-block;
}
.caver-block{
position:relative;
float: left;
width: 40%;
padding-right: 20px;
}
@media screen and (max-width: 991px){
.caver-block{
float: none;
width: 80%;
margin:20px auto;
padding-right: 0;
}
}
.full-width{
width:100%;
height: auto;
}
.caver-1{
width:100%;
padding-bottom: 150%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #C4C4C4;
}
.subhead-4{
font-family:var(--font-text);
color: var(--color-headline);
font-size: 10px;
font-style: italic;
font-weight: 500;
line-height: 11.74px;
letter-spacing: 0.05em;
padding: 5px 0;
}
.subhead-3{
font-family:var(--font-text);
color: var(--color-headline);
font-size: 14px;
font-style: italic;
font-weight: 500;
line-height: 19px;
letter-spacing: 0.05em;
padding: 5px 0;
}

.tags-box-1{
padding: 11px 0 18px 0;
}
.tags-box-1::after{
content: "";
display: block;
clear: both;
}
.tags-box-1 .tag-block{
position: relative;
float: left;
margin-right: 7px;
padding:8px 15px;
}
@media screen and (max-width: 991px){
.tags-box-1{
display: flex;
justify-content: space-between;
}
.tags-box-1 .tag-block{
margin-right: auto;
}
}
.tags-box{
display: flex;
justify-content: flex-start;
gap: 13px;
padding: 11px 0 18px 0;
overflow-x: scroll;
}
.tag-block{
display: flex;
background-color: #ffffff;
color:var(--color-headline);
font-family: var(--font-headline);
font-size: 12px;
border-radius: 5px;
border: solid 1px var(--color-headline);
height: 28px;
align-items: center;
text-align: center;
padding:0 15px;
white-space: nowrap;
}
.tag-block.sel{
background-color:var(--color-mine);
color: #ffffff;
border: solid 1px var(--color-mine);
}
.text-2{
font-family: var(--font-text);
color: var(--color-text);
font-size: 10px;
font-style: italic;
font-weight: 500;
line-height: 11.74px;
letter-spacing: 0.05em;
text-align: left;
}
.text-3{
font-family: var(--font-text);
color: var(--color-text);
font-size: 14px;
font-style: italic;
font-weight: 500;
line-height: 16.44px;
letter-spacing: 0.05em;
text-align: left;
}
.text-3 a{
color:#A6A6A6;
text-decoration: none;
}
.cl-b{
clear: both;
}
.link-gray{
font-family: var(--font-headline);
font-size: 12px;
font-weight: 700;
line-height: 16px;
color:#A6A6A6;
text-decoration: none;
}
.container-tags{
position: relative;
height: 300px;
overflow-y: scroll;
}
.tags-box-button-position{
position: absolute;
left: 10px;
bottom:0;
right: 10px;
}
@media screen and (max-width: 991px){
.tags-box-button-position{
left: 15px;
right: 15px;
}
}
.w-block{
font-family: var(--font-headline);
color: var(--color-headline);
background-color: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 30px;
text-align: left;
border-radius: 6px;
background-color: #ffffff;
border: solid 1px var(--color-headline);
height: 55px;
width: 100%;
padding: 0 15px;
margin-bottom: 12px;
text-decoration: none;
}
@media screen and (max-width: 991px){
.w-block{
height: 40px;
font-size: 13px;
line-height: 17px;
margin-bottom: 6px;
}
}
.button-xs{
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
font-size: 9px;
font-weight: 500;
font-family: var(--font-text);
border-radius: 3px;
height: 23px;
border: none;
text-decoration: none;
padding:0 15px;
font-style: italic;
}
.button-full-width{
width:100%;
}
.text-b-big{
font-size: 22px;
}
.padd-t-b-1{
padding:20px 0;
}
.input-1{
height: 48px;
border-radius: 6px;
border:solid 1px var(--color-headline);
padding: 16px 15px;
font-size: 14px;
font-family: var(--font-text);
font-style:italic;
font-weight: 500;
color: var(--color-text);
width: 100%;
margin: 13px 0;
}
input:focus-visible, input:focus, input:visited, button:focus-visible, button:visited{
outline: none;
text-decoration: none;
}
.textarea-1{
height: 180px;
border-radius: 6px;
border:solid 1px var(--color-headline);
padding: 16px 15px;
font-size: 14px;
font-family: var(--font-text);
font-style:italic;
font-weight: 500;
color: var(--color-text);
width: 100%;
margin: 13px 0;
}
textarea:focus-visible, textarea:focus, textarea:visited{
outline: none;
text-decoration: none;
}
.color-gray{
color:#A6A6A6;
}

.modal-padding{
padding:20px 40px 30px;
}
.modal-menu .modal-content{
padding:15px;
}
.modal-content .btn-close{
margin: 3px 3px 0 auto;
}
@media screen and (max-width: 991px){
.modal-menu .modal-content{
max-width: 720px;
margin:auto auto 0 auto;
}
}
@media screen and (max-width: 768px){
.modal-menu .modal-content{
max-width: 540px;
margin: auto;
}
}
@media screen and (max-width: 576px){
.modal-menu .modal-content{
max-width: 540px;
}
}
.button-row{
display: flex;
justify-content: center;
align-items: center;
gap:10px;
}
.button-row button{
min-width:120px;
}
.big-name-2{
font-size: 55px;
line-height: 58px;
font-weight: 600;
font-family: var(--font-headline);
color:var(--color-headline);
}
@media screen and (max-width: 768px){
.big-name-2{
font-size: 35px;
}
}
.big-name{
font-size: 44px;
line-height: 58px;
font-family: var(--font-headline);
color:var(--color-headline);
}
@media screen and (max-width: 991px){
.order-1-xs{
order:1;
}
.order-2-xs{
order:2;
}
}
.disp-f{
display: flex;
flex-direction: column;
}
.book-descr-block{
position: relative;
width: 100%;
padding:15px 24px 20px ;
border-radius: 20px;
border:solid 1px var(--color-headline);
margin-bottom: 10px;
}
@media screen and (max-width: 991px){
.book-descr-block{
padding:15px 15px 20px ;
border:solid 1px var(--color-mine);
}
}
.favorite{
width: 32px;
height: 32px;
border-radius: 50%;
border:solid 1px var(--color-headline);
background: url(../images/favorite.svg) no-repeat center 54%;
background-size: 14px;
}
.button-gap{
display: flex;
gap: 10px;
padding: 20px 0 0 0;
}
@media screen and (max-width: 991px){
.button-gap .button-sm-2:last-child{
margin-left: auto;
}
}
.account-ava-box{
width:105px;
height:105px;
border-radius: 50%;
background: url(../images/ava-ellipse.svg) #ffffff center top no-repeat;
background-size: 100%;
padding:7px;
margin-bottom:16px;

}
.account-ava{
width: 90px;
height:90px;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sub-name-autor{
font-family: var(--font-text);
font-size: 12px;
color:#A6A6A6;
text-align: center;
font-style: italic;
}
.name-autor{
font-family: var(--font-headline) ;
color: var(--color-headline);
font-size: 20px;
line-height: 25px;
font-weight: 600;
text-align: center;
}
.stat-box{
font-family: var(--font-headline);
color: var(--color-headline);
background-color: #ffffff;
display: flex;
align-items: center;
border-radius: 6px;
background-color:var(--color-mine);
border: solid 1px var(--color-mine);
height: 58px;
width: 100%;
padding: 0 15px;
margin-bottom: 22px;
text-decoration: none;
justify-content: space-around;
}
.statistic{
font-family: var(--font-headline);
color:#ffffff;
font-size: 12px;
width: 33.3%;
text-align: center;
border-right: solid 1px #ffffff;
}
.statistic span{
display: block;
font-size: 20px;
}
.statistic:last-child{
border-right: none;
}
.autor-photo{
width:185px;
height: 185px;
border-radius: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: end;
}
.menu-img{
display: none;
}
@media screen and (max-width: 991px){
.menu-img{
display: inline-block;
width: 24px;
margin: 0 10px 0 0;
text-align: center;
}
}
.button-sm-4{
width: auto;
height:32px;
font-family: var(--font-headline);
font-size: 12px;
font-weight: 700;
color: var(--color-headline);
border-radius: 5px;
border: solid 1px  var(--color-headline);
display: flex;
align-items: center;
text-decoration: none;
padding: 0 10px;
margin-bottom: 18px;
}
@media screen and (max-width: 991px){
.language-menu .menu-link{
justify-content: start;
}
}
.edit-photo{
height: 32px;
border-radius: 5px;
background-color: var(--color-mine);
font-family: var(--font-headline);
color:#ffffff;
padding: 0 15px 3px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.change-password-form{
padding-top: 20px;
position:relative;
}
.change-password-form .input-1{
padding-right:120px;
}
.forgot-password{
position:absolute;
right: 10px;
top:46px;
background-color: transparent !important;
border: none;
box-shadow: none;
font-size: 12px;
letter-spacing: 0;
font-family: var(--font-headline);
text-decoration:none;
color:#A6A6A6;
font-weight: 700;
}
.forgot-password-2{
display: block;
font-size: 16px;
letter-spacing: 0;
font-family: var(--font-headline);
text-decoration:none;
color:#A3A2A2;
font-weight: 600;
margin-bottom: 25px;
}
div.forgot-password-2{
color: var(--color-text);
flex-shrink: 0;
margin-right: 10px;
}
.text-sing{
font-family: var(--font-text);
font-size: 15px;
font-style: italic;
color:#4E4E4E;
letter-spacing: 5%;
font-weight: 500;
text-align: center;
max-width: 450px;
margin:10px auto 15px auto;
}
.flex-center{
display: flex;
justify-content: center;
}
.diveder-both{
display: flex;
align-items: center;
margin: 20px 0 30px;
font-family: var(--font-headline);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
}
.diveder-both .top-divider{
width: 100%;
}

/* LeftMenu Component Styles */
.left-menu {
    position: relative;
    width: 100%;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
}



/* LeftMenu Menu Items Styles */
.left-menu .mine-menu-block {
    margin-bottom: 0;
}

.left-menu .mine-menu-link {
    display: flex;
    align-items: center;
    padding: 0 0 0 40px;
    margin-bottom: 7px;
    height: 48px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    color: var(--color-headline);
    font-family: var(--font-headline);
    font-size: 15px;
    line-height: 20px;
}

/* Icon styles */
.icon-book::before {
    content: "";
    background: url(../images/menu-library.svg) no-repeat 12px center;
    width: 40px;
    height: 48px;
    display: inline-block;
}

.icon-user::before {
    content: "";
    background: url(../images/menu-profile.svg) no-repeat 12px center;
    width: 40px;
    height: 48px;
    display: inline-block;
}

.icon-cog::before {
    content: "";
    background: url(../images/menu-notification.svg) no-repeat 10px center;
    width: 40px;
    height: 48px;
    display: inline-block;
}

/* Reading Now section styles */
.left-menu .reading-now {
    display: flex;
    align-items: center;
    font-family: var(--font-headline);
    color: var(--color-headline);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    width: 100%;
    padding: 0 0 0 27px;
    background: url(../images/menu-reading-now.svg) left center no-repeat;
    margin: 40px 0 0 15px;
}

.left-menu .reading-now-block {
    position: relative;
    width: 100%;
    padding: 8px;
    border-radius: 15px;
    background-color: #F8F7F3;
    margin-top: 20px;
}

.left-menu .cover-read-now {
    background-color: #C4C4C4;
    border-radius: 24px;
    margin: 0 0 20px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 140px;
}

/* ChaptersList Component Styles */
.chapters-list-container .text-muted {
    color: #6c757d !important;
}

.chapters-list-container .mb-3 {
    margin-bottom: 1rem !important;
}

.chapters-list-container .text-center {
    text-align: center !important;
}

.chapters-list-container #noChapterSelected {
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.chapters-list-container #noChapterSelected .h3 {
    color: #6c757d;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.chapters-list-container #noChapterSelected p {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.5;
}

.left-menu .name-book {
    font-family: var(--font-headline);
    color: var(--color-headline);
    font-size: 16px;
    font-weight: 700;
    line-height: 18.88px;
    text-align: left;
    margin-bottom: 5px;
}

.left-menu .name-writer {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 8px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--color-headline);
    margin-bottom: 10px;
}

.left-menu .round-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px var(--color-headline);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.left-menu .round-ico img {
    width: 14px;
    height: 16px;
}

/* ChapterList Component Styles */
.chapter-properties {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.chapter-properties .form-label {
    font-weight: 600;
    color: var(--color-headline);
    margin-bottom: 8px;
}

.chapter-properties .form-control {
    border: 1px solid var(--color-headline);
    border-radius: 6px;
    padding: 12px 15px;
    font-family: var(--font-text);
    font-size: 14px;
}

.chapter-properties .form-control:focus {
    border-color: var(--color-mine);
    box-shadow: 0 0 0 0.2rem rgba(153, 31, 32, 0.25);
}

.chapter-properties .button-gap {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: flex-end;
}

.chapter-properties .button-gap .button-sm-2 {
    min-width: 100px;
}