@media (min-width: 768px) {
    .flex {
        display: flex;
    }
}

.justify-center {
    justify-content: center;
}
.justify-start {
    justify-content: start;
}
.justify-end {
    justify-content: end;
}

.items-center {
    align-items: center;
}
.flex-col{
    flex-direction: column;
}
@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }
}

.sticky-bottom-wrapper {
   height: 70px; /* Fixed height to prevent page shift */
   position: relative;
}

.reading-sticky-menu.sticky-bottom {
   bottom: 0;
   top: auto;
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.reading-sticky-menu.sticky-bottom .inner{
   text-align: right;
   padding: 10px 0;
   display: flex;
   justify-content: flex-end;
   max-width: 1400px;
   margin: 0 auto;
   padding-left: 15px;
}

body.text-ui-light.reading-manga[data-schema="yellow"] .reading-content-wrap .chapter-name{color:#FFF}

@media (max-width: 767px) {
   .sticky-top .chapter-name{
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
       overflow: hidden;
       padding: 0 10px;
       font-weight: bold;
   }
   .chapters-fonts-settings .group-adjust{
       flex-wrap: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }
   .chapters-fonts-settings .group-adjust button,
   .chapters-fonts-settings .group-adjust input{
       min-width: 40px;
       flex-shrink: 0;
   }
   .chapters-fonts-settings .group-adjust input{
       min-width: 60px;
   }
   .chapters-fonts-settings .inner-row label,
   .chapters-fonts-settings .justify-between{
       flex-wrap: nowrap;
       display: flex;
       align-items: center;
   }
   .chapters-fonts-settings .inner-row label select,
   .chapters-fonts-settings .inner-row label .switch{
       flex-shrink: 0;
   }
}
   
#open-font-settings-wrapper{
   position: fixed;
   right: 40px;
   bottom: 10px;
   z-index: 9999;
}

#open-font-settings{
   background-color: #000;
   color:#FFF;
   border-radius:999em;
   padding: 8px;
   width: 40px;
   height: 40px;
   display: inline-block;
   text-align: center;
   line-height: 1em;
}
#open-font-settings svg{
   stroke:#FFF;
}

.chapters-fonts-settings{
    position: fixed;
    right: 40px;
    bottom: 70px;
    border: 1px solid #3f3f46;
    background-color: #27272a99;
    color:#fff;
    font-weight: bold;
    padding: 24px;
    z-index: 9999;
    width: 342px;
    border-radius: 10px;
    backdrop-filter: blur(12px);
    display: none;
}
.chapters-fonts-settings.active{
    display: block;
}

.chapters-fonts-settings .inner-row label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px 0;
}
.chapters-fonts-settings .inner-row label select{
    width: 175px;
    background:rgb(10, 10, 10);
    border-radius:5px;
    font-weight: bold;
    color:#FFF;
    border:none;
    margin: 0 4px
}

.chapters-fonts-settings .fontfamily-select-wrapper{
    position: relative;
}

.chapters-fonts-settings .fontfamily-select-icon{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.chapters-fonts-settings .chapters-fonts-settings .inner-row label select:hover{
    background:#262626;
    border-color: transparent;
}
.chapters-fonts-settings .font-theme-buttons{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0 10px 0;
    gap: 5px
}
.chapters-fonts-settings .font-theme-buttons .font-button{
    background:none;
    border:none;
    width: 40px;
    color:#FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chapters-fonts-settings .font-theme-buttons .font-button .icon{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 5px
}

.chapters-fonts-settings .font-size-16{
    font-size: 16px;
}

.chapters-fonts-settings .group-adjust{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}
.chapters-fonts-settings .group-adjust button{
    border:none;
    background:rgb(87, 87, 87);
    color:#FFF;
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0;
    flex-shrink: 0;
}

/* Chrome, Safari, Edge, Opera */
.chapters-fonts-settings input::-webkit-outer-spin-button,
.chapters-fonts-settings input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.chapters-fonts-settings input[type=number] {
  -moz-appearance: textfield;
}

.chapters-fonts-settings .group-adjust input, body.text-ui-light .chapters-fonts-settings .group-adjust input[type="number"]{
    width: 60px;
    border-radius: 5px;
    background: #262626;
    text-align: center;
    color:#FFF;
    font-weight: bold;
    border: none;
    flex-shrink: 0;
}
.chapters-fonts-settings .group-adjust input:focus, body.text-ui-light .chapters-fonts-settings .group-adjust input[type="number"]:focus{
    border-color: rgb(103 64 205);
    outline: none;
}

.chapters-fonts-settings .justify-between{
    justify-content: space-between;
}

.chapters-fonts-settings .switch {
    --button-width: 36px;
    --button-height: 20px;
    --toggle-diameter: 16px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #383838;
    --color-green: rgb(103 64 205);
   }
   
   .chapters-fonts-settings .switch .slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: #CCC;
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
    margin: 0 4px
   }
   
   .chapters-fonts-settings .switch .slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color:rgb(10, 10, 10);
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
   }
   
   .chapters-fonts-settings .switch input[type="checkbox"]:checked + .slider {
    background-color: #666;
   }
   
   .chapters-fonts-settings .switch input[type="checkbox"]:checked + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   }
   
   .chapters-fonts-settings .switch input[type="checkbox"] {
    display: none;
   }
   
   .chapters-fonts-settings .switch input[type="checkbox"]:active + .slider::after {
    width: var(--toggle-wider);
   }
   
   .chapters-fonts-settings .switch input[type="checkbox"]:checked:active + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
   }
   
   /* RTL Support */
   [dir="rtl"] .chapters-fonts-settings .switch .slider::after {
    left: auto;
    right: var(--button-toggle-offset);
    transform: translateX(0);
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   }
   
   [dir="rtl"] .chapters-fonts-settings .switch input[type="checkbox"]:checked + .slider::after {
    right: auto;
    left: var(--button-toggle-offset);
    transform: translateX(0);
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   }
   
   [dir="rtl"] .chapters-fonts-settings .switch input[type="checkbox"]:active + .slider::after {
    right: var(--button-toggle-offset);
    transform: translateX(0);
   }
   
   [dir="rtl"] .chapters-fonts-settings .switch input[type="checkbox"]:checked:active + .slider::after {
    left: var(--button-toggle-offset);
    transform: translateX(0);
   }

   [dir="rtl"] .chapters-fonts-settings .fontfamily-select-icon{
      right: auto;
      left: 10px
   }

   .chapters-fonts-settings .group-adjust button.selected{
    background: #000;
   }

   .chapters-fonts-settings #btn-reset-to-default{width: 100%; background: rgb(64, 63, 66); color: #fff; border: none; padding: 10px; border-radius: 5px; font-weight: bold; margin-top: 10px; text-align: center !important;}
   .chapters-fonts-settings #btn-reset-to-default:hover{background: rgb(0, 0, 0);}

   
body[data-theme="sepia"] .reading-sticky-menu{background:#FFF}
body[data-theme="sepia"] .reading-sticky-menu .inner-item{background-color:#FFF; border-color:#e5e5e5}
body[data-theme="sepia"] .reading-sticky-menu .inner-item svg{stroke:#000;}

.chapters-fonts-settings .fontsize-adjust button.disabled, .chapters-fonts-settings .lineheight-adjust button.disabled{
   opacity: 0.5;
   pointer-events: none;
}

#comments h4{font-size: 1.2em;}

body[data-lineheight="1"] .reading-content-wrap.chapter-type-text .read-container *{
   line-height: 1;
}
body[data-lineheight="2"] .reading-content-wrap.chapter-type-text .read-container *{
   line-height: 1.2;
}
body[data-lineheight="3"] .reading-content-wrap.chapter-type-text .read-container *{
   line-height: 1.5;
}
body[data-lineheight="4"] .reading-content-wrap.chapter-type-text .read-container *{
   line-height: 1.7;
}
body[data-lineheight="5"] .reading-content-wrap.chapter-type-text .read-container *{
    line-height: 2;
 }
 body[data-lineheight="6"] .reading-content-wrap.chapter-type-text .read-container *{
    line-height: 2.5;
 }

 body[data-alignment="left"] .read-container *{
    text-align: left;
 }
 body[data-alignment="justify"] .read-container *{
    text-align: justify;
 }
 body[data-text-indent="1"] .read-container *{
    text-indent: 20px;
 }

 #wpdcom .wpdiscuz-sort-buttons{
   background: #ffffff78 !important;
 }
 #wpdcom .wpdiscuz-sort-buttons .wpdiscuz-sort-button:hover{
   background: #f5f5f569 !important;
 }

 .sticky-bottom-wrapper .gotop-button a{
   color:#FFF
 }

 /* RTL support */